/* styles.css — Conversor de Área no padrão do site */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions.center{justify-content:center}
.inputs label small{color:var(--muted)}
.result-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.result-grid{grid-template-columns:repeat(3,1fr)}}
.metric{text-align:center;padding:12px;border:1px dashed #2a2f36;border-radius:12px}
.metric .k{font-size:.9rem;opacity:.85}
.metric .v{font-size:clamp(22px,5vw,32px);font-weight:800;line-height:1.1}
.sep{border:none;border-top:1px solid #2a2f36;margin:12px 0}
.hint{margin-top:6px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #2a2f36;color:var(--muted);font-size:.75rem}
button.cta{background:var(--brand);color:#071018;border:none;font-weight:700;padding:10px 14px;border-radius:10px;cursor:pointer}
button.ghost{background:#0f1114;border:1px solid #2a2f36;color:inherit;padding:10px 14px;border-radius:10px;cursor:pointer}
table{width:100%;border-collapse:collapse}
td,th{padding:6px 0;border-bottom:1px dashed #2a2f36}
td:last-child,th:last-child{text-align:right}
.group{margin:10px 0 6px 0;font-weight:700;opacity:.9}
.small{opacity:.9}

/* ---- spacing refinements for actions/buttons ---- */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;margin-bottom:4px}
.actions.center{justify-content:center}
.actions .cta,.actions .ghost{margin:0} /* rely on gap instead of margins */
.result .actions{margin-top:10px}
.card .actions + .hint{margin-top:8px}
/* buttons baseline height consistent */
button.cta,button.ghost{min-height:44px}
/* doc/explanation block */
.doc{margin-top:12px}
.doc-title{margin:0 0 6px 0;font-weight:700}
.doc-body code{background:#0f1114;border:1px solid #2a2f36;border-radius:6px;padding:0 6px}