* { box-sizing: border-box; }
:root {
  --bg: #eef2ff; --card: rgba(255,255,255,.88); --text:#172033; --muted:#667085;
  --primary:#635bff; --primary2:#8b5cf6; --border:#e5e7eb; --input:#f8fafc;
  --shadow: 0 24px 70px rgba(31,41,55,.14);
}
body.dark {
  --bg:#0b1020; --card:rgba(17,24,39,.9); --text:#f3f4f6; --muted:#aab2c5;
  --border:#273244; --input:#111827; --shadow:0 24px 70px rgba(0,0,0,.35);
}
html,body { min-height:100%; }
body {
  margin:0; color:var(--text); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background: radial-gradient(circle at top left,#dbeafe 0,transparent 38%), var(--bg);
  transition:.25s ease;
}
body.dark { background: radial-gradient(circle at top left,#1e1b4b 0,transparent 38%), var(--bg); }
.app { width:min(760px,92%); margin:0 auto; padding:42px 0 28px; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:22px; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--primary); }
h1 { margin:7px 0 5px; font-size:clamp(34px,7vw,54px); line-height:1; }
.topbar p { margin:0; color:var(--muted); }
.actions { display:flex; gap:8px; }
.icon-btn { border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:12px; width:46px; height:46px; cursor:pointer; font-weight:800; }
.card { background:var(--card); border:1px solid rgba(255,255,255,.35); border-radius:28px; padding:28px; box-shadow:var(--shadow); backdrop-filter:blur(14px); }
.inputs { display:grid; gap:9px; }
label { font-size:14px; font-weight:750; margin-top:3px; }
input { width:100%; padding:15px 16px; border:1px solid var(--border); border-radius:14px; background:var(--input); color:var(--text); font-size:16px; outline:none; transition:.2s; }
input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(99,91,255,.12); }
.operations { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0; }
.op-btn { border:1px solid var(--border); background:var(--input); color:var(--text); border-radius:18px; padding:16px 8px; cursor:pointer; transition:.2s; }
.op-btn:hover { transform:translateY(-2px); border-color:var(--primary); box-shadow:0 10px 25px rgba(99,91,255,.12); }
.op-btn span { display:block; font-size:28px; font-weight:800; }
.op-btn small { color:var(--muted); font-size:12px; }
.result-box { padding:22px; border-radius:20px; background:linear-gradient(135deg,rgba(99,91,255,.12),rgba(139,92,246,.08)); border:1px solid rgba(99,91,255,.16); text-align:center; }
.result-label { color:var(--muted); font-size:13px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
output { display:block; font-size:clamp(38px,8vw,62px); font-weight:850; margin:6px 0; overflow-wrap:anywhere; }
.message { margin:0; color:var(--muted); }
.reset-btn { width:100%; margin-top:16px; padding:14px; border:0; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--primary2)); color:white; font-weight:800; font-size:15px; cursor:pointer; }
footer { text-align:center; color:var(--muted); font-size:13px; margin-top:18px; }
[dir="rtl"] { font-family:Vazirmatn,Tahoma,Arial,sans-serif; }
[dir="rtl"] .topbar { direction:rtl; }
@media (max-width:600px) {
  .app { padding-top:25px; }
  .card { padding:20px; border-radius:22px; }
  .operations { grid-template-columns:repeat(2,1fr); }
}