:root{
  /* Brand palette */
  --primary:#B01E6D; /* main red */
  --primary-700:#8B1A5A;
  --primary-100:#F7E4EE;
  --accent:#FF4D6D;
  --secondary:#2B2D30;
  --text:#444444; 
  --off:#F8F8F8; 
  --grey:#B0B0B0; 
  --warn:#FF7A00;
  --success:#10B981;
}
*{box-sizing:border-box}
body{font-family:Roboto, Arial, sans-serif; color:var(--text); margin:0; background:#fff}
.bg-off{background:var(--off)}
.hero{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%); color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center}
.card{background:#fff; margin:20px auto; padding:20px; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,0.08); max-width:1000px}
.card.wide{max-width:1000px}
.card.narrow{max-width:420px}
label{display:block; margin:12px 0 6px}
input, textarea{width:100%; padding:10px 12px; border:1px solid var(--grey); border-radius:8px}
.coloris, input[data-coloris]{ color:#000 !important; }
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid .full{grid-column:1 / -1}
.row{display:flex; gap:8px; align-items:center}
.btn, button{background:var(--primary); color:#fff; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; text-decoration:none; transition:transform .05s ease, box-shadow .2s ease}
.btn:hover, button:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(176,30,109,.25)}
.btn.secondary{background:var(--secondary)}
.btn.ghost{background:#fff; color:var(--primary); border:1px solid var(--primary)}
.btn.danger, button.danger{background:var(--warn)}
table{width:100%; border-collapse:collapse; margin-top:16px}
th, td{text-align:left; padding:10px; border-bottom:1px solid #eee}
.muted{color:#888}
code{background:var(--off); padding:2px 6px; border-radius:6px}