/* GenMasterAI base.css — v140.2
   Ye rules pehle js/site.js se LATE inject hote the (script defer hone ki
   wajah se ~1s baad). Us waqt text reflow hota tha = mobile CLS 0.15-0.18
   (Lighthouse aur field data dono me). Ab ye ek static, cached CSS file
   hai jo pages <link> se load karte hain — first paint se pehle apply hota
   hai, isliye koi shift nahi. site.js me ab sirf dark-mode TOGGLE logic
   hai (data-theme attribute), CSS yahan. */

/* ---------- readability (v132 se same values) ---------- */
html{font-size:17px}
body{font-size:17px!important;line-height:1.7!important;-webkit-font-smoothing:antialiased!important}
p, li, td, th, .card p, .sub p, .out, .cbbody{font-size:16.5px!important;line-height:1.7!important}
.menu a, .l a{font-size:15.5px!important}
label,.hint,.bdg,.badge,.uplbl,nav .in,nav .l{font-size:14.5px!important}
.chips .chip, .chips span, .tag{font-size:13.5px!important}
input,select,textarea{font-size:16px!important;padding:13px 15px!important}
button.go,.cta,.whatsapp,.btn{font-size:16.5px!important}
.sub{font-size:clamp(17px,2.3vw,20.5px)!important;line-height:1.65!important}
h1{letter-spacing:-.5px!important}
h2{font-size:clamp(25px,3.5vw,36px)!important}
h3{font-size:20px!important}
.card .ic{font-size:34px!important}
@media (max-width:768px){body{font-size:16.5px!important}p,li,td,th,.card p{font-size:16px!important}.menu a,.l a{font-size:15px!important}}

/* ---------- dark mode variables ---------- */

  [data-theme="dark"]{--bg:#0f0f1a!important;--tx:#e8e8f0!important;--mut:#9ca3af!important;--card:#1a1a2e!important;--card2:#232340!important;--bg2:#1a1a2e!important;--line:#2d2d47!important}
  [data-theme="dark"] body{background:var(--bg)!important;color:var(--tx)!important}
  [data-theme="dark"] .card,[data-theme="dark"] nav,[data-theme="dark"] .bar,[data-theme="dark"] .out,[data-theme="dark"] #quizApp,[data-theme="dark"] .question-card,[data-theme="dark"] .cert-card,[data-theme="dark"] .tool-intro,[data-theme="dark"] .editor-wrap,[data-theme="dark"] .rwrap{background:var(--card)!important;border-color:var(--line)!important;color:var(--tx)!important}
  [data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .chip{background:var(--card2)!important;border-color:var(--line)!important;color:var(--tx)!important}
  [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] p,[data-theme="dark"] span,[data-theme="dark"] div,[data-theme="dark"] li,[data-theme="dark"] td,[data-theme="dark"] th,[data-theme="dark"] label{color:var(--tx)!important}
  [data-theme="dark"] a{color:#c4b5fd!important}
  [data-theme="dark"] .chip.inactive{background:var(--card2)!important;color:var(--mut)!important}
  [data-theme="dark"] .sub,[data-theme="dark"] .hint,[data-theme="dark"] .uplbl,[data-theme="dark"] .mut,[data-theme="dark"] .menu a,[data-theme="dark"] .l a{color:var(--mut)!important}
  [data-theme="dark"] .chip.active,[data-theme="dark"] .cta{box-shadow:none!important}
  [data-theme="dark"] img{opacity:.9}
  [data-theme="dark"] #searchBox,[data-theme="dark"] #searchResults{background:var(--card)!important;border-color:var(--line)!important;color:var(--tx)!important}
  [data-theme="dark"] .sr-item:hover{background:var(--card2)!important}
  [data-theme="dark"] #liveStats{background:linear-gradient(135deg,#0a2e1a,#2e2a0a)!important;border-color:#166534!important;color:#bbf7d0!important}
  [data-theme="dark"] .whatsapp{filter:brightness(.9)}
  [data-theme="dark"] .toggleBtn:hover,[data-theme="dark"] #darkToggle:hover{background:var(--card2)!important}
  @media print{[data-theme="dark"]{--bg:#fff!important;--tx:#1f1f2e!important;--card:#fff!important}}
  

/* ---------- nav search slot (v140.3 CLS fix) ----------
   js/site.js nav ke andar search box inject karta hai (logo ke baad). Pehle ye
   inject hote hi nav ki height 54->60px ho jaati thi aur nav links ka space
   238px se 102px par sikud jaata tha = mobile CLS ~0.16 (pricing/stats/library).
   Ab ye khaali slot HTML me pehle se hota hai: inject hone par sirf slot bharta
   hai, layout hilta nahi. */
.gm-navsearch{position:relative;display:inline-flex;align-items:center;
 margin-left:8px;flex:1 1 auto;max-width:260px;min-width:120px;
 min-height:37px}
@media(max-width:760px){
 .gm-navsearch{min-width:88px;min-height:35px;margin-left:6px}
}

/* v143.3 — drawer menu khula ho to chat FAB uske upar na aaye (FAB 'Sign in' ka
   tap kha jata tha, khaas kar 1366px aur chhoti screens par). :has() na ho to
   FAB normal rehta hai, kuch tootta nahi. */
body:has(.menu.open) .cbfab, body:has(nav.open) .cbfab,
body:has(.menu.open) #gm-robo-fab, body:has(nav.open) #gm-robo-fab,
body:has(.menu.open) #toTop, body:has(nav.open) #toTop{opacity:0;visibility:hidden;pointer-events:none}

/* v144 audit: lambe slash-wale words (Sci/Geo/Eco...) aur URLs mobile par page ko
   chaudा kar dete the — text break ho jaye, table scroll kare. */
p,li,td,th,h1,h2,h3,h4,b,strong,a,blockquote,div{overflow-wrap:anywhere}
table{max-width:100%}

/* v144.3 nav: chhoti screens par saare nav links ek line me fit nahi hote the
   (hub/free-courses/stats jaise pages par header 666px tak chौड़ा ho jata tha).
   Ab nav khud swipe-able strip hai, page-level horizontal scroll khatam. */
@media(max-width:900px){
  nav{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none;height:0}
  nav .in{flex-wrap:nowrap!important;min-width:max-content}
  nav .l{flex:0 0 auto!important;overflow:visible!important}
}

/* v144.3: decorative orbs (position:fixed, negative offsets) kuch pages par
   viewport se bahar nikal kar mobile par 160px+ side-scroll bana rahe the.
   Chhoti screens par inhe render karna band — na side-scroll, na blur ka cost. */
.orb{pointer-events:none}
@media(max-width:900px){.orb{display:none}}