/* Skup Invite Generator — the internal form. Deliberately plain: this is a
   tool, not a landing page. Uses Skup's brand green so it still feels ours. */

.skup-gen{
  --sg-green:#10B77F;
  --sg-green-deep:#04211A;
  --sg-ink:#0B1512;
  --sg-line:rgba(11,21,18,.14);
  --sg-muted:rgba(11,21,18,.62);
  max-width:620px;
  margin:0 auto;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--sg-ink);
  line-height:1.6;
}

.skup-gen__head{margin-bottom:26px}
.skup-gen__head h2{margin:0 0 8px; font-size:1.6rem; line-height:1.2; color:var(--sg-ink)}
.skup-gen__head p{margin:0; color:var(--sg-muted); font-size:.98rem}

.skup-gen__error{
  background:#FBEFEE;
  border:1px solid rgba(193,68,63,.35);
  color:#8E2F2B;
  border-radius:10px;
  padding:13px 16px;
  margin:0 0 22px;
  font-size:.95rem;
}

.skup-gen__form{display:flex; flex-direction:column; gap:20px}

.skup-gen__field{display:flex; flex-direction:column; gap:7px}
.skup-gen__label{font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:9px}
.skup-gen__opt{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--sg-muted); border:1px solid var(--sg-line); border-radius:999px; padding:3px 9px;
}
.skup-gen__hint{font-size:.85rem; color:var(--sg-muted)}

.skup-gen__field input[type=text],
.skup-gen__field input[type=url],
.skup-gen__field input[type=password],
.skup-gen__field textarea,
.skup-gen__url{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--sg-ink);
  background:#fff;
  border:1px solid var(--sg-line);
  border-radius:10px;
  padding:12px 14px;
}
.skup-gen__field textarea{resize:vertical; min-height:84px}

.skup-gen__field input:focus,
.skup-gen__field textarea:focus,
.skup-gen__url:focus{
  outline:none;
  border-color:var(--sg-green);
  box-shadow:0 0 0 3px rgba(16,183,127,.18);
}

.skup-gen__field input[type=file]{
  font:inherit; font-size:.95rem; padding:10px 0; color:var(--sg-muted);
}

.skup-gen__btn{
  align-self:flex-start;
  background:var(--sg-green);
  color:var(--sg-green-deep);
  border:0;
  font:inherit;
  font-weight:700;
  font-size:1rem;
  padding:14px 26px;
  border-radius:11px;
  cursor:pointer;
  transition:background .15s ease;
}
.skup-gen__btn:hover{background:#35D08A}
.skup-gen__btn:focus-visible{outline:3px solid var(--sg-green); outline-offset:3px}
.skup-gen__btn.is-copied{background:var(--sg-ink); color:#fff}

.skup-gen__result{display:flex; gap:10px; align-items:stretch; margin-bottom:16px}
.skup-gen__result .skup-gen__url{flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem}
.skup-gen__result .skup-gen__btn{align-self:stretch; white-space:nowrap}

.skup-gen__meta{color:var(--sg-muted); font-size:.95rem; margin:0 0 18px}
.skup-gen__actions{display:flex; gap:18px; flex-wrap:wrap; margin:0}
.skup-gen__link{color:var(--sg-green); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.skup-gen__link:hover{color:var(--sg-green-deep)}

@media(max-width:560px){
  .skup-gen__result{flex-direction:column}
  .skup-gen__btn{align-self:stretch; text-align:center}
}