/* ============================================================
   navtutorial.com · style-core.css
   Sitewide chrome (theme vars, base, nav, mega-menu, animations).
   Externalised from header.php inline <style> so it is cached
   across pages instead of re-sent in every HTML document.
   ============================================================ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  navtutorial.com  ·  ULTRA PREMIUM  ·  2025              ║
   ║  Dark Mode · Daily Challenge · QA Tools · Enhanced UX   ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {
  --void:    #020817; --void2:   #050d1e; --deep:    #080f24;
  --panel:   #0c1a30; --surface: #101f38; --rim:     rgba(255,255,255,.07); --rim2:    rgba(255,255,255,.12); --rim3:    rgba(255,255,255,.18);
  --b1:#172554; --b2:#1e3a8a; --b3:#1d4ed8; --b4:#2563eb; --b5:#3b82f6; --b6:#60a5fa; --b7:#93c5fd; --b8:#dbeafe;
  --c1:#0e7490; --c2:#06b6d4; --c3:#22d3ee; --c4:#67e8f9;
  --g1:#047857; --g2:#059669; --g3:#10b981; --g4:#34d399;
  --a1:#92400e; --a2:#b45309; --a3:#d97706; --a4:#fbbf24;
  --r1:#9f1239; --r2:#be123c; --r3:#e11d48; --r4:#fb7185;
  --v1:#3b0764; --v2:#6b21a8; --v3:#7c3aed; --v4:#a78bfa;
  --mono: 'JetBrains Mono', monospace;
  --r: 10px; --r2: 16px; --r3: 22px; --r4: 32px;
  --s0: 0 1px 3px rgba(0,0,0,.05);
  --s1: 0 2px 10px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.06);
  --s2: 0 4px 24px rgba(0,0,0,.10), 0 24px 64px rgba(0,0,0,.09);
  --s3: 0 8px 48px rgba(0,0,0,.14), 0 48px 96px rgba(0,0,0,.13);
  --s-blue: 0 8px 36px rgba(37,99,235,.30);
  --grad-primary: linear-gradient(135deg, var(--b4), var(--b5));
  --grad-cyan:    linear-gradient(135deg, var(--b4), var(--c2));
}

[data-theme="light"] {
  --bg:#ffffff; --bg-alt:#f8fbff; --bg-soft:linear-gradient(180deg,#eef4ff 0%,#ffffff 100%); --bg-card:#ffffff;
  --ink:#06101f; --ink2:#1a2a46; --mid:#4b5a70; --muted:#7c8fa6; --ghost:#a8bdd0;
  --hr:#dde5f0; --hr2:#eaeffb; --hr3:#d4e0ff; --slate:#eef3ff; --slate2:#e3ebff;
  --nav-bg:rgba(255,255,255,.85); --nav-stuck:rgba(255,255,255,.97); --nav-border:rgba(0,0,0,.06);
  --footer-bg:#050d1e; --dm-icon:'🌙'; --dm-label:'Dark Mode';
}

[data-theme="dark"] {
  --bg:#0a0f1e; --bg-alt:#0d1526; --bg-soft:linear-gradient(180deg,#0d1526 0%,#0a0f1e 100%); --bg-card:#111827;
  --ink:#f0f6ff; --ink2:#d4e2f7; --mid:#8fa8c8; --muted:#6882a4; --ghost:#4a6280;
  --hr:rgba(255,255,255,.08); --hr2:rgba(255,255,255,.05); --hr3:rgba(59,130,246,.2); --slate:rgba(255,255,255,.06); --slate2:rgba(255,255,255,.10);
  --nav-bg:rgba(10,15,30,.88); --nav-stuck:rgba(10,15,30,.97); --nav-border:rgba(255,255,255,.07);
  --footer-bg:#050810; --dm-icon:'☀️'; --dm-label:'Light Mode';
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Accessibility: keyboard skip-to-content link (hidden until focused) */
.skip-link { position:absolute; left:8px; top:-56px; z-index:100000; background:var(--b4,#2563eb); color:#fff; padding:10px 18px; border-radius:8px; font-weight:700; font-size:14px; box-shadow:0 6px 20px rgba(37,99,235,.4); transition:top .18s ease; }
.skip-link:focus { top:8px; outline:2px solid #fff; outline-offset:2px; }
#main-content { display:block; }
#main-content:focus { outline:none; }
/* Theme-fade scoped to visible surfaces only (was on the universal *,::before,::after
   selector, which forced a transition context on every node and taxed INP).
   Dark-mode toggle still fades smoothly across all major surfaces. */
html, body, .nav, .nav-w, .mega-drop, .mega-col, .announce, header, footer,
main, section, aside, article,
[class*="card"], [class*="panel"], [class*="btn"], [class*="badge"], [class*="pill"],
[class*="box"], [class*="tag"], [class*="chip"],
a, input, textarea, select, button, table, th, td, code, pre, blockquote, hr {
  transition: background-color .28s ease, border-color .28s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  html, body, .nav, .nav-w, .mega-drop, .mega-col, .announce, header, footer,
  main, section, aside, article,
  [class*="card"], [class*="panel"], [class*="btn"], [class*="badge"], [class*="pill"],
  [class*="box"], [class*="tag"], [class*="chip"],
  a, input, textarea, select, button, table, th, td, code, pre, blockquote, hr {
    transition: none;
  }
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea { font-family: inherit; }

#progress-bar { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--b4),var(--c2),var(--b6)); z-index:99997; transition:width .1s; box-shadow:0 0 10px rgba(37,99,235,.6); }

.wrap    { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-sm { max-width: 840px;  margin: 0 auto; padding: 0 32px; }

@keyframes fadeUp    { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes shimmer   { 0%{background-position:-400% 0} 100%{background-position:400% 0} }
@keyframes drift     { 0%,100%{transform:translate(0,0)} 33%{transform:translate(28px,-22px)} 66%{transform:translate(-18px,18px)} }
@keyframes ticker    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes bobble    { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-14px) rotate(2deg)} }
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.4)} 50%{box-shadow:0 0 0 18px rgba(37,99,235,0)} }
@keyframes rotateSlow{ to{transform:rotate(360deg)} }
@keyframes spin{ to{transform:rotate(360deg)} }
@keyframes neonBlink { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes borderRun { 0%{background-position:0% 50%} 100%{background-position:400% 50%} }
@keyframes floatUp   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes ripple    { to{transform:scale(30);opacity:0} }
@keyframes slideDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulseRing { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.8);opacity:0} }
@keyframes challengeGlow { 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.3)} 50%{box-shadow:0 0 32px rgba(37,99,235,.2)} }
@keyframes countdownTick { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes popIn { from{opacity:0;transform:scale(.85) translateY(40px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes darkToggle { 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(0)} 100%{transform:rotate(360deg) scale(1)} }

.sr   { opacity:0; transform:translateY(28px);  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.sr-l { opacity:0; transform:translateX(-28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.sr-r { opacity:0; transform:translateX(28px);  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.sr.in, .sr-l.in, .sr-r.in { opacity:1; transform:none; }
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s}
.d4{transition-delay:.24s} .d5{transition-delay:.30s} .d6{transition-delay:.36s}

/* ═══════════════════════════════
   DARK MODE TOGGLE
═══════════════════════════════ */
.dm-toggle { position:relative; width:54px; height:28px; background:var(--slate); border:1.5px solid var(--hr); border-radius:100px; cursor:pointer; transition:all .3s; flex-shrink:0; display:flex; align-items:center; }
.dm-toggle:hover { border-color:var(--b4); }
.dm-knob { position:absolute; left:3px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--b4),var(--c2)); box-shadow:0 2px 8px rgba(37,99,235,.4); transition:transform .35s cubic-bezier(.34,1.56,.64,1); display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; }
[data-theme="dark"] .dm-knob { transform:translateX(26px); }
[data-theme="dark"] .dm-toggle { background:rgba(37,99,235,.2); border-color:rgba(37,99,235,.4); }

/* ════════════════════════════════
   ANNOUNCEMENT BAR
════════════════════════════════ */
.announce { position:relative; z-index:10001; background:linear-gradient(90deg,#0f2460,var(--b3),var(--c2),var(--b3),#0f2460); background-size:300% 100%; animation:gradShift 7s ease infinite; padding:10px 0; }
.announce-inner { display:flex; align-items:center; justify-content:center; gap:12px; font-size:13px; font-weight:600; color:#fff; padding:0 48px; position:relative; }
.ann-pill { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); padding:2px 10px; border-radius:100px; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.ann-link { color:rgba(255,255,255,.9); text-decoration:underline; font-weight:700; }
.ann-close { position:absolute; right:0; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:6px; color:rgba(255,255,255,.7); cursor:pointer; font-size:13px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.ann-close:hover { background:rgba(255,255,255,.22); color:#fff; }

/* ════════════════════════════════
   NAV — GLASS PREMIUM
════════════════════════════════ */
.nav { position:sticky; top:0; z-index:9999; height:68px; background:var(--nav-bg); backdrop-filter:blur(40px) saturate(220%); -webkit-backdrop-filter:blur(40px) saturate(220%); border-bottom:1px solid var(--nav-border); transition:all .35s; }
.nav.stuck { background:var(--nav-stuck); box-shadow:0 4px 32px rgba(0,0,0,.10), 0 1px 0 rgba(0,0,0,.04); }
.nav-w { max-width:1360px; margin:0 auto; padding:0 28px; height:100%; display:flex; align-items:center; gap:4px; }

.logo { display:flex; align-items:center; gap:12px; flex-shrink:0; margin-right:8px; }
.logo-icon { width:38px; height:38px; border-radius:10px; flex-shrink:0; background:linear-gradient(145deg,var(--b4),var(--b2)); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; color:#fff; box-shadow:0 4px 16px rgba(37,99,235,.38), inset 0 1px 0 rgba(255,255,255,.22); }
.logo-wordmark { font-family:'Poppins',sans-serif; font-size:17px; font-weight:900; color:var(--ink); letter-spacing:-.5px; }
.logo-wordmark em { color:var(--b4); font-style:normal; }

.nav-links { display:flex; align-items:center; gap:2px; flex:1; }
.nav-item { position:relative; }
.nav-btn { display:flex; align-items:center; gap:5px; padding:8px 13px; border-radius:9px; font-size:14px; font-weight:600; color:var(--mid); background:none; border:none; cursor:pointer; transition:all .18s; white-space:nowrap; font-family:inherit; }
.nav-btn:hover, .nav-item.open .nav-btn { color:var(--ink); background:var(--slate); }
.nav-chevron { width:14px; height:14px; flex-shrink:0; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.nav-item.open .nav-chevron { transform:rotate(180deg); }

/* ── MEGA DROPDOWN PANEL ── */
.mega-drop { position:absolute; top:calc(100% + 14px); left:0; min-width:720px; background:var(--bg-card); border:1.5px solid var(--hr); border-radius:20px; box-shadow:0 24px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px) scale(.98); transform-origin:top left; transition:opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), visibility .22s; z-index:99999; }
.mega-drop::before { content:''; position:absolute; top:-6px; left:28px; width:12px; height:12px; background:var(--bg-card); border-left:1.5px solid var(--hr); border-top:1.5px solid var(--hr); transform:rotate(45deg); border-radius:2px 0 0 0; }
.mega-drop-sm  { min-width:440px; }
.mega-drop-md  { min-width:560px; }
.mega-drop-right { left:auto; right:0; transform-origin:top right; }
.mega-drop-right::before { left:auto; right:28px; }
.nav-item.open .mega-drop { opacity:1; visibility:visible; pointer-events:all; transform:translateY(0) scale(1); }
[data-theme="dark"] .mega-drop { box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04); }

.mega-inner    { display:flex; gap:0; padding:24px; }
.mega-inner-sm { padding:20px; gap:8px; }
.mega-col { flex:1; padding:0 16px; }
.mega-col:first-child { padding-left:0; }
.mega-col:not(:last-child) { border-right:1px solid var(--hr); margin-right:8px; }
.mega-col-featured { flex:1.1; }
.mega-inner-scroll { align-items:flex-start; }
.mega-inner-scroll .mega-col { max-height:74vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--hr3) transparent; padding-right:6px; }
.mega-inner-scroll .mega-col::-webkit-scrollbar { width:6px; }
.mega-inner-scroll .mega-col::-webkit-scrollbar-thumb { background:var(--hr3); border-radius:6px; }
.mega-col-head { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--hr2); }

.mega-link { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--ink2); transition:all .15s; text-decoration:none; margin:1px 0; }
.mega-link:hover { background:var(--slate); color:var(--b3); transform:translateX(3px); }
.ml-ico { font-size:16px; width:22px; text-align:center; flex-shrink:0; }
.ml-green { color:#10b981; font-size:10px; }
.ml-amber { color:#f59e0b; font-size:10px; }
.ml-red   { color:#ef4444; font-size:10px; }
.ml-count { margin-left:auto; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--slate); border:1px solid var(--hr); padding:1px 7px; border-radius:100px; }
.ml-tag { margin-left:auto; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:100px; }
.ml-tag-b   { background:rgba(16,185,129,.12); color:#047857; border:1px solid rgba(16,185,129,.2); }
.ml-tag-h   { background:rgba(239,68,68,.12); color:#b91c1c; border:1px solid rgba(239,68,68,.2); }
.ml-tag-new { background:rgba(249,115,22,.14); color:#c2410c; border:1px solid rgba(249,115,22,.25); }
.ml-tag-hot { background:rgba(37,99,235,.12); color:var(--b3); border:1px solid rgba(37,99,235,.2); }
[data-theme="dark"] .ml-tag-b   { background:rgba(16,185,129,.15); color:#6ee7b7; }
[data-theme="dark"] .ml-tag-h   { background:rgba(239,68,68,.15); color:#fca5a5; }
[data-theme="dark"] .ml-tag-new { background:rgba(249,115,22,.15); color:#fb923c; }
[data-theme="dark"] .ml-tag-hot { background:rgba(59,130,246,.15); color:#93c5fd; }

.mega-featured-card { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:12px; margin-bottom:8px; border:1.5px solid var(--hr); transition:all .2s; text-decoration:none; background:var(--bg-alt); }
.mega-featured-card:hover { transform:translateY(-2px); box-shadow:var(--s1); }
.mega-card-green:hover { border-color:#a7f3d0; background:#f0fdf4; }
.mega-card-amber:hover { border-color:#fde68a; background:#fffbeb; }
.mega-card-red:hover   { border-color:#fecaca; background:#fff1f2; }
.mega-card-violet:hover{ border-color:#ddd6fe; background:#faf5ff; }
[data-theme="dark"] .mega-card-green:hover { border-color:rgba(16,185,129,.3); background:rgba(16,185,129,.07); }
[data-theme="dark"] .mega-card-amber:hover { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.07); }
[data-theme="dark"] .mega-card-red:hover   { border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.07); }
[data-theme="dark"] .mega-card-violet:hover{ border-color:rgba(124,58,237,.3); background:rgba(124,58,237,.07); }
.mfc-icon  { font-size:24px; flex-shrink:0; margin-top:1px; }
.mfc-title { font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:800; color:var(--ink); }
.mfc-sub   { font-size:12px; color:var(--muted); line-height:1.5; margin-top:2px; }
.mega-view-all { display:flex; align-items:center; gap:6px; justify-content:center; padding:9px 14px; border-radius:9px; margin-top:4px; font-size:13px; font-weight:700; color:var(--b4); background:var(--slate); border:1px solid var(--hr3); transition:all .18s; }
.mega-view-all:hover { background:var(--b4); color:#fff; border-color:var(--b4); }
.mega-view-all svg { width:14px; height:14px; }

.nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }

.nav-login-btn { padding:8px 16px; border-radius:10px; background:var(--b4); color:#fff !important; font-size:13px; font-weight:700; text-decoration:none; transition:all .2s; white-space:nowrap; }
.nav-login-btn:hover { opacity:.88; transform:translateY(-1px); }
.nav-user-btn { width:34px; height:34px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--b4),var(--c2,#7c3aed)); text-decoration:none; flex-shrink:0; transition:box-shadow .2s; }
.nav-user-btn:hover { box-shadow:0 0 0 3px rgba(59,130,246,.3); }
.nav-user-avatar { width:100%; height:100%; object-fit:cover; }
.nav-user-initial { font-size:15px; font-weight:900; color:#fff; font-family:'Poppins',sans-serif; }

.nav-search-btn { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:9px; background:var(--slate); border:1px solid var(--hr); color:var(--mid); cursor:pointer; transition:all .2s; font-family:inherit; }
.nav-search-btn:hover { border-color:var(--b4); color:var(--b4); background:rgba(37,99,235,.06); }
.nav-search-btn svg { width:15px; height:15px; }
.nav-search-hint { font-size:10.5px; font-weight:700; font-family:var(--mono); background:var(--bg); border:1px solid var(--hr); padding:1px 6px; border-radius:5px; color:var(--ghost); }

.nav-cta { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--b4),var(--b3)) !important; color:#fff !important; padding:9px 20px !important; border-radius:11px !important; font-weight:700 !important; font-size:14px !important; box-shadow:0 4px 18px rgba(37,99,235,.35) !important; transition:all .25s !important; white-space:nowrap; }
.nav-cta::before { content:''; position:absolute; inset:0; border-radius:11px; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%); transform:translateX(-100%); transition:transform .5s; }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(37,99,235,.5) !important; }
.nav-cta:hover::before { transform:translateX(100%); }

.nav-ham { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:8px; border-radius:8px; width:38px; height:38px; transition:background .2s; }
.nav-ham:hover { background:var(--slate); }
.ham-line { display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:all .3s cubic-bezier(.16,1,.3,1); transform-origin:center; }
.nav-ham.open .ham-line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-ham.open .ham-line:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-ham.open .ham-line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════
   SPOTLIGHT SEARCH MODAL
════════════════════════════════════════════ */
#spotlight-overlay { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); display:none; align-items:flex-start; justify-content:center; padding-top:80px; }
#spotlight-overlay.open { display:flex; }
.spotlight-modal { width:100%; max-width:620px; border-radius:20px; background:var(--bg-card); border:1.5px solid var(--hr); box-shadow:0 40px 100px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); overflow:hidden; animation:popIn .2s cubic-bezier(.34,1.56,.64,1); }
.spotlight-header { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--hr); }
.spotlight-icon { width:20px; height:20px; color:var(--muted); flex-shrink:0; }
.spotlight-input { flex:1; background:none; border:none; outline:none; font-size:16px; font-weight:500; color:var(--ink); font-family:inherit; }
.spotlight-input::placeholder { color:var(--ghost); }
.spotlight-esc { font-size:11px; font-weight:700; font-family:var(--mono); background:var(--slate); border:1px solid var(--hr); padding:3px 8px; border-radius:6px; color:var(--muted); cursor:pointer; flex-shrink:0; }
.spotlight-body { max-height:400px; overflow-y:auto; padding:16px 20px; }
.spotlight-results { display:flex; flex-direction:column; gap:2px; }
.sp-result-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:all .15s; text-decoration:none; color:var(--ink); }
.sp-result-item:hover, .sp-result-item.active { background:var(--slate); color:var(--b3); }
.sp-result-icon { font-size:18px; width:28px; text-align:center; flex-shrink:0; }
.sp-result-title { font-size:14px; font-weight:600; }
.sp-result-cat { font-size:11.5px; color:var(--muted); margin-top:1px; }
.sp-result-arrow { margin-left:auto; color:var(--ghost); font-size:14px; }
.sp-section-title { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:10px; }
.sp-quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sp-quick-item { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:12px; border:1.5px solid var(--hr); background:var(--bg-alt); text-decoration:none; font-size:12px; font-weight:600; color:var(--ink2); transition:all .15s; text-align:center; }
.sp-quick-item:hover { border-color:var(--b4); background:var(--slate); color:var(--b3); transform:translateY(-2px); }
.sp-qi-icon { font-size:22px; }
.sp-topics-list { display:flex; flex-wrap:wrap; gap:7px; }
.sp-topic-pill { padding:5px 13px; border-radius:100px; background:var(--slate); border:1px solid var(--hr); font-size:12.5px; font-weight:600; color:var(--ink2); transition:all .15px; text-decoration:none; }
.sp-topic-pill:hover { background:var(--b4); color:#fff; border-color:var(--b4); }
.sp-no-results { text-align:center; padding:32px; color:var(--muted); font-size:14px; }
.spotlight-footer { display:flex; gap:16px; padding:12px 20px; border-top:1px solid var(--hr); background:var(--bg-alt); font-size:12px; color:var(--muted); }
.spotlight-footer kbd { background:var(--slate); border:1px solid var(--hr); padding:1px 6px; border-radius:5px; font-family:var(--mono); font-size:10.5px; color:var(--ink2); margin-right:4px; }

/* ════════════════════════════════════════════
   MOBILE FULL-SCREEN MENU
════════════════════════════════════════════ */
#mobile-menu { position:fixed; inset:0; z-index:99998; background:var(--bg-card); transform:translateX(-100%); transition:transform .35s cubic-bezier(.16,1,.3,1); overflow-y:auto; display:flex; flex-direction:column; }
#mobile-menu.open { transform:translateX(0); }
.mob-menu-inner { padding:20px 24px 40px; min-height:100%; display:flex; flex-direction:column; }
.mob-menu-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--hr); margin-bottom:20px; }
.mob-close { width:36px; height:36px; border-radius:10px; background:var(--slate); border:1px solid var(--hr); cursor:pointer; font-size:16px; color:var(--mid); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.mob-close:hover { background:var(--hr); color:var(--ink); }
.mob-search-wrap { display:flex; align-items:center; gap:10px; background:var(--bg-alt); border:1.5px solid var(--hr); border-radius:12px; padding:11px 16px; margin-bottom:20px; }
.mob-search-wrap svg { width:17px; height:17px; color:var(--muted); flex-shrink:0; }
.mob-search-input { flex:1; background:none; border:none; outline:none; font-size:15px; color:var(--ink); font-family:inherit; }
.mob-sections { flex:1; display:flex; flex-direction:column; gap:4px; }
.mob-section { border:1.5px solid var(--hr); border-radius:14px; overflow:hidden; }
.mob-sec-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; background:none; border:none; cursor:pointer; font-size:15px; font-weight:700; color:var(--ink); font-family:inherit; text-align:left; transition:background .2s; }
.mob-sec-btn:hover { background:var(--slate); }
.mob-chevron { width:16px; height:16px; flex-shrink:0; transition:transform .25s; color:var(--muted); }
.mob-section.open .mob-chevron { transform:rotate(180deg); }
.mob-sec-body { max-height:0; overflow:hidden; transition:max-height .38s cubic-bezier(.16,1,.3,1); background:var(--bg-alt); border-top:1px solid var(--hr); padding:0 18px; }
.mob-section.open .mob-sec-body { max-height:800px; padding:12px 18px; }
.mob-sec-group { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:6px; margin-top:10px; }
.mob-sec-group:first-child { margin-top:0; }
.mob-link { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:14px; font-weight:500; color:var(--ink2); transition:all .15s; text-decoration:none; margin:1px 0; }
.mob-link:hover { background:var(--slate); color:var(--b3); }
.mob-link-all { color:var(--b4); font-weight:700; margin-top:4px; }
.mob-actions { margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.mob-dm-row { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--bg-alt); border:1.5px solid var(--hr); border-radius:12px; font-size:14px; font-weight:600; color:var(--ink); }
.mob-cta { display:block; text-align:center; padding:16px; background:linear-gradient(135deg,var(--b4),var(--b3)); color:#fff; border-radius:14px; font-size:16px; font-weight:800; box-shadow:0 6px 24px rgba(37,99,235,.35); transition:all .2s; }
.mob-cta:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(37,99,235,.5); }

/* ════════════════════════════════════════════
   LANGUAGE SWITCHER
════════════════════════════════════════════ */
.lang-switcher { position:relative; flex-shrink:0; }
.lang-btn { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px; background:var(--slate); border:1.5px solid var(--hr); color:var(--mid); cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; transition:all .2s; user-select:none; }
.lang-btn:hover { border-color:var(--b4); color:var(--b4); background:rgba(37,99,235,.06); }
.lang-btn-flag { font-size:15px; line-height:1; }
.lang-btn-name { letter-spacing:.2px; }
.lang-btn-arrow { width:12px; height:12px; flex-shrink:0; transition:transform .25s cubic-bezier(.16,1,.3,1); color:var(--ghost); }
.lang-switcher.open .lang-btn { border-color:var(--b4); color:var(--b4); background:rgba(37,99,235,.06); }
.lang-switcher.open .lang-btn-arrow { transform:rotate(180deg); }
.lang-drop { position:absolute; top:calc(100% + 10px); right:0; min-width:200px; background:var(--bg-card); border:1.5px solid var(--hr); border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.03); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.97); transform-origin:top right; transition:opacity .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1), visibility .2s; z-index:99999; overflow:hidden; }
.lang-switcher.open .lang-drop { opacity:1; visibility:visible; pointer-events:all; transform:translateY(0) scale(1); }
[data-theme="dark"] .lang-drop { box-shadow:0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04); }
.lang-drop-head { padding:12px 16px 8px; font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--hr2); }
.lang-opt { display:flex; align-items:center; gap:11px; padding:11px 16px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink2); transition:all .15s; border:none; background:none; width:100%; text-align:left; font-family:inherit; }
.lang-opt:hover { background:var(--slate); color:var(--b3); }
.lang-opt.active { background:rgba(37,99,235,.07); color:var(--b4); }
.lang-opt.active .lang-opt-check { opacity:1; }
.lang-opt-flag { font-size:18px; flex-shrink:0; }
.lang-opt-info { flex:1; }
.lang-opt-name { font-weight:700; color:inherit; }
.lang-opt-sub  { font-size:11px; color:var(--muted); font-weight:500; margin-top:1px; }
.lang-opt-check { width:16px; height:16px; flex-shrink:0; opacity:0; color:var(--b4); transition:opacity .15s; }
.lang-drop-footer { padding:10px 16px; border-top:1px solid var(--hr2); font-size:11.5px; color:var(--muted); text-align:center; }
.mob-lang-row { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--bg-alt); border:1.5px solid var(--hr); border-radius:12px; }
.mob-lang-row-label { font-size:14px; font-weight:600; color:var(--ink); }
.mob-lang-pills { display:flex; gap:6px; }
.mob-lang-pill { padding:5px 12px; border-radius:8px; border:1.5px solid var(--hr); background:var(--bg); color:var(--mid); font-size:12px; font-weight:700; cursor:pointer; transition:all .18s; font-family:inherit; }
.mob-lang-pill.active { background:var(--b4); border-color:var(--b4); color:#fff; }
.mob-lang-pill:hover:not(.active) { border-color:var(--b4); color:var(--b4); }

/* ════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
════════════════════════════════════════════ */
@media (max-width:1280px) { .nav-search-hint { display:none; } }
@media (max-width:1100px) { .nav-links { display:none; } .nav-ham { display:flex; } .nav-search-btn { padding:7px 10px; } }
@media (max-width:1024px) { .lang-switcher { display:none; } }
@media (max-width:480px)  { .spotlight-modal { margin:0 12px; } .sp-quick-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:1100px) { .ft-grid { grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:640px)  { .ft-grid { grid-template-columns:1fr; gap:28px; } .ft-bottom { flex-direction:column; gap:14px; text-align:center; } .ft-law { justify-content:center; } .ft-live { justify-content:center; } .announce-inner { font-size:11px; gap:8px; padding:0 36px; } .ann-link { font-size:11px; } }
@media (max-width:400px)  { .ft-brand p { font-size:13px; } .ft-col a { font-size:13px; } }

/* ════════════════════════════════
   EXIT-INTENT POPUP
════════════════════════════════ */
#exit-overlay { position:fixed; inset:0; z-index:99990; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; }
#exit-overlay.show { display:flex; }
.exit-popup { background:var(--bg-card); border:1.5px solid var(--hr); border-radius:28px; max-width:540px; width:100%; overflow:hidden; animation:popIn .45s cubic-bezier(.34,1.56,.64,1); box-shadow:0 60px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05); position:relative; }
.exit-popup-top { background:linear-gradient(135deg,var(--b2),var(--b3),var(--c1)); padding:48px 44px 44px; text-align:center; position:relative; overflow:hidden; }
.exit-popup-top::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:28px 28px; }
.exit-popup-emoji { font-size:52px; display:block; margin-bottom:16px; animation:bobble 2s ease-in-out infinite; position:relative; z-index:1; }
.exit-popup-h { font-family:'Poppins',sans-serif; font-size:26px; font-weight:900; color:#fff; letter-spacing:-1px; margin-bottom:8px; position:relative; z-index:1; }
.exit-popup-p { font-size:14px; color:rgba(255,255,255,.6); line-height:1.7; position:relative; z-index:1; }
.exit-popup-body { padding:36px 40px; }
.exit-feature-list { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.exit-feat { display:flex; align-items:center; gap:13px; padding:12px 16px; background:var(--bg-alt); border:1px solid var(--hr); border-radius:12px; }
.exit-feat-ico { font-size:20px; flex-shrink:0; }
.exit-feat-text { font-size:14px; font-weight:600; color:var(--ink2); }
.exit-feat-text span { color:var(--muted); font-weight:400; }
.exit-form { display:flex; gap:8px; margin-bottom:14px; }
.exit-email { flex:1; background:var(--bg-alt); border:1.5px solid var(--hr); border-radius:10px; padding:13px 16px; font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; font-family:inherit; }
.exit-email:focus { border-color:var(--b4); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.exit-email::placeholder { color:var(--ghost); }
.exit-submit { background:linear-gradient(135deg,var(--b4),var(--c2)); color:#fff; border:none; padding:13px 24px; border-radius:10px; font-size:14px; font-weight:800; cursor:pointer; white-space:nowrap; transition:all .22s; box-shadow:0 4px 16px rgba(37,99,235,.35); font-family:inherit; }
.exit-submit:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(37,99,235,.5); }
.exit-note { font-size:11.5px; color:var(--muted); text-align:center; }
.exit-close { position:absolute; top:16px; right:16px; z-index:10; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.8); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .2s; line-height:1; }
.exit-close:hover { background:rgba(255,255,255,.25); color:#fff; transform:rotate(90deg); }
.exit-skip { display:block; text-align:center; margin-top:14px; font-size:12px; color:var(--muted); cursor:pointer; transition:color .2s; }
.exit-skip:hover { color:var(--ink); }

/* ════════════════════════════════
   FOOTER BASE
════════════════════════════════ */
.footer { background:var(--footer-bg); border-top:1px solid var(--rim); padding:80px 0 36px; }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; margin-bottom:56px; }
.ft-brand p { color:rgba(255,255,255,.28); font-size:14px; line-height:1.9; margin-top:14px; max-width:280px; }
.ft-social { display:flex; gap:10px; margin-top:22px; }
.ft-sc { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.4); font-size:14px; transition:all .2s; }
.ft-sc:hover { background:rgba(37,99,235,.25); border-color:rgba(37,99,235,.4); color:var(--b6); transform:translateY(-3px); }
.ft-col h4 { font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.22); margin-bottom:20px; }
.ft-col a { display:block; color:rgba(255,255,255,.4); font-size:14px; padding:5px 0; transition:color .15s; }
.ft-col a:hover { color:#fff; }
.ft-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid rgba(255,255,255,.06); }
.ft-bottom p { color:rgba(255,255,255,.18); font-size:13px; }
.ft-law { display:flex; gap:22px; }
.ft-law a { color:rgba(255,255,255,.18); font-size:13px; transition:color .15s; }
.ft-law a:hover { color:rgba(255,255,255,.6); }
.ft-live { display:flex; align-items:center; gap:8px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--g4); animation:glowPulse 2s infinite; }
.ft-live span { font-size:12px; color:rgba(255,255,255,.3); }

/* shared tags */
.tag-cat { background:var(--slate); border:1px solid var(--hr3); color:var(--b3); padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; }
.tag-b { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; padding:4px 10px; border-radius:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.tag-i { background:#fef3c7; color:#78350f; border:1px solid #fde68a; padding:4px 10px; border-radius:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.tag-a { background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; padding:4px 10px; border-radius:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
[data-theme="dark"] .tag-b { background:rgba(16,185,129,.15); color:#6ee7b7; border-color:rgba(16,185,129,.25); }
[data-theme="dark"] .tag-i { background:rgba(245,158,11,.15); color:#fcd34d; border-color:rgba(245,158,11,.25); }
[data-theme="dark"] .tag-a { background:rgba(239,68,68,.15); color:#fca5a5; border-color:rgba(239,68,68,.25); }
.t-date { font-size:12px; color:var(--muted); font-weight:600; }
.btn-prim { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--b5),var(--b3)); color:#fff; padding:14px 30px; border-radius:12px; font-size:15px; font-weight:800; border:none; cursor:pointer; box-shadow:var(--s-blue); transition:all .25s; }
.btn-prim:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(37,99,235,.55); }

[data-lang-pref="python"]  .code-tab-java,
[data-lang-pref="python"]  .code-tab-cpp  { opacity:.45; }
[data-lang-pref="java"]    .code-tab-python,
[data-lang-pref="java"]    .code-tab-cpp  { opacity:.45; }
[data-lang-pref="cpp"]     .code-tab-java,
[data-lang-pref="cpp"]     .code-tab-python { opacity:.45; }

/* ════════════════════════════════════════════
   ✨ HEADER POLISH · 2026 refresh
   (icon tiles · gradient heads · underline hover)
════════════════════════════════════════════ */
/* Soft rounded tiles behind emoji glyphs — skip colored status dots */
.mega-link .ml-ico:not(.ml-green):not(.ml-amber):not(.ml-red){
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; font-size:14.5px;
  background:var(--slate); border:1px solid var(--hr2);
  transition:transform .18s, background .18s, border-color .18s;
}
.mega-link:hover .ml-ico:not(.ml-green):not(.ml-amber):not(.ml-red){
  background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(6,182,212,.16));
  border-color:rgba(37,99,235,.30); transform:scale(1.07);
}
/* Gradient accent bar on every mega column heading */
.mega-col-head{ position:relative; padding-left:11px; }
.mega-col-head::before{
  content:''; position:absolute; left:0; top:1px; bottom:9px; width:3px;
  border-radius:3px; background:linear-gradient(180deg,var(--b4),var(--c2));
}
/* Animated gradient underline on nav buttons */
.nav-btn{ position:relative; }
.nav-btn::after{
  content:''; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--b4),var(--c2));
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.nav-btn:hover::after, .nav-item.open .nav-btn::after{ transform:scaleX(1); }
/* Give the merged mega room + polished divider spacing */
.nav-item.open .mega-drop{ animation:slideDown .22s cubic-bezier(.16,1,.3,1); }
/* Let the taller mobile Tools list expand fully */
.mob-section.open .mob-sec-body{ max-height:1600px; }