.tr-referrer-wrap{
  --tr-forest:#163B26; --tr-deep:#0B1E13; --tr-gold:#B5872C; --tr-light:#E6F5E3;
  --tr-ink:#163B26; --tr-soft:rgba(22,59,38,.62); --tr-line:rgba(22,59,38,.18);
  --tr-error:#DC2626; --tr-error-lt:#FEF2F2;
  color:var(--tr-ink); max-width:520px; margin:0 auto;
}

.tr-referrer-title{ font-size:22px;font-weight:700;color:var(--tr-forest);margin:0 0 6px; }
.tr-referrer-sub{ color:var(--tr-soft);font-size:14px;line-height:1.5;margin:0 0 22px; }

.tr-referrer-alert{ background:var(--tr-error-lt);border:1px solid var(--tr-error);color:#8A1F2C;padding:14px 18px;border-radius:5px;margin-bottom:18px;font-weight:600;font-size:14px; }

.tr-referrer-form{ display:flex;flex-direction:column;gap:16px; }
.tr-referrer-honeypot{ position:absolute;left:-9999px; }
.tr-referrer-field label{ display:block;font-weight:700;font-size:14px;color:var(--tr-ink);margin-bottom:6px; }
.tr-referrer-optional{ font-weight:400;color:var(--tr-soft);font-size:12.5px; }
.tr-referrer-field input{
  width:100%;padding:12px 14px;border:1.5px solid var(--tr-line);border-radius:5px;font-size:15px;color:var(--tr-ink);background:#fff;font-family:inherit;box-sizing:border-box;
}
.tr-referrer-field input:focus{ outline:none;border-color:var(--tr-gold);box-shadow:0 0 0 3px rgba(181,135,44,.25); }

.tr-referrer-submit{
  background:var(--tr-forest);color:#fff;border:none;border-radius:5px;padding:13px 20px;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s ease;
}
.tr-referrer-submit:hover{ background:var(--tr-deep); }

.tr-referrer-link-box{
  background:var(--tr-light);border:1.5px solid var(--tr-line);border-radius:6px;padding:14px 16px;margin:0 0 14px;
}
.tr-referrer-link-input{
  width:100%;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--tr-forest);font-family:inherit;cursor:text;
}
.tr-referrer-link-input:focus{ outline:none; }

.tr-referrer-code{ font-size:14px;color:var(--tr-ink);margin:0 0 8px; }
.tr-referrer-hint{ font-size:13px;color:var(--tr-soft);margin:16px 0 0; }

@media (max-width:600px){
  .tr-referrer-wrap{ padding:0 20px; }
}