:root {
      --bg-base: #060913;
      --bg-surface: #0c1222;
      --bg-card: rgba(16, 24, 44, 0.95);
      --gold-primary: #d4af37;
      --gold-light: #f5d77f;
      --gold-dark: #aa841c;
      --gold-glow: rgba(212, 175, 55, 0.25);
      --blue-accent: #2563eb;
      --emerald: #10b981;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --text-dim: #64748b;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-gold: rgba(212, 175, 55, 0.35);
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-full: 9999px;
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'Plus Jakarta Sans', sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

    body {
      background-color: var(--bg-base);
      color: var(--text-main);
      font-family: var(--font-body);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image:
        radial-gradient(circle at 15% 15%, rgba(212, 175, 55, 0.09) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(37, 99, 235, 0.1) 0%, transparent 45%),
        linear-gradient(to bottom, #060913, #090e1c, #060913);
      padding: 24px;
    }

    .auth-card {
      width: 100%;
      max-width: 460px;
      background: var(--bg-card);
      border: 1px solid var(--border-gold);
      border-radius: var(--radius-lg);
      padding: 38px 32px;
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(20px);
    }

    .auth-brand {
      text-align: center;
      margin-bottom: 26px;
    }

    .logo-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: linear-gradient(135deg, #1e293b, #0f172a);
      border: 1px solid var(--border-gold);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-primary);
      font-size: 1.5rem;
      margin: 0 auto 16px;
      box-shadow: 0 0 20px var(--gold-glow);
    }

    .auth-brand h2 {
      font-family: var(--font-heading);
      font-size: 1.7rem;
      margin-bottom: 4px;
    }

    .auth-brand p {
      font-size: 0.85rem;
      color: var(--text-dim);
    }

    .subdomain-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: var(--radius-full);
      background: rgba(37, 99, 235, 0.15);
      border: 1px solid rgba(37, 99, 235, 0.3);
      color: #93c5fd;
      font-size: 0.75rem;
      margin-top: 10px;
    }

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

    .form-group label {
      font-size: 0.82rem;
      color: var(--text-muted);
      font-weight: 600;
    }

    .form-group input {
      background: rgba(12, 18, 34, 0.85);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      color: #fff;
      font-size: 0.95rem;
      font-family: inherit;
      transition: 0.2s;
    }

    .form-group input:focus {
      outline: none;
      border-color: var(--gold-primary);
      box-shadow: 0 0 10px var(--gold-glow);
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      color: var(--text-muted);
      cursor: pointer;
      margin-bottom: 18px;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--gold-light), var(--gold-primary));
      color: #060913;
      padding: 13px 24px;
      border-radius: var(--radius-full);
      font-weight: 700;
      font-size: 0.98rem;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: none;
      cursor: pointer;
      width: 100%;
      justify-content: center;
      transition: 0.25s;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px var(--gold-glow);
    }

    .alert-box {
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      margin-bottom: 16px;
    }
    .alert-success {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #6ee7b7;
    }
    .d-none { display: none !important; }

    .auth-footer {
      text-align: center;
      margin-top: 24px;
      font-size: 0.8rem;
      color: var(--text-dim);
    }
    .auth-footer a {
      color: var(--gold-light);
      display: inline-block;
      margin-top: 12px;
      text-decoration: none;
    }.alert-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; }