/* ================================================================
   MEGABRAIN — ONLINE O'QUVCHI SAHIFASI
   v20260825
   - Zamonaviy student-first UI
   - 1366x768 va barcha desktop/tablet/telefon o'lchamlari
   - Javob kartasi ekran bo'ylab to'liq ishlatiladi
   - Portret telefonda ham o'yin ishlaydi; majburiy rotate yo'q
   - Faqat #pageOnlineStudent ichida ishlaydi
================================================================ */
#pageOnlineStudent{
  --os-bg:#f6f8ff;
  --os-card:rgba(255,255,255,.96);
  --os-border:rgba(99,102,241,.14);
  --os-text:#172554;
  --os-muted:#64748b;
  --os-primary:#5b5cf0;
  --os-primary2:#7c3aed;
  --os-green:#10b981;
  --os-red:#ef4444;
  --os-shadow:0 18px 55px rgba(30,41,99,.12);
  position:relative;
  min-height:100dvh !important;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 8% 10%,rgba(129,140,248,.18),transparent 28%),
    radial-gradient(circle at 92% 88%,rgba(45,212,191,.14),transparent 30%),
    linear-gradient(135deg,#f8faff 0%,#eef2ff 52%,#f8fafc 100%) !important;
}
#pageOnlineStudent::before,
#pageOnlineStudent::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(10px);
}
#pageOnlineStudent::before{width:260px;height:260px;top:-120px;right:8%;background:rgba(124,58,237,.08);}
#pageOnlineStudent::after{width:320px;height:320px;bottom:-180px;left:5%;background:rgba(6,182,212,.08);}

/* top status */
#pageOnlineStudent .og-tg-topbar{
  position:relative;z-index:5;
  height:58px;min-height:58px;
  padding:8px clamp(12px,3vw,34px) !important;
  display:flex !important;align-items:center;justify-content:space-between !important;
  background:rgba(255,255,255,.78) !important;
  border-bottom:1px solid rgba(99,102,241,.10) !important;
  box-shadow:0 5px 22px rgba(30,41,99,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
#pageOnlineStudent .og-tg-pill{
  min-width:112px;height:38px;padding:7px 14px !important;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid rgba(99,102,241,.12) !important;border-radius:14px !important;
  background:rgba(255,255,255,.94) !important;color:var(--os-text) !important;
  box-shadow:0 5px 16px rgba(30,41,99,.07);
  font-size:13px;font-weight:900;letter-spacing:.01em;
}
#pageOnlineStudent #ogStProgress::before{content:"●";font-size:9px;color:#10b981;}
#pageOnlineStudent #ogStScore{min-width:86px;color:#7c2d12 !important;background:linear-gradient(135deg,#fff7ed,#fff) !important;}

/* hide repeat button becomes a compact floating action */
#pageOnlineStudent .og-fs-repeat-btn{
  position:fixed !important;right:18px;top:72px;z-index:20;
  border:1px solid rgba(99,102,241,.15) !important;
  background:#fff !important;color:var(--os-primary) !important;
  border-radius:999px !important;padding:9px 14px !important;
  box-shadow:0 10px 26px rgba(30,41,99,.12);
  font-weight:900;cursor:pointer;
}

/* main shell */
#pageOnlineStudent .og-st-wrap{
  width:100%;height:calc(100dvh - 58px);
  max-width:none !important;margin:0 !important;
  padding:clamp(8px,1.5vh,16px) clamp(10px,2vw,28px) !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;
}

/* start / waiting / finish */
#pageOnlineStudent #ogStStart,
#pageOnlineStudent #ogStWaiting,
#pageOnlineStudent #ogStFinished{
  width:min(720px,92vw);max-width:720px !important;
  margin:auto !important;padding:clamp(20px,5vh,42px) clamp(18px,4vw,44px) !important;
  border:1px solid var(--os-border);border-radius:28px;
  background:var(--os-card);box-shadow:var(--os-shadow);
}
#pageOnlineStudent #ogStStart > div:first-child{font-size:clamp(42px,8vh,72px) !important;filter:drop-shadow(0 8px 15px rgba(91,92,240,.18));}
#pageOnlineStudent #ogStStart > div:nth-child(2){font-size:clamp(14px,2vw,18px);line-height:1.55;}
#pageOnlineStudent .og-hide-toggle-row{
  width:min(440px,100%);margin:12px auto 18px;padding:11px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#f8faff;border:1px solid #e0e7ff;border-radius:15px;
}
#pageOnlineStudent .og-hide-toggle-label{font-weight:900;color:var(--os-text);font-size:14px;}
#pageOnlineStudent .og-btn.og-btn-primary{
  min-width:190px;padding:13px 22px !important;border-radius:15px !important;
  background:linear-gradient(135deg,var(--os-primary),var(--os-primary2)) !important;
  box-shadow:0 10px 24px rgba(91,92,240,.28);
  font-size:15px !important;font-weight:950 !important;
}
#pageOnlineStudent .og-st-waiting{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
#pageOnlineStudent .og-st-waiting .spin{font-size:52px;filter:drop-shadow(0 8px 14px rgba(91,92,240,.15));}
#pageOnlineStudent #ogStFinished h2{font-family:'Baloo 2',sans-serif;font-size:clamp(26px,4vw,40px);color:var(--os-text);margin-top:8px;}
#pageOnlineStudent #ogStFinished button{min-width:170px;}

/* Ekran sequential display */
#pageOnlineStudent .og-st-ekran-display{
  width:min(1100px,94vw) !important;
  height:min(72dvh,620px) !important;min-height:220px !important;
  margin:auto !important;border-radius:30px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,244,255,.96)) !important;
  border:1px solid rgba(99,102,241,.14) !important;
  box-shadow:0 22px 65px rgba(30,41,99,.13) !important;
  position:relative;
}
#pageOnlineStudent .og-st-ekran-number{
  font-size:clamp(100px,18vh,220px) !important;
  text-shadow:0 12px 30px rgba(91,92,240,.12);
}

/* answer stage */
#pageOnlineStudent #ogStPlay{
  width:100%;height:100%;min-height:0;display:flex;align-items:stretch;
}
#pageOnlineStudent .og-st-play-row{
  width:100%;height:100%;max-width:1320px !important;
  margin:0 auto !important;padding:0 !important;
  display:grid !important;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);
  gap:clamp(10px,1.5vw,20px);align-items:stretch;
}
#pageOnlineStudent #ogStUstunCol.og-ustun-col{
  width:100%;height:100%;min-height:0;max-width:none !important;flex:none !important;
  padding:clamp(12px,2vh,22px) !important;
  border-radius:24px !important;border:1px solid var(--os-border) !important;
  background:linear-gradient(145deg,#ffffff,#f7f8ff) !important;
  box-shadow:var(--os-shadow) !important;
  overflow:auto;
}
#pageOnlineStudent .og-st-answer-col{
  width:100%;height:100%;min-width:0;min-height:0;
  padding:clamp(10px,1.8vh,18px) !important;
  border-radius:24px;border:1px solid var(--os-border);
  background:rgba(255,255,255,.78);box-shadow:var(--os-shadow);
  overflow:hidden;
}
#pageOnlineStudent .og-st-answer-title{
  height:34px;display:flex;align-items:center;justify-content:center;
  flex:0 0 34px !important;color:var(--os-text) !important;
  font-size:clamp(14px,1.6vw,18px) !important;font-weight:950 !important;
}
#pageOnlineStudent .og-st-shapes-wrap{
  flex:1 1 auto !important;width:100% !important;height:auto !important;min-height:0 !important;
  margin:8px 0 !important;border-radius:22px !important;
  background:radial-gradient(circle at 50% 35%,#ffffff 0%,#f7f8ff 70%) !important;
  border:1px solid #e3e8ff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px rgba(30,41,99,.06) !important;
  overflow:hidden;
}
#pageOnlineStudent .og-st-safe-grid{overflow:hidden !important;}
#pageOnlineStudent .og-st-feedback{
  flex:0 0 auto !important;min-height:30px !important;height:auto;
  margin:0 !important;padding:4px 8px !important;border-radius:10px;
  font-size:clamp(12px,1.5vw,16px) !important;
}
#pageOnlineStudent .og-st-feedback.ok{background:#ecfdf5;color:#047857 !important;}
#pageOnlineStudent .og-st-feedback.bad{background:#fef2f2;color:#b91c1c !important;}
#pageOnlineStudent .og-ustun-line{
  font-size:clamp(24px,6vh,70px) !important;line-height:1.02 !important;
  font-weight:900 !important;color:var(--os-text) !important;
}

/* make shapes comfortable on touch */
#pageOnlineStudent .og-st-safe-shape .u1-shape{
  cursor:pointer;touch-action:manipulation;
  box-shadow:0 8px 18px rgba(30,41,99,.10);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
#pageOnlineStudent .og-st-safe-shape:not(.og-st-empty-shape) .u1-shape:hover{transform:scale(1.05);filter:saturate(1.06);}
#pageOnlineStudent .og-st-safe-shape:not(.og-st-empty-shape) .u1-shape:active{transform:scale(.94);}

/* desktop / notebook 1366x768 */
@media (min-width:901px) and (max-height:850px){
  #pageOnlineStudent .og-tg-topbar{height:52px;min-height:52px;}
  #pageOnlineStudent .og-st-wrap{height:calc(100dvh - 52px);padding:7px 14px !important;}
  #pageOnlineStudent .og-st-play-row{gap:12px;}
  #pageOnlineStudent #ogStUstunCol.og-ustun-col,
  #pageOnlineStudent .og-st-answer-col{border-radius:20px;}
  #pageOnlineStudent .og-st-answer-col{padding:8px !important;}
  #pageOnlineStudent .og-st-answer-title{height:28px;flex-basis:28px !important;font-size:14px !important;}
  #pageOnlineStudent .og-st-shapes-wrap{margin:5px 0 !important;border-radius:18px !important;}
  #pageOnlineStudent .og-st-feedback{min-height:24px !important;font-size:13px !important;}
  #pageOnlineStudent .og-ustun-line{font-size:clamp(22px,5.7vh,52px) !important;}
}

/* tablet */
@media (max-width:900px){
  #pageOnlineStudent{height:auto;min-height:100dvh;overflow:auto;}
  #pageOnlineStudent .og-st-wrap{height:auto;min-height:calc(100dvh - 58px);overflow:visible;padding:12px !important;}
  #pageOnlineStudent .og-st-play-row{height:min(78dvh,720px);grid-template-columns:minmax(180px,.68fr) minmax(0,1.32fr);gap:10px;}
  #pageOnlineStudent #ogStUstunCol.og-ustun-col,
  #pageOnlineStudent .og-st-answer-col{border-radius:19px;}
  #pageOnlineStudent .og-st-answer-col{padding:8px !important;}
  #pageOnlineStudent .og-st-shapes-wrap{border-radius:17px !important;}
}

/* phone portrait: stack the example and answer area, no forced rotation */
@media (max-width:640px){
  #pageOnlineStudent .og-tg-topbar{height:52px;min-height:52px;padding:7px 9px !important;}
  #pageOnlineStudent .og-tg-pill{height:36px;min-width:0;padding:6px 11px !important;border-radius:12px !important;font-size:12px;}
  #pageOnlineStudent .og-fs-repeat-btn{top:62px;right:9px;padding:7px 11px !important;font-size:11px;}
  #pageOnlineStudent .og-st-wrap{min-height:calc(100dvh - 52px);padding:8px !important;}
  #pageOnlineStudent .og-st-play-row{height:auto;min-height:calc(100dvh - 68px);display:flex !important;flex-direction:column !important;gap:8px;}
  #pageOnlineStudent #ogStUstunCol.og-ustun-col{height:auto;min-height:110px;max-height:32dvh;overflow:auto;flex:0 0 auto;padding:10px !important;}
  #pageOnlineStudent .og-ustun-line{font-size:clamp(21px,7vw,38px) !important;}
  #pageOnlineStudent .og-st-answer-col{height:clamp(330px,63dvh,560px);min-height:330px;flex:1 1 auto;padding:7px !important;}
  #pageOnlineStudent .og-st-answer-title{height:27px;flex-basis:27px !important;font-size:13px !important;}
  #pageOnlineStudent .og-st-shapes-wrap{margin:5px 0 !important;border-radius:16px !important;}
  #pageOnlineStudent .og-st-feedback{min-height:24px !important;font-size:12px !important;}
  #pageOnlineStudent .og-st-rotate-hint{display:none !important;}
  #pageOnlineStudent #ogStStart,
  #pageOnlineStudent #ogStWaiting,
  #pageOnlineStudent #ogStFinished{width:calc(100vw - 20px);border-radius:22px;padding:24px 16px !important;}
  #pageOnlineStudent .og-st-ekran-display{width:calc(100vw - 20px) !important;height:58dvh !important;min-height:230px !important;border-radius:22px !important;}
  #pageOnlineStudent .og-st-ekran-number{font-size:clamp(80px,24vw,145px) !important;}
}

/* small landscape phones */
@media (max-width:900px) and (orientation:landscape) and (max-height:560px){
  #pageOnlineStudent{height:100dvh;overflow:hidden;}
  #pageOnlineStudent .og-tg-topbar{height:44px;min-height:44px;}
  #pageOnlineStudent .og-st-wrap{height:calc(100dvh - 44px);min-height:0;padding:5px 8px !important;}
  #pageOnlineStudent .og-st-play-row{height:100%;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:7px;}
  #pageOnlineStudent #ogStUstunCol.og-ustun-col,
  #pageOnlineStudent .og-st-answer-col{border-radius:15px;padding:5px !important;}
  #pageOnlineStudent .og-st-answer-title{height:22px;flex-basis:22px !important;font-size:11px !important;}
  #pageOnlineStudent .og-st-shapes-wrap{margin:3px 0 !important;border-radius:12px !important;}
  #pageOnlineStudent .og-st-feedback{min-height:19px !important;font-size:10px !important;}
  #pageOnlineStudent .og-ustun-line{font-size:clamp(18px,7vh,38px) !important;}
}

/* accessibility / reduced motion */
@media(prefers-reduced-motion:reduce){
  #pageOnlineStudent *,#pageOnlineStudent *::before,#pageOnlineStudent *::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}