/* ============================================================
   CalcSpace — All-in-One Calculator Hub
   Design system: Sora (display) · Instrument Sans (body) · JetBrains Mono (digits)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#f2f5f3;
  --surface:#ffffff;
  --surface-2:#f5f8f6;
  --ink:#12211c;
  --muted:#5c6f68;
  --line:#dfe7e2;
  --line-strong:#c6d3cc;
  --brand:#0c7a5f;
  --brand-strong:#0a684f;
  --brand-ink:#ffffff;
  --brand-soft:#e0f0ea;
  --amber:#b07c1e;
  --amber-soft:#f6ecd6;
  --danger:#b8432f;
  --grid-line:rgba(18,33,28,.05);
  --shadow:0 1px 2px rgba(18,33,28,.05), 0 10px 28px -14px rgba(18,33,28,.16);
  --shadow-lg:0 2px 4px rgba(18,33,28,.06), 0 18px 44px -18px rgba(18,33,28,.22);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6f68' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* category hues */
  --c-basic:#0c7a5f; --c-sci:#3a67c9; --c-student:#15878b; --c-fin:#a8761a;
  --c-date:#c05b3d; --c-conv:#5f6cae; --c-math:#8a4f9e;
}
[data-theme="dark"]{
  --bg:#0b1512;
  --surface:#101d18;
  --surface-2:#152620;
  --ink:#e7f1ec;
  --muted:#8ea39b;
  --line:#233830;
  --line-strong:#325045;
  --brand:#3ecf9a;
  --brand-strong:#5adfae;
  --brand-ink:#05241a;
  --brand-soft:#123327;
  --amber:#e0b25c;
  --amber-soft:#2b2412;
  --danger:#e4705c;
  --grid-line:rgba(231,241,236,.045);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.55);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 22px 50px -18px rgba(0,0,0,.65);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238ea39b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --c-basic:#3ecf9a; --c-sci:#7ea4f2; --c-student:#4cc3c7; --c-fin:#e0b25c;
  --c-date:#eb8b6b; --c-conv:#98a4e6; --c-math:#c58ede;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:32px 32px;
}
h1,h2,h3{font-family:"Sora",sans-serif; line-height:1.15; margin:0; letter-spacing:-.015em}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer}
input,select{font:inherit; color:inherit}
code{font-family:"JetBrains Mono",monospace; font-size:.86em; background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:.08em .35em}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.shell{max-width:1180px; margin:0 auto; padding:0 22px}
.skip{position:absolute; left:-999px; top:8px; z-index:99; background:var(--brand); color:var(--brand-ink); padding:.5rem 1rem; border-radius:8px}
.skip:focus{left:8px}
.ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.dim{color:var(--muted)}
.kbd{font-family:"JetBrains Mono",monospace; font-size:.72rem; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:6px; padding:.1rem .42rem; color:var(--muted); background:var(--surface)}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:16px; height:62px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-mark{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--brand); color:var(--brand-ink); font:700 1.15rem "JetBrains Mono",monospace; box-shadow:var(--shadow)}
.brand-name{font:700 1.22rem "Sora",sans-serif; letter-spacing:-.02em}
.brand-name em{font-style:normal; color:var(--brand)}
.tagline{margin-left:2px; color:var(--muted); font-size:.85rem; border-left:1px solid var(--line-strong); padding-left:14px}
.top-actions{margin-left:auto}
.iconbtn{display:grid; place-items:center; width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface); transition:transform .15s, border-color .15s}
.iconbtn:hover{transform:translateY(-1px); border-color:var(--brand)}
[data-theme="light"] .iconbtn .sun{display:none}
[data-theme="dark"] .iconbtn .moon{display:none}

/* ---------- Hero ---------- */
.hero{padding:56px 0 34px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 340px at 82% 8%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%)}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:44px; align-items:center; position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font:600 .78rem "Sora",sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 30%, transparent); padding:.38rem .8rem; border-radius:99px}
.hero h1{font-size:clamp(2.1rem, 4.6vw, 3.4rem); font-weight:800; margin:18px 0 14px}
.lede{color:var(--muted); font-size:1.06rem; max-width:34rem}
.searchbox{display:flex; align-items:center; gap:10px; margin:26px 0 16px; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:14px; padding:0 14px; height:54px; box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s; max-width:34rem}
.searchbox:focus-within{border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent)}
.searchbox .ic{color:var(--muted)}
.searchbox input{flex:1; border:0; background:transparent; font-size:1.02rem; height:100%; min-width:0}
.searchbox input:focus{outline:none}
.popular{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.popular-lb{font-size:.8rem; color:var(--muted); font-weight:600; margin-right:2px}
.pill{border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:.34rem .85rem; font-size:.86rem; font-weight:600; color:var(--muted); transition:.15s}
.pill:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px)}

/* Quick calc panel */
.hero-panel{display:flex; justify-content:flex-end}
.qcalc{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:20px; position:relative}
.qcalc::before{content:""; position:absolute; top:0; left:20px; right:20px; height:3px; border-radius:0 0 6px 6px; background:var(--brand)}
.qcalc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.qcalc-tt{font:700 1rem "Sora",sans-serif}
.qcalc-badge{font:600 .68rem "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); background:var(--amber-soft); border-radius:99px; padding:.22rem .6rem}
.qcalc-in{width:100%; border:1px solid var(--line); background:var(--surface-2); border-radius:11px; padding:12px 14px; font:500 1.08rem "JetBrains Mono",monospace; text-align:right}
.qcalc-in:focus{outline:2px solid var(--brand); outline-offset:1px}
.qcalc-out{margin-top:12px; font:700 2rem/1.2 "JetBrains Mono",monospace; text-align:right; color:var(--brand); min-height:2.5rem; overflow-wrap:anywhere}
.qcalc-out.bad{color:var(--danger); font-size:1rem; font-weight:600; padding-top:.6rem}
.qcalc-hint{margin-top:12px; font-size:.78rem; color:var(--muted)}

/* ---------- Category bar ---------- */
.catbar{position:sticky; top:62px; z-index:30; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-block:1px solid var(--line)}
.catbar-in{display:flex; gap:8px; padding:12px 0; overflow-x:auto; scrollbar-width:none}
.catbar-in::-webkit-scrollbar{display:none}
.catchip{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:.42rem .95rem; font-size:.88rem; font-weight:600; color:var(--muted); transition:.15s}
.catchip .dot{width:8px; height:8px; border-radius:50%; background:var(--cc, var(--brand))}
.catchip:hover{border-color:var(--cc, var(--brand)); color:var(--ink)}
.catchip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.catchip.on .dot{background:var(--cc, var(--brand))}

/* ---------- Home dynamic sections ---------- */
.home-section{padding:34px 0 6px}
.hs-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px}
.hs-head h2{font-size:1.35rem; font-weight:700}
.hs-count{font:600 .8rem "JetBrains Mono",monospace; color:var(--muted)}
.hs-catmark{width:10px; height:22px; border-radius:4px; background:var(--cc, var(--brand)); flex:none; align-self:center}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:14px}

/* Cards */
.card{position:relative; display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:16px; cursor:pointer; box-shadow:0 1px 2px rgba(18,33,28,.04); transition:transform .16s, box-shadow .16s, border-color .16s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--cc, var(--brand)) 45%, var(--line))}
.card:active{transform:translateY(-1px) scale(.995)}
.card:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.card-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; flex:none; color:var(--cc, var(--brand)); background:color-mix(in srgb, var(--cc, var(--brand)) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--cc, var(--brand)) 24%, transparent)}
.card-ic .ic{width:22px; height:22px}
.card-bd{min-width:0; padding-right:22px}
.card-bd h3{font-size:.98rem; font-weight:700; margin-bottom:3px}
.card-bd p{font-size:.83rem; color:var(--muted); line-height:1.45}
.star{position:absolute; top:10px; right:10px; width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; border-radius:9px; color:var(--line-strong); opacity:0; transition:.15s}
.card:hover .star, .star:focus-visible, .star.active{opacity:1}
.star:hover{color:var(--amber); background:var(--amber-soft)}
.star.active{color:var(--amber)}
.star.active .ic{fill:var(--amber)}
.star.big{position:static; width:42px; height:42px; border:1px solid var(--line); background:var(--surface); border-radius:12px; opacity:1}
@media (hover:none){.star{opacity:1}}

/* Recently used chips */
.recent-row{display:flex; flex-wrap:wrap; gap:8px}
.recent-chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); border-radius:11px; padding:.5rem .9rem; font-size:.88rem; font-weight:600; transition:.15s}
.recent-chip:hover{border-color:var(--cc, var(--brand)); transform:translateY(-1px)}
.recent-chip .dot{width:8px; height:8px; border-radius:50%; background:var(--cc, var(--brand))}

/* Empty state */
.empty{border:1.5px dashed var(--line-strong); border-radius:16px; padding:52px 24px; text-align:center; background:var(--surface)}
.empty .glyph{font:700 2.4rem "JetBrains Mono",monospace; color:var(--line-strong)}
.empty h3{margin:10px 0 6px}
.empty p{color:var(--muted); margin-bottom:18px}
.empty .chips{justify-content:center}
.chips{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- Calculator view ---------- */
.calc-shell{max-width:820px; padding-top:26px; padding-bottom:60px}
.calc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.cattag{display:inline-flex; align-items:center; gap:8px; font:600 .74rem "Sora",sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--cc, var(--brand)); background:color-mix(in srgb, var(--cc, var(--brand)) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--cc, var(--brand)) 28%, transparent); padding:.32rem .75rem; border-radius:99px; margin-bottom:12px}
.calc-head h1{font-size:clamp(1.6rem, 3.4vw, 2.3rem); font-weight:800}
.calc-desc{color:var(--muted); margin-top:8px; max-width:44rem}
.calc-body{margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:clamp(18px, 3.4vw, 30px)}
.related{margin-top:34px}
.related h2{font-size:1.02rem; margin-bottom:12px; color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:11px; border:1px solid transparent; font-weight:600; padding:.66rem 1.25rem; font-size:.94rem; transition:transform .14s, box-shadow .14s, background .14s, border-color .14s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:var(--brand); color:var(--brand-ink); box-shadow:0 6px 16px -8px color-mix(in srgb, var(--brand) 70%, transparent)}
.btn.primary:hover{background:var(--brand-strong); transform:translateY(-1px)}
.btn.ghost{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
.btn.ghost:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px)}
.btn.sm{padding:.44rem .85rem; font-size:.86rem; border-radius:9px}
.btn.tiny{padding:.26rem .6rem; font-size:.76rem; border-radius:8px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- Fields / forms ---------- */
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.fgrid.g3{grid-template-columns:repeat(3,1fr)}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field>label{font:600 .82rem "Sora",sans-serif; color:var(--muted); letter-spacing:.01em}
.inwrap{position:relative; display:flex; align-items:center}
.inwrap input, .inwrap select{width:100%; height:44px; border:1.5px solid var(--line); background:var(--surface-2); border-radius:11px; padding:0 13px; font-size:.98rem; transition:border-color .14s, box-shadow .14s}
.inwrap input:focus, .inwrap select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent); background:var(--surface)}
.inwrap input[type="number"]{font-family:"JetBrains Mono",monospace; font-size:.94rem}
.inwrap select{appearance:none; background-image:var(--chev); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px}
.insuffix{position:absolute; right:13px; color:var(--muted); font:600 .82rem "JetBrains Mono",monospace; pointer-events:none}
.inwrap:has(.insuffix) input{padding-right:48px}
.inwrap input[type="date"], .inwrap input[type="time"]{font-family:"JetBrains Mono",monospace; font-size:.9rem}
.checkline{display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--muted); margin-top:2px; user-select:none}
.checkline input{width:17px; height:17px; accent-color:var(--brand)}

/* Segmented control */
.seg{display:inline-flex; border:1px solid var(--line); background:var(--surface-2); border-radius:11px; padding:3px; gap:3px}
.seg-b{border:0; background:transparent; border-radius:8px; padding:.4rem .9rem; font-size:.85rem; font-weight:600; color:var(--muted)}
.seg-b.on{background:var(--surface); color:var(--brand); box-shadow:var(--shadow)}

/* Actions + notes */
.actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.note{margin-top:18px; font-size:.84rem; color:var(--muted); border-left:3px solid var(--brand-soft); border-radius:2px; padding:8px 12px; background:color-mix(in srgb, var(--brand-soft) 45%, transparent); line-height:1.6}

/* ---------- Result box ---------- */
.outbox{margin-top:20px; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:13px; background:color-mix(in srgb, var(--brand-soft) 38%, var(--surface)); overflow:hidden}
.outbox:not(.on){display:none}
.outbox.err{border-left-color:var(--danger); background:color-mix(in srgb, var(--danger) 7%, var(--surface))}
.ob-head{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px dashed var(--line)}
.ob-title{font:700 .78rem "Sora",sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.ob-body{padding:14px 16px 16px}
.ob-row{display:flex; align-items:baseline; gap:10px; padding:.34rem 0}
.ob-k{font-size:.9rem; color:var(--muted); font-weight:500}
.ob-dots{flex:1; border-bottom:2px dotted var(--line-strong); transform:translateY(-4px); min-width:16px}
.ob-v{font:600 1.02rem "JetBrains Mono",monospace; text-align:right; overflow-wrap:anywhere}
.ob-row.lead .ob-v{font-size:1.4rem; color:var(--brand)}
.ob-row.good .ob-v{color:var(--brand)}
.ob-row.bad .ob-v{color:var(--danger)}
.ob-step{font:500 .86rem "JetBrains Mono",monospace; color:var(--muted); padding:.22rem 0}
.ob-step::before{content:"› "; color:var(--brand)}
.ob-err{color:var(--danger); font-weight:600; font-size:.94rem}

/* Split bar (EMI) */
.splitbar{display:flex; height:10px; border-radius:99px; overflow:hidden; margin:16px 0 8px; border:1px solid var(--line)}
.sb-p{background:var(--brand)} .sb-i{background:var(--amber)}
.splitbar-legend{display:flex; gap:18px; font-size:.78rem; color:var(--muted)}
.splitbar-legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px}

/* ---------- Keypads ---------- */
.calcwrap{max-width:460px; margin:0 auto}
.sc-display{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:14px 18px; text-align:right; margin-bottom:14px}
.sc-expr{min-height:1.4rem; font:500 .95rem "JetBrains Mono",monospace; color:var(--muted); overflow-wrap:anywhere}
.sc-main{font:700 2.1rem/1.25 "JetBrains Mono",monospace; overflow-wrap:anywhere; min-height:2.6rem}
.sc-main.err{color:var(--danger); font-size:1.15rem; padding-top:.5rem}
.sci-input{width:100%; background:transparent; border:0; text-align:right; font:600 1.45rem "JetBrains Mono",monospace; color:var(--ink); padding:2px 0}
.sci-input:focus{outline:none}
.sc-prev{min-height:1.3rem; font:500 .92rem "JetBrains Mono",monospace; color:var(--brand); overflow-wrap:anywhere}
.sc-toprow{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.keys{display:grid; gap:8px}
.k4{grid-template-columns:repeat(4,1fr)}
.k5{grid-template-columns:repeat(5,1fr)}
.key{height:52px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font:600 1.06rem "JetBrains Mono",monospace; transition:transform .06s, background .14s, border-color .14s; user-select:none}
.key:hover{border-color:var(--line-strong); background:var(--surface-2)}
.key:active{transform:scale(.96)}
.key.fn{background:var(--surface-2); color:var(--muted); font-size:.92rem}
.key.op{background:var(--brand-soft); color:var(--brand); border-color:color-mix(in srgb, var(--brand) 25%, var(--line))}
.key.eq{grid-column:1/-1; height:56px; background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-size:1.2rem}
.key.eq:hover{background:var(--brand-strong)}
.sc-hist{margin-top:14px; display:flex; flex-direction:column; gap:4px}
.sc-hist:empty{display:none}
.sc-hist-t{font:600 .7rem "Sora",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.hist-b{display:flex; justify-content:space-between; gap:10px; border:0; background:transparent; border-radius:8px; padding:.3rem .5rem; font:500 .84rem "JetBrains Mono",monospace; color:var(--muted); text-align:right}
.hist-b:hover{background:var(--surface-2); color:var(--brand)}

/* ---------- Row editors (GPA, grades, weighted…) ---------- */
.rowed{border:1px solid var(--line); border-radius:13px; padding:14px; background:var(--surface-2)}
.rowed-head, .rowed-row{display:grid; gap:10px; align-items:center}
.rowed-head{font:600 .74rem "Sora",sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:0 6px 8px}
.rowed-row{padding:4px 0}
.rowed-row input{width:100%; height:40px; border:1.5px solid var(--line); border-radius:9px; background:var(--surface); padding:0 11px; font:500 .92rem "JetBrains Mono",monospace}
.rowed-row input:focus{outline:none; border-color:var(--brand)}
.rowdel{width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:1rem; line-height:1}
.rowdel:hover{color:var(--danger); border-color:var(--danger)}
.rowed .btn{margin-top:12px}

/* Converter */
.conv-result{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:20px; padding:16px; border-radius:13px; background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 22%, transparent)}
.conv-result b{font:700 clamp(1.3rem, 3vw, 1.8rem) "JetBrains Mono",monospace; color:var(--brand); overflow-wrap:anywhere}
.conv-table{margin-top:16px; border:1px solid var(--line); border-radius:13px; overflow:hidden}
.conv-row{display:flex; justify-content:space-between; gap:12px; padding:.5rem 14px; font-size:.9rem; border-bottom:1px solid var(--line)}
.conv-row:last-child{border-bottom:0}
.conv-row:nth-child(odd){background:var(--surface-2)}
.conv-row b{font:600 .9rem "JetBrains Mono",monospace; text-align:right; overflow-wrap:anywhere}
.swapbtn{align-self:end; margin-bottom:2px}

/* Fractions inline */
.frac-group{display:flex; align-items:end; gap:10px; flex-wrap:wrap}
.frac{display:flex; flex-direction:column; gap:6px; width:86px}
.frac input{text-align:center}
.frac-slash{padding-bottom:10px; font:700 1.3rem "JetBrains Mono",monospace; color:var(--muted)}

/* Stats chips */
.tagrow{display:flex; flex-wrap:wrap; gap:6px; max-width:100%}
.tagchip{font:500 .8rem "JetBrains Mono",monospace; background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:.14rem .5rem}

/* Base converter outputs */
.base-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
.base-out{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface-2)}
.base-out .lbl{font:600 .72rem "Sora",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.base-out .val{font:600 1.05rem "JetBrains Mono",monospace; margin-top:4px; overflow-wrap:anywhere; min-height:1.5rem}

/* ---------- Toast / footer ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(16px); background:var(--ink); color:var(--bg); padding:.6rem 1.15rem; border-radius:11px; font-size:.88rem; font-weight:600; opacity:0; pointer-events:none; transition:.25s; z-index:90; box-shadow:var(--shadow-lg)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.footer{border-top:1px solid var(--line); margin-top:60px; padding:30px 0 40px; background:var(--surface)}
.footer-in p{font-size:.86rem; color:var(--muted)}
.footer-in p+p{margin-top:6px}

/* Category color hooks */
.cat-basic{--cc:var(--c-basic)} .cat-sci{--cc:var(--c-sci)} .cat-student{--cc:var(--c-student)}
.cat-fin{--cc:var(--c-fin)} .cat-date{--cc:var(--c-date)} .cat-conv{--cc:var(--c-conv)}
.cat-math{--cc:var(--c-math)} .cat-favs{--cc:var(--amber)}

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .hero{padding-top:38px}
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .hero-panel{justify-content:flex-start}
  .tagline{display:none}
}
@media (max-width:640px){
  .fgrid, .fgrid.g3, .base-grid{grid-template-columns:1fr}
  .key{height:48px; font-size:.98rem}
  .calc-body{padding:16px}
  .grid{grid-template-columns:1fr}
  .topbar-in{height:56px}
  .catbar{top:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}