body {
  background-color: #f5f5f5; /* light grey background */
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  color: #222;
}

.header {
  text-align: center;
  margin-top: 30px;
}

.logo {
  height: 60px;
  margin-bottom: 10px;
}

h1 {
  font-size: 1.8em;
  margin: 0;
}

p {
  text-align: center;
  margin-top: 10px;
  font-size: 1.1em;
}

.draw-table {
  margin: 30px auto;
  border-collapse: collapse;
  width: 750px; /* sensible fixed width */
  max-width: 90%; /* fallback for small screens */
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.draw-table th,
.draw-table td {
  padding: 6px 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.draw-table th {
  background-color: #e6e6e6;
  font-weight: 600;
}

.draw-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.swatch {
  width: 40px;
  height: 24px;
  border: 1px solid #888;
  border-radius: 4px;
  display: inline-block;
  margin: 0;       /* no margin */
  padding: 0;      /* no padding */
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-weight:600;
  font-size: 1.0rem;   /* ~19px */
  justify-content:center;

}
.btn.ghost{ background:transparent; }
.btn.small{ padding:6px 10px; font-size:.9rem; }
.btn.primary{ border-color:transparent; background:var(--brand); color:#fff; }
.btn.primary:hover{ filter:brightness(0.95); }

.btn-row{
  margin-top:14px;
  text-align: center;
}

.btn-row .btn{ width:auto; }