:root{
  --brown:#7a3b12; --brown-d:#5a2a0b; --green:#1f7a3a; --red:#c8202c;
  --gold:#f6c945; --cream:#fff8e6; --ink:#2b1a0e; --muted:#6f5a48;
  --line:#ecdcc0; --wa:#25d366;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--cream);color:var(--ink);line-height:1.45;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.demo{background:var(--brown-d);color:#ffe9b8;font-size:13px;text-align:center;padding:6px 16px}
.demo a{color:var(--gold);font-weight:800}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
input,textarea,select{width:100%;font:inherit;font-size:16px;border:1px solid #d8c4a2;border-radius:10px;padding:10px;background:#fffdf7;color:var(--ink)}
input.bad,textarea.bad{border:2px solid var(--red)}
.note{font-size:13px;border-radius:10px;padding:8px 10px;margin-top:10px}
.note.ok{background:#e7f6ec;color:#15602d}
.note.ok a{color:#15602d;font-weight:700}
.note.info{background:#fff4d6;color:#7a5200}
.err{color:var(--red);font-size:13px;margin-top:8px;min-height:1em}
/* Light watermark: one line per large tile, so it is visible without crowding the page */
.wm{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420'%3E%3Ctext x='280' y='215' text-anchor='middle' transform='rotate(-30 280 210)' font-family='Arial,sans-serif' font-size='22' font-weight='700' fill='%23000'%3ESAMPLE %E2%80%93 IQ Technologies%3C/text%3E%3C/svg%3E")}
@media print{.wm{opacity:.15}}