:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#0f172a,#1e293b); color:#e2e8f0; padding:24px; }
.card { width:min(92vw,720px); background:rgba(15,23,42,.92); border:1px solid rgba(148,163,184,.2); border-radius:18px; padding:28px; box-shadow:0 20px 50px rgba(0,0,0,.35); }
h1 { margin:0 0 8px; }
.subtitle { margin:0 0 20px; color:#94a3b8; line-height:1.5; }
.calc-form, label { display:grid; gap:10px; }
label span { color:#cbd5e1; font-size:14px; }
input, button { width:100%; box-sizing:border-box; border-radius:10px; border:1px solid #334155; padding:12px 14px; font-size:16px; }
input { background:#0f172a; color:#e2e8f0; }
button { background:#2563eb; color:#fff; font-weight:700; cursor:pointer; }
.result, .meta { margin-top:18px; padding:14px; border-radius:10px; line-height:1.6; }
.success { background:rgba(34,197,94,.12); color:#86efac; }
.info { background:rgba(59,130,246,.12); color:#93c5fd; }
.error { background:rgba(239,68,68,.12); color:#fca5a5; }
.meta { background:rgba(148,163,184,.1); color:#cbd5e1; }
.history { margin-top:24px; }
.history h2 { font-size:1rem; margin:0 0 14px; }
.history-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.history-grid article { background:rgba(59,130,246,.10); border:1px solid rgba(96,165,250,.2); border-radius:10px; padding:12px; }
.date { color:#94a3b8; font-size:14px; margin-bottom:6px; }
.value { font-size:18px; font-weight:700; }