:root{
  --promo-accent:var(--accent,var(--red,var(--orange,#c2410c)));
  --promo-line:var(--line2,var(--line,var(--rule,rgba(127,127,127,.3))));
  --promo-mute:var(--mute,#777);
  --promo-ok:var(--green,var(--live,var(--accent,#2f9e5b)));
  --promo-bad:#d92d20;
}
.promo-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:10px 0 0;padding:8px 12px;border:1px dashed var(--promo-accent);border-radius:10px;font-size:13.5px;line-height:1.4;color:inherit}
.promo-note[hidden]{display:none}
.promo-note s{color:var(--promo-mute);text-decoration-thickness:1.5px}
.promo-note span{color:var(--promo-accent);font-weight:600}
.promo-field{display:flex;flex-direction:column;gap:8px;width:min(520px,100%);margin:28px auto 0;text-align:left}
.promo-field label{font-size:14px;color:var(--promo-mute)}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;min-width:0;font:inherit;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:inherit;background:transparent;border:1px solid var(--promo-line);border-radius:10px;padding:10px 12px}
.promo-row input::placeholder{text-transform:none;letter-spacing:0;color:var(--promo-mute)}
.promo-row input:focus-visible,.promo-row button:focus-visible{outline:2px solid var(--promo-accent);outline-offset:2px}
.promo-row button{font:inherit;font-weight:700;font-size:15px;color:inherit;background:transparent;border:1px solid var(--promo-accent);border-radius:10px;padding:10px 16px;cursor:pointer}
.promo-row button:hover{background:color-mix(in srgb,var(--promo-accent) 14%,transparent)}
.promo-row button[disabled]{opacity:.6;cursor:progress}
.promo-msg{min-height:1.4em;font-size:14px;color:var(--promo-mute)}
.promo-msg:empty{display:none}
.promo-msg[data-state=on]{align-self:flex-start;padding:6px 12px;border-radius:999px;color:var(--promo-accent);background:color-mix(in srgb,var(--promo-accent) 12%,transparent);font-weight:600}
.promo-msg[data-state=error]{color:var(--promo-bad)}