/* =====================================================================
   LMS shell — Agentlik o'quv markazi tizimi uslubida (teal), Material 3
   navigation drawer / rail naqshlari, WCAG 2.2 AA kontrast.
   ===================================================================== */
:root {
  --bg: #f2fbf8;
  --surface-2: #f4f8f7;
  --line: #dfece8;
  --line-2: #c9ddd7;
  --ink: #0f2a2a;
  --ink-2: #33494a;
  --muted: #5d6b78;
  --brand: #2f8b7c;
  --brand-600: #0f796d;
  --brand-800: #0b4f4a;
  --brand-50: #e8f6f2;
  --brand-100: #c8ebe2;
  --action: #0f796d;          /* white text 5.3:1 */
  --action-hover: #0b6b61;
  --teal-text: #1e7272;       /* 5.4:1 on page */
  --side-1: #046c6b;
  --side-2: #147470;
  --t0: #0f796d;
  --t1: #1f6fa0;
  --t2: #b54708;
  --t3: #6941c6;
  --display: "Montserrat", "Roboto", "Segoe UI", system-ui, sans-serif;
  --body: "Montserrat", "Roboto", "Segoe UI", system-ui, sans-serif;
  --side-w: 268px;
  --zoom: 1;
}
body { padding: 0 !important; background: var(--bg); }
body::before { opacity: .55; }
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.app.collapsed { --side-w: 88px; }

/* ---------- sidebar (navigation drawer → rail) ---------- */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 35;
  background: linear-gradient(180deg, var(--side-1) 0%, var(--side-2) 100%); color: #fff;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 18px;
}
.side-head { display: flex; align-items: center; gap: 10px; }
.side-brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: #fff; text-align: left; padding: 0; min-width: 0; flex: 1; }
.side-brand img { width: 48px; height: 48px; flex: none; filter: brightness(0) invert(1); }
.side-brand .logo { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 40px; height: 40px; flex: none; }
.side-brand .logo i { border-radius: 6px; background: rgba(255,255,255,.9); }
.side-brand .logo i:nth-child(2), .side-brand .logo i:nth-child(3) { background: rgba(255,255,255,.45); }
.side-org { font-weight: 800; font-size: 11px; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; min-width: 0; }
.side-org small { display: block; font-weight: 600; opacity: .8; font-size: 10px; margin-top: 2px; }
.side-col { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; flex: none; }
.side-col:hover { background: rgba(255,255,255,.18); }
.side-col svg { width: 18px; height: 18px; transition: transform .2s; }
.app.collapsed .side-col svg { transform: rotate(180deg); }
.side-nav { display: flex; flex-direction: column; gap: 8px; }
.side-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 12px; text-align: left;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.13); color: #fff;
  font-weight: 600; font-size: 14.5px; transition: background .15s, border-color .15s, transform .12s; position: relative;
}
.side-nav button:hover { background: rgba(255,255,255,.22); }
.side-nav button:active { transform: scale(.98); }
.side-nav button[aria-current="true"] { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.7); box-shadow: 0 4px 14px -6px rgba(0,0,0,.35); }
.side-nav button svg { width: 20px; height: 20px; flex: none; }
.side-nav .nb { margin-left: auto; min-width: 22px; height: 22px; border-radius: 99px; background: #fff; color: var(--action); font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; }
.side-nav hr { border: 0; border-top: 1px solid rgba(255,255,255,.18); margin: 4px 2px; }
.side-foot { margin-top: auto; text-align: center; font-size: 13px; display: flex; flex-direction: column; gap: 6px; opacity: .92; }
.side-foot a { color: #fff; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.25); }
.app.collapsed .side { padding-inline: 12px; align-items: center; }
.app.collapsed .side-org, .app.collapsed .side-nav span, .app.collapsed .side-nav .nb, .app.collapsed .side-foot span { display: none; }
.app.collapsed .side-head { flex-direction: column; }
.app.collapsed .side-nav button { justify-content: center; padding: 10px; }
.side-scrim { display: none; }

/* ---------- main column & top bar ---------- */
.main { min-width: 0; padding: 16px clamp(16px, 2.6vw, 34px) 40px; display: flex; flex-direction: column; gap: 22px; zoom: var(--zoom); }
.main > * { width: 100%; max-width: 1180px; margin-inline: auto; }
.top { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-radius: 16px; padding: 10px 14px; box-shadow: 0 6px 24px -14px rgba(15,42,42,.35); border: 1px solid var(--line); }
.top .spacer { flex: 1; }
.menu-btn { display: none; }
.lang-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.lang-pills button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); min-height: 36px; }
.lang-pills button:hover { background: var(--brand-50); }
.lang-pills button[aria-pressed="true"] { background: var(--action); color: #fff; }
.lang-pills .flag { width: 22px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: block; }
.top-ic { display: flex; gap: 8px; align-items: center; position: relative; }
.ic-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--action); color: #fff; display: grid; place-items: center; position: relative; transition: background .15s, transform .12s; }
.ic-btn:hover { background: var(--action-hover); }
.ic-btn:active { transform: scale(.94); }
.ic-btn svg { width: 20px; height: 20px; }
.ic-btn .badge-n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #d92d20; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brand-100); background: linear-gradient(135deg, #d9e4ea, #b9c7d1); color: var(--ink-2); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.avatar.has { background: linear-gradient(135deg, var(--side-2), var(--brand)); color: #fff; border-color: #fff; box-shadow: 0 0 0 2px var(--brand-100); }
.dd { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px -18px rgba(15,42,42,.4); padding: 8px; z-index: 50; animation: ddIn .16s var(--ease); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd h4 { margin: 8px 10px 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dd-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 10px; color: var(--ink); }
.dd-item:hover { background: var(--brand-50); }
.dd-item .di { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-50); color: var(--action); display: grid; place-items: center; flex: none; }
.dd-item .di svg { width: 18px; height: 18px; }
.dd-item b { display: block; font-size: 14px; }
.dd-item small { color: var(--muted); font-size: 12.5px; }
.dd-item.unread b::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d92d20; margin-left: 6px; vertical-align: middle; }
.dd-empty { padding: 18px 10px; color: var(--muted); font-size: 14px; text-align: center; }
.dd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 10px; }
.dd-row + .dd-row { border-top: 1px solid var(--line); }
.dd-row span { font-size: 14px; font-weight: 500; }
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--line-2); transition: background .15s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + i { background: var(--action); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--action) 50%, transparent); outline-offset: 2px; }
.seg3 { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; }
.seg3 button { border: 0; background: transparent; border-radius: 7px; min-width: 38px; min-height: 32px; font-weight: 700; color: var(--muted); }
.seg3 button[aria-pressed="true"] { background: var(--surface); color: var(--action); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- page header / banner ---------- */
.view { display: flex; flex-direction: column; gap: 22px; }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--teal-text); font-weight: 600; font-size: 16px; padding: 4px 0; }
.back .bc { width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: #fff; display: grid; place-items: center; }
.back svg { width: 16px; height: 16px; }
.banner { position: relative; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(110deg, #0e5f5d 0%, #1b6d6b 40%, #3f9886 100%); padding: clamp(20px, 3.4vw, 34px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 30px); align-items: center; box-shadow: 0 16px 40px -24px rgba(11,79,74,.7); }
.banner::after { content: ""; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; border: 54px solid rgba(255,255,255,.06); pointer-events: none; }
.banner > * { position: relative; z-index: 1; }
.banner .b-emb { width: clamp(70px, 9vw, 104px); height: auto; filter: brightness(0) invert(1); }
.banner .b-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; padding: 4px; }
.banner .b-thumb svg { width: 100%; height: 100%; border-radius: 9px; }
.banner h1 { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.25; margin: 0; text-wrap: balance; }
.banner p { margin: 8px 0 0; color: rgba(255,255,255,.88); max-width: 62ch; font-size: 15px; }
.banner .b-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c8f1e6; margin-bottom: 6px; }
.banner .b-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.b-season { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 14px; min-width: 250px; }
.b-season .cd b { font-size: 24px; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-h h2 { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3vw, 32px); color: var(--teal-text); margin: 0; }
.page-h p { margin: 4px 0 0; color: var(--muted); }

/* ---------- course-style quiz cards ---------- */
.clist { display: flex; flex-direction: column; gap: 14px; }
.ccard {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid transparent; border-radius: 16px; padding: 16px 18px; box-shadow: 0 6px 22px -14px rgba(15,42,42,.35);
  color: var(--ink); text-decoration: none; transition: transform .16s var(--ease), box-shadow .16s, border-color .16s;
}
.ccard:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(15,42,42,.45); border-color: var(--brand-100); }
.ccard:active { transform: translateY(0); }
.thumb { width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--brand-50); padding: 6px; }
.thumb svg { width: 100%; height: 100%; border-radius: 10px; display: block; }
.ccard .ct { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 17.5px; line-height: 1.35; color: var(--teal-text); }
.ccard .c-desc { display: block; margin: 0 0 10px; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-meta { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 13px; color: var(--teal-text); }
.c-meta span { display: inline-flex; align-items: center; gap: 6px; }
.c-meta svg { width: 16px; height: 16px; }
.c-prog { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--teal-text); }
.c-prog .bar-track { height: 5px; background: #d6ebe5; }
.c-prog .bar-track div { background: linear-gradient(90deg, var(--action), #4fb39c); }
.ctab { position: absolute; top: 0; right: 0; background: var(--action); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 0 16px 0 12px; display: inline-flex; gap: 6px; align-items: center; }
.ctab.new { background: #b54708; }
.ctab.done { background: #027a48; }
.c-go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--action); transition: background .15s, color .15s, transform .15s; }
.ccard:hover .c-go { background: var(--action); color: #fff; transform: translateX(3px); }
.c-go svg { width: 20px; height: 20px; }
.c-tags { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.c-tags span { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 2px 8px; background: var(--brand-50); color: var(--brand-800); }
.ccard.skel { pointer-events: none; }
.ccard.skel .sk.t { width: 96px; height: 96px; border-radius: 14px; }

/* continue strip */
.continue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--brand-100); border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 22px -16px rgba(15,42,42,.35); }
.continue .thumb { width: 60px; height: 60px; padding: 4px; }
.continue b { display: block; color: var(--teal-text); }
.continue small { color: var(--muted); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { background: var(--surface); border-radius: 16px; padding: 18px; box-shadow: 0 6px 22px -16px rgba(15,42,42,.35); border: 1px solid var(--line); display: flex; gap: 14px; align-items: center; }
.kpi .ki { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-50); color: var(--action); display: grid; place-items: center; flex: none; }
.kpi .ki svg { width: 22px; height: 22px; }
.kpi b { display: block; font-family: var(--display); font-size: 26px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 13px; color: var(--muted); }

/* results table-like cards */
.rlist { display: flex; flex-direction: column; gap: 12px; }
.rrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 160px auto; gap: 16px; align-items: center; background: var(--surface); border-radius: 16px; padding: 14px 16px; border: 1px solid var(--line); box-shadow: 0 6px 22px -18px rgba(15,42,42,.35); }
.rrow .thumb { width: 64px; height: 64px; padding: 4px; }
.rrow h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--teal-text); }
.rrow .r-sub { font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.rrow .r-acc b { font-family: var(--display); font-size: 20px; color: var(--ink); }
.rrow .r-acc span { font-size: 12px; color: var(--muted); margin-left: 4px; }
.rrow .r-act { display: flex; gap: 8px; }
.rrow .r-act .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* certificate gallery */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cert-card { position: relative; border: 0; text-align: center; background: var(--surface); border-radius: 14px; padding: 20px 16px 16px; box-shadow: 0 10px 30px -18px rgba(15,42,42,.45); outline: 6px solid #fff; outline-offset: -12px; display: flex; flex-direction: column; gap: 6px; align-items: center; transition: transform .16s var(--ease), box-shadow .16s; }
.cert-card::before { content: ""; position: absolute; inset: 8px; border: 2px solid var(--action); border-radius: 8px; pointer-events: none; }
.cert-card::after { content: ""; position: absolute; inset: 13px; border: 1px solid var(--brand-100); border-radius: 5px; pointer-events: none; }
.cert-card:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 20px 40px -20px rgba(15,42,42,.5); }
.cert-card img { width: 46px; height: 46px; }
.cert-card .cc-t { font-family: var(--display); font-weight: 800; letter-spacing: .2em; color: var(--brand-800); font-size: 16px; }
.cert-card .cc-n { font-weight: 700; font-size: 16px; }
.cert-card .cc-q { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cert-card .cc-s { font-family: var(--display); font-weight: 700; color: var(--action); font-size: 20px; }
.cert-card .cc-o { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--action); display: inline-flex; gap: 6px; align-items: center; }

/* profile */
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pcard { background: var(--surface); border-radius: 16px; padding: 22px; border: 1px solid var(--line); box-shadow: 0 6px 22px -18px rgba(15,42,42,.35); display: flex; flex-direction: column; gap: 14px; }
.pcard h3 { margin: 0; font-family: var(--display); font-size: 18px; color: var(--teal-text); }
.pcard input[type=text] { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; font-size: 16px; background: var(--surface); }
.pcard input[type=text]:focus { border-color: var(--action); outline: none; box-shadow: 0 0 0 4px var(--brand-50); }
.p-hero { display: flex; gap: 16px; align-items: center; }
.p-hero .avatar { width: 64px; height: 64px; font-size: 22px; }

/* empty state */
.empty { background: var(--surface); border-radius: 16px; border: 1px dashed var(--line-2); padding: 34px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.empty svg { width: 44px; height: 44px; color: var(--brand-100); }

/* quiz detail (start) in course style */
.start-grid .start-info { background: var(--surface); }
.start-info h1 { color: var(--teal-text); }
.info-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.info-tiles div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-2); }
.info-tiles b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); }
.info-tiles span { font-size: 12.5px; color: var(--muted); }

/* countdown overlay & floating points */
.cdo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(20,116,112,.95), rgba(4,76,74,.97)); color: #fff; }
.cdo b { font-family: var(--display); font-size: clamp(90px, 22vw, 200px); line-height: 1; animation: cdPop .9s var(--ease) both; }
.cdo span { display: block; text-align: center; font-size: 18px; opacity: .85; margin-top: 10px; }
@keyframes cdPop { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.08); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
.fly { position: fixed; z-index: 70; font-family: var(--display); font-weight: 800; font-size: 28px; color: #027a48; pointer-events: none; animation: fly 1s var(--ease) forwards; text-shadow: 0 2px 0 #fff; }
@keyframes fly { from { transform: translate(-50%, 0) scale(.8); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } to { transform: translate(-50%, -80px) scale(1); opacity: 0; } }
.tile.pick-anim { animation: pick .35s var(--ease); }
@keyframes pick { 40% { transform: scale(1.03); } }
.tiles.revealed .tile.wrong { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* accessibility modes (toggled in settings) */
body.hc { --muted: #33494a; --line: #9fb8b2; --line-2: #6f8f88; --ink-2: #0f2a2a; }
body.hc .ccard, body.hc .card, body.hc .kpi, body.hc .pcard { border-color: #6f8f88; }
body.hc::before, body.hc::after { display: none; }
body.rm *, body.rm *::before, body.rm *::after { animation: none !important; transition: none !important; }

/* re-tint earlier components to the LMS palette */
.home-hero, .prize-hero { background: linear-gradient(110deg, #0e5f5d, #1b6d6b 45%, #3f9886) !important; }
.org-footer { display: none !important; }
.qcard-q { border-left-color: var(--action); }
.timer .arc { stroke: var(--action); }
.progress div { background: var(--action); }
.res-ring .ar { stroke: var(--action); }
.pod-1 .pod-av { background: var(--brand-800); }
.bar-track div { background: linear-gradient(90deg, var(--action), #4fb39c); }
.tile .lt { background: var(--c); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .app, .app.collapsed { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 290px; height: 100%; transform: translateX(-105%); transition: transform .25s var(--ease); box-shadow: 20px 0 40px -20px rgba(0,0,0,.5); }
  .app.open .side { transform: none; }
  .app.collapsed .side-org, .app.collapsed .side-nav span, .app.collapsed .side-foot span { display: revert; }
  .side-col { display: none; }
  .side-scrim { display: block; position: fixed; inset: 0; background: rgba(4,40,38,.45); z-index: 34; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.open .side-scrim { opacity: 1; pointer-events: auto; }
  .menu-btn { display: grid; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .main { padding: 10px 12px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  .top { top: 8px; padding: 8px 10px; gap: 6px; }
  .lang-pills button { padding: 6px 7px; font-size: 12px; gap: 5px; }
  .lang-pills .ln { display: none; }
  .lang-pills .ls { display: inline; }
  .ic-btn, .avatar { width: 36px; height: 36px; }
  .top-ic .gear-wrap { display: none; }
  .banner { grid-template-columns: auto minmax(0, 1fr); }
  .banner .b-season { grid-column: 1 / -1; min-width: 0; }
  .banner .b-emb { width: 58px; }
  .ccard { grid-template-columns: 64px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .ccard .thumb { width: 64px; height: 64px; padding: 4px; }
  .ccard .c-go { display: none; }
  .ccard .ct { font-size: 15.5px; padding-right: 64px; }
  .ccard .c-desc { display: block; display: none; }
  .continue { grid-template-columns: auto minmax(0, 1fr); }
  .continue .btn { grid-column: 1 / -1; }
  .rrow { grid-template-columns: 52px minmax(0, 1fr); }
  .rrow .thumb { width: 52px; height: 52px; }
  .rrow .r-acc, .rrow .r-act { grid-column: 1 / -1; }
  .pgrid { grid-template-columns: 1fr; }
  .info-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabbar { grid-template-columns: repeat(5, 1fr) !important; }
  .tabbar button span { font-size: 10.5px; }
}
.lang-pills .ls { display: none; }

.ccard .ct { display: block; }
.c-body { display: flex; flex-direction: column; min-width: 0; }
.c-prog > span:first-child { display: block; }
#v-quiz:has(#qScreen:not([hidden])) #qBack, #v-quiz:has(#lbScreen:not([hidden])) #qBack { display: none; }
.admin-scope .wrap { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
#v-admin .bar { display: none; }

/* fixes */
.top .menu-btn { display: none; }
#main:focus { outline: none; }
@media (min-width: 1081px) { .sheet { left: var(--side-w); } }
@media (max-width: 1080px) {
  .top .menu-btn { display: grid; }
  .app.collapsed .side { align-items: stretch; padding-inline: 14px; }
  .app.collapsed .side-head { flex-direction: row; }
  .app.collapsed .side-nav button { justify-content: flex-start; padding: 10px 12px; }
  .app.collapsed .side-nav .nb { display: grid; }
}

@media (max-width: 760px) {
  .banner { grid-template-columns: minmax(0, 1fr); }
  .banner .b-emb { width: 52px; }
  .banner .b-cta .btn { flex: 1 1 auto; }
}

/* =================== O'quv materiallari / infografika =================== */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flow li { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; position: relative; }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.flow .fn { width: 34px; height: 34px; border-radius: 50%; background: var(--action); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.flow b { display: block; font-size: 14.5px; color: var(--ink); }
.flow small { color: var(--muted); font-size: 12.5px; }
.m-progress { min-width: 220px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.m-progress b { font-family: var(--display); font-size: 22px; color: var(--teal-text); }
.m-progress span { font-size: 13px; color: var(--muted); }
.m-progress .bar-track { grid-column: 1 / -1; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 18px; }
.mcard { background: var(--surface); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px -20px rgba(15,42,42,.45); display: flex; flex-direction: column; transition: transform .16s var(--ease), box-shadow .16s; }
.mcard:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(15,42,42,.5); }
.mcard.studied { border-color: #abefc6; }
.m-thumb, .mat-prev { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--brand-50); aspect-ratio: 16 / 9; overflow: hidden; cursor: zoom-in; }
.m-thumb img, .mat-prev img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.m-thumb:hover img, .mat-prev:hover img { transform: scale(1.03); }
.m-ov { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(180deg, rgba(4,60,58,.05), rgba(4,60,58,.55)); opacity: 0; transition: opacity .2s; }
.m-ov svg { width: 34px; height: 34px; background: rgba(255,255,255,.18); border-radius: 50%; padding: 8px; box-sizing: content-box; backdrop-filter: blur(4px); }
.m-thumb:hover .m-ov, .m-thumb:focus-visible .m-ov, .mat-prev:hover .m-ov, .mat-prev:focus-visible .m-ov { opacity: 1; }
@media (hover: none) { .m-ov { opacity: 1; background: linear-gradient(180deg, transparent 45%, rgba(4,60,58,.6)); place-content: end center; padding-bottom: 12px; } }
.m-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; color: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); }
.m-badge svg { width: 14px; height: 14px; stroke-width: 3; }
.m-badge.ok { background: #027a48; } .m-badge.new { background: #b54708; }
.m-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.m-doc { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.m-no { background: var(--action); color: #fff; font-weight: 700; padding: 2px 9px; border-radius: 6px; font-size: 12.5px; }
.m-body h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); }
.m-body p { margin: 0; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-act { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.m-act .btn { min-height: 42px; padding: 9px 16px; font-size: 14.5px; }
.m-soon { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--muted); font-weight: 600; background: var(--surface-2); border-radius: 10px; padding: 9px 12px; }
.m-soon svg { width: 16px; height: 16px; }
.hstrip { display: flex; flex-direction: column; gap: 14px; }

/* quiz start: 2 qadam */
.s2bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.s2 { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; color: var(--muted); }
.s2 .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.s2 .n svg { width: 15px; height: 15px; stroke-width: 3; }
.s2.on { color: var(--teal-text); } .s2.on .n { background: var(--action); border-color: var(--action); color: #fff; }
.s2.done { color: #027a48; } .s2.done .n { background: #027a48; border-color: #027a48; color: #fff; }
.s2-line { flex: 1; min-width: 24px; height: 2px; background: var(--line-2); }
.mat-prev { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 8px 24px -16px rgba(15,42,42,.5); }
.mat-meta { margin: 10px 0 14px; }
.mat-meta b { color: var(--teal-text); }
#matStep { border-bottom: 1px solid var(--line); margin-bottom: 14px; }

/* viewer */
.viewer { position: fixed; inset: 0; z-index: 95; background: #0b2524; color: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: vwIn .2s var(--ease); }
@keyframes vwIn { from { opacity: 0; } to { opacity: 1; } }
body.vw-open { overflow: hidden; }
.vw-top, .vw-bottom { display: flex; align-items: center; gap: 12px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); background: rgba(4,40,38,.92); }
.vw-top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid rgba(255,255,255,.08); }
.vw-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.08); }
.vw-t { min-width: 0; flex: 1; }
.vw-doc { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #8fe0cc; text-transform: uppercase; }
.vw-top h2 { margin: 2px 0 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-tools { display: flex; align-items: center; gap: 6px; }
.vw-tools button, .vw-pages button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; }
.vw-tools button:hover, .vw-pages button:hover { background: rgba(255,255,255,.16); }
.vw-tools svg, .vw-pages svg { width: 20px; height: 20px; }
.vw-tools .vw-close { background: #fff; color: var(--ink); border-color: #fff; }
.vw-pct { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.vw-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; background: radial-gradient(circle at 50% 40%, #12403d, #0b2524); }
.vw-stage:active { cursor: grabbing; }
.vw-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); background: #fff; will-change: transform; }
.vw-rot { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.55); border-radius: 99px; padding: 8px 14px; font-size: 13px; pointer-events: none; }
.vw-rot svg { width: 20px; height: 20px; }
.vw-hint { color: rgba(255,255,255,.7); font-size: 13px; flex: 1; }
.vw-pages { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.vw-bottom .btn { min-height: 46px; }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; }
  .flow li:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -9px; transform: rotate(135deg); }
  .vw-tools #vwOut, .vw-tools #vwPct, .vw-tools #vwIn { display: none; }
  .vw-hint { display: none; }
  .vw-bottom .btn { flex: 1; }
  .m-progress { min-width: 0; width: 100%; }
}
.viewer { grid-template-columns: minmax(0, 1fr); width: 100vw; max-width: 100%; }
.vw-top, .vw-bottom { min-width: 0; }
@media (max-width: 760px) {
  .flow li { padding: 10px 12px; }
  .flow small { display: none; }
  .vw-top h2 { font-size: 14px; }
}
@media (max-width: 760px) { .vw-bottom:not(:has(#vwTest:not([hidden]))):not(:has(#vwPages:not([hidden]))) { display: none; } }

/* =================== v6: mavzu sahifasi, katalog, progress =================== */
/* topic (test) page */
.topic { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.t-visual { min-width: 0; }
.t-ig { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 24px 60px -30px rgba(11,79,74,.55), 0 0 0 1px var(--line); }
.t-ig img { display: block; width: 100%; height: auto; }
.t-zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: rgba(11,37,36,.78); color: #fff; font-weight: 600; font-size: 14px; backdrop-filter: blur(6px); transition: transform .15s var(--ease), background .15s; }
.t-zoom svg { width: 18px; height: 18px; }
.t-ig:hover .t-zoom { transform: translateY(-2px); background: rgba(11,37,36,.92); }
.t-noig { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--brand-50); display: grid; place-items: center; }
.t-noig svg { width: 40%; height: auto; }
.t-panel { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.t-doc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.t-ok { display: inline-flex; align-items: center; gap: 4px; color: #027a48; font-weight: 600; }
.t-ok svg { width: 14px; height: 14px; stroke-width: 3; }
.t-panel h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.t-sub { margin: -4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.t-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.t-facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border-radius: 99px; padding: 6px 11px; }
.t-facts svg { width: 15px; height: 15px; color: var(--action); }
.t-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, background .15s; }
.t-file:hover { border-color: var(--brand-100); background: var(--brand-50); }
.t-file img { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.15); background: #fff; }
.tf-t b { display: block; font-size: 14px; color: var(--ink); }
.tf-t small { color: var(--muted); font-size: 12.5px; }
.t-dl { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-50); color: var(--action); display: grid; place-items: center; }
.t-dl svg { width: 18px; height: 18px; }
.t-file:hover .t-dl { background: var(--action); color: #fff; }
.t-go { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.me-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-top: 10px; }
.me-chip .avatar { width: 36px; height: 36px; font-size: 13px; }
.mc-t small { display: block; color: var(--muted); font-size: 12px; }
.mc-t b { font-size: 14.5px; }
.mc-edit { border: 0; background: none; color: var(--action); font-weight: 600; font-size: 13.5px; padding: 6px; border-radius: 8px; }
.mc-edit:hover { background: var(--brand-50); }
.t-go #nameField { padding-top: 10px; }
.t-pts { border: 0; background: none; text-align: left; color: var(--muted); font-size: 12.5px; padding: 0; line-height: 1.45; }
.t-pts:hover { color: var(--action); }
.t-panel .more { border-top: 1px solid var(--line); padding-top: 4px; }
.t-panel .more summary { font-size: 13.5px; color: var(--muted); min-height: 36px; }

/* home banner progress */
.banner.hb { grid-template-columns: minmax(0, 1fr) auto; }
.b-next { display: block; width: 100%; margin-top: 2px; font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.b-prog { position: relative; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); border-radius: 18px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 200px; transition: background .15s; }
.b-prog:hover { background: rgba(255,255,255,.14); }
.b-prog .pr { width: 132px; height: 132px; transform: rotate(-90deg); }
.pr-t { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 9; }
.pr-a { fill: none; stroke: #9cf0d8; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.b-prog .pr-in { position: absolute; top: 16px; left: 0; right: 0; height: 132px; display: grid; place-content: center; text-align: center; }
.pr-in b { font-family: var(--display); font-size: 34px; line-height: 1; }
.pr-in b small { font-size: 18px; opacity: .7; }
.pr-in span { font-size: 11.5px; opacity: .85; margin-top: 4px; }
.bp-foot { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bp-foot b { font-family: var(--display); font-size: 18px; }
.bp-foot .tier { background: rgba(255,255,255,.92); }

/* catalog cards */
.toolbar.slim { flex: 1 1 420px; justify-content: flex-end; }
.toolbar.slim input[type=search] { flex: 1 1 200px; max-width: 320px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.tcard { display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; background: var(--surface); border-radius: 18px; overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: 0 10px 30px -20px rgba(15,42,42,.45), 0 0 0 1px var(--line); transition: transform .18s var(--ease), box-shadow .18s; }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15,42,42,.5), 0 0 0 1px var(--brand-100); }
.tcard:active { transform: translateY(-1px); }
.tc-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-50); }
.tc-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .4s var(--ease); }
.tcard:hover .tc-img img { transform: scale(1.04); }
.tc-img.gen svg { width: 100%; height: 100%; display: block; }
.tc-b { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; color: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); }
.tc-b svg { width: 13px; height: 13px; stroke-width: 3; }
.tc-b.ok { background: #027a48; } .tc-b.new { background: #b54708; } .tc-b.soon { background: rgba(15,42,42,.78); }
.tc-st { position: absolute; top: 12px; left: 12px; width: 26px; height: 26px; border-radius: 50%; background: #027a48; color: #fff; display: grid; place-items: center; }
.tc-st svg { width: 14px; height: 14px; stroke-width: 3; }
.tc-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.tc-doc { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.tc-t { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); margin-top: auto; }
.tc-meta span + span::before { content: "·"; margin: 0 7px; color: var(--line-2); }
.tcard.skel { pointer-events: none; }

/* reyting sahifasi */
.cd-inline { display: flex; align-items: center; gap: 12px; background: linear-gradient(110deg, #0e5f5d, #1b6d6b); color: #fff; border-radius: 14px; padding: 10px 14px; }
.cd-inline > span { font-size: 13px; font-weight: 600; max-width: 9ch; line-height: 1.2; }
.cd-inline .cd { gap: 6px; }
.cd-inline .cd div { padding: 6px 8px; min-width: 52px; }
.cd-inline .cd b { font-size: 20px; }
.tc-ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #027a48; color: #fff; margin-left: 8px; vertical-align: middle; }
.tc-ok svg { width: 13px; height: 13px; stroke-width: 3; }
button.rankline { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 600; color: var(--brand-800); cursor: pointer; }
button.rankline:hover { text-decoration: underline; }

@media (max-width: 1080px) { .topic { grid-template-columns: minmax(0, 1fr); } .t-panel { position: static; } }
@media (max-width: 760px) {
  .banner.hb { grid-template-columns: minmax(0, 1fr); }
  .b-prog { flex-direction: row; min-width: 0; justify-content: flex-start; }
  .b-prog .pr { width: 84px; height: 84px; }
  .b-prog .pr-in { top: 16px; left: 18px; right: auto; width: 84px; height: 84px; }
  .pr-in b { font-size: 24px; } .pr-in span { display: none; }
  .toolbar.slim { justify-content: flex-start; }
  .toolbar.slim input[type=search] { max-width: none; }
  .cd-inline { width: 100%; justify-content: space-between; }
  .cd-inline .cd div { min-width: 0; }
  .t-zoom span { display: none; }
}
.tf-ic { width: 40px; height: 56px; border-radius: 4px; background: #b42318; color: #fff; display: grid; place-items: center; font: 700 11px/1 var(--display); letter-spacing: .04em; }

/* =================== v7: yulduzlar, muqovalar, Story ulashish, natijalarim =================== */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { width: 16px; height: 16px; fill: #d9dee5; stroke: none; }
.stars svg.on { fill: #f2b233; }
.tc-img > svg { width: 100%; height: 100%; display: block; }
.tc-b.st { background: rgba(255,255,255,.95); padding: 5px 8px; }
.tc-b.st .stars svg { width: 15px; height: 15px; }
.t-noig { aspect-ratio: 16 / 9; }
.t-noig > svg, .t-noig > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.a-cover { display: block; width: 128px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--brand-50); }
.a-cover > svg, .a-cover > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pr-in .pr-star .stars { gap: 1px; margin-top: 6px; }
.pr-in .pr-star .stars svg { width: 13px; height: 13px; fill: #f6c453; }

/* natija ekrani */
.res-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 24px; }
.res-hero h2 { margin: 6px 0 0; font-family: var(--display); font-size: clamp(26px, 3.2vw, 34px); color: var(--ink); }
.res-hero .sub { margin: 0; color: var(--muted); }
.res-hero .res-stats { width: 100%; max-width: 520px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.res-hero .end-row { justify-content: center; margin-top: 8px; }
.res-hero .end-row .btn svg { width: 20px; height: 20px; }
.res-stars .stars { gap: 8px; align-items: flex-end; }
.res-stars .stars svg { width: 54px; height: 54px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)); }
.res-stars .stars svg:nth-child(2) { width: 70px; height: 70px; transform: translateY(-10px); }
.res-stars .stars svg.on { animation: starIn .55s var(--ease) both; }
.res-stars .stars svg.on:nth-child(2) { animation-delay: .25s; }
.res-stars .stars svg.on:nth-child(3) { animation-delay: .5s; }
@keyframes starIn { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(1); } }
.res-stars .stars svg.on:nth-child(2) { animation-name: starIn2; }
@keyframes starIn2 { 0% { transform: translateY(-10px) scale(.2) rotate(-30deg); opacity: 0; } 70% { transform: translateY(-10px) scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: translateY(-10px) scale(1); } }
.res-hero .rankline { margin-top: 2px; }

/* Story ulashish oynasi */
.share-modal .mbox { position: relative; width: min(440px, 100%); padding: 22px; gap: 14px; }
.share-modal h3 { margin: 0; font-family: var(--display); font-size: 21px; text-align: center; }
.sm-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; }
.sh-prev { display: grid; place-items: center; }
.sh-prev img { width: auto; max-width: 100%; height: min(52vh, 440px); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; border: 0; box-shadow: 0 18px 40px -18px rgba(11,79,74,.6); background: #0f6e66; }
.sh-main { display: flex; flex-direction: column; gap: 8px; }
.sh-main .btn { width: 100%; justify-content: center; }
.sh-main .btn svg { width: 20px; height: 20px; }
.sh-wait { text-align: center; color: var(--muted); padding: 10px; }
.sh-hint { margin: 0; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.45; }
.sh-hint:empty { display: none; }
.sh-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.sh-l { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.sh-l svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-l.tg { color: #1d8bd1; } .sh-l.fb { color: #1877f2; }
.sh-l:hover { background: var(--surface-2); }
@media (max-width: 560px) {
  .share-modal { place-items: end center; padding: 0; }
  .share-modal .mbox { border-radius: 22px 22px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .sh-prev img { height: min(44vh, 380px); }
}

/* Natijalarim */
.me-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; }
.me-head .avatar { width: 56px; height: 56px; font-size: 18px; }
.mh-n { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mh-n b { font-family: var(--display); font-size: 20px; color: var(--ink); }
.mh-form { grid-column: 2 / 4; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mh-form input { flex: 1 1 220px; }
.mh-form .err { flex-basis: 100%; }
.kpis.kpis3, #v-results .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
#v-results .kpi b small { font-size: 15px; color: var(--muted); font-weight: 600; }
.rrow { grid-template-columns: 128px minmax(0, 1fr) auto; }
.rrow .thumb { width: 128px; height: auto; aspect-ratio: 16 / 9; padding: 0; border-radius: 10px; }
.rrow .thumb > svg, .rrow .thumb > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.rrow .r-sub { align-items: center; }
.r-act { display: flex; gap: 8px; }
.r-act .btn svg { width: 17px; height: 17px; }
#v-results > .note { margin-top: 16px; }
@media (max-width: 760px) {
  .rrow { grid-template-columns: 96px minmax(0, 1fr); }
  .rrow .thumb { width: 96px; }
  .r-act { grid-column: 1 / -1; }
  .r-act .btn { flex: 1; justify-content: center; }
  .me-head { grid-template-columns: auto minmax(0, 1fr); }
  .me-head .mc-edit { grid-column: 2; justify-self: start; padding-left: 0; }
  .mh-form { grid-column: 1 / -1; }
  .res-stars .stars svg { width: 44px; height: 44px; } .res-stars .stars svg:nth-child(2) { width: 58px; height: 58px; }
}
.seo-list a { display: block; padding: 12px 0; }
svg.cv { stroke: none; stroke-width: 1; fill: #000; }

/* =================== v8: haftalik streak =================== */
svg.flame { fill: #f08a24; stroke: none; }
.bp-streak { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 99px; font-size: 12.5px; background: rgba(255,255,255,.14); color: #fff; }
.bp-streak svg.flame { width: 18px; height: 18px; fill: #ffb03a; }
.bp-streak b { font-weight: 700; }
.bp-streak small { opacity: .85; font-size: 11.5px; }
.bp-streak.risk { background: rgba(255,176,58,.18); box-shadow: inset 0 0 0 1px rgba(255,176,58,.6); }
.bp-streak.risk svg.flame { animation: flick 1.6s ease-in-out infinite; }
@keyframes flick { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15) rotate(-4deg); } }
.res-streak { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 16px 10px 12px; border-radius: 14px; background: #fff6ea; border: 1px solid #fbd9a8; margin-top: 4px; }
.res-streak svg.flame { width: 34px; height: 34px; flex: none; }
.res-streak b { display: block; font-family: var(--display); font-size: 16px; color: #8a4b0b; }
.res-streak span { font-size: 13px; color: #8a5a23; }
.res-streak.gain { background: linear-gradient(110deg, #fff1db, #ffe2b8); border-color: #f5b867; animation: pulseIn .6s var(--ease) both; }
.res-streak.gain svg.flame { animation: flick 1.2s ease-in-out 3; }
@keyframes pulseIn { 0% { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
.fl { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px; font-weight: 700; color: #c2630e; vertical-align: middle; }
.fl svg.flame { width: 14px; height: 14px; }
#v-results .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-st .ki { background: #fff3e3; }
.kpi-st .ki svg.flame { width: 24px; height: 24px; }
.kpi-st.off .ki svg.flame { fill: #c9ced6; }
@media (max-width: 760px) { #v-results .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bp-streak.risk svg.flame, .res-streak.gain, .res-streak.gain svg.flame { animation: none; } }
body.rm .bp-streak.risk svg.flame, body.rm .res-streak.gain svg.flame { animation: none; }

/* =================== v9: tun rejimi (dark) =================== */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1615; --surface: #13201e; --surface-2: #192927; --line: #243735; --line-2: #2f4644;
  --ink: #e6f0ee; --ink-2: #c3d2cf; --muted: #93a7a3;
  --brand: #3fa592; --brand-600: #2b9483; --brand-800: #8fdccb; --brand-50: #13302b; --brand-100: #1d4a42;
  --action: #0f7f72; --action-hover: #13917f; --teal-text: #7dd3c1;
  --good-text: #5fd39a; --good-50: #0f2a1e; --bad-50: #2d1715; --warn-50: #2b2110;
  --side-1: #072e2d; --side-2: #0b3d3a;
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 16px 40px -14px rgba(0,0,0,.7);
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] body::before { opacity: .12; }
:root[data-theme="dark"] body::after { border-color: rgba(63,165,146,.05); }
:root[data-theme="dark"] .top { background: rgba(19,32,30,.94); border-color: var(--line); }
:root[data-theme="dark"] .tcard, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .rrow { box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .tcard:hover { box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), 0 0 0 1px var(--brand-100); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
:root[data-theme="dark"] .tc-img, :root[data-theme="dark"] .rrow .thumb { filter: brightness(.92) saturate(.95); }
:root[data-theme="dark"] .tc-b.st { background: rgba(19,32,30,.92); }
:root[data-theme="dark"] .stars svg { fill: #3a4d4b; }
:root[data-theme="dark"] .stars svg.on { fill: #f2b233; }
:root[data-theme="dark"] .res-streak { background: #2a1d0e; border-color: #5a3b14; }
:root[data-theme="dark"] .res-streak b { color: #ffc27a; } :root[data-theme="dark"] .res-streak span { color: #e6b47c; }
:root[data-theme="dark"] .res-streak.gain { background: linear-gradient(110deg, #3a2410, #4a2c0d); }
:root[data-theme="dark"] .kpi-st .ki { background: #2a1d0e; }
:root[data-theme="dark"] .sh-l { color: var(--ink-2); } :root[data-theme="dark"] .sh-l.tg { color: #5fb8f0; } :root[data-theme="dark"] .sh-l.fb { color: #7ba7ff; }
:root[data-theme="dark"] .modal { background: rgba(0,0,0,.7); }
:root[data-theme="dark"] .t-ig { background: #fff; }
:root[data-theme="dark"] .fl { color: #ffa24a; }
:root[data-theme="dark"] .page-h h2, :root[data-theme="dark"] .rrow h3 { color: var(--teal-text); }

/* =================== v9: hisob bloki (chap menyu pastida) =================== */
.side-foot { gap: 10px; text-align: left; }
.side-foot > a { text-align: center; font-size: 12.5px; opacity: .8; border: 0; padding: 0; }
.acct { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.acct-me { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; border: 0; background: none; color: #fff; text-align: left; padding: 6px; border-radius: 12px; cursor: pointer; }
.acct-me:hover { background: rgba(255,255,255,.10); }
.acct-me .avatar { width: 40px; height: 40px; font-size: 14px; background: rgba(255,255,255,.92); color: var(--side-1); border: 0; flex: none; }
.acct-me .avatar svg { width: 20px; height: 20px; }
.am-t { min-width: 0; }
.am-t b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-t small { display: flex; align-items: center; gap: 4px; font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; }
.am-t small svg.flame { width: 13px; height: 13px; fill: #ffb03a; }
.seg-th { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.18); }
.seg-th button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: none; color: rgba(255,255,255,.85); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 4px; border-radius: 9px; cursor: pointer; }
.seg-th button svg { width: 15px; height: 15px; }
.seg-th button[aria-pressed="true"] { background: rgba(255,255,255,.95); color: var(--side-1); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.seg-th button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.acct-out { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: rgba(255,255,255,.9); font: inherit; font-size: 14px; font-weight: 600; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.acct-out svg { width: 18px; height: 18px; }
.acct-out:hover { background: rgba(255,255,255,.10); color: #fff; }
.app.collapsed .acct { align-items: center; }
.app.collapsed .acct-me { grid-template-columns: auto; justify-items: center; padding: 4px; }
.app.collapsed .am-t, .app.collapsed .acct-out span, .app.collapsed .seg-th span { display: none; }
.app.collapsed .seg-th { grid-template-columns: auto; }
.app.collapsed .seg-th button:not([aria-pressed="true"]) { display: none; }
.app.collapsed .seg-th button { padding: 8px; }
@media (max-width: 1080px) {
  .app.collapsed .acct { align-items: stretch; }
  .app.collapsed .acct-me { grid-template-columns: auto minmax(0, 1fr); justify-items: start; }
  .app.collapsed .am-t, .app.collapsed .acct-out span, .app.collapsed .seg-th span { display: revert; }
  .app.collapsed .seg-th { grid-template-columns: repeat(3, 1fr); }
  .app.collapsed .seg-th button:not([aria-pressed="true"]) { display: inline-flex; }
}
@media (min-width: 1081px) { .av-wrap { display: none; } }

/* profil tanlash oynasi */
.acct-modal .mbox { width: min(420px, 100%); gap: 14px; position: relative; }
.acct-modal h3 { margin: 0; font-family: var(--display); font-size: 21px; }
.acct-modal p { margin: -6px 0 0; color: var(--muted); font-size: 14px; }
.pf-list { display: flex; flex-direction: column; gap: 6px; }
.pf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 6px 4px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pf-go { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; border: 0; background: none; font: inherit; color: inherit; padding: 6px; border-radius: 9px; cursor: pointer; }
.pf .avatar { width: 38px; height: 38px; font-size: 13px; }
.pf b { display: block; font-size: 15px; color: var(--ink); } .pf small { color: var(--muted); font-size: 12.5px; }
.pf:hover { border-color: var(--brand-100); background: var(--brand-50); }
.pf-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pf-x:hover { background: var(--bad-50); color: var(--bad); }
.pf-x svg { width: 16px; height: 16px; }
.pf-new { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.pf-new .row2 { display: flex; gap: 8px; } .pf-new input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 15px; background: var(--surface); }
:root[data-theme="dark"] .btn.light { color: #0b4f4a; }
:root[data-theme="dark"] .pod-1 .pod-av { background: #0f6e66; color: #fff; }
:root[data-theme="dark"] .pod-step { background: linear-gradient(180deg, #1d4a42, transparent) !important; }
:root[data-theme="dark"] .seg button[aria-pressed="true"], :root[data-theme="dark"] .chips button[aria-pressed="true"] { background: var(--action); color: #fff; }
:root[data-theme="dark"] .toast-i { background: #e6f0ee; color: #0c1615; }
.app.collapsed .acct-me .avatar { display: grid; }
.empty .btn svg { width: 18px; height: 18px; stroke: currentColor; }
:root[data-theme="dark"] .pod-1 .pod-step { background: linear-gradient(180deg, #2b6a5f, transparent) !important; }