:root {
    --bg: #08090d;
    --bg-soft: #101218;
    --card: #14161d;
    --card-hover: #1a1d26;
    --text: #f5f5f7;
    --muted: #9296a3;
    --accent: #8b5cf6;
    --accent-2: #a78bfa;
    --green: #22c55e;
    --red: #ef4444;
    --border: rgba(255,255,255,.08);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
    font-family: Inter, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
}
a { color:inherit; text-decoration:none; }
.navbar {
    height:72px; display:flex; align-items:center;
    border-bottom:1px solid rgba(255,255,255,.05);
    background:rgba(8,9,13,.82);
    backdrop-filter:blur(16px);
}
.nav-container {
    width:min(1120px,92%); margin:auto;
    display:flex; justify-content:space-between; align-items:center;
}
.logo { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:900; }
.logo-box {
    width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--accent),#6366f1);
}
.nav-links { display:flex; gap:25px; align-items:center; color:var(--muted); font-size:14px; }
.nav-links a:hover { color:#fff; }
.nav-play { background:#fff; color:#111!important; padding:10px 17px; border-radius:10px; font-weight:700; }

.page {
    width:min(900px,92%); margin:auto;
    padding:85px 0 100px;
}
.back { color:var(--muted); font-size:14px; display:inline-flex; gap:7px; margin-bottom:28px; }
.back:hover { color:#fff; }
.hero { text-align:center; margin-bottom:38px; }
.badge {
    display:inline-block; padding:7px 13px; border-radius:999px;
    background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.25);
    color:var(--accent-2); font-size:12px; font-weight:700; margin-bottom:18px;
}
.hero h1 { font-size:clamp(38px,6vw,62px); letter-spacing:-3px; margin-bottom:14px; }
.hero p { color:var(--muted); line-height:1.7; max-width:600px; margin:auto; }

.card {
    background:var(--card); border:1px solid var(--border);
    border-radius:22px; padding:30px;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
}
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:1fr 1fr; }
label { display:block; color:var(--muted); font-size:13px; margin-bottom:8px; }
input, select, textarea {
    width:100%; background:#0d0f14; color:#fff;
    border:1px solid var(--border); border-radius:12px;
    padding:13px 14px; outline:none; font-size:15px;
}
input:focus,select:focus,textarea:focus { border-color:rgba(139,92,246,.7); box-shadow:0 0 0 3px rgba(139,92,246,.08); }
button {
    border:0; border-radius:12px; padding:13px 18px;
    background:var(--accent); color:#fff; font-weight:700;
    cursor:pointer; transition:.2s;
}
button:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(139,92,246,.25); }
button.secondary { background:rgba(255,255,255,.06); color:#fff; border:1px solid var(--border); }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.result {
    margin-top:20px; padding:20px; border-radius:15px;
    background:#0d0f14; border:1px solid var(--border);
}
.result-title { color:var(--muted); font-size:12px; margin-bottom:7px; }
.result-value { font-size:28px; font-weight:800; color:var(--accent-2); }
.muted { color:var(--muted); line-height:1.7; }
.error { color:#fca5a5; }
.success { color:#86efac; }
.tool-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:25px; }
.tool-link { padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.tool-link:hover { background:var(--card-hover); border-color:rgba(139,92,246,.3); }

.calculator { max-width:430px; margin:auto; }
.display {
    width:100%; min-height:85px; background:#0b0d12; border:1px solid var(--border);
    border-radius:16px; padding:20px; text-align:right; font-size:34px;
    font-weight:800; overflow:auto; margin-bottom:14px;
}
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.calc-grid button { min-height:60px; font-size:17px; background:#20232c; }
.calc-grid button.operator { background:rgba(139,92,246,.2); color:var(--accent-2); }
.calc-grid button.equal { background:var(--accent); }
.calc-grid button.zero { grid-column:span 2; }

.fraction-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; align-items:end; }
.fraction-result { text-align:center; font-size:32px; font-weight:800; }
.frac { display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; line-height:1.1; }
.frac .top { border-bottom:2px solid currentColor; padding:0 8px 4px; }
.frac .bottom { padding:4px 8px 0; }

.gpa-row { display:grid; grid-template-columns:1.5fr .7fr .8fr auto; gap:10px; margin-bottom:10px; align-items:end; }
.remove { background:rgba(239,68,68,.12)!important; color:#fca5a5; padding:12px 14px; }

footer { border-top:1px solid var(--border); color:var(--muted); text-align:center; padding:30px; font-size:13px; }

@media(max-width:700px) {
    .nav-links a:not(.nav-play) { display:none; }
    .grid-2,.tool-list { grid-template-columns:1fr; }
    .card { padding:20px; }
    .gpa-row { grid-template-columns:1fr 1fr; }
    .gpa-row .subject { grid-column:span 2; }
    .page { padding-top:55px; }
}