.shortener-card {
  padding: 0;
}

.shortener-card__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.eyebrow {
  display: inline-flex;
  margin: 0 0 .75rem;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .88rem;
  color: #7ef0c8;
  background: rgba(126,240,200,.08);
  border: 1px solid rgba(126,240,200,.18);
}

.shortener-copy {
  color: #a9b4d0;
  max-width: 62ch;
}

.shortener-form,
.shortener-result {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.shortener-form label,
.shortener-result label {
  display: grid;
  gap: 0.4rem;
  color: #a9b4d0;
}

.shortener-form input,
.shortener-result input {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: inherit;
}

.shortener-form button,
.shortener-result button {
  width: fit-content;
  min-height: 46px;
  padding: 0.9rem 1.2rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(135deg, #6ea8fe, #7ef0c8);
  color: #08111d;
}

.shortener-error {
  margin-top: 1rem;
  color: #ffb4a8;
}