:root {
  --bg: #fff7fb;
  --ink: #6b5b95;
  --ink-soft: #9c8bbf;
  --lavender: #c8b8ff;
  --pink: #ffb6d5;
  --blue: #b8d8ff;
  --mint: #b8f0d8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, #ffe0ef 0%, transparent 40%),
    radial-gradient(circle at 85% 20%, #e0e8ff 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, #f0e0ff 0%, transparent 50%),
    var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.page-index { overflow-x: hidden; }
.page-join, .page-not-found { text-align: center; }

h1 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5rem);
  margin: 0;
  line-height: 1;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--lavender) 50%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px #fff)
          drop-shadow(0 0 1px #fff)
          drop-shadow(0 4px 0 #fff)
          drop-shadow(0 6px 12px rgba(200, 184, 255, .4));
}
.page-join h1 {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  margin: 0 0 14px;
}
.page-not-found h1 {
  font-size: clamp(4rem, 14vw, 8rem);
  letter-spacing: -2px;
}

form { width: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; margin-top: 36px; }
.field { display: flex; flex-direction: column; gap: 6px; }

label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  padding-left: 4px;
}

input {
  width: 100%; padding: 14px 20px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  color: var(--ink);
  font: inherit; font-weight: 600;
  box-shadow: 0 4px 0 rgba(200, 184, 255, .25), 0 8px 24px rgba(200, 184, 255, .15);
  outline: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
input::placeholder { color: var(--ink-soft); opacity: .6; }
input:focus {
  background: #fff;
  box-shadow: 0 0 0 4px var(--blue), 0 4px 0 rgba(200, 184, 255, .25), 0 8px 24px rgba(200, 184, 255, .25);
}

select {
  width: 100%; padding: 14px 44px 14px 20px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='none' stroke='%239c8bbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>") no-repeat right 20px center;
  color: var(--ink);
  font: inherit; font-weight: 600;
  box-shadow: 0 4px 0 rgba(200, 184, 255, .25), 0 8px 24px rgba(200, 184, 255, .15);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: box-shadow .15s, background-color .15s;
}
select:focus {
  background-color: #fff;
  box-shadow: 0 0 0 4px var(--blue), 0 4px 0 rgba(200, 184, 255, .25), 0 8px 24px rgba(200, 184, 255, .25);
}

.btn, button {
  margin-top: 8px;
  padding: 16px 28px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink) 0%, var(--lavender) 100%);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 0 rgba(168, 152, 220, .5), 0 10px 30px rgba(255, 182, 213, .4);
  transition: transform .1s, box-shadow .1s;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.btn:hover, button:hover { transform: translateY(-1px); }
.btn:active, button:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(168, 152, 220, .5), 0 6px 18px rgba(255, 182, 213, .4);
}
button:disabled { opacity: .7; cursor: progress; transform: none; }

.out, .err { font-weight: 600; text-align: center; margin-top: 4px; }
.out {
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  border: 2px dashed var(--lavender);
  word-break: break-all;
}
.out a { color: #8a6fd1; text-decoration: none; border-bottom: 2px dotted var(--lavender); }
.err { color: #e07a9b; }
.page-join .err { margin-top: 18px; font-weight: 700; min-height: 1.2em; }

.tag {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 18px 0 8px;
}

.sub {
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 0 0 32px;
  max-width: 360px;
}

.cf-turnstile { display: inline-block; margin: 8px auto; align-self: center; }