Verifying your invitation...

<!-- Form -->
<form id="setup-form" style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 32px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
  <div style="margin-bottom: 24px;">
    <label for="password" style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151; font-size: 14px;">
      Choose a Password
    </label>
    <input 
      type="password" 
      id="password" 
      required 
      minlength="8"
      placeholder="Enter a secure password"
      style="
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #d1d5db;
        border-radius: 8px;
        font-size: 15px;
        transition: all 0.2s;
        box-sizing: border-box;
      "
      onfocus="this.style.borderColor='#10b981'; this.style.outline='none'"
      onblur="this.style.borderColor='#d1d5db'"
    />
    <p style="margin: 8px 0 0 0; font-size: 13px; color: #6b7280;">
      Must be at least 8 characters long
    </p>
  </div>

  <div style="margin-bottom: 24px;">
    <label for="confirm-password" style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151; font-size: 14px;">
      Confirm Password
    </label>
    <input 
      type="password" 
      id="confirm-password" 
      required 
      minlength="8"
      placeholder="Re-enter your password"
      style="
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #d1d5db;
        border-radius: 8px;
        font-size: 15px;
        transition: all 0.2s;
        box-sizing: border-box;
      "
      onfocus="this.style.borderColor='#10b981'; this.style.outline='none'"
      onblur="this.style.borderColor='#d1d5db'"
    />
  </div>

  <!-- Consent Agreements -->
  <div style="margin-bottom: 24px;">
    <label style="display: block; font-weight: 600; color: #374151; font-size: 14px; margin-bottom: 8px;">Agreements</label>
    <div style="margin-bottom: 8px;">
      <input type="checkbox" id="consent-privacy" style="margin-right: 8px;" />
      <label for="consent-privacy" style="font-size: 14px; color: #374151;">I agree to the <a href="/privacy-policy" target="_blank" style="color: #10b981; text-decoration: underline;">privacy policy</a> (required)</label>
    </div>
    <div>
      <input type="checkbox" id="consent-marketing" style="margin-right: 8px;" />
      <label for="consent-marketing" style="font-size: 14px; color: #374151;">I agree to receive marketing emails (discounts, news, and event announcements)</label>
    </div>
  </div>

  <!-- Password strength indicator -->
  <div id="password-strength" style="display: none; margin-bottom: 20px;">
    <div style="display: flex; gap: 4px; margin-bottom: 8px;">
      <div class="strength-bar" style="flex: 1; height: 4px; background: #e5e7eb; border-radius: 2px;"></div>
      <div class="strength-bar" style="flex: 1; height: 4px; background: #e5e7eb; border-radius: 2px;"></div>
      <div class="strength-bar" style="flex: 1; height: 4px; background: #e5e7eb; border-radius: 2px;"></div>
      <div class="strength-bar" style="flex: 1; height: 4px; background: #e5e7eb; border-radius: 2px;"></div>
    </div>
    <p id="strength-text" style="margin: 0; font-size: 12px; color: #6b7280;"></p>
  </div>

  <!-- Error message -->
  <div id="setup-error" style="
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
  "></div>

  <!-- Submit button -->
  <button 
    type="submit" 
    id="setup-submit"
    style="
      width: 100%;
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      border: none;
      padding: 14px 24px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    "
    onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 6px 16px rgba(16, 185, 129, 0.4)'"
    onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(16, 185, 129, 0.3)'"
  >
    Create Account
  </button>
</form>

<!-- Info box -->
<div style="
  margin-top: 24px;
  background: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
">
  <p style="margin: 0; font-size: 14px; color: #6b7280;">
    By creating an account, you'll be able to manage your tickets, get member discounts, and stay updated on upcoming events.
  </p>
</div>

Invalid or Expired Link

This account setup link is invalid or has expired. Setup links are valid for 24 hours.

Account Created!

Your Dice Bastion account has been created successfully. You can now log in and manage your tickets, view upcoming events, and enjoy member benefits!