* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f4f5f7; color: #23262d;
}
header {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 20px 28px; background: #fff; border-bottom: 1px solid #e2e4e8;
}
header h1 { margin: 0; font-size: 26px; }
header .sub { color: #6b7280; font-size: 14px; }
header .back { margin-left: auto; color: #ff6a00; text-decoration: none; font-weight: 600; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; padding: 24px 28px;
}
section {
  background: #fff; border: 1px solid #e2e4e8; border-radius: 10px; padding: 18px 20px;
}
section h2 { margin: 0 0 14px; font-size: 17px; }

label { display: block; margin: 12px 0 4px; font-size: 13px; color: #4b5563; }
label.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #23262d; }
label.check input { width: auto; margin: 0; }
input, select { width: 100%; padding: 8px 10px; border: 1px solid #cbd0d8; border-radius: 6px;
  background: #fff; color: #23262d; font-size: 14px; }
input[type="color"] { height: 38px; padding: 2px; }
input[type="range"] { padding: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; flex: 0 0 auto; }

.checks label, .colors .row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.colors .sw { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #0002; cursor: pointer; padding: 0; }
.colors .row span { font-size: 14px; }
.muted { color: #6b7280; font-size: 13px; }

footer {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 16px;
  padding: 16px 28px; background: #fff; border-top: 1px solid #e2e4e8;
}
footer button {
  margin-left: auto; padding: 12px 26px; border: none; border-radius: 8px;
  background: #ff6a00; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
}
footer button:disabled { background: #f0a877; cursor: default; }

@media (prefers-color-scheme: dark) {
  body { background: #17191e; color: #e6e8ec; }
  header, section, footer { background: #22252c; border-color: #333842; }
  input, select { background: #2a2d35; color: #e6e8ec; border-color: #3a3f4a; }
  label { color: #9aa0aa; }
  label.check, .colors .row span { color: #e6e8ec; }
}