*{box-sizing:border-box}html,body{height:100%}
:root{
  --bg:#0b0c0f;--card:#12141a;--text:#e6e7eb;--muted:#9aa0aa;--brand:#7f5af0;--ok:#2cb67d;--warn:#f0b429;--border:#1c2030;--shadow:rgba(0,0,0,.3)
}
:root.light{
  --bg:#f7f8fb;--card:#ffffff;--text:#111318;--muted:#546179;--brand:#6a57f3;--ok:#1fa36b;--warn:#b7830f;--border:#e7e9f0;--shadow:rgba(0,0,0,.08)
}
body{margin:0;background:radial-gradient(1200px 600px at 10% -10%, #11142833 0%, transparent 60%),linear-gradient(180deg,var(--bg), var(--bg));color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.wrap{max-width:1060px;margin:0 auto;padding:16px}
.topnav{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 70%, transparent));border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px}
.brand .logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#5e3de0);text-decoration:none;color:#fff;font-weight:800}
.brand .logo span{font-size:14px}
.brand .brandname{color:var(--text);text-decoration:none}
nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;padding:10px 8px;border-radius:10px;font-size:14px}
nav a.active, nav a:hover{color:var(--text);background:color-mix(in oklab, var(--brand) 12%, transparent)}
.themebtn{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:10px;padding:8px 10px;cursor:pointer}

.card{background:color-mix(in oklab, var(--card) 90%, transparent);border:1px solid var(--border);border-radius:16px;padding:16px 16px 12px 16px;box-shadow:0 10px 30px var(--shadow);}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.grid{grid-template-columns:1fr 1fr 1fr} .hero{grid-column:1 / -1}}
.muted{color:var(--muted)} .tiny{font-size:12px} .small{font-size:13px}
h1,h2,h3{margin:8px 0 6px 0}

input,textarea{background:#0f1116;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:12px;font-size:15px;width:100%}
:root.light input,:root.light textarea{background:#fff}
button{cursor:pointer;border:none;border-radius:12px;padding:10px 14px;font-weight:600;background:var(--brand);color:white}
button.ghost{background:#303645}
button.line{background:transparent;border:1px solid var(--border);color:var(--muted)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.space-between{justify-content:space-between}
.hidden{display:none}
a.link{color:#9ab7ff;text-decoration:none}

.result{margin-top:12px;border-top:1px solid var(--border);padding-top:12px}
.result .row{display:flex;gap:10px;align-items:center;margin:6px 0;flex-wrap:wrap}
.result .label{display:inline-block;min-width:68px;color:var(--muted)}
.history{list-style:none;margin:0;padding:0}
.history li{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding:10px 0;gap:10px}
.footer{display:flex;align-items:center;justify-content:space-between;margin:24px auto 40px auto;color:var(--muted)}

.toast{position:fixed;right:16px;bottom:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;color:var(--text);box-shadow:0 10px 30px var(--shadow)}
.toast.hide{opacity:0;transition:opacity .3s ease}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* === Space Theme Additions === */
:root{ --space-bg:#05060a; --nebula2:#0a0f1f; --accent:#8bc6ff; --accent2:#a37bff; }
:root{ --brand: var(--accent); } :root.light{ --brand:#4b7bd6; }
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(72,87,170,.20) 0%, transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(163,123,255,.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--space-bg), var(--nebula2));
}
body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.45; background-repeat:repeat; }
body::before{ background-image:
  radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.9) 60%, transparent 61%),
  radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,.7) 60%, transparent 61%),
  radial-gradient(1px 1px at 200px 50px, rgba(255,255,255,.8) 60%, transparent 61%),
  radial-gradient(1px 1px at 400px 200px, rgba(255,255,255,.6) 60%, transparent 61%);
  background-size:800px 600px; animation: drift 60s linear infinite;
}
body::after{ background-image:
  radial-gradient(1.5px 1.5px at 60px 90px, rgba(255,255,255,.8) 60%, transparent 61%),
  radial-gradient(1px 1px at 300px 160px, rgba(255,255,255,.6) 60%, transparent 61%),
  radial-gradient(1px 1px at 500px 40px, rgba(255,255,255,.7) 60%, transparent 61%);
  background-size:1000px 700px; animation: drift2 90s linear infinite; opacity:.35;
}
@keyframes drift { from{transform:translateY(0)} to{transform:translateY(-600px)} }
@keyframes drift2{ from{transform:translateY(0)} to{transform:translateY(-700px)} }
.brand .logo{ background: conic-gradient(from 180deg at 50% 50%, var(--accent), var(--accent2), var(--accent)); }
nav a.active, nav a:hover{ background: color-mix(in oklab, var(--brand) 18%, transparent); }
button:hover{ box-shadow: 0 0 14px rgba(139,198,255,.35); }
.result a{ text-shadow: 0 0 8px rgba(139,198,255,.35); }
.card{
  background: linear-gradient(180deg, rgba(13, 18, 36, .72), rgba(13, 18, 36, .60));
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklab, var(--brand) 10%, var(--border));
}