:root{--accent:#2b6cb0;--bg:#f7fafc;--text:#111827}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;margin:0;background:var(--bg);color:var(--text)}
.container{max-width:880px;margin:24px auto;padding:20px;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(12,12,12,0.06)}
h1{font-size:24px;margin:0 0 6px}
.lead{color:#555}
fieldset{border:1px solid #e6e6e6;padding:14px;margin:12px 0;border-radius:8px}
legend{font-weight:600}
label{display:block;margin:10px 0}
input[type=text],input[type=email],input[type=tel],input[type=date],textarea,select{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px}
textarea{resize:vertical}
.checkboxes{display:flex;gap:8px;flex-wrap:wrap}
.inline{display:flex;align-items:center;gap:8px}
.actions{text-align:right;margin-top:12px}
button{background:var(--accent);color:#fff;padding:10px 18px;border:0;border-radius:8px;cursor:pointer}
.required{color:#c53030}
.color-row{display:flex;gap:12px}
.color-row label{flex:1}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.swatch{width:44px;height:44px;border-radius:6px;border:1px solid #ddd;cursor:pointer;transition:transform .2s ease}
.swatch:hover{transform:scale(1.1)}
@media(max-width:720px){.color-row{flex-direction:column}}



.color-bar {
  width: 100%;
  height: 36px;
  margin-top: 4px;
  position: relative;
}

.color-bar input[type="color"] {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  padding: 0;
}
.color-bar input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-bar input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}