/* =====================================================================
   Chap tomondagi menyu (sidebar) — yuqori menyu o'rniga.
   Kompyuter/planshetda (>=761px): ixcham ikonkalar paneli, sichqoncha
   olib borilganda avtomatik ochiladi, olib ketilganda yopiladi.
   "Qadash" tugmasi bilan doim ochiq holda qoldirish mumkin.
   Telefonda (<=760px) avvalgidek yuqori panel + pastki menyu qoladi.
   ===================================================================== */
.sb-label,.sb-pin,.sb-user-name{display:none}
.sb-user{display:contents}

@media (min-width:761px){
  :root{--sb-w:84px;--sb-wx:256px;--sb-bg1:#e11d2e;--sb-bg2:#c8142a;--sb-bg3:#a10f22;--sb-ink:#fff;--sb-mut:rgba(255,255,255,.66);--sb-acc:#fff}

  .app-body{padding-left:var(--sb-w)}
  .app-body.sb-pinned{padding-left:var(--sb-wx)}

  /* ---- panel ---- */
  .app-body .topbar{position:fixed;top:0;left:0;bottom:0;z-index:45;width:var(--sb-w);
    background:linear-gradient(180deg,var(--sb-bg1) 0%,var(--sb-bg2) 55%,var(--sb-bg3) 100%);
    border:0;border-right:1px solid rgba(255,255,255,.06);color:var(--sb-ink);
    transition:width .22s cubic-bezier(.2,.8,.2,1) .1s,box-shadow .22s .1s;will-change:width;contain:layout style}
  .app-body.sb-pinned .topbar,.app-body .topbar.sb-open{width:var(--sb-wx)}
  @media (hover:hover){
    .app-body .topbar:hover,.app-body .topbar:has(.lang-sel:focus),.app-body .topbar:has(:focus-visible){width:var(--sb-wx);transition-delay:.06s}
  }
  .app-body:not(.sb-pinned) .topbar.sb-open{box-shadow:12px 0 40px rgba(15,23,42,.28)}
  @media (hover:hover){.app-body:not(.sb-pinned) .topbar:hover{box-shadow:12px 0 40px rgba(15,23,42,.28)}}

  .app-body .topbar-inner{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    height:100%;max-width:none;margin:0;padding:14px 12px 14px;overflow:visible}
  .app-body .topbar .logo,.app-body .topbar .top-right,.app-body .topbar .sb-user{overflow:hidden}

  /* ---- logo ---- */
  .app-body .topbar .logo{display:flex;align-items:center;gap:12px;height:56px;padding:0 6px;margin:0 0 6px;color:var(--sb-ink);
    font-size:19px;white-space:nowrap;text-decoration:none}
  .app-body .topbar .logo-mark{width:48px;height:48px;padding:0;border:0;border-radius:11px;background:none;box-shadow:0 6px 16px rgba(80,0,10,.35)}
  .app-body .topbar .logo span{display:block;line-height:1.15}
  .app-body .topbar .logo span b{color:#ffd5da}
  .app-body .topbar .logo span::after{content:"IELTS Platform";display:block;margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--sb-mut)}
  .app-body .topbar .logo span,.app-body .topbar .mainnav button span,.app-body .topbar .sb-label span,.app-body .topbar .sb-user-name{
    opacity:0;transition:opacity .15s}
  .app-body.sb-pinned .topbar .logo span,.app-body.sb-pinned .topbar .mainnav button span,.app-body.sb-pinned .topbar .sb-label span,.app-body.sb-pinned .topbar .sb-user-name,
  .app-body .topbar.sb-open .logo span,.app-body .topbar.sb-open .mainnav button span,.app-body .topbar.sb-open .sb-label span,.app-body .topbar.sb-open .sb-user-name{opacity:1;transition-delay:.08s}
  @media (hover:hover){
    .app-body .topbar:hover .logo span,.app-body .topbar:hover .mainnav button span,.app-body .topbar:hover .sb-label span,.app-body .topbar:hover .sb-user-name,
    .app-body .topbar:has(.lang-sel:focus) :is(.logo span,.mainnav button span,.sb-label span,.sb-user-name),
    .app-body .topbar:has(:focus-visible) :is(.logo span,.mainnav button span,.sb-label span,.sb-user-name){opacity:1;transition-delay:.12s}
  }

  /* ---- qadash tugmasi ---- */
  .app-body .sb-pin{display:grid;place-items:center;position:absolute;top:28px;right:-13px;z-index:2;width:26px;height:26px;padding:0;
    border-radius:50%;border:1px solid rgba(255,255,255,.25);background:var(--sb-bg2);color:#fff;cursor:pointer;
    box-shadow:0 4px 12px rgba(15,23,42,.3);opacity:0;transform:scale(.8);transition:opacity .15s,transform .15s,background .15s}
  .app-body .sb-pin svg{width:14px;height:14px;transition:transform .2s}
  .app-body.sb-pinned .sb-pin svg{transform:rotate(180deg)}
  .app-body .sb-pin:hover{background:#fff;color:var(--sb-bg2)}
  .app-body .topbar.sb-open .sb-pin,.app-body.sb-pinned .sb-pin,.app-body .sb-pin:focus-visible{opacity:1;transform:none}
  @media (hover:hover){.app-body .topbar:hover .sb-pin{opacity:1;transform:none}}
  @media (hover:none){.app-body .sb-pin{opacity:1;transform:none}}

  /* ---- menyu ---- */
  .app-body .topbar .mainnav{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:1 1 auto;min-height:0;
    margin:0 -12px;padding:4px 12px 10px;background:none;border-radius:0;overflow-y:auto;overflow-x:hidden;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;overscroll-behavior:contain}
  .app-body .topbar .mainnav::-webkit-scrollbar{width:6px}
  .app-body .topbar .mainnav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:6px}

  .app-body .topbar .mainnav button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:16px;flex:none;
    width:100%;height:54px;padding:0 15px;margin:0;border:1px solid transparent;border-radius:12px;background:none;box-shadow:none;
    color:rgba(255,255,255,.86);font-family:inherit;font-size:15px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
    transition:background .15s,border-color .15s,color .15s}
  .app-body .topbar .mainnav button span{display:inline!important;overflow:hidden;text-overflow:ellipsis}
  .app-body .topbar .mainnav button>svg{width:30px!important;height:30px!important;flex:none;color:#fff!important;stroke-width:2.2}
  .app-body .topbar .mainnav button:hover{background:rgba(255,255,255,.12);color:#fff}
  .app-body .topbar .mainnav button.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.28);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(80,0,10,.18)}
  .app-body .topbar .mainnav button.active::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--sb-acc)}
  .app-body .topbar .mainnav button:focus-visible{outline:2px solid var(--sb-acc);outline-offset:1px}

  /* bo'lim sarlavhalari */
  .app-body .topbar .sb-label{display:flex;align-items:center;position:relative;flex:none;height:30px;margin-top:6px;padding:0 6px;
    font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sb-mut);white-space:nowrap}
  .app-body .topbar .sb-label::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:1px;background:rgba(255,255,255,.14);transition:opacity .15s}
  .app-body.sb-pinned .topbar .sb-label::before,.app-body .topbar.sb-open .sb-label::before{opacity:0}
  @media (hover:hover){.app-body .topbar:hover .sb-label::before{opacity:0}}

  /* tartib (keyin qo'shiladigan tugmalar ham to'g'ri joyga tushadi) */
  .app-body .topbar .mainnav>*{order:50}
  .app-body .topbar .mainnav [data-nav=home]{order:1}
  .app-body .topbar .mainnav [data-sb=practice]{order:2}
  .app-body .topbar .mainnav [data-nav=listening]{order:3}
  .app-body .topbar .mainnav [data-nav=reading]{order:4}
  .app-body .topbar .mainnav [data-nav=writing]{order:5}
  .app-body .topbar .mainnav [data-nav=speaking]{order:6}
  .app-body .topbar .mainnav [data-nav=mock]{order:7}
  .app-body .topbar .mainnav [data-sb=learn]{order:10}
  .app-body .topbar .mainnav [data-nav=vocab]{order:11}
  .app-body .topbar .mainnav [data-nav=tutor]{order:12}
  .app-body .topbar .mainnav [data-sb=progress]{order:20}
  .app-body .topbar .mainnav [data-nav=history]{order:21}

  /* ---- pastki qism: til va profil ---- */
  .app-body .topbar .top-right{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
  .app-body .topbar .lang-sel{width:100%;height:38px;padding:0 30px 0 14px;border:1px solid rgba(255,255,255,.18);border-radius:11px;color:#fff;font-family:inherit;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/14px no-repeat rgba(255,255,255,.08);
    transition:background-color .15s,border-color .15s}
  .app-body .topbar .lang-sel:hover,.app-body .topbar .lang-sel:focus{border-color:rgba(255,255,255,.4);background-color:rgba(255,255,255,.14)}
  .app-body .topbar .lang-sel option{color:#16171b;background:#fff}
  .app-body:not(.sb-pinned) .topbar:not(.sb-open) .lang-sel{padding:0;background-image:none;text-align:center;text-align-last:center}
  @media (hover:hover){.app-body:not(.sb-pinned) .topbar:not(.sb-open):hover .lang-sel{padding:0 30px 0 14px;text-align:left;text-align-last:left;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}}

  .app-body .topbar .sb-user{display:flex;align-items:center;gap:12px;height:56px;padding:0 6px;border-radius:12px;cursor:pointer;white-space:nowrap;transition:background .15s}
  .app-body .topbar .sb-user:hover{background:rgba(255,255,255,.08)}
  .app-body .topbar .sb-user:has(.avatar-btn.active){background:rgba(255,255,255,.13)}
  .app-body .topbar .avatar-btn{width:48px;height:48px;font-size:19px;border:2px solid rgba(255,255,255,.85);background:#fff;color:var(--sb-bg2);flex:none}
  .app-body .topbar .avatar-btn.active,.app-body .topbar .avatar-btn:hover{box-shadow:0 0 0 3px rgba(255,255,255,.4)}
  .app-body .topbar .avatar-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .app-body .topbar .sb-user-name{display:block;font-size:15px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis}

  /* ---- yuqori panel yo'qolgani uchun yopishqoq bloklar balandligi ---- */
  .app-body .side,.app-body .home-side,.app-body .ex-log-card{top:24px}
  .app-body .run-bar{top:12px}
  .app-body .passage{top:88px;max-height:calc(100vh - 160px)}
  .app-body .vo-bar{top:8px}
}

@media (min-width:761px) and (prefers-reduced-motion:reduce){
  .app-body .topbar,.app-body .topbar *{transition:none!important}
}
@media print{
  .app-body,.app-body.sb-pinned{padding-left:0!important}
  .app-body .topbar{display:none!important}
}