/* Glassy red/white override for the 171 older BuildCalc pages with inline styles.
   Loaded AFTER their inline <style>, so these rules win at equal specificity.
   Their own variables are redefined here; maths, content and URLs are untouched. */
html[data-theme="red"],html:not([data-theme]){--bg:linear-gradient(155deg,#262626 0%,#171717 48%,#171717 100%);--ink:#ffffff;--mut:rgba(255,255,255,.86);--line:rgba(255,255,255,.38);--acc:#ffffff;--tape:#262626}
html[data-theme="white"]{--bg:#ffffff;--ink:#1c2226;--mut:#59636a;--line:#e8c4c9;--acc:#262626;--tape:#262626}
body{background:var(--bg);background-attachment:fixed;color:var(--ink);min-height:100vh}
header{background:rgba(0,0,0,.18);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-theme="white"] header{background:rgba(255,255,255,.92);border-bottom:3px solid #262626}
header a{color:#fff}
html[data-theme="white"] header a{color:#262626}
header span{color:rgba(255,255,255,.86)}
html[data-theme="white"] header span{color:#59636a}
html[data-theme="red"] h1{color:#fff}
html[data-theme="white"] h1{color:#262626}
html[data-theme="white"] h2{color:#262626}
a{color:#fff}
html[data-theme="white"] a{color:#262626}
.tool{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#1c2226}
.tool a{color:#262626}
.tool .mut,.tool .gl{color:#59636a}
.tool h2{color:#1c2226}
.in{background:#fff;color:#1c2226}
.in input{color:#1c2226}
.seg button{background:#fff;color:#1c2226}
.seg button[aria-pressed=true]{background:#262626;color:#fff}
.res,.gt{color:#1c2226}
.bc{color:rgba(255,255,255,.86)}
html[data-theme="white"] .bc{color:#59636a}
.bc a{color:#fff}
html[data-theme="white"] .bc a{color:#262626}
.intro{color:rgba(255,255,255,.86)}
html[data-theme="white"] .intro{color:#59636a}
footer{border-top:1px solid var(--line);color:rgba(255,255,255,.86)}
html[data-theme="white"] footer{color:#59636a}
footer a{color:#fff}
html[data-theme="white"] footer a{color:#262626}
.theme-toggle{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
html[data-theme="white"] .theme-toggle{background:#262626;color:#fff;border-color:#262626}
.cat-icon,.chip-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:#262626;color:#fff;vertical-align:middle}
.cat-icon svg,.chip-icon svg{width:18px;height:18px}
@media(max-width:600px){h1{font-size:26px}}

html[data-theme="red"] .cat, html:not([data-theme]) .cat{color:#ffffff}
html[data-theme="red"] h1, html:not([data-theme]) h1{color:#ffffff}

body{font-family:'IBM Plex Serif',Georgia,serif}
h1,h2,h3{font-family:'IBM Plex Serif',Georgia,serif}

.chatbtn{position:fixed;right:16px;bottom:16px;z-index:50;background:linear-gradient(90deg,#22c55e,#052e16);color:#fff;border:1px solid #a7f3d0;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.chatpanel{position:fixed;right:16px;bottom:70px;z-index:50;width:340px;max-width:calc(100vw - 32px);background:#111;border:1px solid rgba(255,255,255,.20);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.4);overflow:hidden;color:#fff}
.chathead{background:#262626;color:#fff;padding:12px 14px;font-weight:800}.chathead span{display:block;font-weight:400;font-size:12px;opacity:.85}
.chatbody{padding:12px}.chatquick button{display:block;width:100%;text-align:left;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15);margin:4px 0;padding:8px 10px;border-radius:8px;cursor:pointer}
.chatlog{max-height:220px;overflow-y:auto;margin:10px 0}.chatmsg{margin:8px 0;font-size:15px;color:#fff}
.chatbody input{width:calc(100% - 70px);padding:10px;border:1px solid rgba(255,255,255,.20);border-radius:8px;background:#fff;color:#111}
.chatbody button{margin-top:0}
#bg3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:5;pointer-events:none;opacity:.9}
main,header,footer{position:relative;z-index:1}

/* Template-style page opening animation: boxes come in from different sides, slowly */
@keyframes enterTop{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes enterLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes enterRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes enterBottom{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
header{animation:enterTop 1.2s ease-out both}
.hero{animation:enterTop 1.4s ease-out both}
.cat-box,.calc-card,.feat-grid>div,.tool,.card{animation:enterBottom 1.1s ease-out both}
.cat-box:nth-child(odd),.calc-card:nth-child(odd){animation-name:enterLeft}
.cat-box:nth-child(even),.calc-card:nth-child(even){animation-name:enterRight}
.marquee,.cta-grad,footer{animation:enterBottom 1.2s ease-out both}
@media(prefers-reduced-motion:reduce){header,.hero,.cat-box,.calc-card,.feat-grid>div,.tool,.card,.marquee,.cta-grad,footer{animation:none}}
.h-white{color:#fff!important}.h-green{color:#4ade80!important}
.cat-box:nth-child(3n+1){animation-delay:.1s}.cat-box:nth-child(3n+2){animation-delay:.25s}.cat-box:nth-child(3n){animation-delay:.4s}

.mix,.mix b{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
h1,h2,h3,.cat-box b,.calc-card b,.feat-grid b,.bento b,.price-card b,.hero-card b,footer b,.marquee-track span,.drag-card{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tool h1,.tool h2,.card h1{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html[data-theme="white"] h1,html[data-theme="white"] h2,html[data-theme="white"] h3,html[data-theme="white"] .cat-box b,html[data-theme="white"] .calc-card b{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
footer,footer p,footer a{color:#fff!important}

@keyframes loopTop{0%{opacity:0;transform:translateY(-40px)}12%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-40px)}}
@keyframes loopLeft{0%{opacity:0;transform:translateX(-50px)}12%{opacity:1;transform:translateX(0)}88%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-50px)}}
@keyframes loopRight{0%{opacity:0;transform:translateX(50px)}12%{opacity:1;transform:translateX(0)}88%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(50px)}}
@keyframes loopBottom{0%{opacity:0;transform:translateY(40px)}12%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(40px)}}
header{animation:loopTop 10s ease-in-out infinite!important}
.hero{animation:loopTop 10s ease-in-out infinite!important}
.cat-box,.calc-card,.feat-grid>div,.tool,.card{animation:loopBottom 10s ease-in-out infinite!important}
.cat-box:nth-child(odd),.calc-card:nth-child(odd){animation-name:loopLeft!important}
.cat-box:nth-child(even),.calc-card:nth-child(even){animation-name:loopRight!important}
.marquee,.cta-grad,footer{animation:loopBottom 10s ease-in-out infinite!important}
summary,.faq-dashed summary,.cta-grad h2,.drag-wrap p b{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

header{animation:enterTop .6s ease-out both!important}
.hero{animation:enterTop .6s ease-out both!important}
.cat-box,.calc-card,.feat-grid>div,.tool,.card{animation:enterBottom .6s ease-out both!important}
.cat-box:nth-child(odd),.calc-card:nth-child(odd){animation-name:enterLeft!important}
.cat-box:nth-child(even),.calc-card:nth-child(even){animation-name:enterRight!important}
.marquee,.cta-grad,footer{animation:enterBottom .6s ease-out both!important}

.bg-stars{position:fixed;inset:0;z-index:4;pointer-events:none;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#fff 1.2px,transparent 1.2px),radial-gradient(#a7f3d0 0.8px,transparent 0.8px);background-size:100px 100px,175px 175px,140px 140px;background-position:0 0,60px 90px,30px 40px;opacity:.6;animation:starTwinkle 2.5s ease-in-out infinite alternate, starMove 6s ease-in-out infinite alternate}
@keyframes starTwinkle{from{opacity:.4}to{opacity:.7}}
@keyframes starMove{from{background-position:0 0,60px 90px,30px 40px}to{background-position:50px 50px,110px 140px,80px 90px}}to{background-position:220px 220px,280px 310px,250px 260px}}
footer a,footer p{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* header: original light translucent, locked at top, no extra bar */.bc-toolbar button{background:#052e16!important;color:#fff!important;border:1px solid #22c55e;padding:8px 12px;margin:4px;border-radius:8px;cursor:pointer}.bc-home-box{border:1px solid #22c55e;border-radius:12px;padding:16px;margin:16px 0}
.bc-home-box b,.bc-home-box#bcTod,.bc-home-box#bcTip{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

h1,h2,h3{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.tool h1,.tool h2,.card h1,.card h2{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
header{transition:top .3s ease!important}
header.bc-hide{top:-120px!important;transform:translateY(-110%)!important;animation:none!important;transition:transform .3s ease,top .3s ease!important}

.card h2,.card h3,.tool h3,.card h1{background:linear-gradient(90deg,#ffffff 0%,#ffffff 65%,#a7f3d0 85%,#4ade80 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}

/* V38: headings green-mix, body text white, tool boxes visible */
.calc-box{display:block!important;background:rgba(5,46,22,0.6)!important;border:1px solid rgba(255,255,255,0.4)!important;border-radius:16px!important;padding:20px!important}
.calc-box label{display:block!important;color:#fff!important;margin-bottom:14px!important}
.calc-box input{display:block!important;width:100%!important;background:#fff!important;color:#111!important;margin-top:6px!important}
.calc-box button{margin-top:12px!important}
.calc-box #out,#out{color:#fff!important;font-weight:700!important}

.tool-grid .tool,.calc-card{background:rgba(5,46,22,0.6)!important;color:#fff!important;border:1px solid rgba(255,255,255,0.4)!important}
.tool-grid .tool p,.calc-card span,main p,section p,main li{color:#fff!important}
main,body{color:#fff!important}
input,select,textarea{color:#111!important}

.tool-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px!important}
.tool-grid .tool{min-width:0!important}
.tool-grid .tool b,.tool-grid .tool p{overflow-wrap:break-word!important}
@media(max-width:900px){.tool-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr!important}}

.calc-box *{box-sizing:border-box!important}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr!important}main.wrap{padding-left:16px!important;padding-right:16px!important}.calc-box{padding:16px!important}}

/* Universe background (V45): canvas behind content, old bg divs off */
#universe-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
header,main,footer{position:relative;z-index:1}
.bg-stars,.bg-lighting{display:none!important}