/* ===== CUBIE FX — SINGLE CALCULATOR PAGE ===== */
:root{
  --bg:#05070E;
  --bg2:#080B14;
  --card:#0C1020;
  --card2:#10152A;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);
  --ink:#EDF0F8;
  --muted:#98A0B6;
  --muted2:#666E85;
  --pu:#7C5CFF;
  --bl:#4A8CFF;
  --grad:linear-gradient(100deg,#5B5BF5,#7C5CFF);
  --green:#22C55E;
  --orange:#F59E0B;
  --red:#EF4444;
  --cyan:#22D3EE;
  --wrap:1400px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,b,strong{font-family:"Manrope",system-ui,sans-serif;letter-spacing:-.02em;margin:0}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:2px solid var(--pu);outline-offset:2px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.gt{background:linear-gradient(100deg,#6C8CFF,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:60;background:rgba(5,7,14,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;height:70px;gap:18px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:32px;height:32px;object-fit:contain}
.logo span{font-family:"Manrope",sans-serif;font-weight:800;font-size:19px}
.logo b{color:var(--bl)}
.nlinks{display:flex;align-items:center;gap:30px;margin:0 auto;font-size:14px;font-weight:500;color:var(--muted)}
.nlinks a{position:relative;padding:6px 0}
.nlinks a:hover{color:var(--ink)}
.nlinks a.on{color:var(--ink);font-weight:600}
.nlinks a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--grad)}
.nright{display:flex;align-items:center;gap:11px}
.iconbtn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);
  background:none;border:0;cursor:pointer;position:relative}
.iconbtn:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.iconbtn svg{width:18px;height:18px}
.iconbtn .dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.who{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line)}
.who .pic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:"Manrope",sans-serif;font-weight:800;font-size:11px;color:#fff;
  background:linear-gradient(140deg,#F59E0B,#EC4899)}
.who b{display:block;font-size:12.5px;line-height:1.25}
.who span{font-size:11px;color:var(--muted2)}
.who svg{width:14px;height:14px;color:var(--muted2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;
  padding:10px 20px;font-family:"Manrope",sans-serif;font-weight:700;font-size:13.5px;
  border:0;cursor:pointer;transition:transform .16s,opacity .18s,border-color .18s,background .18s}
.btn svg{width:15px;height:15px}
.btn.grad{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(91,91,245,.3)}
.btn.grad:hover{transform:translateY(-2px)}
.btn.outline{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.btn.outline:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.045)}
.burger{display:none;background:none;border:0;color:var(--ink);padding:6px;cursor:pointer}
.burger svg{width:22px;height:22px}

/* ===== LAYOUT ===== */
.cols{display:grid;grid-template-columns:224px minmax(0,1fr);gap:22px;padding:22px 0 60px;align-items:start}
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted2);margin-bottom:14px}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink);font-weight:600}

/* left rail */
.panel{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px}
.panel h3{font-size:14px;font-weight:800;margin-bottom:12px;padding:0 4px}
.cat{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  color:var(--muted);font-size:12.5px;font-weight:500;transition:background .16s,color .16s}
.cat svg{width:16px;height:16px;flex:none}
.cat:hover{background:rgba(255,255,255,.045);color:var(--ink)}
.cat.on{background:var(--grad);color:#fff;font-weight:600}
.rsearch{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:10px 13px;margin-bottom:14px}
.rsearch svg{width:15px;height:15px;color:var(--muted2);flex:none}
.rsearch input{flex:1;min-width:0;background:none;border:0;color:var(--ink);
  font-family:"Inter",sans-serif;font-size:12.5px;outline:none}
.rsearch input::placeholder{color:var(--muted2)}

.promo{position:relative;overflow:hidden;background:linear-gradient(170deg,rgba(124,92,255,.16),rgba(12,16,32,.6));
  border:1px solid rgba(124,92,255,.3);border-radius:15px;padding:18px;margin-top:14px}
.promo b{display:block;font-size:14.5px;font-weight:800;margin-bottom:8px;position:relative;z-index:2}
.promo p{font-size:11.5px;color:var(--muted2);line-height:1.6;margin-bottom:14px;position:relative;z-index:2}
.promo a{display:block;text-align:center;background:var(--grad);color:#fff;border-radius:10px;padding:10px;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:12.5px;position:relative;z-index:2}
.promo .art{position:absolute;right:-10px;bottom:-14px;width:110px;opacity:.5;z-index:1}
.promo .art svg{width:100%;height:auto;display:block}

/* saved list (member) */
.saved-head{display:flex;align-items:center;margin-bottom:10px;padding:0 4px}
.saved-head h3{margin:0}
.saved-head .x{margin-left:auto;background:none;border:0;color:var(--muted2);cursor:pointer;font-size:15px;line-height:1}
.sitem{display:block;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px;margin-bottom:8px;transition:border-color .16s}
.sitem:hover{border-color:var(--line2)}
.sitem .top{display:flex;align-items:baseline;gap:8px}
.sitem b{font-size:12px;font-weight:700}
.sitem .lots{margin-left:auto;font-size:12px;font-weight:700;color:#A78BFA;font-family:"Manrope",sans-serif}
.sitem .bot{display:flex;gap:8px;font-size:10.5px;color:var(--muted2);margin-top:2px}
.sitem .bot .ago{margin-left:auto}

/* ===== CALCULATOR CARD ===== */
.calc-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:24px;margin-bottom:16px}
.calc-head{position:relative;z-index:2;margin-bottom:22px;max-width:640px}
.calc-head h1{font-size:26px;font-weight:800;margin-bottom:7px}
.calc-head p{font-size:13.5px;color:var(--muted2)}
.calc-art{position:absolute;right:22px;top:18px;width:170px;opacity:.9;z-index:1;pointer-events:none}
.calc-art svg{width:100%;height:auto;display:block}

.calc-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.form{background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:15px;padding:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.inp{position:relative;display:flex;align-items:center}
.inp input,.inp select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;color:var(--ink);font-family:"Inter",sans-serif;font-size:14px;
  appearance:none;transition:border-color .16s,background .16s}
.inp input:focus,.inp select:focus{outline:none;border-color:var(--pu);background:rgba(124,92,255,.06)}
.inp .unit{position:absolute;right:14px;font-size:12px;color:var(--muted2);pointer-events:none}
.inp.has-unit input{padding-right:52px}
.inp .chev{position:absolute;right:13px;width:14px;height:14px;color:var(--muted2);pointer-events:none}
.inp select{padding-right:38px;cursor:pointer}
.inp select option{background:#10152A;color:var(--ink)}
.field.bad input{border-color:var(--red);background:rgba(239,68,68,.06)}
.err{display:none;font-size:11px;color:#F87171;margin-top:6px}
.field.bad .err{display:block}
.go{width:100%;margin-top:4px}

/* result */
.result{background:linear-gradient(170deg,rgba(91,91,245,.14),rgba(12,16,32,.5));
  border:1px solid rgba(124,92,255,.26);border-radius:15px;padding:18px}
.result h3{font-size:14px;font-weight:800;margin-bottom:16px}
.big{text-align:center;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:13px;padding:18px 14px;margin-bottom:16px}
.big span{display:block;font-size:11.5px;color:var(--muted2);margin-bottom:6px}
.big b{font-size:32px;font-weight:800;font-family:"Manrope",sans-serif;
  background:linear-gradient(100deg,#7C8BFF,#C084FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.rrow{display:flex;align-items:center;padding:9px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px}
.rrow:first-of-type{border-top:0}
.rrow span{color:var(--muted)}
.rrow b{margin-left:auto;font-size:13px;font-weight:700}
.warn{display:none;align-items:flex-start;gap:8px;background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.3);border-radius:11px;padding:10px 12px;margin-top:12px;font-size:11.5px;color:#FCD34D}
.warn.show{display:flex}
.rnote{font-size:10.5px;color:var(--muted2);margin-top:12px;line-height:1.55}

/* locked box (public) */
.locked{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.03);
  border:1px dashed rgba(124,92,255,.4);border-radius:12px;padding:14px;margin-top:14px}
.locked .lt{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
.locked .lt svg{width:15px;height:15px;color:#A78BFA;flex:none}
.locked a{display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--line2);border-radius:10px;padding:9px;font-size:12.5px;font-weight:700;
  font-family:"Manrope",sans-serif}
.locked a:hover{background:rgba(255,255,255,.08)}

/* member actions */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.act{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:10px;
  font-size:12.5px;font-weight:700;font-family:"Manrope",sans-serif;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--ink);transition:all .16s}
.act svg{width:15px;height:15px}
.act:hover{background:rgba(255,255,255,.07)}
.act.save{color:#4ADE80;border-color:rgba(34,197,94,.35)}
.act.fav{color:#F87171;border-color:rgba(239,68,68,.32)}
.act.fav.on{background:rgba(239,68,68,.14)}
.act.share{grid-column:1/-1;color:#60A5FA;border-color:rgba(74,140,255,.32)}
.act.done{color:#4ADE80}

/* copy row */
.copyrow{display:flex;gap:10px;margin-top:14px}
.copyrow .act{flex:1}

/* ===== TABS ===== */
.tabcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.tabbar{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tb{background:none;border:0;color:var(--muted2);font-family:"Manrope",sans-serif;font-weight:700;
  font-size:13.5px;padding:0 0 11px;cursor:pointer;position:relative}
.tb:hover{color:var(--ink)}
.tb.on{color:var(--ink)}
.tb.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--grad)}
.tpane{display:none}
.tpane.on{display:block}
.tpane p{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.75}
.tpane h4{font-size:13.5px;font-weight:800;margin:18px 0 8px}
.tpane ul{margin:0 0 14px;padding-left:19px;color:var(--muted);font-size:13px;line-height:1.8}
.formula{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:16px;text-align:center;margin-bottom:14px}
.formula code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;color:#A78BFA;line-height:2}
.exrow{display:flex;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px}
.exrow:first-of-type{border-top:0}
.exrow span{color:var(--muted)}
.exrow b{margin-left:auto}
.faq{border-bottom:1px solid var(--line);padding:14px 0}
.faq:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-family:"Manrope",sans-serif;font-weight:700;font-size:13.5px;
  list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#A78BFA;font-size:18px;line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.75}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.step{display:flex;align-items:center;gap:11px}
.step .si{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.step .si svg{width:17px;height:17px}
.step b{display:block;font-size:12.5px;font-weight:800}
.step span{font-size:11px;color:var(--muted2)}
.s1{color:#4ADE80}.s2{color:#22D3EE}.s3{color:#A78BFA}.s4{color:#60A5FA}

/* related */
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rel{display:flex;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:14px;transition:transform .16s,border-color .16s}
.rel:hover{transform:translateY(-3px);border-color:var(--line2)}
.rel .ri{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.rel .ri svg{width:18px;height:18px}
.rel b{display:block;font-size:12.5px;font-weight:800;margin-bottom:3px}
.rel p{font-size:11px;color:var(--muted2);line-height:1.5}

/* footer */
.footer{border-top:1px solid var(--line);background:var(--bg2);padding:40px 0 24px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.fbrand p{font-size:12.5px;color:var(--muted2);line-height:1.7;max-width:250px;margin-top:12px}
.fcol h4{font-size:13px;font-weight:800;margin-bottom:12px}
.fcol a{display:block;font-size:12.5px;color:var(--muted2);padding:4px 0}
.fcol a:hover{color:var(--ink)}
.fbase{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted2)}
.fbase a{color:#A78BFA;font-weight:600}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);z-index:90;
  background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:12px 20px;
  font-size:13px;font-weight:600;box-shadow:0 20px 50px rgba(0,0,0,.6);transition:transform .26s,opacity .26s;opacity:0}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.ok{border-color:rgba(34,197,94,.4);color:#4ADE80}

@media (max-width:1100px){
  .cols{grid-template-columns:1fr}
  .rail{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .promo{margin-top:0}
  .steps,.rel-grid{grid-template-columns:1fr 1fr}
  .calc-art{display:none}
  .calc-head{max-width:none}
}
@media (max-width:820px){
  .nlinks{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:15px;background:rgba(8,11,20,.98);padding:20px 24px;border-bottom:1px solid var(--line)}
  .nlinks.open{display:flex}
  .burger{display:grid}
  .nright .outline{display:none}
  .who b,.who span{display:none}
  .calc-grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rail{grid-template-columns:1fr}
  .steps,.rel-grid{grid-template-columns:1fr}
  .calc-card{padding:18px}
  .calc-head h1{font-size:22px}
  .tabbar{gap:16px;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ---------- icons that were never given a size ----------
   An svg with a viewBox and no width falls back to the browser default
   of 300x150. Three of them on this page had no rule: the icon inside
   the login link, the shield in the warning strip, and the chevron on a
   select. Each one swallowed the card it sat in as soon as it appeared.

   Checked every element on the page that wraps an svg — these are the
   ones that were missing. */
.locked a svg{width:15px;height:15px;flex:none}
.warn svg{width:15px;height:15px;flex:none;margin-top:1px}
.inp .chev svg{width:14px;height:14px;display:block}

/* ---------- signed-in version of the same box ----------
   A member does not need to be told to log in. They get the save button
   the prompt was advertising. */
.saved-box{display:flex;flex-direction:column;gap:10px;background:rgba(124,92,255,.06);
  border:1px solid rgba(124,92,255,.28);border-radius:12px;padding:14px;margin-top:14px}
.saved-box .sb-top{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
.saved-box .sb-top svg{width:15px;height:15px;color:#A78BFA;flex:none}
.saved-box button{display:flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(100deg,#5B5BF5,#7C5CFF);border:0;border-radius:10px;padding:10px;
  font-size:12.5px;font-weight:700;font-family:"Manrope",sans-serif;color:#fff;cursor:pointer;
  transition:filter .16s}
.saved-box button:hover{filter:brightness(1.08)}
.saved-box button:disabled{opacity:.6;cursor:default}
.saved-box button svg{width:15px;height:15px;flex:none}
.saved-box .sb-msg{font-size:11.5px;margin:0}
.saved-box .sb-msg a{color:#A78BFA;font-weight:700}

/* ---------- category bar ----------
   Mirrors the pill bar on the tools index so the two pages feel like one
   place. It filters the rail beside it rather than navigating, which is
   why these are buttons and not links. */
.calc-tabs{
  display:flex;gap:8px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:9px;margin-bottom:16px;
}
.calc-tabs .ct{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:10px;padding:8px 13px;cursor:pointer;
  font-size:12.5px;font-weight:700;font-family:"Manrope",sans-serif;
  color:var(--muted);transition:.15s;
}
.calc-tabs .ct svg{width:14px;height:14px;flex:none}
.calc-tabs .ct:hover{color:var(--ink);border-color:var(--line2);background:rgba(255,255,255,.06)}
.calc-tabs .ct.on{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 5px 16px rgba(109,92,255,.28)}
.calc-tabs .ct .n{
  font-size:10px;font-weight:800;background:rgba(255,255,255,.08);
  border-radius:20px;padding:1px 6px;line-height:1.6;
}
.calc-tabs .ct.on .n{background:rgba(255,255,255,.24)}

/* the rail row that the filter hides */
.rail .cat[hidden]{display:none}

@media (max-width:900px){
  .calc-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .calc-tabs::-webkit-scrollbar{display:none}
  .calc-tabs .ct{white-space:nowrap;flex:none}
}

/* ---------- page shell ----------
   The page now ships the .app wrapper that layout.js used to build after
   paint. Inside it the wrap no longer needs its own width cap or side
   padding — .main provides both — so it is released here rather than
   with the inline styles layout.js was applying. */
.app > .main > .wrap{max-width:none;padding:0}

/* A signed-out visitor gets no sidebar, so the aside stays empty. An
   empty 248px column beside the content is worse than none. */
.app > aside.side:empty{display:none}

/* ---------- swapping between calculators ----------
   Opening another calculator replaces this region only; the frame around
   it does not move. A short fade covers the fetch — without it the
   content changes in a single frame, which reads as a glitch rather than
   as navigation. Nothing shifts position, only opacity. */
#calcMain{transition:opacity .13s ease}
#calcMain.swapping{opacity:.45}

/* the rail row that clears the filter */
.rail .cat.rail-all{cursor:pointer}

@media (prefers-reduced-motion:reduce){
  #calcMain{transition:none}
  #calcMain.swapping{opacity:1}
}