.calc-wrapper { max-width:56rem; margin:0 auto; }
.calc-box { background:var(--background); border:1px solid var(--border); border-radius:1rem; padding:2rem; }
@media(min-width:1024px){.calc-box{padding:3rem}}
.calc-grid { display:grid; gap:2rem; align-items:center; }
@media(min-width:768px){.calc-grid{grid-template-columns:1fr 1fr}}
.calc-form { display:flex; flex-direction:column; gap:1.5rem; }
.calc-label { display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--foreground); margin-bottom:.75rem; }
.calc-label svg { color:var(--primary); }
.calc-input { width:100%; height:3rem; padding:0 1rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); color:var(--foreground); font-size:1.125rem; }
.calc-input:focus { outline:none; border-color:var(--primary); }
.calc-buttons { display:flex; gap:1rem; }
.calc-buttons .btn { flex:1; }
.calc-result { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; text-align:center; transition:border-color .5s; }
.calc-result.has-result { border-color:var(--primary); }
.calc-result-icon { width:4rem; height:4rem; margin:0 auto 1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.calc-result-icon.default { background:var(--muted); }
.calc-result-icon.default svg { color:var(--muted-foreground); }
.calc-result-icon.active { background:rgba(255,107,0,.2); }
.calc-result-icon.active svg { color:var(--primary); }
.calc-note { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); font-size:.875rem; color:var(--muted-foreground); text-align:center; }
.calc-note span { color:var(--primary); }