/* XoverPi visual system. Preview branch only; calculator logic unchanged. */
:root{--xp-navy:#081B3B;--xp-blue:#2563EB;--xp-sky:#38BDF8;--xp-mint:#4FD1C5;--xp-bg:#F8FAFC;--xp-border:#E2E8F0;--xp-text:#1E293B;--xp-muted:#64748B}
body{background:var(--xp-bg);color:var(--xp-text)}
.side{border-right-color:var(--xp-border);box-shadow:8px 0 35px #081b3b04}
.brand{color:var(--xp-navy);font-weight:800;letter-spacing:-1.2px;gap:9px}
.logo{background:linear-gradient(140deg,#2563EB,#38BDF8);border-radius:11px;font-size:25px;font-family:Georgia,serif}
.branddot{color:var(--xp-blue)}
.navitem:hover,.navitem.on{background:#EAF2FF;color:#1D4ED8}
.searchbox,.catcard,.toolcard,.refcard,.inputpanel,.resultpanel,.formulapanel{border-color:var(--xp-border);box-shadow:0 7px 27px #081b3b07}
.primary{background:var(--xp-blue);box-shadow:0 5px 15px #2563eb22}
.primary:hover{background:#1D4ED8}
.eyebrow,.refcat,.textlink,.back{color:var(--xp-blue)}
.hero{background:radial-gradient(circle at 90% 12%,#bfeafb 0%,transparent 42%),linear-gradient(116deg,#EAF2FF,#FFFFFF);border-color:#DCEBFC;padding:clamp(28px,4vw,52px)}
.hero h1{color:var(--xp-navy);font-size:clamp(33px,4vw,54px);line-height:1.13;max-width:690px}
.hero h1 span{color:var(--xp-blue)}
.hero p{color:#53657c;font-size:clamp(14px,1.2vw,17px);max-width:600px}
.heromark{color:#2563eb12;font-family:Georgia,serif;right:8%;font-size:170px}
.appbadge,.sidefoot{background:#EAF2FF;color:#1D4ED8}
.catcard>span{background:#EAF2FF;color:var(--xp-blue)}
.catcard:hover,.toolcard:hover{border-color:#93C5FD}
.toolicon{color:var(--xp-blue)}
button:focus-visible,input:focus-visible{outline-color:#60A5FA}
@media(max-width:720px){.hero{padding:28px 23px}.hero h1{font-size:clamp(31px,7vw,39px)}}

/* XoverPi v2: genuinely new product layout */
.xoverpi-layout{display:block;min-height:100vh;background:#F7F9FD}
.xoverpi-layout>.side{display:none}
.xoverpi-layout .main{max-width:1380px;padding:0 clamp(18px,4.5vw,64px) 70px}
.xoverpi-layout .top{height:92px;gap:26px;margin:0 0 25px;border-bottom:1px solid #e8edf6}
.topbrand{display:flex;align-items:center;gap:12px;font-size:24px;white-space:nowrap;font-weight:850;letter-spacing:-1.1px;color:#081B3B;cursor:pointer}
.topbrand-icon{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:linear-gradient(140deg,#2563EB,#38BDF8);color:white;font-family:Georgia,serif;font-size:29px;font-weight:700;box-shadow:0 8px 18px #2563eb26}
.topbrand-accent{color:#2563EB}
.toplinks{display:flex;align-items:center;gap:8px;white-space:nowrap}
.toplinks button{border-radius:10px;background:transparent;color:#405575;padding:11px 13px;font-size:13px;font-weight:700}
.toplinks button:hover{background:#eaf1ff;color:#1d4ed8}
.xoverpi-layout .top .searchbox{margin-left:auto;max-width:320px;border-color:#e4eaf4;box-shadow:none}
.xoverpi-layout .topactions{flex-shrink:0}
.xoverpi-layout .version-stamp{background:#eaf2ff;color:#2563eb}
.xp-hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr);gap:44px;align-items:center;min-height:450px;padding:clamp(35px,5.3vw,77px);background:radial-gradient(ellipse at 88% 0%,#d4efff,transparent 47%),linear-gradient(115deg,#eaf1ff 0%,#f4faff 55%,#fcfdff 100%);border-radius:28px}
.xp-hero-copy{position:relative;z-index:1}
.xp-hero .eyebrow{font-size:12px;color:#2563eb;letter-spacing:2px}
.xp-hero h1{font-size:clamp(39px,4.3vw,63px);font-weight:850;letter-spacing:-2.8px;line-height:1.1;margin:23px 0}
.xp-hero h1 span{color:#2563eb}
.xp-hero p{font-size:16px;line-height:1.8;color:#52657e;max-width:570px;margin-bottom:25px}
.xp-hero-actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.xp-hero .primary{padding:15px 23px;font-size:14px}
.xp-softbutton{border:1px solid #d3e3f8;padding:14px 19px;background:#ffffffb0;border-radius:11px;color:#1e4a9a;font-size:14px;font-weight:750}
.xp-softbutton:hover{background:white;border-color:#a8c7fd}
.xp-hero-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:25px;color:#657995;font-size:12px;font-weight:650}
.xp-showcase{padding:25px 27px 20px;background:#fff;border:1px solid #d9e6f8;box-shadow:0 30px 70px #0a285627,0 4px 12px #0a285609;border-radius:23px;transform:rotate(2deg);max-width:405px;width:100%;justify-self:center}
.xp-showcase-top{color:#6380a1;letter-spacing:1.6px;font-size:10px;font-weight:850;display:flex;align-items:center;gap:7px}
.xp-shine{color:#2563eb;font-size:21px}.xp-dots{margin-left:auto;color:#a3b3ce;letter-spacing:2px}
.xp-showcase-label{color:#71839b;font-size:12px;margin:23px 0 7px}
.xp-showcase-number{font-size:clamp(33px,3.7vw,46px);color:#081B3B;font-weight:850;letter-spacing:-1.8px}
.xp-showcase-number span{font-size:15px;color:#7e8da6;font-weight:500;letter-spacing:0}
.xp-chart{display:flex;align-items:end;gap:10px;height:110px;padding-top:13px;margin-top:11px}
.xp-chart i{background:linear-gradient(0deg,#93dcf2,#2563eb);border-radius:6px 6px 2px 2px;flex:1;max-width:33px}
.xp-showcase-divider{height:1px;background:#e6ecf5;margin:21px 0 14px}
.xp-showcase-bottom{display:flex;justify-content:space-between;align-items:center;color:#3f5a82;font-size:12px;font-weight:750}
.xp-showcase-bottom strong{color:#2563eb;font-size:20px}
.xp-category-intro{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:42px 0 2px}
.xp-category-intro h2{font-size:clamp(22px,2.4vw,30px);margin:8px 0 0;letter-spacing:-.9px;color:#081B3B}
.xp-alltools{color:#2563eb;font-weight:750;background:transparent;white-space:nowrap;padding:9px 0}
.xoverpi-layout .sectionline{margin-top:28px}.xoverpi-layout .sectionline h2{font-size:20px;color:#081B3B}
.xoverpi-layout .catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.xoverpi-layout .catcard{border-radius:19px;padding:22px 18px;gap:11px;box-shadow:0 6px 25px #0c234707;transition:transform .2s,box-shadow .2s}
.xoverpi-layout .catcard:hover,.xoverpi-layout .toolcard:hover{transform:translateY(-3px);box-shadow:0 14px 35px #0a285612}
.xoverpi-layout .catcard>span{width:47px;height:47px;border-radius:13px;font-size:23px}
.xoverpi-layout .catcard strong{font-size:14px;color:#193456}
.xoverpi-layout .catcard small{font-size:12px}
.xoverpi-layout .toolcard{border-radius:19px;min-height:165px;transition:transform .2s,box-shadow .2s}
.xoverpi-layout .cardmain{padding:22px 47px 22px 22px;gap:12px}
.xoverpi-layout .cardmain strong{font-size:16px;color:#152f51}
.xoverpi-layout .cardmain small{font-size:13px;line-height:1.55}
.xoverpi-layout .toolhead h1,.xoverpi-layout .pageintro h1{font-size:clamp(30px,3.2vw,44px);color:#081B3B}
.xoverpi-layout .workspace{gap:24px;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr)}
.xoverpi-layout .inputpanel,.xoverpi-layout .resultpanel,.xoverpi-layout .formulapanel{border:1px solid #dfe8f5;border-radius:22px;box-shadow:0 12px 36px #0c23470a}
.xoverpi-layout .inputpanel,.xoverpi-layout .resultpanel{padding:clamp(22px,3vw,36px)}
.xoverpi-layout .resultpanel{background:linear-gradient(160deg,#fff,#f5f9ff)}
.xoverpi-layout .smartinput{border-radius:12px}
.xoverpi-layout .footer{border-top:1px solid #e5eaf4;margin-top:70px;padding-top:24px}
@media(max-width:1060px){.toplinks{gap:1px}.toplinks button{padding:10px 8px}.xoverpi-layout .top .searchbox{max-width:245px}.xp-hero{gap:23px;padding:38px}.xp-hero h1{font-size:43px}}
@media(max-width:790px){.xoverpi-layout .top{height:72px}.toplinks{display:none}.xoverpi-layout .top .searchbox{max-width:none}.xp-hero{grid-template-columns:1fr;padding:36px 28px}.xp-showcase{transform:none;max-width:490px}.xoverpi-layout .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.xoverpi-layout .workspace{grid-template-columns:1fr}}
@media(max-width:560px){.xoverpi-layout .main{padding:0 15px 60px}.xoverpi-layout .top{gap:9px;height:68px;margin-bottom:15px}.topbrand{font-size:19px;gap:7px}.topbrand-icon{width:33px;height:33px;font-size:24px;border-radius:10px}.xoverpi-layout .top .searchbox{padding:0 9px;height:40px;min-width:0}.xoverpi-layout .top .searchbox input{font-size:12px;padding:10px 0}.xoverpi-layout .top .searchbox span{font-size:18px}.xoverpi-layout .topactions .version-stamp{display:none}.xoverpi-layout .topactions .iconbtn{width:36px;height:36px}.xp-hero{padding:31px 22px;gap:30px;border-radius:20px}.xp-hero h1{font-size:36px;letter-spacing:-1.7px;margin:17px 0}.xp-hero p{font-size:14px;line-height:1.7}.xp-hero-actions{align-items:stretch;flex-direction:column}.xp-hero-actions button{width:100%}.xp-hero-proof{gap:8px 15px;margin-top:20px}.xp-showcase{padding:21px}.xp-category-intro{margin-top:32px;align-items:start}.xp-category-intro h2{font-size:23px}.xp-alltools{font-size:12px}.xoverpi-layout .catcard{padding:15px 12px;gap:7px}.xoverpi-layout .catcard strong{font-size:12px}.xoverpi-layout .catcard small{font-size:11px}.xoverpi-layout .catcard>span{width:38px;height:38px}.xoverpi-layout .toolgrid{grid-template-columns:1fr}.xoverpi-layout .toolcard{min-height:135px}}
@media(prefers-reduced-motion:reduce){.xoverpi-layout .catcard,.xoverpi-layout .toolcard{transition:none}}