/* area-calculator.css v2-r4 */

.area-shape-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem}
.area-tab{font-size:.73rem;padding:.32rem .7rem;border:1px solid var(--border);background:#f9fafb;cursor:pointer;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.area-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.area-form{display:none}.area-form.active{display:block}
.area-fields{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.75rem}
@media(max-width:480px){.area-fields{grid-template-columns:1fr}}
.area-result{padding:.9rem 1rem;background:var(--accent-soft);border:1px solid rgba(37,99,235,.25);margin-top:.8rem}
.area-main{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:.2rem}
.area-conversions{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.65rem}
@media(max-width:460px){.area-conversions{grid-template-columns:1fr 1fr}}
.area-conv-item{padding:.4rem .5rem;border:1px solid var(--border);background:#fff;font-size:.78rem}
.area-conv-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
.area-canvas-wrap{margin:.75rem 0;text-align:center}
canvas#areaCanvas{border:1px solid var(--border);background:#fff;max-width:100%}
.irreg-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.irreg-row input{flex:1;padding:.35rem .4rem;border:1px solid var(--border);font-size:.82rem}
.irreg-add{font-size:.75rem;padding:.35rem .7rem;border:1px solid var(--border);background:#f9fafb;cursor:pointer}