/* Kidzy Audit Studio v5.0 — Arabic-complete + premium mobile header refinement */

@media(max-width:900px){
  :root{--mobile-header-bg:rgba(246,250,253,.93)}
  .topbar{
    isolation:isolate;
    padding:10px 12px 11px!important;
    gap:9px 10px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.93),rgba(246,250,253,.91))!important;
    border-bottom:1px solid rgba(32,44,102,.08)!important;
    box-shadow:0 10px 32px rgba(31,48,86,.08)!important;
    backdrop-filter:blur(24px) saturate(1.25)!important;
  }
  .topbar::before{
    content:"";position:absolute;inset:0 0 auto;height:2px;z-index:-1;
    background:linear-gradient(90deg,var(--studio-teal),rgba(54,183,197,.22) 28%,rgba(223,21,118,.2) 70%,var(--studio-pink));
    opacity:.72;
  }
  .topbar::after{
    content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(53,184,197,.24),rgba(223,21,118,.18),transparent);
  }
  .topbar.scrolled{box-shadow:0 14px 36px rgba(26,44,80,.13)!important}

  #menuBtn.premium-menu-btn{
    width:44px!important;height:44px!important;border-radius:15px!important;
    border:1px solid rgba(32,44,102,.12)!important;
    background:linear-gradient(180deg,#fff,#f7f9fc)!important;
    box-shadow:0 8px 22px rgba(31,48,86,.09),inset 0 1px 0 rgba(255,255,255,.96)!important;
    display:grid!important;place-items:center!important;padding:0!important;
  }
  .menu-lines{display:grid;gap:4px;width:18px}
  .menu-lines i{display:block;height:2px;border-radius:999px;background:var(--studio-navy);transition:transform .2s ease,width .2s ease;justify-self:center}
  .menu-lines i:nth-child(1){width:15px}.menu-lines i:nth-child(2){width:18px}.menu-lines i:nth-child(3){width:12px}
  body.nav-open .menu-lines i:nth-child(1){width:17px;transform:translateY(6px) rotate(45deg)}
  body.nav-open .menu-lines i:nth-child(2){opacity:0}
  body.nav-open .menu-lines i:nth-child(3){width:17px;transform:translateY(-6px) rotate(-45deg)}

  .mobile-brand{
    gap:10px!important;justify-self:center;justify-content:center;min-width:0;
    padding:2px 8px 2px 4px;border-radius:15px;
  }
  .mobile-brand .mini-mark{
    width:39px!important;height:39px!important;border-radius:13px!important;
    background:linear-gradient(160deg,#fff,rgba(231,247,250,.9))!important;
    border:1px solid rgba(54,183,197,.24)!important;
    box-shadow:0 8px 20px rgba(38,87,111,.08)!important;
    display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:3px!important;padding:8px 7px!important;
  }
  .mobile-brand .mini-mark i{display:block;width:5px;border-radius:999px 999px 3px 3px;box-shadow:0 2px 5px rgba(20,36,72,.08)}
  .mobile-brand .mini-mark i:nth-child(1){height:13px;background:var(--lime)}
  .mobile-brand .mini-mark i:nth-child(2){height:21px;background:var(--orange)}
  .mobile-brand .mini-mark i:nth-child(3){height:17px;background:var(--studio-pink)}
  .mobile-brand-copy{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:end;min-width:0}
  .mobile-brand strong{grid-column:1;grid-row:1;font-size:13px!important;letter-spacing:.05em;color:var(--studio-navy)!important;font-weight:950!important;line-height:1!important}
  .mobile-studio-label{grid-column:2;grid-row:1;color:var(--studio-teal);font-size:7.5px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;line-height:1}
  .mobile-brand small{grid-column:1/-1;grid-row:2;margin-top:4px!important;max-width:170px!important;font-size:9.5px!important;color:#77859d!important;font-weight:650;line-height:1.25!important}
  html[dir="rtl"] .mobile-studio-label{letter-spacing:0;text-transform:none;font-family:Cairo,system-ui,sans-serif}
  html[dir="rtl"] .mobile-brand-copy{text-align:right}

  .top-actions .language-switch{
    min-width:82px!important;height:44px!important;border-radius:15px!important;
    border:1px solid rgba(54,183,197,.2)!important;
    background:linear-gradient(180deg,#fff,#f5fbfc)!important;
    color:var(--studio-navy)!important;font-weight:850!important;
    box-shadow:0 8px 22px rgba(31,48,86,.07),inset 0 1px 0 #fff!important;
    padding:7px 9px!important;
  }
  .top-actions .language-switch .lang-icon{
    width:27px!important;height:27px!important;border-radius:10px!important;
    background:rgba(54,183,197,.11)!important;color:#089cac!important;font-weight:950!important;
    display:grid!important;place-items:center!important;
  }
  .top-actions .language-switch .lang-label{font-size:11px!important;font-weight:850!important;max-width:48px!important}

  .global-search-wrap{
    min-height:48px!important;border-radius:16px!important;
    border:1px solid rgba(32,44,102,.09)!important;background:rgba(255,255,255,.9)!important;
    box-shadow:0 8px 25px rgba(30,48,85,.055),inset 0 1px 0 rgba(255,255,255,.96)!important;
    padding-inline:13px!important;
  }
  .global-search-wrap>span[aria-hidden="true"]{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#f1f7fa;color:var(--studio-teal);font-size:15px;font-weight:900}
  .global-search-wrap input{height:46px!important;font-size:13px!important;font-weight:560;color:#263154!important;padding-inline:7px!important}
  .global-search-wrap input::placeholder{color:#8791a4!important;opacity:1}
  html[dir="rtl"] .global-search-wrap input{font-family:Cairo,system-ui,sans-serif}

  .mobile-reading-progress{height:3px!important;margin:2px 2px -3px!important;background:rgba(32,44,102,.07)!important}
  .mobile-reading-progress span{box-shadow:0 0 10px rgba(54,183,197,.35)}

  /* Slightly calmer top spacing now that the header feels like an app chrome. */
  main{padding-top:18px!important}
}

@media(max-width:620px){
  .topbar{padding:9px 10px 10px!important;gap:8px 8px!important}
  #menuBtn.premium-menu-btn{width:42px!important;height:42px!important;border-radius:14px!important}
  .mobile-brand .mini-mark{width:37px!important;height:37px!important;border-radius:12px!important;padding:7px 6px!important}
  .mobile-brand strong{font-size:12.5px!important}
  .mobile-studio-label{font-size:7px}
  .mobile-brand small{font-size:9px!important;max-width:145px!important}
  .top-actions .language-switch{height:42px!important;min-width:78px!important;border-radius:14px!important;padding:6px 8px!important}
  .global-search-wrap{min-height:46px!important;border-radius:15px!important}
  .global-search-wrap input{height:44px!important;font-size:12.5px!important}
}

@media(max-width:380px){
  .topbar{grid-template-columns:42px minmax(0,1fr) 72px!important}
  .mobile-brand{gap:7px!important;padding-inline:2px!important}
  .mobile-brand .mini-mark{width:34px!important;height:34px!important;padding:6px 5px!important}
  .mobile-brand strong{font-size:11.5px!important}
  .mobile-studio-label{display:none}
  .mobile-brand small{max-width:115px!important;font-size:8.6px!important}
  .top-actions .language-switch{min-width:70px!important;padding-inline:6px!important}
  .top-actions .language-switch .lang-icon{width:24px!important;height:24px!important}
  .top-actions .language-switch .lang-label{font-size:10px!important;max-width:38px!important}
}