/* American Flag Size Calculator - styles */
.us-flag-calc { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; max-width: 880px; margin: 1rem auto; padding: 1rem; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
.us-flag-calc h2 { margin: 0 0 0.5rem 0; font-size: 1.25rem; }
.flag-form { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.row { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.row label { min-width: 6.5rem; }
.row input[type="number"] { flex:1 1 8rem; padding:0.45rem; border:1px solid #cfcfcf; border-radius:6px; }
.row select { padding:0.45rem; border-radius:6px; border:1px solid #cfcfcf; }
.row.buttons { gap:0.5rem; margin-top:0.5rem; }
.row.buttons button { padding:0.5rem 0.75rem; border-radius:6px; border:1px solid #bbb; background:#fafafa; cursor:pointer; }
.row.buttons button:hover { filter:brightness(0.98); }
.results { margin-top:1rem; }
.results-list { list-style:none; padding:0; margin:0 0 1rem 0; display:grid; gap:0.25rem; }
.results-list li { padding:0.35rem 0.5rem; background:#f7f7f9; border-radius:6px; border:1px solid #efefef; display:flex; justify-content:space-between; align-items:center; }
.preview-area { margin-top:0.75rem; }
.flag-preview { width:100%; max-width:680px; height: auto; border:1px solid #ddd; padding:0.6rem; background:#fff; border-radius:6px; display:flex; justify-content:center; align-items:center; }
.flag-svg { width:100%; height:auto; max-height:360px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); border-radius:4px; }

/* Responsive */
@media (max-width:520px) {
  .row label { min-width: 5rem; }
  .us-flag-calc { padding: 0.6rem; }
}