/* Shortlink — neon atelier, magenta / cyan */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@600;700;800&display=swap");

html { background: transparent !important; }
body.kit-shortlink {
  --gold: #ff2bd6;
  --gold-bright: #7af7ff;
  --gold-rgb: 255, 43, 214;
  --ink: #05010a;
  --line: rgba(122, 247, 255, .35);
  --muted: #c9c2d6;
  --text: #f7f3ff;
  --ok: #7af7ff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: #05010a;
}
body.kit-shortlink .auth-shell { position: relative; z-index: 1; }
body.kit-shortlink::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(800px 380px at 12% 10%, rgba(255, 43, 214, .22), transparent 55%),
    radial-gradient(700px 420px at 92% 88%, rgba(122, 247, 255, .16), transparent 50%),
    linear-gradient(180deg, rgba(5, 1, 10, .12), rgba(5, 1, 10, .62)),
    url("/assets/bg/shortlink.webp") center / cover no-repeat;
}
body.kit-shortlink h1,
body.kit-shortlink .auth-kicker,
body.kit-shortlink .eyebrow {
  font-family: Syne, system-ui, sans-serif;
  letter-spacing: -.06em;
  text-transform: none;
}
body.kit-shortlink .eyebrow {
  letter-spacing: .22em;
  color: #7af7ff;
}
body.kit-shortlink .auth-shell {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
body.kit-shortlink .auth-brand {
  border: 0;
  background: transparent;
  min-width: 0;
  padding: clamp(1.2rem, 4vw, 3rem) clamp(1rem, 4vw, 3.2rem);
}
body.kit-shortlink .auth-kicker {
  font-size: clamp(2.2rem, 7vw, 5.4rem);
  line-height: .88;
  margin: .2rem 0 .5rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: linear-gradient(90deg, #fff, #7af7ff 40%, #ff2bd6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 43, 214, .35));
}
body.kit-shortlink .auth-brand h1 {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  max-width: 28ch;
}
body.kit-shortlink .lede { max-width: 46ch; }
body.kit-shortlink .feature-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .7rem;
}
body.kit-shortlink .feature-list li {
  border-radius: 18px;
  border: 1px solid rgba(122, 247, 255, .28);
  background: rgba(8, 0, 16, .45);
  backdrop-filter: blur(12px);
  min-width: 0;
}
body.kit-shortlink .auth-panel {
  min-width: 0;
  padding: clamp(1rem, 4vw, 2.4rem);
}
body.kit-shortlink .card {
  width: min(480px, 100%);
  max-width: 100%;
  margin-left: auto;
  border-radius: 28px;
  border: 1px solid rgba(255, 43, 214, .35);
  background: rgba(10, 2, 18, .72);
  backdrop-filter: blur(22px);
  box-shadow: 0 24px 80px rgba(255, 43, 214, .18), 0 0 0 1px rgba(122, 247, 255, .12);
}
body.kit-shortlink .tabs a.on {
  color: #7af7ff;
  box-shadow: inset 0 -2px 0 #ff2bd6;
}
body.kit-shortlink input {
  border-radius: 14px;
  border-color: rgba(122, 247, 255, .28);
  background: #0b0314;
  font-family: inherit;
}
body.kit-shortlink button {
  border-radius: 999px;
  background: linear-gradient(90deg, #ff2bd6, #7a3cff);
  color: #fff;
  box-shadow: 0 16px 40px rgba(255, 43, 214, .35);
}
body.kit-shortlink button:hover { filter: brightness(1.08); }
body.kit-shortlink .ghost {
  color: #7af7ff;
  border-color: rgba(122, 247, 255, .4);
}
body.kit-shortlink .topbar {
  background: rgba(5, 1, 10, .8);
  border-bottom-color: rgba(255, 43, 214, .3);
}
@media (max-width: 920px) {
  body.kit-shortlink .auth-shell { grid-template-columns: minmax(0, 1fr); }
  body.kit-shortlink .auth-panel { order: -1; padding: .9rem .85rem 1.4rem; }
  body.kit-shortlink .auth-brand { padding: .9rem .85rem 1.6rem; }
  body.kit-shortlink .auth-kicker { font-size: clamp(1.7rem, 9vw, 2.35rem); }
  body.kit-shortlink .card { margin: 0 auto; }
  body.kit-shortlink .brand-lockup img { width: min(148px, 58vw); }
}
@media (max-width: 560px) {
  body.kit-shortlink .tabs a { font-size: .78rem; padding: .55rem .15rem; }
}
