*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --bg-void: #000000;
      --bg-deep: #0A0A0F;
      --bg-card: #12121A;
      --neon-pink: #FF10F0;
      --neon-cyan: #00F5FF;
      --neon-purple: #B624FF;
      --neon-gold: #FFD700;
      --neon-lime: #39FF14;
      --neon-orange: #FF6600;
      --oil-slick: linear-gradient(135deg, #FF10F0 0%, #B624FF 15%, #00F5FF 30%, #39FF14 45%, #FFD700 60%, #FF6600 75%, #FF10F0 100%);
      --text-white: #FFFFFF;
      --text-silver: #E0E0E0;
      --text-gray: #808080;
    }
    body {
      font-family: 'Space Grotesk', sans-serif;
      background: var(--bg-void);
      color: var(--text-white);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
    }
    .neon-bg {
      position: fixed;
      inset: 0;
      background: radial-gradient(ellipse at 20% 30%, rgba(255, 16, 240, 0.2) 0%, transparent 50%),
                  radial-gradient(ellipse at 80% 70%, rgba(0, 245, 255, 0.2) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }
    .login-container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 440px;
      padding: 24px;
    }
    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 900;
      text-align: center;
      margin-bottom: 8px;
      background: var(--oil-slick);
      background-size: 400% 400%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .logo-sub {
      text-align: center;
      color: var(--text-gray);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      margin-bottom: 48px;
    }
    .auth-card {
      background: rgba(18, 18, 26, 0.8);
      backdrop-filter: blur(20px);
      border: 2px solid rgba(255, 16, 240, 0.2);
      border-radius: 24px;
      padding: 48px 40px;
      transition: border-color 0.3s;
    }
    .auth-card:hover {
      border-color: rgba(0, 245, 255, 0.4);
      box-shadow: 0 0 40px rgba(0, 245, 255, 0.2);
    }
    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 32px;
      border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    }
    .auth-tab {
      flex: 1;
      padding: 16px;
      background: none;
      border: none;
      color: var(--text-gray);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
    }
    .auth-tab:hover {
      color: var(--text-silver);
    }
    .auth-tab.active {
      color: var(--neon-cyan);
    }
    .auth-tab.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--neon-cyan);
      box-shadow: 0 0 20px var(--neon-cyan);
    }
    .auth-form {
      display: none;
    }
    .auth-form.active {
      display: block;
    }
    .form-group {
      margin-bottom: 24px;
    }
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--neon-cyan);
    }
    .form-input {
      width: 100%;
      padding: 16px 20px;
      background: rgba(0, 0, 0, 0.5);
      border: 2px solid rgba(255, 16, 240, 0.3);
      border-radius: 12px;
      color: var(--text-white);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 16px;
      transition: all 0.3s;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--neon-cyan);
      box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
    }
    .form-input::placeholder {
      color: var(--text-gray);
    }
    .btn {
      width: 100%;
      padding: 18px 32px;
      border: 2px solid;
      border-radius: 12px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 8px;
    }
    .btn-primary {
      background: rgba(0, 245, 255, 0.1);
      border-color: var(--neon-cyan);
      color: var(--neon-cyan);
      box-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
    }
    .btn-primary:hover {
      background: rgba(0, 245, 255, 0.2);
      transform: translateY(-2px);
      box-shadow: 0 0 40px rgba(0, 245, 255, 0.6);
    }
    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    .error-msg {
      color: var(--neon-pink);
      font-size: 13px;
      margin-top: 16px;
      text-align: center;
      display: none;
    }
    .error-msg.visible {
      display: block;
    }
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--neon-cyan);
      text-decoration: none;
      font-weight: 600;
      margin-bottom: 24px;
      transition: opacity 0.3s;
    }
    .back-link:hover {
      opacity: 0.8;
    }