/* =====================================================================
   chess64 4.0 — yangi bo'limlar dizayni (ui.css dan keyin yuklanadi):
   Debyut ensiklopediyasi (#/enc), Murakkab masalalar (kc), kitoblar javoni,
   landing (kitob qatori, keynote sahna, ota-onalar fikri), ota-ona fikri formasi.
   ===================================================================== */

/* ---------- Murakkab masalalar (kc) — to'q binafsha-olovli muqova ---------- */
.col-page.kc { --cv: #7c3aed; --c1: #5b21b6; --c2: #1e0b3a; }
.col-book.kc { --c1: #6d28d9; --c2: #1e0b3a; }
.col-book.kc .col-book-emb { position: relative; }
.col-book.kc .col-book-emb > i { position: absolute; right: 8%; bottom: 0; width: 26px; height: 26px; }
.col-book.kc .col-book-emb > i .ic-img, .col-book.kc .col-book-emb > i .ic { width: 26px; height: 26px; }
.pzt-col.kc .pzt-ic { background: linear-gradient(150deg, #6d28d9, #1e0b3a); }
.pzt-card.pzt-kc { min-height: 132px; }
.pzt-card.pzt-kc .pzt-ic { background: radial-gradient(120% 90% at 30% 10%, #a78bfa, #5b21b6 55%, #1e0b3a); border-radius: 16px; padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .5), 0 10px 26px -12px rgba(124, 58, 237, .8); }
.pzt-card.pzt-kc .pzt-name { font-size: 18px; }
.col-page.kc .col-toc .col-row-tx b { font-size: 14.5px; }

/* ---------- Debyut ensiklopediyasi: mundarija ---------- */
.enc-page { --cv: #b45309; --c1: #92400e; --c2: #2a1404; }
.enc-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); align-items: center; gap: 22px 30px;
  padding: 26px 28px; border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--card-shadow);
  background: radial-gradient(720px 340px at 0% 0%, rgba(245, 158, 11, .2), transparent 62%),
    radial-gradient(520px 300px at 100% 100%, rgba(56, 189, 248, .1), transparent 70%), var(--surface);
}
.enc-hero::after {
  content: ""; position: absolute; inset: auto -40px -60px auto; width: 260px; height: 260px; opacity: .06; pointer-events: none;
  background: repeating-conic-gradient(var(--text) 0 25%, transparent 0 50%) 0 0 / 52px 52px; border-radius: 30px; transform: rotate(12deg);
}
.enc-hero-tx { display: grid; gap: 10px; min-width: 0; }
.enc-hero h1 { margin: 0; font: 800 38px/1.06 var(--display); letter-spacing: -.03em; }
.enc-lead { margin: 0; color: var(--muted); font-size: 15.5px; }
.enc-cover {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  width: 136px; aspect-ratio: 3 / 4.25; padding: 14px 10px 12px 18px; border-radius: 4px 10px 10px 4px; color: #fff; text-align: center;
  background: radial-gradient(120% 70% at 70% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(150deg, #b45309, #2a1404);
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, .3), inset 9px 0 10px -6px rgba(255, 255, 255, .24), 0 22px 34px -16px rgba(0, 0, 0, .9);
  transform: rotateY(-14deg) rotateZ(-2deg); transform-origin: left bottom; transition: transform .5s var(--ease-spring);
}
.enc-cover:hover { transform: rotateY(-4deg) translateY(-4px); }
.enc-cover-foil { position: absolute; inset: 7px 6px 7px 14px; border: 1px solid rgba(245, 196, 81, .6); border-radius: 2px 6px 6px 2px; pointer-events: none; }
.enc-cover-top { font: 700 8.5px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: rgba(245, 196, 81, .9); }
.enc-cover-emb { width: 62%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.enc-cover-emb svg { width: 100%; height: auto; display: block; }
.enc-cover b { font: 800 14px/1.1 Georgia, "Times New Roman", serif; color: #f8e3a8; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.enc-cover small { font-size: 9.5px; color: rgba(255, 255, 255, .72); }

.enc-hero-plan { display: grid; gap: 10px; align-self: stretch; align-content: center; padding: 16px; border-radius: 20px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.enc-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.enc-plan li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.enc-plan li + li::before { content: ""; position: absolute; left: 25px; top: -9px; width: 2px; height: 9px; background: linear-gradient(var(--line), var(--accent)); }
.enc-plan-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff;
  background: linear-gradient(140deg, var(--accent), #2563eb); box-shadow: 0 6px 14px -8px rgba(37, 99, 235, .9); }
.enc-plan li:nth-child(2) .enc-plan-ic { background: linear-gradient(140deg, #f59e0b, #b45309); }
.enc-plan li:nth-child(3) .enc-plan-ic { background: linear-gradient(140deg, #22c55e, #15803d); }
.enc-plan li:nth-child(4) .enc-plan-ic { background: linear-gradient(140deg, #a78bfa, #6d28d9); }
.enc-plan-ic .ic { width: 17px; height: 17px; }

.enc-parts { display: grid; gap: 18px; }
.enc-part { display: grid; gap: 12px; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); }
.enc-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; }
.enc-ch { border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 70%, transparent); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.enc-ch:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.enc-ch.open { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 16px 34px -22px rgba(37, 99, 235, .8); }
.enc-ch-h { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px;
  border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.enc-ring { --p: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--surface-3) 0); position: relative; }
.enc-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.enc-ring b { position: relative; font: 800 13px var(--display); }
.enc-ch-tx { display: grid; gap: 2px; min-width: 0; }
.enc-ch-tx b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-ch-tx small { color: var(--muted); font-size: 12.5px; }
.enc-ch-st { font: 700 12.5px var(--display); color: var(--muted); }
.enc-ch-chev .ic { width: 18px; height: 18px; color: var(--muted); transition: transform .25s; }
.enc-ch.open .enc-ch-chev .ic { transform: rotate(90deg); }
html[dir="rtl"] .enc-ch-chev .ic { transform: scaleX(-1); }
.enc-ls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 6px; padding: 0 12px 14px; animation: encIn .35s var(--ease-out); }
@keyframes encIn { from { opacity: 0; transform: translateY(-6px); } }
.enc-l { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; }
.enc-l:hover { transform: translateY(-1px); border-color: var(--accent); }
.enc-l-n { font: 800 12px var(--display); color: var(--accent-2); padding: 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
html[data-theme="light"] .enc-l-n { color: var(--accent-3); }
.enc-l-tx { display: grid; gap: 1px; min-width: 0; }
.enc-l-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-l-tx small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-l-st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--surface-3); }
.enc-l.st2 .enc-l-st { background: var(--ok); border-color: var(--ok); color: #fff; }
.enc-l.st3 .enc-l-st { background: var(--warn); border-color: var(--warn); color: #fff; }
.enc-l.st1 .enc-l-st { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.enc-l-st .ic { width: 13px; height: 13px; }
.enc-l.next { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- Debyut ensiklopediyasi: dars ---------- */
.gp.enc-lesson .an-left { width: min(calc(100vh - 40px), calc(100% - 440px)); }
.enc-board { display: flex; gap: 10px; }
.enc-panel { flex-basis: 420px; background: var(--surface); }
html:not([data-theme="light"]) .enc-panel { background: #24221f; }
.enc-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.enc-head-tx { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; flex: 1; }
.enc-head-tx b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-head-tx small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-sec { grid-row: 1; font: 800 12.5px var(--display); color: #fff; padding: 3px 8px; border-radius: 8px; background: linear-gradient(140deg, #f59e0b, #b45309); }
.enc-head-prog { display: grid; gap: 3px; width: 70px; text-align: end; color: var(--muted); font-size: 11px; }
.enc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.enc-step { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .18s; }
.enc-step:hover { color: var(--text); }
.enc-step.on { color: #fff; border-color: transparent; background: linear-gradient(140deg, var(--accent), #2563eb); box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .95); }
.enc-step.past { color: var(--ok); }
.enc-step-ic { display: flex; }
.enc-step-ic .ic { width: 16px; height: 16px; }
.enc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 12px; }
.enc-idea { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  background: rgba(240, 193, 92, .1); border: 1px solid rgba(240, 193, 92, .22); }
.enc-idea .ic-img { width: 18px; height: 18px; }
.enc-moves { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; border-radius: 12px; border: 1px solid var(--line); padding: 4px; background: var(--surface-2); }
html:not([data-theme="light"]) .enc-moves { background: rgba(255, 255, 255, .02); }
.enc-mrow { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 4px; align-items: stretch; }
.enc-mno { display: grid; place-items: center; color: var(--muted-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.enc-mv { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; padding: 4px 8px; border-radius: 9px;
  border: 1px solid transparent; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: start; min-width: 0; }
.enc-mv b { font-size: 15px; white-space: nowrap; }
.enc-mv:hover { background: var(--surface-3); }
.enc-mv.cur { background: #3692e7; color: #fff; }
.enc-mv.cur .enc-tag { background: rgba(255, 255, 255, .22); color: #fff; }
.enc-mv.new:not(.cur) { border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.enc-mv.empty { cursor: default; }
.enc-tag { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%;
  color: var(--muted); background: var(--surface-3); }
.enc-tag.t-develop { color: #60a5fa; background: rgba(96, 165, 250, .14); }
.enc-tag.t-center { color: #fbbf24; background: rgba(251, 191, 36, .14); }
.enc-tag.t-castle_k, .enc-tag.t-castle_q { color: #34d399; background: rgba(52, 211, 153, .14); }
.enc-tag.t-gambit { color: #fb7185; background: rgba(251, 113, 133, .16); }
.enc-tag.t-capture, .enc-tag.t-trade, .enc-tag.t-recapture { color: #f97316; background: rgba(249, 115, 22, .14); }
.enc-tag.t-check, .enc-tag.t-pin { color: #e879f9; background: rgba(232, 121, 249, .14); }
.enc-tag.t-fianchetto { color: #a78bfa; background: rgba(167, 139, 250, .14); }
.enc-name { padding: 0 4px; }
.enc-eval { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px; border-radius: 16px;
  border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 80%, transparent), var(--surface)); }
.enc-eval-big { grid-row: span 2; min-width: 86px; padding: 10px 12px; border-radius: 12px; text-align: center; font: 800 26px/1 var(--display);
  color: #262421; background: #f0efec; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.enc-eval-big.b { color: #f0efec; background: #403d39; }
.enc-eval-tx { display: grid; gap: 2px; }
.enc-eval-tx b { font-size: 16px; }
.enc-eval-tx small { color: var(--muted); font-size: 12px; }
.enc-pv { grid-column: 1 / -1; display: grid; gap: 3px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; }
.enc-graph { height: 56px; border-radius: 12px; overflow: hidden; background: #403d39; border: 1px solid var(--line); }
.enc-graph svg { width: 100%; height: 100%; display: block; }
.enc-graph .fill { fill: #f0efec; }
.enc-graph .line { fill: none; stroke: #3692e7; stroke-width: 2; vector-effect: non-scaling-stroke; }
.enc-graph .mid { stroke: rgba(128, 128, 128, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.enc-sub-h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.enc-cont-list { display: flex; flex-wrap: wrap; gap: 6px; }
.enc-cont-i { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); max-width: 100%; }
.enc-cont-i b { font-size: 14px; }
.enc-cont-i small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.enc-drill-lead { margin: 0; font-size: 14px; color: var(--muted); }
.enc-drill-prog { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.enc-drill-prog .col-bar { flex: 1; }
.enc-done b { color: var(--ok) !important; }
.enc-cta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enc-cta-b { flex: 1 1 auto; min-height: 44px; gap: 8px; justify-content: center; font-weight: 800; border-radius: 12px; }
.enc-cta-b.ghost { flex: 0 1 auto; }
.enc-cta-b .ic { width: 18px; height: 18px; }
.enc-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; padding: 0 4px; }
.enc-auto input { accent-color: var(--accent); width: 16px; height: 16px; }
.enc-board .an-evalbar.flip { transform: rotate(180deg); }

@media (max-width: 1180px) { .enc-hero { grid-template-columns: auto minmax(0, 1fr); } .enc-hero-plan { grid-column: 1 / -1; } .enc-plan { grid-template-columns: repeat(4, 1fr); } .enc-plan li + li::before { display: none; } }
@media (max-width: 860px) {
  .gp.enc-lesson .an-left { width: 100%; padding: 0 0 0 6px; }
  .enc-board .an-evalbar { width: 16px; }
  .enc-panel { flex-basis: auto; }
  .enc-moves { max-height: none; }
  .view-game .enc-panel > .gp-foot { order: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .enc-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; border-radius: 22px; justify-items: start; }
  .enc-cover { width: 112px; justify-self: center; }
  .enc-hero h1 { font-size: 30px; }
  .enc-plan { grid-template-columns: 1fr 1fr; }
  .enc-part { padding: 14px 12px; }
  .enc-ls { grid-template-columns: 1fr; }
}

/* to'plamlar javonida endi 3 ta kitob — sarlavha matniga joy qolsin */
.col-shelf { gap: 12px; }
.col-shelf .col-book { width: 112px; }
@media (max-width: 680px) { .col-shelf .col-book { width: 96px; } }

/* =====================================================================
   LANDING 4.0 (.lv) — shaxmat uslubidagi hero, ixcham kirish kartasi
   ===================================================================== */
.lv { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; background: var(--bg); }
.lv-main { flex: 1; width: 100%; }
.lv-sec { width: 100%; max-width: 1240px; margin: 120px auto 0; padding: 0 28px; }
.lv-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.lv-head h2 { margin: 0 0 10px; font: 900 clamp(30px, 4vw, 54px)/1.02 Archivo, var(--display); font-variation-settings: "wdth" 112; letter-spacing: -.035em; text-wrap: balance; }
.lv-head p { margin: 0; color: var(--muted); font-size: 17px; }
.lv-eyebrow { display: inline-block; margin-bottom: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ember-2); }
html[data-theme="light"] .lv-eyebrow { color: var(--ember-3); }

/* --- hero --- */
.lv-hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(860px, calc(100vh - 64px)); display: grid; align-items: center;
  background: radial-gradient(1200px 600px at 75% -10%, rgba(56, 126, 220, .28), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(249, 115, 22, .16), transparent 60%), linear-gradient(180deg, #070a11, #0a0e17 70%, var(--bg)); }
html[data-theme="light"] .lv-hero { background: radial-gradient(1200px 600px at 75% -10%, rgba(56, 126, 220, .22), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(249, 115, 22, .14), transparent 60%), linear-gradient(180deg, #eef3fb, #f6f8fc 70%, var(--bg)); }
.lv-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lv-floor { position: absolute; left: -40%; right: -40%; bottom: -6%; height: 64%; transform: perspective(620px) rotateX(64deg); transform-origin: 50% 100%;
  background: repeating-conic-gradient(rgba(74, 127, 165, .55) 0 25%, rgba(14, 22, 38, .2) 0 50%) 0 0 / 92px 92px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%); mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  animation: lvFloor 14s linear infinite; }
html[data-theme="light"] .lv-floor { background: repeating-conic-gradient(rgba(74, 127, 165, .5) 0 25%, rgba(255, 255, 255, .5) 0 50%) 0 0 / 92px 92px; }
@keyframes lvFloor { to { background-position: 0 184px; } }
.lv-glow { position: absolute; left: 50%; bottom: 18%; width: 900px; height: 300px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96, 165, 250, .35), transparent); filter: blur(30px); }
.lv-float { position: absolute; display: block; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); animation: lvFloat 9s ease-in-out infinite; }
.lv-float svg { width: 100%; height: 100%; display: block; }
.lv-float .cp-shadow { display: none; }
.lv-float.f2, .lv-float.f6 { filter: drop-shadow(0 0 16px rgba(96, 165, 250, .55)) drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); }
.lv-float.f1 { width: 140px; height: 140px; left: 1.5%; bottom: 9%; animation-delay: -1s; }
.lv-float.f2 { width: 112px; height: 112px; right: 3%; top: 9%; animation-delay: -3s; }
.lv-float.f3 { width: 92px; height: 92px; left: 46%; bottom: 6%; animation-delay: -5s; }
.lv-float.f4 { width: 70px; height: 70px; left: 44%; top: 7%; animation-delay: -2s; filter: blur(1.5px) drop-shadow(0 0 14px rgba(96, 165, 250, .5)); opacity: .55; }
.lv-float.f5 { display: none; }
.lv-float.f6 { width: 62px; height: 62px; right: 6%; bottom: 10%; animation-delay: -4s; }
@keyframes lvFloat { 50% { transform: translateY(-18px) rotate(-6deg); } }
.lv-hero-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 64px 28px 96px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 400px); gap: 56px; align-items: center; }
.lv-copy { display: grid; gap: 18px; align-content: center; animation: lvRise .9s var(--ease-out) both; }
@keyframes lvRise { from { opacity: 0; transform: translateY(24px); } }
.lv-kicker { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 7px 14px 7px 9px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-theme="light"] .lv-kicker { background: rgba(255, 255, 255, .7); border-color: var(--line); }
.lv-kicker .ic-img { width: 18px; height: 18px; }
.lv-copy h1 { margin: 0; font: 900 clamp(40px, 5vw, 74px)/.98 Archivo, var(--display); font-variation-settings: "wdth" 108; letter-spacing: -.035em; text-wrap: balance; }
.lv-grad { background: linear-gradient(100deg, #fb923c 0%, #fbbf24 40%, #60a5fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lv-sub { margin: 0; max-width: 520px; color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; font-size: 14px; color: var(--muted);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-theme="light"] .lv-chip { background: rgba(255, 255, 255, .75); border-color: var(--line); }
.lv-chip b { color: var(--text); font: 800 16px var(--display); }
.lv-chip .ic-img { width: 20px; height: 20px; }

/* --- ixcham kirish kartasi --- */
.lv-auth { position: relative; display: grid; gap: 14px; padding: 20px; border-radius: 26px; animation: lvRise .9s .12s var(--ease-out) both;
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); }
html[data-theme="light"] .lv-auth { border-color: var(--line); box-shadow: 0 40px 90px -50px rgba(15, 23, 42, .45); }
.lv-auth::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(251, 146, 60, .6), transparent 35%, transparent 65%, rgba(96, 165, 250, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lv-auth-head { display: grid; gap: 12px; }
.lv-auth-title { font: 800 21px var(--display); letter-spacing: -.02em; }
.lv-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.lv-tab { position: relative; z-index: 1; height: 36px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 10px; }
.lv-tab[aria-selected="true"] { color: var(--text); }
.lv-tab-ind { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .35s var(--ease-spring); }
html[data-theme="light"] .lv-tab-ind { background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.lv-tabs[data-active="register"] .lv-tab-ind { transform: translateX(100%); }
html[dir="rtl"] .lv-tabs[data-active="register"] .lv-tab-ind { transform: translateX(-100%); }
html[dir="rtl"] .lv-tab-ind { left: auto; right: 4px; }
.lv-auth .ld-form { gap: 10px; }
.lv-auth .ld-field .input.lg { min-height: 48px; padding-top: 10px; padding-bottom: 10px; font-size: 15.5px; border-radius: 12px; }
.lv-auth .btn.ember.xl { min-height: 50px; border-radius: 13px; font-size: 16px; }
.lv-google { display: grid; gap: 10px; }
.lv-gwrap { position: relative; height: 48px; border-radius: 13px; }
.lv-gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border-radius: 13px; cursor: pointer;
  border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font: 700 15px/1 var(--sans); letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .18); transition: box-shadow .2s, transform .2s; }
.lv-gwrap:hover .lv-gbtn, button.lv-gbtn:hover { box-shadow: 0 6px 18px -6px rgba(66, 133, 244, .55), 0 1px 2px rgba(60, 64, 67, .2); transform: translateY(-1px); }
.lv-gwrap:active .lv-gbtn { transform: translateY(0); }
.lv-gwrap.loading .lv-gbtn { opacity: .55; }
.lv-gbtn-ic { display: grid; width: 20px; height: 20px; }
.lv-gbtn-ic svg { width: 20px; height: 20px; }
.lv-gover { position: absolute; left: 0; top: 0; height: 44px; opacity: .011; transform-origin: 0 0; z-index: 2; overflow: hidden; }
.lv-gover > div { margin: 0 !important; }
.lv-or { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 12px; text-transform: lowercase; }
.lv-or::before, .lv-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lv-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lv-note .ic, .lv-note .ic-img { width: 18px; height: 18px; flex: none; }

/* --- afsonaviy partiyalar: egilgan qator --- */
.lv-games { margin-top: 70px; }
.lv-games .lv-head { margin-bottom: 0; padding: 0 28px; }
.lv-row { height: clamp(250px, 34vw, 470px); margin-top: -6px; }
.cr { position: relative; overflow: hidden; width: 100%; }
.cr-band { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.cr-tile { position: absolute; }
.cr-slice { position: absolute; top: 0; overflow: hidden; background: #0d1422; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cr-slice.l { border-radius: 16px 0 0 16px; }
.cr-slice.r { border-radius: 0 16px 16px 0; }
.cr-slice img { position: absolute; top: 0; max-width: none; object-fit: cover; }
.cr.cr-off .cr-tile { animation-play-state: paused; }

/* --- imkoniyatlar: bento --- */
.lv-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lv-feat { --c: #38bdf8; position: relative; overflow: hidden; display: grid; align-content: end; gap: 6px; min-height: 190px; padding: 22px; border-radius: 24px;
  background: radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), var(--surface);
  border: 1px solid var(--line); box-shadow: var(--card-shadow); transition: transform .35s var(--ease-spring), border-color .3s; }
.lv-feat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.lv-feat.f0, .lv-feat.f1 { grid-column: span 2; min-height: 230px; }
.lv-feat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 170px; height: 170px; opacity: .07; border-radius: 26px; transform: rotate(14deg);
  background: repeating-conic-gradient(var(--text) 0 25%, transparent 0 50%) 0 0 / 34px 34px; }
.lv-feat-ic { position: absolute; left: 22px; top: 22px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
  background: color-mix(in srgb, var(--c) 18%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.lv-feat-ic .ic-img { width: 36px; height: 36px; }
.lv-feat h3 { margin: 0; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.lv-feat p { margin: 0; color: var(--muted); font-size: 15px; }

/* --- botlar --- */
.lv-bots-box { display: grid; gap: 18px; padding: 22px; border-radius: 28px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); }
.lv-bot-stage { --tier: #f97316; --tier-2: #c2410c; display: flex; align-items: center; gap: 32px; padding: 18px 22px; border-radius: 22px;
  background: radial-gradient(500px 220px at 15% 50%, color-mix(in srgb, var(--tier) 30%, transparent), transparent 70%), var(--surface-2); }
.lv-bot-photo { flex: none; width: 170px; height: 170px; border-radius: 30%; padding: 4px; background: linear-gradient(140deg, var(--tier), var(--tier-2));
  box-shadow: 0 24px 50px -20px var(--tier); }
.lv-bot-photo img, .lv-bot-photo .lv-bot-ava { width: 100%; height: 100%; border-radius: 28%; object-fit: cover; display: block; background: #fff; }
.lv-bot-info { display: grid; gap: 10px; min-width: 0; }
.lv-bot-info .lv-eyebrow { margin: 0; color: var(--tier); }
.lv-bot-name { display: flex; align-items: center; gap: 8px; font: 900 36px/1.05 Archivo, var(--display); font-variation-settings: "wdth" 110; letter-spacing: -.03em; }
.lv-bot-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.lv-bot-info .btn { width: fit-content; }
.lv-bot-rail { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.lv-bot-pick { --tier: #f97316; --tier-2: #c2410c; flex: none; display: grid; justify-items: center; gap: 4px; width: 92px; padding: 10px 6px; border-radius: 18px;
  border: 1px solid transparent; background: none; color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start; transition: transform .25s var(--ease-spring), background .2s; }
.lv-bot-pick:hover { transform: translateY(-3px); background: var(--surface-2); }
.lv-bot-pick.on { background: var(--surface-2); border-color: color-mix(in srgb, var(--tier) 60%, transparent); }
.lv-bot-pick img, .lv-bot-pick .lv-pick-ava { width: 60px; height: 60px; border-radius: 30%; object-fit: cover; padding: 2px; background: linear-gradient(140deg, var(--tier), var(--tier-2)); display: block; }
.lv-bot-pick b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lv-bot-pick small { font: 800 11.5px var(--display); color: var(--tier); }

/* --- jonli taxta --- */
.lv-live { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 56px; align-items: center; }
.lv-live-board { position: relative; }
.lv-live-board .board-wrap { border-radius: 18px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85); }
.lv-live-tag { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; box-shadow: var(--card-shadow); }
.lv-live-tag i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: lvPulse 1.6s infinite; }
@keyframes lvPulse { 50% { opacity: .3; } }
.lv-live-copy h2 { margin: 0 0 18px; font: 900 clamp(30px, 3.6vw, 50px)/1.02 Archivo, var(--display); font-variation-settings: "wdth" 112; letter-spacing: -.035em; }
.lv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lv-checks li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; }
.lv-checks li span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ember); color: #fff; flex: none; }

/* --- ota-onalar fikri --- */
.lv-reviews { max-width: none; padding: 0; }
.lv-reviews .lv-head { padding: 0 28px; }
.lv-rv-score { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.lv-rv-score > b { font: 900 26px var(--display); }
.lv-rv-score > span:last-child { color: var(--muted); font-size: 14px; }
.lv-rv-cta { display: flex; justify-content: center; margin-top: 26px; }
.lv-rv-cta .btn { gap: 8px; border-radius: 999px; padding: 0 22px; min-height: 46px; }
.rvm { position: relative; overflow: hidden; padding: 10px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rvm-track { display: flex; gap: 16px; width: max-content; animation: rvmMove var(--dur, 60s) linear infinite; }
.rvm:hover .rvm-track { animation-play-state: paused; }
@keyframes rvmMove { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .rvm { overflow-x: auto; } .rvm-track { animation: none; } }
.rvc { margin: 0; flex: none; width: 340px; display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--surface-2) 80%, transparent)); box-shadow: var(--card-shadow); }
.rvc-top { display: flex; align-items: center; justify-content: space-between; }
.rvc-q { font: 900 54px/0.6 Georgia, serif; color: color-mix(in srgb, var(--ember) 60%, transparent); height: 22px; }
.rvc blockquote { margin: 0; font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rvc figcaption { display: flex; align-items: center; gap: 10px; }
.rvc figcaption > span:last-child { display: grid; gap: 1px; }
.rvc figcaption b { font-size: 14.5px; }
.rvc figcaption small { color: var(--muted); font-size: 12.5px; }
.rvc-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--display); color: #fff; background: linear-gradient(140deg, #f59e0b, #ea580c); }
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars .st { position: relative; display: inline-block; width: 18px; height: 18px; }
.stars.lg .st { width: 22px; height: 22px; }
.stars .st svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(148, 163, 184, .35); }
.stars .st svg + svg { fill: #fbbf24; clip-path: inset(0 calc(100% - var(--f)) 0 0); }
.stars.pick { gap: 4px; }
.st-b { width: 42px; height: 42px; padding: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.st-b svg { width: 100%; height: 100%; fill: rgba(148, 163, 184, .35); transition: transform .18s var(--ease-spring), fill .15s; }
.st-b.on svg { fill: #fbbf24; filter: drop-shadow(0 4px 10px rgba(251, 191, 36, .45)); }
.st-b:hover svg { transform: scale(1.14); }
.st-b:focus-visible { outline: 2px solid var(--accent); }

/* --- yakuniy chaqiriq --- */
.lv-cta { position: relative; overflow: hidden; isolation: isolate; width: calc(100% - 56px); max-width: 1184px; margin: 120px auto 70px; padding: 72px 28px; border-radius: 34px; text-align: center; color: #fff;
  background: radial-gradient(700px 300px at 50% 120%, rgba(249, 115, 22, .55), transparent 70%), linear-gradient(160deg, #111a2e, #070a12); }
.lv-cta-board { position: absolute; inset: 0; z-index: -1; opacity: .16; transform: perspective(600px) rotateX(55deg) scale(1.6); transform-origin: 50% 100%;
  background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 70px 70px; -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%); }
.lv-cta h2 { margin: 0 0 10px; font: 900 clamp(30px, 4.2vw, 58px)/1.02 Archivo, var(--display); font-variation-settings: "wdth" 115; letter-spacing: -.035em; }
.lv-cta p { margin: 0 0 28px; color: rgba(255, 255, 255, .75); font-size: 17px; }
.lv-foot { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 28px calc(26px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.lv-foot .side-logo { padding: 0; }
.lv .lx-top { background: color-mix(in srgb, #070a11 70%, transparent); }
html[data-theme="light"] .lv .lx-top { background: color-mix(in srgb, #fff 72%, transparent); }

/* --- ota-ona sahifasidagi fikr formasi --- */
.rv4-form { display: grid; gap: 12px; }
.rv4-stars-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv4-lbl { font-weight: 700; color: var(--muted); }
.rv4-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rv4-form textarea { resize: vertical; min-height: 90px; }
.rv4-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .lv-hero-in { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 44px 20px 56px; }
  .lv-auth { max-width: 440px; width: 100%; justify-self: center; }
  .lv-copy { text-align: center; justify-items: center; }
  .lv-float.f2, .lv-float.f4 { display: none; }
  .lv-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-live { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lv-live-board { max-width: 480px; justify-self: center; width: 100%; }
}
@media (max-width: 640px) {
  .lv-sec { margin-top: 84px; padding: 0 16px; }
  .lv-hero { min-height: 0; }
  .lv-hero-in { padding: 30px 16px 44px; }
  .lv-copy h1 { font-size: clamp(40px, 12vw, 56px); }
  .lv-float.f1 { width: 70px; height: 70px; left: auto; right: 4%; top: auto; bottom: 2%; opacity: .8; }
  .lv-float.f2 { display: block; width: 64px; height: 64px; top: 2%; right: 2%; opacity: .6; }
  .lv-float.f3, .lv-float.f5 { display: none; }
  .lv-float.f6 { width: 48px; height: 48px; }
  .lv-auth { padding: 16px; border-radius: 22px; }
  .lv-bento { grid-template-columns: minmax(0, 1fr); }
  .lv-feat.f0, .lv-feat.f1 { grid-column: auto; }
  .lv-feat { min-height: 0; padding: 18px 18px 18px 92px; align-content: center; }
  .lv-feat-ic { left: 18px; top: 50%; transform: translateY(-50%); }
  .lv-row { height: 300px; }
  .lv-bot-stage { flex-direction: column; text-align: center; gap: 16px; padding: 18px 12px; }
  .lv-bot-info { justify-items: center; }
  .lv-bot-photo { width: 130px; height: 130px; }
  .lv-bot-name { font-size: 28px; justify-content: center; }
  .lv-bots-box { padding: 12px; border-radius: 22px; }
  .rvc { width: 280px; padding: 16px; }
  .lv-cta { width: calc(100% - 32px); margin: 84px auto 50px; padding: 52px 18px; border-radius: 26px; }
  .lv-foot { flex-wrap: wrap; justify-content: center; text-align: center; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); }
  .lv-foot .spacer { display: none; }
  .rv4-two { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   KEYNOTE sahna (.kn) — iliq oq kanvas, qora UI, skroll bilan boshqariladi
   ===================================================================== */
.kn { position: relative; height: 480vh; margin-top: 110px; background: #f4f1ea; color: #0b0b0c; }
.kn-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.kn-stage { position: absolute; inset: 0; contain: layout paint; }
.kn-word { position: absolute; left: 0; right: 0; top: 50%; transform: translate(-.14em, -58%); text-align: center; white-space: nowrap; pointer-events: none;
  font: 900 120px/1 Archivo, Onest, var(--display); font-variation-settings: "wdth" 125; letter-spacing: -.035em; color: #0b0b0c; }
.kn-l { display: inline-block; transform-origin: 50% 70%; will-change: transform; }
.kn-shape { position: absolute; left: 0; top: 0; z-index: 3; overflow: hidden; background: #0b0b0c; will-change: transform, width, height;
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .55); }
.kn-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; white-space: nowrap;
  font: 800 24px/1.1 Onest, var(--display); letter-spacing: -.01em; }
.kn-label-tx { display: block; will-change: transform; }
.kn-photo { position: absolute; left: 50%; top: 50%; width: 210%; height: auto; max-width: none; transform: translate(-28.2%, -50%); will-change: filter; }
.kn-light { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(120% 90% at 78% 12%, rgba(255, 214, 120, 1), rgba(255, 140, 50, .85) 45%, rgba(150, 50, 10, .7)); }
.kn-iris { position: absolute; inset: 0; width: 100%; height: 100%; }
.kn-blade { fill: #19191b; stroke: rgba(255, 255, 255, .22); stroke-width: 1.3; }
.kn-st { position: absolute; inset: 0; overflow: hidden; color: #fff; font: 800 22px/1 Onest, var(--display); }
.kn-st-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6em; white-space: nowrap; will-change: transform; }
.kn-st-dot { width: 1.8em; height: 1.8em; flex: none; border-radius: 50%; display: grid; place-items: center; background: #22c55e; }
.kn-st-dot.s1 { background: #3b82f6; } .kn-st-dot.s2 { background: #7c3aed; } .kn-st-dot.s3 { background: #f59e0b; }
.kn-st-ic { display: grid; place-items: center; will-change: transform; }
.kn-st-ic .ic, .kn-st-ic .ic-img { width: 1em; height: 1em; }
.kn-st-ic svg { width: 1.2em; height: auto; }
.kn-route { stroke-dasharray: 60; stroke-dashoffset: 60; }
.kn-pct { color: #4ade80; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: end; }
.kn-glass { position: absolute; left: 0; top: 0; z-index: 4; height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 27px; color: #fff;
  transform-origin: 50% 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.9); backdrop-filter: blur(16px) saturate(1.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 14px 34px -10px rgba(0, 0, 0, .45); }
.kn-g-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.kn-g-ic .ic { width: 20px; height: 20px; }
.kn-slider { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.kn-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #fde68a, #f59e0b); }
.kn-knob { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.kn-knob.lens { width: 42px; height: 42px; margin: -21px 0 0 -21px; background: rgba(255, 255, 255, .22); border: 1.5px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(1px) saturate(2.2) brightness(1.15); backdrop-filter: blur(1px) saturate(2.2) brightness(1.15);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, .65), 0 8px 20px rgba(0, 0, 0, .3); }
.kn-tile { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em; border-radius: 22%;
  background: #0b0b0c; color: #fff; transform-origin: 50% 50%; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .6); will-change: transform; }
.kn-tile-ic { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 32%; background: color-mix(in srgb, var(--c) 26%, #141416); }
.kn-tile-ic .ic-img { width: 1.8em; height: 1.8em; }
.kn-tile b { font: 700 1em/1.15 Onest, var(--display); text-align: center; padding: 0 .4em; }
.kn-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 34px; height: 34px; pointer-events: none; transform-origin: 6px 4px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.kn-cursor svg { width: 100%; height: 100%; }
.kn-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: #6b6b6b;
  font: 600 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: opacity .3s; }
.kn-hint i { width: 2px; height: 26px; border-radius: 1px; background: linear-gradient(#6b6b6b, transparent); animation: knHint 1.6s ease-in-out infinite; }
@keyframes knHint { 50% { transform: translateY(6px); } }
.kn-static { height: auto; }
.kn-static .kn-sticky { position: relative; height: 92vh; }
@media (max-width: 640px) { .kn { height: 420vh; margin-top: 84px; } .kn-glass { gap: 8px; padding: 0 10px; } }
.rv4-adm { display: grid; gap: 8px; margin-top: 10px; }
.rv4-adm-tx { margin: 0; line-height: 1.5; }
.pa-rv-locked { max-width: 760px; margin: 22px auto 0; }

/* ---------- Darslar: kitoblar javoni ---------- */
.bk-shelf-wrap { margin: 0 0 22px; }
.bk-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bk-head h2 { margin: 0; font: 800 20px var(--display); }
.bk-shelf { position: relative; display: flex; flex-wrap: wrap; gap: 18px 22px; padding: 16px 18px 14px; border-radius: 22px;
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 70%, transparent)); perspective: 900px; }
.bk { position: relative; z-index: 1; display: grid; gap: 7px; width: 124px; color: var(--text); text-decoration: none; }
.bk-cover { --c1: #333; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; aspect-ratio: 3 / 4.1;
  padding: 10px 8px 10px 14px; border-radius: 3px 9px 9px 3px; text-align: center; color: #fff;
  background: radial-gradient(120% 70% at 70% 0%, rgba(255, 255, 255, .17), transparent 60%), linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, .3), inset 8px 0 9px -6px rgba(255, 255, 255, .24), 0 16px 24px -14px rgba(0, 0, 0, .9);
  transform: rotateY(-14deg); transform-origin: left center; transition: transform .45s var(--ease-spring); }
.bk:hover .bk-cover { transform: rotateY(-3deg) translateY(-6px); }
.bk-foil { position: absolute; inset: 6px 5px 6px 12px; border: 1px solid rgba(245, 196, 81, .55); border-radius: 2px 6px 6px 2px; }
.bk-top { font: 700 7.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(245, 196, 81, .85); }
.bk-cover img { width: 46%; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .5)); }
.bk-cover b { font: 800 12.5px/1.12 Georgia, "Times New Roman", serif; color: #f8e3a8; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.bk-prog { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
.bk-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), #6ee7a8); transition: width .6s var(--ease-out); }
.bk small { color: var(--muted); font-size: 11.5px; min-height: 14px; }
@media (max-width: 900px) { .bk-shelf { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; } .bk { flex: none; width: 112px; scroll-snap-align: start; } }

/* ---------- Debyutlar: kitob ketma-ketligi paneli ---------- */
.op-seq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin: 10px 12px 0; padding: 8px; border-radius: 14px;
  background: linear-gradient(140deg, color-mix(in srgb, #a88764 22%, var(--surface-2)), var(--surface-2)); border: 1px solid color-mix(in srgb, #a88764 45%, var(--line)); }
.op-seq-b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 0; background: var(--surface); color: var(--text); cursor: pointer; }
.op-seq-b:disabled { opacity: .35; cursor: default; }
.op-seq-b .ic { width: 18px; height: 18px; }
.op-seq-tx { display: grid; gap: 2px; min-width: 0; }
.op-seq-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-seq-tx small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-seq-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; padding-inline-end: 4px; }
.op-seq-auto input { accent-color: #a88764; }
.op-line.cur { background: color-mix(in srgb, #a88764 24%, transparent); box-shadow: inset 3px 0 0 #a88764; }

/* keynote — avtomatik ijro (video kadri kabi, skrollga bog'liq emas) */
.kn.kn-auto { height: auto; padding: 0 28px; background: transparent; }
.kn-frame { position: relative; max-width: 1240px; height: min(84vh, 780px); min-height: 520px; margin: 0 auto; overflow: hidden; border-radius: 32px;
  background: #f4f1ea; color: #0b0b0c; cursor: pointer; box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
.kn-player { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 7; display: flex; align-items: center; gap: 12px; opacity: .45; transition: opacity .3s; }
.kn-frame:hover .kn-player, .kn.paused .kn-player { opacity: 1; }
.kn-pl-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(11, 11, 12, .82); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.kn-pl-ic { display: grid; }
.kn-pl-ic .ic { width: 18px; height: 18px; }
.kn-pl-bar { flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(11, 11, 12, .12); }
.kn-pl-bar i { display: block; height: 100%; background: #0b0b0c; transform-origin: 0 50%; transform: scaleX(0); }
html[dir="rtl"] .kn-pl-bar i { transform-origin: 100% 50%; }
.kn-static .kn-frame { cursor: default; }
@media (max-width: 640px) { .kn.kn-auto { padding: 0 12px; } .kn-frame { height: 78vh; min-height: 460px; border-radius: 24px; } .kn-player { opacity: .8; } }

/* =====================================================================
   O'quvchi faoliyati paneli (activity.js) — o'qituvchi va ota-ona sahifalari
   ===================================================================== */
.act { display: grid; gap: 16px; padding: 20px; margin-bottom: 18px; border-radius: 24px;
  background: radial-gradient(700px 260px at 0% 0%, rgba(56, 189, 248, .1), transparent 70%), var(--surface); }
.act-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.act-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.act-title-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; flex: none;
  background: linear-gradient(140deg, rgba(56, 189, 248, .25), rgba(167, 139, 250, .25)); }
.act-title h2 { margin: 0; font: 800 21px/1.15 var(--display); letter-spacing: -.02em; }
.act-title small { color: var(--muted); font-size: 13px; }
.act-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); gap: 2px; }
.act-seg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.act-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.act-seg.sm button { padding: 5px 9px; font-size: 12px; }
.act-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.act-tot { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px;
  border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.act-tot > span { grid-row: span 2; display: grid; }
.act-tot .ic-img { width: 26px; height: 26px; }
.act-tot b { font: 800 22px/1 var(--display); }
.act-tot small { color: var(--muted); font-size: 12px; }
.act-chart { min-height: 60px; }
.act-nochart { padding: 18px; text-align: center; border-radius: 14px; background: var(--surface-2); }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 10px; }
.act-card { --c: #38bdf8; display: grid; gap: 9px; align-content: start; padding: 13px; border-radius: 16px; text-align: start; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 9%, var(--surface-2)), var(--surface-2)); transition: transform .2s, border-color .2s, box-shadow .2s; }
.act-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.act-card.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.act-card.unused { opacity: .55; background: var(--surface-2); }
.act-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.act-card-top b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-card-n { font: 800 22px/1 var(--display); color: var(--c); }
.act-ic { --c: #38bdf8; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--c) 20%, transparent); }
.act-ic .ic, .act-ic .ic-img { width: 20px; height: 20px; }
.act-pzr-meta .act-ic { width: 20px; height: 20px; border-radius: 6px; }
.act-pzr-meta .act-ic .ic-img, .act-pzr-meta .act-ic .ic { width: 13px; height: 13px; }
.act-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.act-bar i { display: block; height: 100%; }
.act-bar.empty { opacity: .5; }
.act-card-rows { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.act-card-rows b { color: var(--text); }
.act-card-res { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.act-card-res i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 4px; }
.act-last { color: var(--muted-2); }
.act-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.act-col { display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.act-col-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.act-sel { width: auto; min-width: 150px; height: 34px; padding: 0 10px; font-size: 13px; }
.act-feed { display: grid; gap: 4px; max-height: 640px; overflow-y: auto; }
.act-day { position: sticky; top: 0; z-index: 1; padding: 6px 4px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); }
.act-ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 12px; }
.act-ev:hover { background: var(--surface); }
.act-ev .act-ic { width: 28px; height: 28px; border-radius: 9px; }
.act-ev-tx { display: grid; min-width: 0; }
.act-ev-tx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-ev-tx small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-ev-t { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.act-res { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.act-res.r-ok, .act-res.r-win { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.act-res.r-help, .act-res.r-draw { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.act-res.r-fail, .act-res.r-loss { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.act-res.r-done { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-2); }
.act-pz { display: grid; gap: 8px; max-height: 760px; overflow-y: auto; }
.act-pzr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--surface-3); cursor: pointer; }
.act-pzr.r-ok { border-inline-start-color: var(--ok); }
.act-pzr.r-help { border-inline-start-color: var(--warn); }
.act-pzr.r-fail { border-inline-start-color: var(--danger); }
.act-pzr-b .mini-board, .act-pzr-b > div { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; }
.act-noboard { width: 96px; height: 96px; border-radius: 8px; background: var(--surface-3); }
.act-pzr-tx { display: grid; gap: 4px; align-content: start; min-width: 0; }
.act-pzr-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.act-pzr-top b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.act-pzr-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.act-pzr-meta .bad { color: var(--danger); } .act-pzr-meta .warn { color: var(--warn); }
.act-pzr-foot { display: flex; align-items: center; gap: 10px; }
.act-sol { font-size: 13px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
@media (max-width: 1000px) { .act-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .act { padding: 14px; border-radius: 20px; }
  .act-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .act-card { padding: 10px; }
  .act-card-n { font-size: 18px; }
  .act-pzr { grid-template-columns: 78px minmax(0, 1fr); }
  .act-pzr-b .mini-board, .act-pzr-b > div, .act-noboard { width: 78px; height: 78px; }
}
@media (max-width: 640px) {
  .act-head { flex-direction: column; align-items: stretch; }
  .act-title { width: 100%; }
  .act-seg { width: 100%; overflow-x: auto; }
  .act-seg button { flex: 1; }
  .act-title h2 { font-size: 18px; }
}
@media (max-width: 520px) { .act-grid { grid-template-columns: minmax(0, 1fr); } }