/* ── SPACE THEME ── */
    :root {
      --space-bg: #0a0e27;
      --space-surface: #1a1f3a;
      --space-surface-2: #141829;
      --space-border: #2d3556;
      --space-glow: #00d9ff;
      --space-glow-2: #a78bfa;
      --space-accent: #3b82f6;
      --space-text: #e4e9f7;
      --space-text-muted: #8892b0;
    }

    * {
      box-sizing: border-box;
    }

    /* ── ANIMATED BACKGROUND ── */
    body {
      background: var(--space-bg);
      color: var(--space-text);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%),
                  radial-gradient(ellipse at 80% 20%, rgba(0, 217, 255, 0.05) 0%, transparent 50%),
                  radial-gradient(ellipse at 20% 80%, rgba(167, 139, 250, 0.05) 0%, transparent 50%);
      pointer-events: none;
      z-index: 1;
    }

    /* ── STARS BACKGROUND ── */
    @keyframes twinkle {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    .stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: var(--space-text);
      border-radius: 50%;
      animation: twinkle 3s infinite;
    }

    /* ── ROCKETS ── */
    /* ── MAIN CONTENT ── */
    main {
      position: relative;
      z-index: 10;
    }

    .meetup-wrap {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: calc(var(--nav-h, 60px) + 64px) 20px 80px;
    }

    /* ── HERO ── */
    .meetup-hero {
      text-align: center;
      max-width: 720px;
      margin-bottom: 64px;
      animation: fadeIn 0.8s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .meetup-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 217, 255, 0.08);
      border: 1px solid rgba(0, 217, 255, 0.3);
      color: var(--space-glow);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: 100px;
      margin-bottom: 32px;
      backdrop-filter: blur(8px);
      box-shadow: 0 0 20px rgba(0, 217, 255, 0.15);
    }

    .meetup-title {
      font-size: clamp(2.2rem, 6vw, 3.5rem);
      font-weight: 700;
      letter-spacing: -2px;
      line-height: 1.1;
      margin-bottom: 20px;
      background: linear-gradient(135deg, #00d9ff 0%, #a78bfa 50%, #3b82f6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .meetup-desc {
      font-size: 1.1rem;
      color: var(--space-text-muted);
      line-height: 1.8;
      margin-bottom: 40px;
    }

    .meetup-desc strong {
      color: var(--space-glow);
    }

    .meetup-meta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 32px;
    }

    .meetup-meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(10, 13, 35, 0.85);
      border: 1px solid var(--space-border);
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--space-text);
      backdrop-filter: blur(24px);
      transition: all 0.3s ease;
    }

    .meetup-meta-item:hover {
      border-color: var(--space-glow);
      background: rgba(0, 217, 255, 0.05);
      box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
    }

    .urgency {
      font-size: 0.9rem;
      color: var(--space-glow);
      font-weight: 600;
      margin-bottom: 20px;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    /* ── FORM CARD ── */
    .meetup-card {
      width: 100%;
      max-width: 580px;
      background: rgba(10, 13, 35, 0.85);
      border: 1px solid var(--space-border);
      border-radius: 20px;
      padding: 48px;
      backdrop-filter: blur(24px);
      box-shadow: 0 0 40px rgba(0, 217, 255, 0.1),
                  inset 0 0 60px rgba(59, 130, 246, 0.05);
      animation: fadeIn 0.8s ease-out 0.2s both;
    }

    .meetup-card-title {
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
      color: var(--space-text);
    }

    .meetup-card-sub {
      font-size: 0.9rem;
      color: var(--space-text-muted);
      margin-bottom: 36px;
      line-height: 1.6;
    }

    /* ── FORM FIELDS ── */
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
    }

    .form-group:last-of-type {
      margin-bottom: 28px;
    }

    .form-label {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--space-text-muted);
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .form-label .required {
      color: var(--space-glow);
      margin-left: 4px;
    }

    .form-input,
    .form-select,
    .form-textarea {
      background: rgba(20, 24, 41, 0.8);
      border: 1px solid var(--space-border);
      border-radius: 10px;
      color: var(--space-text);
      font-family: inherit;
      font-size: 0.95rem;
      padding: 12px 16px;
      outline: none;
      transition: all 0.3s ease;
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
      backdrop-filter: blur(4px);
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: var(--space-text-muted);
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: var(--space-glow);
      box-shadow: 0 0 20px rgba(0, 217, 255, 0.3),
                  inset 0 0 15px rgba(0, 217, 255, 0.05);
      background: rgba(20, 24, 41, 0.95);
    }

    .form-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d9ff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
      cursor: pointer;
    }

    .form-select option {
      background: var(--space-surface);
      color: var(--space-text);
    }

    .form-textarea {
      resize: vertical;
      min-height: 110px;
      line-height: 1.6;
    }

    .form-hint {
      font-size: 0.8rem;
      color: var(--space-text-muted);
      margin-top: 6px;
    }

    /* ── SUBMIT BTN ── */
    .meetup-submit {
      width: 100%;
      background: linear-gradient(135deg, var(--space-accent) 0%, var(--space-glow-2) 100%);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 600;
      padding: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
    }

    .meetup-submit::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
    }

    .meetup-submit:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 0 40px rgba(0, 217, 255, 0.5);
    }

    .meetup-submit:hover:not(:disabled)::before {
      left: 100%;
    }

    .meetup-submit:active:not(:disabled) {
      transform: translateY(0);
    }

    .meetup-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ── SPINNER ── */
    .btn-spinner {
      display: none;
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin: 0 auto;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .meetup-submit.loading .btn-text {
      display: none;
    }

    .meetup-submit.loading .btn-spinner {
      display: block;
    }

    /* ── ERROR / SUCCESS MSG ── */
    .form-message {
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 0.875rem;
      font-weight: 500;
      margin-top: 16px;
      display: none;
      backdrop-filter: blur(8px);
    }

    .form-message.error {
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #fca5a5;
    }

    .form-message.success {
      background: rgba(34, 197, 94, 0.15);
      border: 1px solid rgba(34, 197, 94, 0.4);
      color: #86efac;
    }

    .form-message.show {
      display: block;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── SUCCESS STATE ── */
    .meetup-success {
      display: none;
      text-align: center;
      padding: 20px 0 10px;
      animation: fadeIn 0.6s ease-out;
    }

    .meetup-success.show {
      display: block;
    }

    .success-emoji {
      font-size: 64px;
      margin-bottom: 20px;
      line-height: 1;
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    .success-title {
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: 14px;
      letter-spacing: -0.5px;
      background: linear-gradient(135deg, var(--space-glow) 0%, var(--space-glow-2) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .success-body {
      font-size: 0.95rem;
      color: var(--space-text-muted);
      line-height: 1.7;
    }

    /* ── FIELD ERROR ── */
    .form-input.invalid,
    .form-select.invalid,
    .form-textarea.invalid {
      border-color: #ef4444;
      box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
    }

    .field-error {
      font-size: 0.8rem;
      color: #fca5a5;
      display: none;
    }

    .field-error.show {
      display: block;
    }

    /* ── DIVIDER ── */
    .form-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--space-border), transparent);
      margin: 32px 0;
    }

    /* ── PRIVACY NOTE ── */
    .privacy-note {
      font-size: 0.8rem;
      color: var(--space-text-muted);
      text-align: center;
      line-height: 1.6;
      margin-top: 20px;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 600px) {
      .meetup-wrap {
        padding: calc(var(--nav-h, 60px) + 40px) 16px 60px;
      }

      .meetup-card {
        padding: 32px 24px;
        border-radius: 16px;
      }

      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .meetup-hero {
        margin-bottom: 48px;
      }
    }

.meetup-back-link {
  display: inline-block;
  margin-top: 32px;
  color: var(--space-glow);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid var(--space-glow);
  padding-bottom: 2px;
  transition: color 0.3s ease;
}
.meetup-back-link:hover {
  color: var(--space-glow-2);
}

/* ── Inline-style replacement ── */
.required-mark { color: var(--space-glow); }