@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");:root{--font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--bg-primary:#070a13;--bg-secondary:#0f1322;--bg-card:#151b30;--bg-card-hover:#1c243f;--border-color:hsla(0,0%,100%,.08);--border-color-hover:rgba(59,130,246,.4);--text-primary:#f3f4f6;--text-secondary:#a1a1aa;--text-muted:#71717a;--color-primary:#3b82f6;--color-primary-hover:#60a5fa;--color-accent:#10b981;--color-accent-hover:#34d399;--color-danger:#ef4444;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--transition:all 0.25s cubic-bezier(0.4,0,0.2,1);--gradient-primary:linear-gradient(135deg,#3b82f6,#8b5cf6);--gradient-text:linear-gradient(135deg,#60a5fa,#a78bfa)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}main{flex:1 1}a{color:inherit;text-decoration:none;transition:var(--transition)}button,input,select,textarea{font-family:inherit;font-size:inherit}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.5rem;transition:var(--transition);box-shadow:0 4px 20px rgba(0,0,0,.2)}.card:hover{transform:translateY(-2px);border-color:var(--border-color-hover);box-shadow:0 10px 30px rgba(59,130,246,.1);background-color:var(--bg-card-hover)}.input-field{width:100%;background-color:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:.75rem 1rem;border-radius:var(--radius-sm);outline:none;transition:var(--transition)}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.btn-primary{background:var(--gradient-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary:hover{opacity:.95;transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,92,246,.35)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:hsla(0,0%,100%,.05);color:var(--text-primary);border:1px solid var(--border-color);padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;transition:var(--transition)}.btn-secondary:hover{background-color:hsla(0,0%,100%,.08);border-color:var(--text-secondary)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:1.5rem;gap:1.5rem}.gradient-title{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--bg-primary)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:rgba(7,10,19,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);padding:1rem 0}.header-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;justify-content:space-between}.header-container,.logo{display:flex;align-items:center}.logo{gap:.5rem;font-size:1.3rem;font-weight:800;color:var(--text-primary);text-decoration:none}.logo-icon{font-size:1.5rem}.logo-text{letter-spacing:-.03em}.header-nav{display:flex;gap:1.5rem;align-items:center}.nav-link{font-size:.95rem;font-weight:500;color:var(--text-secondary);position:relative;padding:.25rem 0}.nav-link:hover{color:var(--text-primary)}.nav-link:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gradient-primary);transition:var(--transition)}.nav-link:hover:after{width:100%}.main-content{max-width:1200px;width:100%;margin:2.5rem auto;padding:0 1.5rem}.site-footer{border-top:1px solid var(--border-color);background-color:var(--bg-secondary);padding:2.5rem 0;margin-top:auto}.footer-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;color:var(--text-secondary);font-size:.9rem}@media (min-width:768px){.footer-container{flex-direction:row;justify-content:space-between;text-align:left}}.footer-links{display:flex;gap:1.5rem}.footer-links a{color:var(--text-muted)}.footer-links a:hover{color:var(--text-primary)}.site-header{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}.menu-toggle{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;background:transparent;border:none;cursor:pointer;padding:0;z-index:101}.hamburger-line{width:100%;height:2px;background-color:var(--text-primary);transition:transform .25s ease,opacity .25s ease;transform-origin:center}@media (max-width:768px){.menu-toggle{display:flex}.header-nav{position:fixed;top:0;right:0;width:280px;height:100vh;background-color:var(--bg-secondary);border-left:1px solid var(--border-color);flex-direction:column;align-items:flex-start;padding:6rem 2rem 2rem;gap:2rem;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-10px 0 30px rgba(0,0,0,.5)}.header-nav.open{transform:translateX(0)}.nav-link{font-size:1.1rem;width:100%}}.menu-toggle.open .hamburger-line:first-child{transform:translateY(8px) rotate(45deg)}.menu-toggle.open .hamburger-line:nth-child(2){opacity:0}.menu-toggle.open .hamburger-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Site-wide aesthetic refresh: visual-only overrides, no markup or behavior changes. */
:root{
  --font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --bg-primary:#090b10;
  --bg-secondary:#10151d;
  --bg-card:rgba(18,24,34,.82);
  --bg-card-hover:rgba(25,34,47,.94);
  --border-color:rgba(214,228,255,.12);
  --border-color-hover:rgba(74,222,128,.34);
  --text-primary:#f8fafc;
  --text-secondary:#b7c1d0;
  --text-muted:#7e8a9b;
  --color-primary:#38bdf8;
  --color-primary-hover:#67e8f9;
  --color-accent:#fbbf24;
  --color-accent-hover:#f97316;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:999px;
  --gradient-primary:linear-gradient(135deg,#22d3ee 0%,#34d399 48%,#fbbf24 100%);
  --gradient-text:linear-gradient(135deg,#e0f2fe 0%,#67e8f9 32%,#86efac 66%,#fde68a 100%);
  --transition:all .22s ease;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 12% -8%,rgba(34,211,238,.22),transparent 34rem),
    radial-gradient(circle at 92% 4%,rgba(251,191,36,.14),transparent 31rem),
    linear-gradient(180deg,#07080d 0%,#0b1117 48%,#0d0f14 100%);
  background-attachment:fixed;
  letter-spacing:0;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 78%);
  z-index:-1;
}

.site-header{
  background:rgba(8,11,17,.78);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 40px rgba(0,0,0,.24);
}
.header-container{max-width:1240px}
.logo svg{filter:drop-shadow(0 10px 20px rgba(34,211,238,.22))}
.logo-text{letter-spacing:0}
.nav-link{
  padding:.55rem .8rem;
  border-radius:var(--radius-xl);
}
.nav-link:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,.06);
}
.nav-link:after{display:none}

.main-content{
  max-width:1240px;
  margin:2rem auto 3rem;
}
.main-content>div>section:first-child{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(14,21,31,.96),rgba(18,28,38,.78)) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
}
.main-content>div>section:first-child:before{
  content:"";
  position:absolute;
  inset:auto 8% -42px;
  height:120px;
  background:linear-gradient(90deg,rgba(34,211,238,.25),rgba(52,211,153,.22),rgba(251,191,36,.18));
  filter:blur(34px);
  pointer-events:none;
}
.gradient-title{text-shadow:0 12px 34px rgba(34,211,238,.14)}

.card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(18,24,34,.9),rgba(13,18,26,.88));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(34,211,238,.08),transparent 34%,rgba(251,191,36,.05));
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(103,232,249,.28);
  box-shadow:0 22px 64px rgba(0,0,0,.34),0 0 0 1px rgba(103,232,249,.08);
}
.card:hover:before{opacity:1}
.tools-grid{gap:1.25rem}
.tools-grid .card{min-height:184px}

.input-field,textarea.input-field,select.input-field{
  background:rgba(7,11,18,.74) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 32px rgba(0,0,0,.16);
}
.input-field:focus{
  border-color:rgba(103,232,249,.75) !important;
  box-shadow:0 0 0 4px rgba(34,211,238,.14),inset 0 1px 0 rgba(255,255,255,.05);
}

.btn-primary,.btn-secondary,button{min-height:36px}
.btn-primary{
  color:#061016;
  box-shadow:0 12px 28px rgba(34,211,238,.16);
}
.btn-primary:hover{
  opacity:1;
  box-shadow:0 16px 36px rgba(52,211,153,.18);
}
.btn-secondary{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.12);
}
.btn-secondary:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(103,232,249,.28);
}

.site-footer{
  background:linear-gradient(180deg,rgba(13,18,26,.94),rgba(7,10,15,.98));
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-links{flex-wrap:wrap;justify-content:center}
.footer-links a:hover{color:var(--color-primary-hover)}

code,pre,textarea[style*="monospace"]{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace !important;
}
::-webkit-scrollbar-track{background:#090b10}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1f2937,#334155)}

@media (max-width:768px){
  .site-header{padding:.8rem 0}
  .main-content{margin:1.25rem auto 2rem;padding:0 1rem}
  .main-content>div>section:first-child{padding:2.25rem 1.1rem !important}
  .main-content>div>section:first-child h2{font-size:2rem !important}
  .tools-grid{grid-template-columns:1fr}
  .header-nav{
    background:rgba(10,15,23,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .footer-links{gap:.9rem}
}

/* Article reading experience. Scoped to blog detail pages that render an article element. */
.main-content article{
  max-width:100%;
  margin:0 auto 2.8rem !important;
  padding:2.25rem;
  background:linear-gradient(180deg,rgba(248,250,252,.055),rgba(15,23,42,.62));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  box-shadow:0 22px 70px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06);
}
.main-content article>div{
  color:#d8e2ee;
  font-size:1.08rem;
  line-height:1.86;
  white-space:pre-wrap;
}
.main-content article>div::first-line{
  color:#f8fafc;
  font-weight:800;
}
.main-content article strong,
.main-content article b{
  color:#f8fafc;
}
.main-content article a{
  color:var(--color-primary-hover);
  text-decoration:underline;
  text-decoration-color:rgba(103,232,249,.35);
  text-underline-offset:4px;
}
.main-content article+div,
.main-content article~section,
.main-content article~div{
  max-width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
}
.main-content article~section{
  background:linear-gradient(135deg,rgba(20,184,166,.12),rgba(251,191,36,.08)) !important;
  border-color:rgba(103,232,249,.2) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.22);
}
.main-content>div>header:has(+ div + article){
  max-width:100%;
  margin:0 auto 2rem !important;
  padding:2rem 2rem 1.8rem !important;
  background:linear-gradient(135deg,rgba(14,21,31,.96),rgba(16,30,39,.82));
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:var(--radius-lg);
  box-shadow:0 24px 76px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);
}
.main-content>div>header:has(+ div + article) h2{
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.main-content>div>header:has(+ div + article) span{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:.35rem .7rem;
  border-radius:var(--radius-xl);
  background:rgba(34,211,238,.1);
  border:1px solid rgba(103,232,249,.18);
  letter-spacing:.02em;
}
.main-content>div>nav:has(+ header + div + article){
  max-width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:.75rem 1rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.035);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:.15rem .35rem;
  overflow:visible;
  text-align:left;
}

@media (max-width:768px){
  .main-content article{
    padding:1.35rem;
    border-radius:var(--radius-md);
  }
  .main-content article>div{
    font-size:1rem;
    line-height:1.78;
  }
  .main-content>div>header:has(+ div + article){
    padding:1.35rem !important;
  }
  .main-content>div>header:has(+ div + article) h2{
    font-size:1.7rem !important;
  }
  .main-content>div>nav:has(+ header + div + article){
    border-radius:var(--radius-md);
  }
}

/* Screenshot-matched cyan/purple glass UI refresh. Visual-only overrides. */
:root{
  --bg-primary:#050914;
  --bg-secondary:rgba(15,22,38,.72);
  --bg-card:rgba(16,24,43,.72);
  --bg-card-hover:rgba(20,30,54,.86);
  --border-color:rgba(179,205,255,.14);
  --border-color-hover:rgba(205,88,255,.72);
  --text-primary:#f8fbff;
  --text-secondary:#c4cad8;
  --text-muted:#7f8aa2;
  --color-primary:#57d8f7;
  --color-primary-hover:#77b8ff;
  --color-accent:#d452f5;
  --color-accent-hover:#b67cff;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:999px;
  --gradient-primary:linear-gradient(100deg,#57d8f7 0%,#7d8cff 52%,#d84ee9 100%);
  --gradient-text:linear-gradient(95deg,#55e4f7 0%,#6bb7ff 38%,#9a7cff 64%,#e255dd 100%);
}

body{
  background:
    radial-gradient(circle at 18% 12%,rgba(35,200,239,.22),transparent 26rem),
    radial-gradient(circle at 72% 6%,rgba(206,71,229,.2),transparent 32rem),
    radial-gradient(circle at 50% 92%,rgba(85,126,255,.12),transparent 34rem),
    linear-gradient(135deg,#06101e 0%,#080b18 48%,#080514 100%);
  background-attachment:fixed;
}
body:before{
  background:
    radial-gradient(circle at 12% 24%,rgba(87,216,247,.18),transparent 1.8rem),
    radial-gradient(circle at 88% 22%,rgba(216,78,233,.2),transparent 1.9rem),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:auto,auto,64px 64px,64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.55) 52%,transparent 100%);
}
body:after{
  content:"</>  { }     fx     </>     { }";
  position:fixed;
  inset:110px 8vw auto;
  z-index:-1;
  pointer-events:none;
  color:rgba(122,184,255,.42);
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:1.45rem;
  letter-spacing:4.8rem;
  line-height:4.6;
  text-shadow:0 0 18px rgba(87,216,247,.35),0 0 22px rgba(216,78,233,.22);
  opacity:.56;
  transform:rotate(-7deg);
  white-space:normal;
}

.site-header{
  position:sticky;
  top:0;
  width:min(1012px,calc(100% - 2rem));
  margin:0 auto;
  padding:.55rem 0;
  background:linear-gradient(135deg,rgba(38,54,77,.68),rgba(30,28,58,.64));
  border:1px solid rgba(203,220,255,.16);
  border-top:0;
  border-radius:0 0 10px 10px;
  box-shadow:0 20px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);
}
.header-container{
  max-width:100%;
  padding:0 1rem;
}
.logo svg{
  width:28px;
  height:28px;
  filter:drop-shadow(0 0 14px rgba(143,112,255,.55));
}
.logo-text{
  font-size:1.05rem;
  font-weight:800;
}
.header-nav{
  gap:.35rem;
  padding:.2rem;
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.nav-link{
  padding:.42rem .72rem;
  border-radius:8px;
  font-size:.9rem;
}
.nav-link:hover{
  color:#84e8ff;
  background:rgba(99,134,255,.14);
}
html:has(link[rel="canonical"][href="https://pythoncompiler.in"]) .nav-link[href="/"],
html:has(link[rel="canonical"][href$="/blog"]) .nav-link[href="/blog"],
html:has(link[rel="canonical"][href*="/blog/"]) .nav-link[href="/blog"],
html:has(link[rel="canonical"][href$="/about"]) .nav-link[href="/about"],
html:has(link[rel="canonical"][href$="/contact"]) .nav-link[href="/contact"]{
  color:#84e8ff;
  background:rgba(99,134,255,.14);
}

.main-content{
  max-width:1012px;
  margin:5.25rem auto 3rem;
}
.main-content>div>section:first-child{
  overflow:visible;
  padding:2.85rem 1.5rem 2.2rem !important;
  margin-bottom:2.6rem !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.main-content>div>section:first-child:before{
  inset:-22px 18% auto;
  height:180px;
  background:radial-gradient(circle,rgba(87,216,247,.24),transparent 60%);
  filter:blur(42px);
}
.main-content>div>section:first-child h2{
  font-size:2.28rem !important;
  line-height:1.15;
  text-shadow:0 0 24px rgba(92,196,255,.2),0 0 24px rgba(216,78,233,.16);
}
.main-content>div>section:first-child p{
  color:#d3d8e4 !important;
  max-width:650px !important;
}

/* ===== Global width override (enforce consistent centered layout) ===== */
:root{
  --site-max-width:1200px;
}

/* Apply same max width and centering to major site containers */
.header-container,
.main-content,
.footer-container,
.site-header,
.site-footer,
.main-content>div,
.main-content>div>header,
.main-content article{
  max-width:var(--site-max-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:1rem !important;
  padding-right:1rem !important;
}

/* Ensure header/footer sizing uses full-width background but centered content */
.site-header,
.site-footer{
  width:100%;
}

/* Blog post sections use same full content width as other pages */
.main-content article,
.main-content>div>header:has(+ div + article){
  max-width:100% !important;
}

@media (max-width:768px){
  .header-container,
  .main-content,
  .footer-container{
    padding-left:1rem !important;
    padding-right:1rem !important;
    max-width:100% !important;
  }
}

.main-content>div>section:first-child .input-field{
  min-height:42px;
  background:rgba(9,13,25,.72) !important;
  border:1px solid rgba(118,222,255,.72) !important;
  box-shadow:0 0 0 1px rgba(216,78,233,.28),0 0 22px rgba(87,216,247,.28),0 0 26px rgba(216,78,233,.22);
  color:#f8fbff;
}
.main-content>div>section:first-child .input-field::placeholder{color:#8e95a6}



.main-content>div>div[style*="overflow-x:auto"]{
  border-bottom:0 !important;
  padding-bottom:.9rem !important;
  margin-bottom:1.35rem !important;
}
.btn-primary,.btn-secondary{
  min-height:31px;
  padding:.42rem 1rem !important;
  border-radius:var(--radius-xl) !important;
  font-size:.86rem !important;
}
.btn-primary{
  color:#fff;
  background:var(--gradient-primary);
  box-shadow:0 0 18px rgba(87,216,247,.28);
}
.btn-secondary{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  color:#eef4ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-secondary:hover{
  color:#fff;
  border-color:rgba(216,78,233,.62);
  box-shadow:0 0 18px rgba(216,78,233,.16);
}

.tools-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
.card{
  border-radius:12px;
  background:linear-gradient(180deg,rgba(18,27,49,.78),rgba(10,16,31,.76));
  border:1px solid rgba(95,222,250,.66);
  border-right-color:rgba(216,78,233,.78);
  border-bottom-color:rgba(216,78,233,.68);
  box-shadow:0 0 18px rgba(87,216,247,.13),0 0 18px rgba(216,78,233,.1),inset 0 1px 0 rgba(255,255,255,.06);
}
.tools-grid .card{
  min-height:176px;
}
.card:before{
  background:linear-gradient(135deg,rgba(87,216,247,.12),transparent 46%,rgba(216,78,233,.12));
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(103,232,249,.95);
  box-shadow:0 0 26px rgba(87,216,247,.24),0 0 32px rgba(216,78,233,.24),0 18px 52px rgba(0,0,0,.34);
}
.tools-grid .card h4{font-size:1.13rem !important}
.tools-grid .card p{color:#c9cfdd !important}
.tools-grid .card div[style*="justify-content:flex-end"]{
  justify-content:center !important;
  width:100%;
  margin-top:1.05rem !important;
  padding:.52rem 1rem;
  border-radius:var(--radius-xl);
  background:var(--gradient-primary);
  color:#fff !important;
  box-shadow:0 0 18px rgba(87,216,247,.18);
}

.input-field,textarea.input-field,select.input-field{
  background:rgba(8,13,25,.78) !important;
  border-color:rgba(130,148,198,.28) !important;
}
.input-field:focus,textarea.input-field:focus,select.input-field:focus{
  border-color:rgba(87,216,247,.8) !important;
  box-shadow:0 0 0 3px rgba(87,216,247,.13),0 0 20px rgba(216,78,233,.16);
}

.site-footer{
  background:rgba(5,9,20,.84);
  border-top:1px solid rgba(179,205,255,.12);
}
.ai-chat-btn-pulse{
  background:var(--gradient-primary) !important;
  box-shadow:0 0 22px rgba(87,216,247,.34),0 0 28px rgba(216,78,233,.3) !important;
}

@media (max-width:768px){
  body:after{display:none}
  .site-header{
    width:calc(100% - 1rem);
    padding:.7rem 0;
    margin:0 auto !important;
    left:0 !important;
    right:0 !important;
  }
  .header-nav{
    background:rgba(8,12,25,.96);
    border-left:1px solid rgba(179,205,255,.16);
    border-radius:0;
  }
  .main-content{
    margin:2rem auto 2rem;
    padding:0 1rem;
  }
  .main-content>div>section:first-child{
    padding:2rem .5rem 1.5rem !important;
  }
  .main-content>div>section:first-child h2{
    font-size:2rem !important;
  }

  .tools-grid{
    grid-template-columns:1fr;
  }
}

/* ----- Blog breadcrumb/header spacing tweaks ----- */
/* Reduce excessive top spacing above breadcrumb on blog list and post pages */
html:has(link[rel="canonical"][href$="/blog"]) .main-content,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content{
  margin-top:2.4rem !important;
}

/* Slightly reduce extra top gap inside the inner wrapper for blog detail pages */
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div{
  margin-top:0.6rem !important;
  padding-top:0 !important;
}

@media (max-width:768px){
  html:has(link[rel="canonical"][href*="/blog/"]) .main-content{
    margin-top:1rem !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
  html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div{
    margin-top:0 !important;
  }
}

/* Extra-tight breadcrumb/header adjustments: remove remaining vertical gap */
html:has(link[rel="canonical"][href$="/blog"]) .main-content>div>section:first-child,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>section:first-child{
  padding-top:0.4rem !important;
  padding-bottom:1rem !important;
}

/* Pull breadcrumb/nav up slightly */
html:has(link[rel="canonical"][href*="/blog"]) .main-content>div nav,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div .breadcrumb,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div .breadcrumbs{
  margin-top:-1.1rem !important;
  margin-bottom:0.35rem !important;
  padding-top:0 !important;
}

/* Also reduce header top gap for blog post pages */
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>header{
  margin-top:0 !important;
  padding-top:0.25rem !important;
}

@media (max-width:768px){
  html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div nav,
  html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div .breadcrumb,
  html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div .breadcrumbs{
    margin-top:0 !important;
  }
  html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>section:first-child{
    padding-top:0.6rem !important;
  }
}

/* ----- Apply tight breadcrumb/header spacing site-wide ----- */
/* Minimal, non-functional visual tweak — does not change behavior */
.main-content{
  margin-top:1.5rem !important;
}
.main-content>div{
  margin-top:0 !important;
}
.main-content>div>section:first-child{
  padding-top:0.4rem !important;
  padding-bottom:1rem !important;
}

/* Add a little more bottom spacing under the hero/header for breathing room */
.main-content>div>section:first-child{
  padding-bottom:2rem !important;
  margin-bottom:1.5rem !important;
}

@media (max-width:768px){
  .main-content>div>section:first-child{
    padding-bottom:1.6rem !important;
    margin-bottom:1rem !important;
  }
}
.main-content>div nav,
.main-content>div .breadcrumb,
.main-content>div .breadcrumbs{
  margin-top:-0.8rem !important;
  margin-bottom:1rem !important;
  padding-top:0 !important;
}
.main-content>div>header{
  margin-top:0 !important;
  padding-top:0.25rem !important;
}

@media (max-width:768px){
  .main-content{
    margin-top:1.1rem !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
  .main-content>div>section:first-child{
    padding-top:0.6rem !important;
  }
  .main-content>div nav,
  .main-content>div .breadcrumb,
  .main-content>div .breadcrumbs{
    margin-top:0 !important;
    margin-bottom:0.6rem !important;
  }
}

/* Blog-specific: make blog header/breadcrumb spacing match tools pages */
html:has(link[rel="canonical"][href*="/blog"]) .main-content>div>header:has(+ div + article){
  padding-top:1rem !important;
  padding-bottom:1rem !important;
  margin-top:0.4rem !important;
}

html:has(link[rel="canonical"][href*="/blog"]) .main-content>div nav,
html:has(link[rel="canonical"][href*="/blog"]) .main-content>div .breadcrumb,
html:has(link[rel="canonical"][href*="/blog"]) .main-content>div .breadcrumbs{
  margin-top:-0.8rem !important;
  margin-bottom:1rem !important;
}


@media (max-width:768px){
  html:has(link[rel="canonical"][href*="/blog"]) .main-content>div>header:has(+ div + article){
    padding-top:0.8rem !important;
    padding-bottom:0.9rem !important;
  }
}

/* Blog breadcrumb now uses the same negative top margin as tools pages */

/* Blog post internal pages: all sections same full width as home/blog list */
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>nav,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>header,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>header+div,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content article,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content article+div,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content article~section,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content article~div{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Blog post breadcrumb: text from start, items vertically centered in pill */
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>nav:has(+ header + div + article){
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  flex-wrap:wrap !important;
  gap:.15rem .35rem;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  margin-top:0 !important;
  margin-bottom:1rem !important;
  padding:.9rem 1rem !important;
  min-height:46px;
  line-height:1.5;
}
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>nav:has(+ header + div + article) a,
html:has(link[rel="canonical"][href*="/blog/"]) .main-content>div>nav:has(+ header + div + article) span{
  display:inline-flex;
  align-items:center;
  line-height:1.5;
}

/* ===== Mobile responsive: All Tools & home layout ===== */
@media (max-width:768px){
  .site-header{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  .header-container,
  .footer-container{
    width:100% !important;
    max-width:100% !important;
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }

  .main-content{
    width:100% !important;
    max-width:100% !important;
    margin:1rem 0 2rem !important;
    padding-left:.75rem !important;
    padding-right:.75rem !important;
    padding-bottom:5rem !important;
  }

  .main-content>div:not(.card){
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .main-content>div>section:first-child{
    padding:1.75rem .85rem 1.5rem !important;
    margin-bottom:1.5rem !important;
  }

  .main-content>div>section:first-child h2{
    font-size:1.65rem !important;
    line-height:1.2 !important;
  }

  .main-content>div>section:first-child p{
    font-size:.95rem !important;
    max-width:100% !important;
  }

  .main-content>div>div:has(ins.adsbygoogle){
    width:100% !important;
    margin:1rem 0 !important;
    padding:1rem .85rem !important;
    gap:.35rem !important;
    box-sizing:border-box !important;
  }

  .main-content>div>div:has(ins.adsbygoogle)>span{
    position:static !important;
    margin:0 !important;
  }

  .main-content>div>div:has(ins.adsbygoogle):before{
    font-size:.82rem !important;
    line-height:1.35 !important;
    max-width:100% !important;
    padding-top:0 !important;
    margin-top:0 !important;
  }

  .main-content>div>div:has(ins.adsbygoogle):after{
    position:static !important;
    transform:none !important;
    margin-top:.45rem !important;
    align-self:flex-start;
  }

  .main-content>div>div[style*="overflow-x:auto"]{
    width:100% !important;
    margin-bottom:1.25rem !important;
    padding-bottom:.75rem !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .main-content>div>div[style*="overflow-x:auto"]::-webkit-scrollbar{
    display:none;
  }

  .main-content>div>div[style*="display:grid"]{
    width:100% !important;
    gap:1.5rem !important;
  }

  .main-content>div>div[style*="display:grid"]>section{
    width:100% !important;
  }

  .main-content>div>div[style*="display:grid"] h3{
    font-size:1.1rem !important;
  }

  .tools-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }

  .tools-grid>a{
    display:block;
    width:100%;
    min-width:0;
  }

  .tools-grid .card{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    min-height:auto !important;
    padding:1.1rem !important;
    box-sizing:border-box !important;
  }

  .tools-grid .card h4{
    font-size:1.05rem !important;
    line-height:1.3 !important;
  }

  .tools-grid .card p{
    font-size:.84rem !important;
    line-height:1.45 !important;
  }

  .tools-grid .card div[style*="justify-content:flex-end"]{
    margin-top:.9rem !important;
    padding:.55rem .85rem !important;
    font-size:.82rem !important;
  }

  .site-footer{
    width:100% !important;
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }
}

@media (max-width:480px){
  .main-content{
    padding-left:.6rem !important;
    padding-right:.6rem !important;
  }

  .main-content>div>section:first-child h2{
    font-size:1.45rem !important;
  }

  .main-content>div>div:has(ins.adsbygoogle):before{
    font-size:.76rem !important;
  }

  .tools-grid .card{
    padding:1rem !important;
  }
}

.site-footer{
  background:linear-gradient(135deg,rgba(38,54,77,.68),rgba(30,28,58,.64)) !important;
  border:1px solid rgba(203,220,255,.16) !important;
  border-bottom:0 !important;
  border-radius:10px 10px 0 0 !important;
  box-shadow:0 -20px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding:.75rem 0 !important;
}
@media (max-width:768px){
  .site-footer{
    padding:.9rem 0 !important;
  }
}
.footer-links a{
  padding:.42rem .72rem !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
}
.footer-links a:hover{
  background:rgba(255,255,255,.06) !important;
}

/* Mobile responsiveness overrides for card layouts */
.card {
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .card {
    padding: 1.25rem !important;
    margin: 0 1rem 2rem !important;
    width: auto !important;
  }
}