Advanced Login Form

51 securearray494

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AETHER // Quantum Identity Nexus</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <div id="canvas-container"></div>
  
  
  <header class="hud-topbar">
    <div class="hud-brand">
      <div class="hud-pulse-dot"></div>
      <span class="hud-title">AETHER <span class="dim">v4.9</span></span>
      <span class="hud-badge">SECURE PROTOCOL</span>
    </div>

<div class="hud-telemetry">
      <span class="hud-stat"><span class="label">NODE:</span> <span class="val" id="telemetry-node">CORE-US-EAST</span></span>
      <span class="hud-stat"><span class="label">ENCRYPTION:</span> <span class="val green">QUANTUM-256</span></span>
      <span class="hud-stat"><span class="label">LATENCY:</span> <span class="val" id="telemetry-ping">14ms</span></span>
    </div>

<div class="hud-controls">
      <button id="sound-toggle" class="hud-btn" title="Toggle Synthetic Audio Feedback" aria-label="Toggle Sound">
        <svg class="icon sound-on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
          <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
        </svg>
        <svg class="icon sound-off hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
          <line x1="23" y1="9" x2="17" y2="15"></line>
          <line x1="17" y1="9" x2="23" y2="15"></line>
        </svg>
        <span class="btn-text">AUDIO: ON</span>
      </button>

<div class="sentinel-display" id="sentinel-container">
    <div class="sentinel-aura"></div>
    <div class="sentinel-halo"></div>
    <div class="sentinel-core-wrap">
      
      <div class="orbital-ring ring-1"></div>
      <div class="orbital-ring ring-2"></div>
      <div class="orbital-ring ring-3"></div>
      <div class="sentinel-status" id="sentinel-status">SENTINEL: STANDBY</div>
    </div>
  </div>

<main class="login-wrapper">
    <div class="auth-card" id="auth-card">
      
      <div class="card-glare" id="card-glare"></div>
      <div class="card-border-glow"></div>

<div class="auth-tabs" role="tablist">
        <button class="tab-btn active" data-tab="credentials" role="tab" aria-selected="true">
          <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
          </svg>
          <span>Credentials</span>
        </button>

<button class="tab-btn" data-tab="biometrics" role="tab" aria-selected="false">
          <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2a10 10 0 0 0-10 10c0 3.3 1.6 6.3 4 8.1"></path>
            <path d="M12 6a6 6 0 0 0-6 6c0 1.9 1 3.7 2.5 4.8"></path>
            <path d="M12 10a2 2 0 0 0-2 2c0 .6.3 1.2.8 1.6"></path>
            <path d="M12 22a10 10 0 0 0 10-10c0-3.3-1.6-6.3-4-8.1"></path>
            <path d="M12 18a6 6 0 0 0 6-6c0-1.9-1-3.7-2.5-4.8"></path>
            <path d="M12 14a2 2 0 0 0 2-2c0-.6-.3-1.2-.8-1.6"></path>
          </svg>
          <span>Biometrics</span>
        </button>

<button class="tab-btn" data-tab="passkey" role="tab" aria-selected="false">
          <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
            <polyline points="2 17 12 22 22 17"></polyline>
            <polyline points="2 12 12 17 22 12"></polyline>
          </svg>
          <span>Neural Key</span>
        </button>
      </div>

<div class="tab-viewport">
        
        <section class="tab-panel active" id="tab-credentials" role="tabpanel">
          <div class="auth-header">
            <h1 class="auth-title">Nexus Gateway</h1>
            <p class="auth-subtitle">Verify cryptographic credentials to initialize neural link</p>
          </div>

<form id="credentials-form" autocomplete="off" novalidate>
            
            <div class="form-group" id="group-email">
              <label for="input-email" class="floating-label">OPERATOR IDENTIFIER</label>
              <div class="input-shell">
                <span class="input-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="4"></circle>
                    <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
                  </svg>
                </span>
                <input 
                  type="email" 
                  id="input-email" 
                  name="email"
                  placeholder="operator@aether.ai" 
                  required
                  spellcheck="false"
                  value="neo.anderson@matrix.io"
                >
                <div class="input-indicator" id="email-indicator">
                  <span class="indicator-dot"></span>
                </div>
              </div>
              <span class="field-hint" id="email-hint">Awaiting valid neural signature</span>
            </div>

<div class="form-group" id="group-password">
              <div class="label-row">
                <label for="input-password" class="floating-label">QUANTUM CIPHER</label>
                <a href="#forgot" class="hud-link" id="link-forgot">RECOVER CIPHER?</a>
              </div>
              <div class="input-shell">
                <span class="input-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                  </svg>
                </span>
                <input 
                  type="password" 
                  id="input-password" 
                  name="password"
                  placeholder="••••••••••••••••" 
                  required
                  value="Cyph3r_Q#2026"
                >
                <button type="button" class="password-toggle" id="password-toggle" aria-label="Toggle Cipher Visibility">
                  <svg class="eye-show" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                    <circle cx="12" cy="12" r="3"></circle>
                  </svg>
                  <svg class="eye-hide hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                    <line x1="1" y1="1" x2="23" y2="23"></line>
                  </svg>
                </button>
              </div>

<div class="entropy-container">
                <div class="entropy-header">
                  <span class="entropy-label">ENTROPY STRENGTH</span>
                  <span class="entropy-score" id="entropy-text">QUANTUM GRADE</span>
                </div>
                <div class="entropy-meter">
                  <div class="entropy-segment" data-level="1"></div>
                  <div class="entropy-segment" data-level="2"></div>
                  <div class="entropy-segment" data-level="3"></div>
                  <div class="entropy-segment" data-level="4"></div>
                </div>
              </div>
            </div>

<div class="form-row-between">
              <label class="custom-checkbox">
                <input type="checkbox" id="check-remember" checked>
                <span class="checkbox-box">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </span>
                <span class="checkbox-text">Maintain Quantum State (30d)</span>
              </label>

<button type="submit" class="auth-submit-btn" id="submit-credentials">
              <span class="btn-backdrop"></span>
              <span class="btn-glow"></span>
              <span class="btn-content">
                <span class="btn-text-main">TRANSMIT CREDENTIALS</span>
                <svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                  <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
              </span>
              <span class="btn-scanner-bar"></span>
            </button>
          </form>

<div class="divider">
            <span class="divider-line"></span>
            <span class="divider-text">OR DECENTRALIZED PROTOCOL</span>
            <span class="divider-line"></span>
          </div>

<div class="social-grid">
            <button class="social-btn" data-provider="github" title="Authenticate with GitHub">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
              </svg>
              <span>GitHub</span>
            </button>

<button class="social-btn" data-provider="google" title="Authenticate with Google">
              <svg viewBox="0 0 24 24">
                <path fill="#EA4335" d="M12 5c1.6 0 3 .6 4.1 1.6l3.1-3.1C17.3 1.7 14.8 1 12 1 7.5 1 3.7 3.6 1.9 7.3l3.7 2.9C6.5 7.4 9 5 12 5z"/>
                <path fill="#4285F4" d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5c-.3 1.5-1.1 2.8-2.4 3.7l3.7 2.9c2.2-2 3.7-5 3.7-8.8z"/>
                <path fill="#FBBC05" d="M5.6 14.8c-.2-.7-.4-1.5-.4-2.3s.2-1.6.4-2.3L1.9 7.3C.7 9.7 0 12.3 0 15.2c0 2.8.7 5.5 1.9 7.9l3.7-2.9z"/>
                <path fill="#34A853" d="M12 23c3.2 0 6-1.1 8-3l-3.7-2.9c-1.1.7-2.5 1.2-4.3 1.2-3 0-5.5-2.4-6.4-5.2L1.9 16c1.8 3.7 5.6 7 10.1 7z"/>
              </svg>
              <span>Google SSO</span>
            </button>

<section class="tab-panel" id="tab-biometrics" role="tabpanel">
          <div class="auth-header">
            <h2 class="auth-title">Neural Biometrics</h2>
            <p class="auth-subtitle">Engage biometric hardware scanner for retinal & dermal passkey</p>
          </div>

<div class="fingerprint-art">
              <svg viewBox="0 0 100 100" class="fp-svg">
                <path class="fp-path p1" d="M50,15 A35,35 0 0,0 15,50 A35,35 0 0,0 20,68" />
                <path class="fp-path p2" d="M85,50 A35,35 0 0,0 50,15" />
                <path class="fp-path p3" d="M26,35 A25,25 0 0,1 74,35 A25,25 0 0,1 78,55" />
                <path class="fp-path p4" d="M34,42 A18,18 0 0,1 66,42 A18,18 0 0,1 68,58" />
                <path class="fp-path p5" d="M42,48 A10,10 0 0,1 58,48 A10,10 0 0,1 58,68 A10,10 0 0,1 42,68" />
                <path class="fp-path p6" d="M50,56 A4,4 0 0,1 54,60 A4,4 0 0,1 46,60" />
                <path class="fp-path p7" d="M22,74 A38,38 0 0,0 50,88 A38,38 0 0,0 78,74" />
                <path class="fp-path p8" d="M32,80 A25,25 0 0,0 50,85 A25,25 0 0,0 68,80" />
              </svg>
            </div>

<div class="scanner-status" id="scanner-status">
              <span class="scanner-prompt">PRESS AND HOLD TO INITIATE SCAN</span>
              <span class="scanner-progress-bar"><span class="progress-fill" id="scan-progress"></span></span>
            </div>
          </div>

<div class="scanner-metrics">
            <div class="metric-box">
              <span class="m-label">CONFIDENCE</span>
              <span class="m-val" id="metric-confidence">0.00%</span>
            </div>
            <div class="metric-box">
              <span class="m-label">MINUTIAE NODES</span>
              <span class="m-val" id="metric-nodes">128/128</span>
            </div>
            <div class="metric-box">
              <span class="m-label">LIVENESS</span>
              <span class="m-val green" id="metric-liveness">AUTHENTIC</span>
            </div>
          </div>

<button type="button" class="auth-submit-btn secondary" id="btn-manual-scan">
            <span class="btn-content">
              <span class="btn-text-main">ENGAGE OPTICAL SENSOR</span>
            </span>
          </button>
        </section>

<section class="tab-panel" id="tab-passkey" role="tabpanel">
          <div class="auth-header">
            <h2 class="auth-title">Quantum Cipher Matrix</h2>
            <p class="auth-subtitle">Input 6-digit dynamic hardware time-based token (TOTP)</p>
          </div>

<div class="otp-timer-row">
              <div class="timer-pie-wrap">
                <svg class="timer-svg" viewBox="0 0 36 36">
                  <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                  <path class="circle-progress" id="otp-progress-ring" stroke-dasharray="100, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                </svg>
                <span class="timer-number" id="otp-seconds">30</span>
              </div>
              <div class="otp-info">
                <span class="otp-title">SYNCHRONIZED EPHEMERAL TOKEN</span>
                <span class="otp-desc">Code refreshes in quantum cycle</span>
              </div>
            </div>

<button type="button" class="auth-submit-btn" id="submit-otp">
              <span class="btn-content">
                <span class="btn-text-main">VERIFY MATRIX HASH</span>
                <svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </span>
            </button>
          </div>
        </section>
      </div>

<footer class="auth-footer">
        <div class="footer-register">
          <span>Unregistered neural entity?</span>
          <a href="#signup" class="neon-link" id="link-toggle-mode">INITIALIZE REGISTRATION</a>
        </div>
      </footer>
    </div>

<div class="success-screen hidden" id="success-screen">
      <div class="success-card">
        <div class="success-emitter">
          <div class="emitter-ring"></div>
          <div class="emitter-check">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
        </div>

<div class="success-badge">AUTHENTICATION VERIFIED</div>
        <h2 class="success-title">WELCOME, OPERATOR</h2>
        <p class="success-desc">Neural interface synchronized with AETHER Master Core</p>

<div class="credentials-hud">
          <div class="hud-data-row">
            <span class="data-key">ENTITY:</span>
            <span class="data-val cyan" id="success-user">neo.anderson@matrix.io</span>
          </div>
          <div class="hud-data-row">
            <span class="data-key">CLEARANCE:</span>
            <span class="data-val amber">LEVEL-OMEGA (ADMIN)</span>
          </div>
          <div class="hud-data-row">
            <span class="data-key">SESSION HASH:</span>
            <span class="data-val mono" id="session-hash">0x7F9B...4A2D</span>
          </div>
          <div class="hud-data-row">
            <span class="data-key">QUANTUM ENTROPY:</span>
            <span class="data-val green">100% STABLE</span>
          </div>
        </div>

<div class="success-actions">
          <button class="auth-submit-btn" id="btn-enter-console">
            <span class="btn-content">
              <span>ENTER CONSOLE DASHBOARD</span>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="btn-arrow">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
              </svg>
            </span>
          </button>
          
          <button class="hud-link mt-3" id="btn-reset-session">
            TERMINATE SESSION & RE-AUTHENTICATE
          </button>
        </div>
      </div>
    </div>
  </main>

<aside class="syslog-panel" id="syslog-panel">
    <div class="syslog-bar" id="syslog-bar">
      <div class="syslog-title">
        <span class="sys-dot"></span>
        <span>AETHER KERNEL STREAM</span>
      </div>
      <button class="syslog-toggle-btn" id="syslog-toggle" aria-label="Toggle System Log">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
      </button>
    </div>
    <div class="syslog-terminal" id="syslog-content">
      <div class="log-line"><span class="log-time">[00:00:01]</span> <span class="log-sys">SYS:</span> AETHER Kernel v4.9 Initialized</div>
      <div class="log-line"><span class="log-time">[00:00:02]</span> <span class="log-ok">OK:</span> WebGL Shader Subsystem Online</div>
      <div class="log-line"><span class="log-time">[00:00:03]</span> <span class="log-ok">OK:</span> WebAudio Synthesizer Ready</div>
      <div class="log-line"><span class="log-time">[00:00:04]</span> <span class="log-info">INFO:</span> Sentinel Sentinel Core Standby. Awaiting user stimulus.</div>
    </div>
  </aside>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  
  <script src="app.js"></script>
</body>
</html>

CSS

/* ===================================================================
   AETHER // QUANTUM-ID LOGIN STYLING
   State-of-the-art Sci-Fi / Glassmorphism / Cybernetic UI
   =================================================================== */

:root {
  /* Core Palette: Neon Cyan / Electric Purple / Deep Void */
  --bg-deep: #05070e;
  --bg-surface: rgba(13, 17, 28, 0.72);
  --bg-surface-elevated: rgba(22, 29, 48, 0.82);
  --bg-card: rgba(10, 14, 26, 0.68);
  --bg-input: rgba(7, 10, 20, 0.75);

--accent-cyan: #00f3ff;
  --accent-cyan-glow: rgba(0, 243, 255, 0.45);
  --accent-magenta: #ff007f;
  --accent-magenta-glow: rgba(255, 0, 127, 0.4);
  --accent-purple: #7928ca;
  --accent-amber: #ffaa00;
  --accent-amber-glow: rgba(255, 170, 0, 0.45);
  --accent-emerald: #00ff88;
  --accent-emerald-glow: rgba(0, 255, 136, 0.4);

--text-primary: #f0f4f8;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #00f3ff;

--border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(0, 243, 255, 0.35);
  --border-active: #00f3ff;

--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

--transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

--card-radius: 24px;
  --input-radius: 14px;
  --btn-radius: 14px;
}

/* Alternate Theme: Matrix Emerald */
body.theme-matrix {
  --accent-cyan: #00ff66;
  --accent-cyan-glow: rgba(0, 255, 102, 0.45);
  --accent-magenta: #a7ff00;
  --accent-magenta-glow: rgba(167, 255, 0, 0.35);
  --accent-purple: #008f11;
  --text-accent: #00ff66;
  --border-glow: rgba(0, 255, 102, 0.4);
  --border-active: #00ff66;
}

/* Alternate Theme: Solaris Amber / Cyberpunk Gold */
body.theme-solaris {
  --accent-cyan: #ffaa00;
  --accent-cyan-glow: rgba(255, 170, 0, 0.45);
  --accent-magenta: #ff3344;
  --accent-magenta-glow: rgba(255, 51, 68, 0.4);
  --accent-purple: #ff7700;
  --text-accent: #ffaa00;
  --border-glow: rgba(255, 170, 0, 0.4);
  --border-active: #ffaa00;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Interactive Canvas Background */
#canvas-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}

/* Ambient Radial Vignette & Grid Overlay */
#canvas-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 35%, transparent 10%, rgba(5, 7, 14, 0.75) 70%, #05070e 100%),
    linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  pointer-events: none;
}

/* ================= HUD TOPBAR ================= */
.hud-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(5, 7, 14, 0.55);
  border-bottom: 1px solid var(--border-subtle);
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hud-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan);
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px var(--accent-cyan); }
  50% { opacity: 0.45; transform: scale(0.85); box-shadow: 0 0 4px var(--accent-cyan); }
}

.hud-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: #ffffff;
}

.hud-title .dim {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  margin-left: 4px;
}

.hud-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(0, 243, 255, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 6px;
  letter-spacing: 0.08em;
}

.hud-telemetry {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.hud-stat .label {
  color: var(--text-muted);
  margin-right: 5px;
}

.hud-stat .val {
  color: var(--text-primary);
  font-weight: 600;
}

.hud-stat .val.green {
  color: var(--accent-emerald);
  text-shadow: 0 0 8px var(--accent-emerald-glow);
}

.hud-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.hud-btn:hover {
  background: rgba(0, 243, 255, 0.1);
  border-color: var(--border-glow);
  color: var(--accent-cyan);
  box-shadow: 0 0 14px rgba(0, 243, 255, 0.2);
}

.hud-btn .icon {
  width: 14px;
  height: 14px;
}

.hidden {
  display: none !important;
}

/* ================= SENTINEL ORB DISPLAY ================= */
.sentinel-display {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 80px auto -30px auto;
  z-index: 10;
  pointer-events: none;
}

.sentinel-core-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 243, 255, 0.35);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
  transition: all var(--transition-normal);
}

.orbital-ring.ring-1 {
  width: 120px;
  height: 120px;
  animation: rotate-ring 14s linear infinite;
  border-color: rgba(0, 243, 255, 0.5);
}

.orbital-ring.ring-2 {
  width: 95px;
  height: 95px;
  animation: rotate-ring-rev 10s linear infinite;
  border-style: dotted;
  border-color: rgba(255, 0, 127, 0.5);
}

.orbital-ring.ring-3 {
  width: 70px;
  height: 70px;
  animation: rotate-ring 6s linear infinite;
  border-color: rgba(0, 243, 255, 0.7);
}

/* Shield Mode for Sentinel */
.sentinel-display.shield-mode .orbital-ring.ring-1 {
  border-color: #ff3344;
  border-style: solid;
  border-width: 2px;
  animation-duration: 4s;
  box-shadow: 0 0 25px rgba(255, 51, 68, 0.6);
}

.sentinel-display.shield-mode .orbital-ring.ring-2 {
  border-color: #ffaa00;
  border-style: solid;
  animation-duration: 3s;
}

.sentinel-display.shield-mode .orbital-ring.ring-3 {
  border-color: #ff0055;
  animation-duration: 2s;
}

.sentinel-status {
  position: absolute;
  bottom: -18px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--accent-cyan);
  text-shadow: 0 0 8px var(--accent-cyan);
  white-space: nowrap;
  background: rgba(5, 7, 14, 0.8);
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 243, 255, 0.3);
}

@keyframes rotate-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotate-ring-rev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* ================= MAIN CARD CONTAINER & 3D PARALLAX ================= */
.login-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 80px 16px;
  min-height: calc(100vh - 64px);
  perspective: 1200px;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-subtle);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 243, 255, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  padding: 32px 36px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  overflow: hidden;
}

/* Interactive specular card glare */
.card-glare {
  position: absolute;
  inset: -100%;
  background: radial-gradient(circle 350px at 50% 50%, rgba(255, 255, 255, 0.09), transparent 80%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.auth-card:hover .card-glare {
  opacity: 1;
}

.card-border-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 243, 255, 0.4), transparent 40%, rgba(255, 0, 127, 0.3), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ================= AUTH TABS ================= */
.auth-tabs {
  display: flex;
  gap: 6px;
  background: rgba(5, 7, 14, 0.6);
  padding: 5px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 26px;
  position: relative;
  z-index: 5;
}

.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.tab-btn.active {
  background: var(--bg-surface-elevated);
  color: var(--accent-cyan);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px var(--accent-cyan-glow);
  border: 1px solid rgba(0, 243, 255, 0.25);
}

.tab-btn.active .tab-icon {
  transform: scale(1.1);
}

/* ================= TAB PANELS & CONTENT ================= */
.tab-viewport {
  position: relative;
  min-height: 420px;
  z-index: 5;
}

.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

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

.auth-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ================= FORM ELEMENTS ================= */
.form-group {
  margin-bottom: 20px;
  position: relative;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.floating-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
  transition: color var(--transition-fast);
}

.form-group:focus-within .floating-label {
  color: var(--accent-cyan);
}

.hud-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-cyan);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: var(--transition-fast);
}

.hud-link:hover {
  color: #ffffff;
  text-shadow: 0 0 10px var(--accent-cyan);
}

.input-shell {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--input-radius);
  transition: all var(--transition-fast);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.input-shell:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(10, 15, 30, 0.85);
}

.form-group:focus-within .input-shell {
  border-color: var(--border-active);
  background: rgba(12, 18, 36, 0.95);
  box-shadow: 0 0 20px var(--accent-cyan-glow), inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.input-icon svg {
  width: 18px;
  height: 18px;
}

.form-group:focus-within .input-icon {
  color: var(--accent-cyan);
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 14px 14px 14px 12px;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
}

input[type="password"] {
  letter-spacing: 0.12em;
}

input::placeholder {
  color: rgba(148, 163, 184, 0.4);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: normal;
}

.input-indicator {
  padding-right: 14px;
}

.indicator-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all var(--transition-fast);
}

.indicator-dot.valid {
  background: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald);
}

.indicator-dot.invalid {
  background: #ff3344;
  box-shadow: 0 0 10px #ff3344;
}

.password-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding-right: 14px;
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.password-toggle:hover {
  color: var(--accent-cyan);
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  transition: color var(--transition-fast);
}

.field-hint.valid {
  color: var(--accent-emerald);
}

.field-hint.invalid {
  color: #ff3344;
}

/* ================= ENTROPY / PASSWORD STRENGTH ================= */
.entropy-container {
  margin-top: 10px;
}

.entropy-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}

.entropy-label {
  color: var(--text-muted);
}

.entropy-score {
  color: var(--accent-cyan);
  font-weight: 700;
  transition: color var(--transition-fast);
}

.entropy-meter {
  display: flex;
  gap: 4px;
  height: 4px;
}

.entropy-segment {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  transition: all var(--transition-normal);
}

.entropy-segment.active-weak {
  background: #ff3344;
  box-shadow: 0 0 8px rgba(255, 51, 68, 0.6);
}

.entropy-segment.active-med {
  background: #ffaa00;
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
}

.entropy-segment.active-strong {
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan-glow);
}

.entropy-segment.active-quantum {
  background: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald-glow);
}

/* ================= CHECKBOX & SEC BADGE ================= */
.form-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  display: none;
}

.checkbox-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.checkbox-box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.6);
  color: #000;
  stroke: #000;
  transition: all var(--transition-fast);
}

.custom-checkbox input:checked + .checkbox-box {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan-glow);
}

.custom-checkbox input:checked + .checkbox-box svg {
  opacity: 1;
  transform: scale(1);
}

.checkbox-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.security-level {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-cyan);
  background: rgba(0, 243, 255, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 243, 255, 0.2);
}

.pulse-chip {
  width: 6px;
  height: 6px;
  background: var(--accent-cyan);
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}

/* ================= SUBMIT BUTTONS ================= */
.auth-submit-btn {
  position: relative;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #00f3ff 0%, #0077ff 50%, #7928ca 100%);
  border: none;
  border-radius: var(--btn-radius);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 10px 25px rgba(0, 243, 255, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all var(--transition-normal);
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 14px 35px rgba(0, 243, 255, 0.55),
    0 0 25px rgba(121, 40, 202, 0.4);
}

.auth-submit-btn:active {
  transform: translateY(1px);
}

.auth-submit-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-top: 18px;
}

.auth-submit-btn.secondary:hover {
  background: rgba(0, 243, 255, 0.12);
  border-color: var(--accent-cyan);
}

.btn-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.auth-submit-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Light scanner beam sweeping across button */
.btn-scanner-bar {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: btn-scan 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes btn-scan {
  0% { left: -100%; }
  30%, 100% { left: 160%; }
}

/* ================= DIVIDERS & SOCIAL ================= */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 20px 0;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
}

.divider-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.social-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.social-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ================= BIOMETRIC SCANNER PANEL ================= */
.scanner-zone {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 15px auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.scanner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(0, 243, 255, 0.3);
  animation: rotate-ring 18s linear infinite;
  transition: all var(--transition-normal);
}

.scanner-zone:hover .scanner-ring {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px var(--accent-cyan-glow);
}

.fingerprint-art {
  width: 110px;
  height: 110px;
  position: relative;
  z-index: 2;
}

.fp-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.3));
}

.fp-path {
  fill: none;
  stroke: rgba(0, 243, 255, 0.45);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke var(--transition-fast);
}

.scanner-zone.scanning .fp-path {
  stroke: var(--accent-cyan);
}

.scanner-zone.success .fp-path {
  stroke: var(--accent-emerald);
}

.scanner-laser {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 15px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00f3ff, #ffffff, #00f3ff, transparent);
  box-shadow: 0 0 15px #00f3ff, 0 0 30px #00f3ff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.scanner-zone.scanning .scanner-laser {
  opacity: 1;
  animation: laser-sweep 1.6s ease-in-out infinite alternate;
}

@keyframes laser-sweep {
  0% { top: 18px; }
  100% { top: 148px; }
}

.scanner-status {
  position: absolute;
  bottom: -32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 220px;
}

.scanner-prompt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.scanner-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-emerald));
  transition: width 0.1s linear;
}

.scanner-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 36px;
  background: rgba(5, 7, 14, 0.45);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.metric-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.m-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.m-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.m-val.green {
  color: var(--accent-emerald);
}

/* ================= OTP KEY MATRIX ================= */
.otp-matrix-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.otp-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.otp-slot {
  width: 48px;
  height: 58px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-cyan);
  outline: none;
  transition: all var(--transition-fast);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
}

.otp-slot:focus {
  border-color: var(--accent-cyan);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 16px var(--accent-cyan-glow);
  transform: translateY(-2px);
}

.otp-separator {
  color: var(--text-muted);
  font-size: 1.2rem;
  font-weight: 300;
}

.otp-timer-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(5, 7, 14, 0.4);
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 26px;
  width: 100%;
}

.timer-pie-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 3.5;
}

.circle-progress {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dasharray 1s linear;
}

.timer-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.otp-info {
  display: flex;
  flex-direction: column;
}

.otp-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

.otp-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ================= FOOTER ================= */
.auth-footer {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  position: relative;
  z-index: 5;
}

.footer-register {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.neon-link {
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  transition: var(--transition-fast);
}

.neon-link:hover {
  color: #ffffff;
  text-shadow: 0 0 10px var(--accent-cyan);
}

/* ================= SUCCESS HOLOGRAM OVERLAY ================= */
.success-screen {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 14, 0.94);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: var(--card-radius);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: fade-in 0.45s ease forwards;
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.success-emitter {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emitter-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent-emerald);
  animation: pulse-ring 2s infinite ease-out;
}

@keyframes pulse-ring {
  0% { transform: scale(0.85); opacity: 1; box-shadow: 0 0 15px var(--accent-emerald); }
  100% { transform: scale(1.4); opacity: 0; box-shadow: 0 0 35px var(--accent-emerald); }
}

.emitter-check {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.15);
  border: 1px solid var(--accent-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-emerald);
  box-shadow: 0 0 20px var(--accent-emerald-glow);
}

.emitter-check svg {
  width: 32px;
  height: 32px;
}

.success-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--accent-emerald);
  background: rgba(0, 255, 136, 0.12);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 136, 0.3);
  margin-bottom: 12px;
}

.success-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.success-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.credentials-hud {
  width: 100%;
  background: rgba(13, 17, 28, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud-data-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
}

.data-key {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.data-val {
  font-weight: 600;
  color: #fff;
}

.data-val.cyan { color: var(--accent-cyan); }
.data-val.amber { color: var(--accent-amber); }
.data-val.green { color: var(--accent-emerald); }
.data-val.mono { font-family: var(--font-mono); }

.success-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mt-3 {
  margin-top: 14px;
}

/* ================= SYSTEM LOG TRAY ================= */
.syslog-panel {
  position: fixed;
  bottom: 0;
  right: 28px;
  width: 340px;
  background: rgba(5, 7, 14, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  z-index: 40;
  font-family: var(--font-mono);
  overflow: hidden;
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);
  transition: transform var(--transition-normal);
}

.syslog-panel.collapsed .syslog-terminal {
  display: none;
}

.syslog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.syslog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.sys-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 6px var(--accent-emerald);
}

.syslog-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.syslog-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.syslog-panel.collapsed .syslog-toggle-btn svg {
  transform: rotate(180deg);
}

.syslog-terminal {
  padding: 12px 14px;
  max-height: 130px;
  overflow-y: auto;
  font-size: 0.65rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column-reverse; /* Newest logs at bottom or top */
}

.log-line {
  margin-bottom: 3px;
  color: var(--text-secondary);
  word-break: break-all;
}

.log-time { color: var(--text-muted); }
.log-sys { color: var(--accent-cyan); font-weight: 700; }
.log-ok { color: var(--accent-emerald); font-weight: 700; }
.log-info { color: var(--accent-purple); font-weight: 700; }
.log-warn { color: var(--accent-amber); font-weight: 700; }

/* Custom Scrollbar for terminal */
.syslog-terminal::-webkit-scrollbar {
  width: 4px;
}
.syslog-terminal::-webkit-scrollbar-track {
  background: transparent;
}
.syslog-terminal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 600px) {
  .hud-topbar {
    padding: 0 16px;
  }
  .hud-telemetry {
    display: none;
  }
  .auth-card {
    padding: 24px 20px;
    border-radius: 18px;
  }
  .social-grid {
    grid-template-columns: 1fr;
  }
  .syslog-panel {
    display: none;
  }
  .otp-slot {
    width: 40px;
    height: 48px;
    font-size: 1.25rem;
  }
}

/**
 * AETHER // QUANTUM-ID NEXUS
 * Core Controller: Three.js 3D Hologram, Web Audio Engine, Micro-interactions
 */

(() => {
  'use strict';

// ===================================================================
  // 1. SOUND SYNTHESIS ENGINE (Web Audio API - Zero External Files)
  // ===================================================================
  class CyberAudioEngine {
    constructor() {
      this.ctx = null;
      this.enabled = true;
      this.initOnFirstGesture();
    }

initContext() {
      if (!this.ctx) {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (AudioCtx) {
          this.ctx = new AudioCtx();
        }
      }
      if (this.ctx && this.ctx.state === 'suspended') {
        this.ctx.resume();
      }
    }

initOnFirstGesture() {
      const unlock = () => {
        this.initContext();
        window.removeEventListener('click', unlock);
        window.removeEventListener('keydown', unlock);
      };
      window.addEventListener('click', unlock);
      window.addEventListener('keydown', unlock);
    }

playTone(freq, type = 'sine', duration = 0.08, gainVal = 0.12) {
      if (!this.enabled || !this.ctx) return;
      try {
        const osc = this.ctx.createOscillator();
        const gain = this.ctx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
        gain.gain.setValueAtTime(gainVal, this.ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.0001, this.ctx.currentTime + duration);

osc.connect(gain);
        gain.connect(this.ctx.destination);

osc.start();
        osc.stop(this.ctx.currentTime + duration);
      } catch (e) {
        // Audio error silent fallback
      }
    }

playKeypress() {
      const freqs = [380, 420, 460, 520, 580];
      const f = freqs[Math.floor(Math.random() * freqs.length)];
      this.playTone(f, 'sine', 0.04, 0.04);
    }

playShieldDeploy() {
      if (!this.enabled || !this.ctx) return;
      try {
        const osc = this.ctx.createOscillator();
        const gain = this.ctx.createGain();
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(450, this.ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(120, this.ctx.currentTime + 0.35);

gain.gain.setValueAtTime(0.12, this.ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.35);

osc.connect(gain);
        gain.connect(this.ctx.destination);
        osc.start();
        osc.stop(this.ctx.currentTime + 0.35);
      } catch (e) {}
    }

playShieldRetract() {
      if (!this.enabled || !this.ctx) return;
      try {
        const osc = this.ctx.createOscillator();
        const gain = this.ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(140, this.ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(520, this.ctx.currentTime + 0.28);

gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.28);

osc.connect(gain);
        gain.connect(this.ctx.destination);
        osc.start();
        osc.stop(this.ctx.currentTime + 0.28);
      } catch (e) {}
    }

playScanTick(progressRatio = 0.5) {
      if (!this.enabled || !this.ctx) return;
      const freq = 400 + progressRatio * 800;
      this.playTone(freq, 'triangle', 0.03, 0.05);
    }

playSuccess() {
      if (!this.enabled || !this.ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
      notes.forEach((freq, idx) => {
        setTimeout(() => {
          this.playTone(freq, 'sine', 0.5, 0.15);
        }, idx * 110);
      });
    }

playError() {
      if (!this.enabled || !this.ctx) return;
      try {
        const osc = this.ctx.createOscillator();
        const gain = this.ctx.createGain();
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(130, this.ctx.currentTime);
        osc.frequency.setValueAtTime(90, this.ctx.currentTime + 0.1);
        gain.gain.setValueAtTime(0.15, this.ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.25);
        osc.connect(gain);
        gain.connect(this.ctx.destination);
        osc.start();
        osc.stop(this.ctx.currentTime + 0.25);
      } catch (e) {}
    }
  }

const sound = new CyberAudioEngine();

// ===================================================================
  // 2. THREE.JS 3D HOLOGRAPHIC SENTINEL & WARP PARTICLES
  // ===================================================================
  class HolographicVisualizer {
    constructor(containerId) {
      this.container = document.getElementById(containerId);
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      this.mouse = { x: 0, y: 0, targetX: 0, targetY: 0 };
      this.isShieldMode = false;
      this.isHyperdrive = false;
      this.themeColor = 0x00f3ff;
      this.secondaryColor = 0xff007f;

this.init();
    }

init() {
      if (!window.THREE) {
        console.warn('Three.js unavailable, running canvas 2D fallback');
        this.runFallback2D();
        return;
      }

// Scene, Camera, Renderer
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(60, this.width / this.height, 0.1, 1000);
      this.camera.position.z = 25;

this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
      this.renderer.setSize(this.width, this.height);
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      this.container.appendChild(this.renderer.domElement);

// Create Hologram Core Group
      this.coreGroup = new THREE.Group();
      // Position slightly higher to match header / sentinel orb
      this.coreGroup.position.set(0, 7.8, 0);
      this.scene.add(this.coreGroup);

// 1. Inner Energy Sphere
      const sphereGeo = new THREE.SphereGeometry(1.6, 24, 24);
      this.sphereMat = new THREE.MeshBasicMaterial({
        color: this.themeColor,
        wireframe: true,
        transparent: true,
        opacity: 0.85
      });
      this.innerCore = new THREE.Mesh(sphereGeo, this.sphereMat);
      this.coreGroup.add(this.innerCore);

// 2. Outer Shield Icosahedron (rotates & expands in shield mode)
      const icoGeo = new THREE.IcosahedronGeometry(2.7, 1);
      this.icoMat = new THREE.MeshBasicMaterial({
        color: this.secondaryColor,
        wireframe: true,
        transparent: true,
        opacity: 0.65
      });
      this.outerShield = new THREE.Mesh(icoGeo, this.icoMat);
      this.coreGroup.add(this.outerShield);

// 3. Orbital Ring Particles
      const ringParticleCount = 180;
      const ringGeo = new THREE.BufferGeometry();
      const ringPositions = new Float32Array(ringParticleCount * 3);
      for (let i = 0; i < ringParticleCount; i++) {
        const angle = (i / ringParticleCount) * Math.PI * 2;
        const radius = 3.6 + (Math.random() - 0.5) * 0.4;
        ringPositions[i * 3] = Math.cos(angle) * radius;
        ringPositions[i * 3 + 1] = (Math.random() - 0.5) * 0.6;
        ringPositions[i * 3 + 2] = Math.sin(angle) * radius;
      }
      ringGeo.setAttribute('position', new THREE.BufferAttribute(ringPositions, 3));
      this.ringMat = new THREE.PointsMaterial({
        size: 0.12,
        color: this.themeColor,
        transparent: true,
        opacity: 0.9
      });
      this.orbitRing = new THREE.Points(ringGeo, this.ringMat);
      this.coreGroup.add(this.orbitRing);

// 4. Background Starfield / Hyperspace Particles
      this.starCount = 900;
      this.starsGeo = new THREE.BufferGeometry();
      this.starPositions = new Float32Array(this.starCount * 3);
      this.starVelocities = new Float32Array(this.starCount);

for (let i = 0; i < this.starCount; i++) {
        this.starPositions[i * 3] = (Math.random() - 0.5) * 120;
        this.starPositions[i * 3 + 1] = (Math.random() - 0.5) * 120;
        this.starPositions[i * 3 + 2] = (Math.random() - 0.5) * 100;
        this.starVelocities[i] = 0.05 + Math.random() * 0.1;
      }
      this.starsGeo.setAttribute('position', new THREE.BufferAttribute(this.starPositions, 3));
      this.starMat = new THREE.PointsMaterial({
        size: 0.16,
        color: 0x64748b,
        transparent: true,
        opacity: 0.6
      });
      this.starField = new THREE.Points(this.starsGeo, this.starMat);
      this.scene.add(this.starField);

// Event Listeners
      window.addEventListener('resize', () => this.onResize());
      window.addEventListener('mousemove', (e) => this.onMouseMove(e));

this.animate();
    }

onMouseMove(e) {
      this.mouse.targetX = (e.clientX / this.width - 0.5) * 2;
      this.mouse.targetY = -(e.clientY / this.height - 0.5) * 2;
    }

onResize() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      this.camera.aspect = this.width / this.height;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(this.width, this.height);
    }

setShieldMode(active) {
      this.isShieldMode = active;
      if (active) {
        this.icoMat.color.setHex(0xff3344);
        this.sphereMat.color.setHex(0xffaa00);
        this.ringMat.color.setHex(0xff3344);
      } else {
        this.icoMat.color.setHex(this.secondaryColor);
        this.sphereMat.color.setHex(this.themeColor);
        this.ringMat.color.setHex(this.themeColor);
      }
    }

setColors(primaryHex, secondaryHex) {
      this.themeColor = primaryHex;
      this.secondaryColor = secondaryHex;
      if (!this.isShieldMode) {
        this.sphereMat.color.setHex(primaryHex);
        this.ringMat.color.setHex(primaryHex);
        this.icoMat.color.setHex(secondaryHex);
      }
    }

triggerHyperdrive() {
      this.isHyperdrive = true;
      this.starMat.color.setHex(this.themeColor);
      this.starMat.size = 0.35;
    }

resetHyperdrive() {
      this.isHyperdrive = false;
      this.starMat.color.setHex(0x64748b);
      this.starMat.size = 0.16;
      this.camera.position.z = 25;
    }

animate() {
      requestAnimationFrame(() => this.animate());

// Mouse Lerp
      this.mouse.x += (this.mouse.targetX - this.mouse.x) * 0.05;
      this.mouse.y += (this.mouse.targetY - this.mouse.y) * 0.05;

// Rotate Sentinel Core
      const spinMult = this.isShieldMode ? 3.5 : 1.0;
      this.innerCore.rotation.y += 0.01 * spinMult;
      this.innerCore.rotation.x += 0.005 * spinMult;

this.outerShield.rotation.y -= 0.015 * spinMult;
      this.outerShield.rotation.z += 0.008 * spinMult;

this.orbitRing.rotation.z += 0.02 * spinMult;
      this.orbitRing.rotation.x = Math.PI / 3 + this.mouse.y * 0.2;

// Look at cursor
      this.coreGroup.rotation.y = this.mouse.x * 0.45;
      this.coreGroup.rotation.x = -this.mouse.y * 0.35;

// Starfield physics & hyperdrive warp
      const positions = this.starsGeo.attributes.position.array;
      const speed = this.isHyperdrive ? 2.5 : 0.08;

for (let i = 0; i < this.starCount; i++) {
        positions[i * 3 + 2] += this.starVelocities[i] * speed * 8;
        if (positions[i * 3 + 2] > 30) {
          positions[i * 3 + 2] = -80;
          positions[i * 3] = (Math.random() - 0.5) * 120;
          positions[i * 3 + 1] = (Math.random() - 0.5) * 120;
        }
      }
      this.starsGeo.attributes.position.needsUpdate = true;

// Camera shake / zoom on hyperdrive
      if (this.isHyperdrive && this.camera.position.z > 14) {
        this.camera.position.z -= 0.15;
      }

this.renderer.render(this.scene, this.camera);
    }

runFallback2D() {
      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      this.container.appendChild(canvas);
      const ctx = canvas.getContext('2d');
      const particles = Array.from({ length: 60 }, () => ({
        x: Math.random() * this.width,
        y: Math.random() * this.height,
        vx: (Math.random() - 0.5) * 1,
        vy: (Math.random() - 0.5) * 1,
        r: Math.random() * 2 + 1
      }));

const loop = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#00f3ff';
        particles.forEach(p => {
          p.x += p.vx;
          p.y += p.vy;
          if (p.x < 0) p.x = canvas.width;
          if (p.x > canvas.width) p.x = 0;
          if (p.y < 0) p.y = canvas.height;
          if (p.y > canvas.height) p.y = 0;
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
          ctx.fill();
        });
        requestAnimationFrame(loop);
      };
      loop();
    }
  }

// ===================================================================
  // 3. 3D CARD PARALLAX TILT & SPECULAR GLARE
  // ===================================================================
  function initCardParallax() {
    const card = document.getElementById('auth-card');
    const glare = document.getElementById('card-glare');
    if (!card) return;

let bounds = card.getBoundingClientRect();
    const updateBounds = () => { bounds = card.getBoundingClientRect(); };
    window.addEventListener('resize', updateBounds);
    window.addEventListener('scroll', updateBounds);

card.addEventListener('mousemove', (e) => {
      const mouseX = e.clientX - bounds.left;
      const mouseY = e.clientY - bounds.top;

const centerX = bounds.width / 2;
      const centerY = bounds.height / 2;

const rotateX = -((mouseY - centerY) / centerY) * 10;
      const rotateY = ((mouseX - centerX) / centerX) * 10;

card.style.transform = `perspective(1000px) rotateX(${rotateX.toFixed(2)}deg) rotateY(${rotateY.toFixed(2)}deg) scale3d(1.01, 1.01, 1.01)`;

if (glare) {
        glare.style.background = `radial-gradient(circle 350px at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.12), transparent 80%)`;
      }
    });

card.addEventListener('mouseleave', () => {
      card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
    });
  }

// ===================================================================
  // 4. REAL-TIME ENTROPY / PASSWORD STRENGTH METER
  // ===================================================================
  function evaluateEntropy(password) {
    if (!password) return { score: 0, label: 'EMPTY', color: 'none' };

let score = 0;
    if (password.length >= 8) score += 1;
    if (password.length >= 12) score += 1;
    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score += 1;
    if (/\d/.test(password)) score += 1;
    if (/[^a-zA-Z0-9]/.test(password)) score += 1;

if (score <= 1) {
      return { score: 1, label: 'COMPROMISED', class: 'active-weak', text: 'VULNERABLE' };
    } else if (score === 2 || score === 3) {
      return { score: 2, label: 'STANDARDIZED', class: 'active-med', text: 'MODERATE' };
    } else if (score === 4) {
      return { score: 3, label: 'MILITARY SPEC', class: 'active-strong', text: 'STRONG' };
    } else {
      return { score: 4, label: 'QUANTUM GRADE', class: 'active-quantum', text: 'QUANTUM GRADE' };
    }
  }

function initPasswordDynamics(visualizer) {
    const pwdInput = document.getElementById('input-password');
    const toggleBtn = document.getElementById('password-toggle');
    const eyeShow = toggleBtn.querySelector('.eye-show');
    const eyeHide = toggleBtn.querySelector('.eye-hide');
    const entropyText = document.getElementById('entropy-text');
    const segments = document.querySelectorAll('.entropy-segment');
    const sentinelDisplay = document.getElementById('sentinel-container');
    const sentinelStatus = document.getElementById('sentinel-status');

if (!pwdInput) return;

// Password Focus -> Shield Mode
    pwdInput.addEventListener('focus', () => {
      sentinelDisplay.classList.add('shield-mode');
      sentinelStatus.textContent = 'DEFENSE SHIELD: ENGAGED';
      sentinelStatus.style.color = '#ff3344';
      sentinelStatus.style.borderColor = 'rgba(255, 51, 68, 0.4)';
      visualizer.setShieldMode(true);
      sound.playShieldDeploy();
      logToKernel('SYS', 'Cipher field focused. Defense shroud active.');
    });

pwdInput.addEventListener('blur', () => {
      sentinelDisplay.classList.remove('shield-mode');
      sentinelStatus.textContent = 'SENTINEL: STANDBY';
      sentinelStatus.style.color = 'var(--accent-cyan)';
      sentinelStatus.style.borderColor = 'rgba(0, 243, 255, 0.3)';
      visualizer.setShieldMode(false);
      sound.playShieldRetract();
      logToKernel('SYS', 'Cipher field released. Normal telemetry resumed.');
    });

// Keystroke & Entropy Calculation
    pwdInput.addEventListener('input', () => {
      sound.playKeypress();
      const val = pwdInput.value;
      const res = evaluateEntropy(val);

entropyText.textContent = res.text;
      segments.forEach((seg, i) => {
        seg.className = 'entropy-segment';
        if (i < res.score) {
          seg.classList.add(res.class);
        }
      });
    });

// Eye Toggle
    toggleBtn.addEventListener('click', () => {
      const isPassword = pwdInput.type === 'password';
      pwdInput.type = isPassword ? 'text' : 'password';
      eyeShow.classList.toggle('hidden', isPassword);
      eyeHide.classList.toggle('hidden', !isPassword);
      sound.playTone(isPassword ? 720 : 440, 'triangle', 0.05, 0.08);

if (isPassword) {
        sentinelStatus.textContent = 'CIPHER: DE-CLOAKED';
        logToKernel('WARN', 'Visual cipher reveal requested.');
      } else {
        sentinelStatus.textContent = 'DEFENSE SHIELD: ENGAGED';
      }
    });
  }

// ===================================================================
  // 5. EMAIL INPUT VALIDATION & SOUND
  // ===================================================================
  function initEmailDynamics() {
    const emailInput = document.getElementById('input-email');
    const indicator = document.getElementById('email-indicator').querySelector('.indicator-dot');
    const hint = document.getElementById('email-hint');

if (!emailInput) return;

emailInput.addEventListener('input', () => {
      sound.playKeypress();
      const val = emailInput.value.trim();
      const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);

if (!val) {
        indicator.className = 'indicator-dot';
        hint.textContent = 'Awaiting valid neural signature';
        hint.className = 'field-hint';
      } else if (isValid) {
        indicator.className = 'indicator-dot valid';
        hint.textContent = 'Operator identity recognized';
        hint.className = 'field-hint valid';
      } else {
        indicator.className = 'indicator-dot invalid';
        hint.textContent = 'Malformed neural URI format';
        hint.className = 'field-hint invalid';
      }
    });
  }

// ===================================================================
  // 6. TABS SWITCHING LOGIC
  // ===================================================================
  function initTabs() {
    const tabBtns = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.tab-panel');

tabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const tabTarget = btn.getAttribute('data-tab');

tabBtns.forEach(b => {
          b.classList.remove('active');
          b.setAttribute('aria-selected', 'false');
        });
        panels.forEach(p => p.classList.remove('active'));

btn.classList.add('active');
        btn.setAttribute('aria-selected', 'true');

const activePanel = document.getElementById(`tab-${tabTarget}`);
        if (activePanel) {
          activePanel.classList.add('active');
        }

sound.playTone(600, 'sine', 0.06, 0.08);
        logToKernel('INFO', `Switched authentication mode: ${tabTarget.toUpperCase()}`);
      });
    });
  }

// ===================================================================
  // 7. BIOMETRICS OPTICAL SCANNER
  // ===================================================================
  function initBiometricScanner(onSuccess) {
    const zone = document.getElementById('scanner-zone');
    const progressBar = document.getElementById('scan-progress');
    const statusText = document.getElementById('scanner-status').querySelector('.scanner-prompt');
    const metricConfidence = document.getElementById('metric-confidence');
    const manualBtn = document.getElementById('btn-manual-scan');

if (!zone) return;

let scanProgress = 0;
    let isScanning = false;
    let scanInterval = null;

const startScan = () => {
      if (isScanning) return;
      isScanning = true;
      zone.classList.add('scanning');
      statusText.textContent = 'SCANNING DERMAL MINUTIAE...';
      logToKernel('SYS', 'Biometric optical scanner energized.');

scanInterval = setInterval(() => {
        scanProgress += 2.5;
        if (scanProgress > 100) scanProgress = 100;

progressBar.style.width = `${scanProgress}%`;
        metricConfidence.textContent = `${scanProgress.toFixed(2)}%`;
        sound.playScanTick(scanProgress / 100);

if (scanProgress >= 100) {
          completeScan();
        }
      }, 40);
    };

const stopScan = () => {
      if (!isScanning) return;
      if (scanProgress < 100) {
        clearInterval(scanInterval);
        isScanning = false;
        zone.classList.remove('scanning');
        scanProgress = 0;
        progressBar.style.width = '0%';
        metricConfidence.textContent = '0.00%';
        statusText.textContent = 'SCAN INCOMPLETE. HOLD LONGER.';
        sound.playError();
        logToKernel('WARN', 'Biometric scan aborted prematurely.');
      }
    };

const completeScan = () => {
      clearInterval(scanInterval);
      isScanning = false;
      zone.classList.remove('scanning');
      zone.classList.add('success');
      statusText.textContent = 'DERMAL MATCH VERIFIED (99.98%)';
      sound.playSuccess();
      logToKernel('OK', 'Biometric validation confirmed. Access granted.');

setTimeout(() => {
        onSuccess('biometrics.auth@neural.link');
      }, 700);
    };

// Mouse & Touch holds
    zone.addEventListener('mousedown', startScan);
    window.addEventListener('mouseup', stopScan);
    zone.addEventListener('touchstart', (e) => { e.preventDefault(); startScan(); });
    window.addEventListener('touchend', stopScan);

if (manualBtn) {
      manualBtn.addEventListener('click', () => {
        startScan();
      });
    }
  }

// ===================================================================
  // 8. 6-DIGIT OTP / NEURAL KEY MATRIX
  // ===================================================================
  function initOtpMatrix(onSuccess) {
    const slots = document.querySelectorAll('.otp-slot');
    const submitBtn = document.getElementById('submit-otp');
    const secondsElem = document.getElementById('otp-seconds');
    const ringElem = document.getElementById('otp-progress-ring');

if (!slots.length) return;

// Slot Navigation
    slots.forEach((slot, index) => {
      slot.addEventListener('input', (e) => {
        sound.playKeypress();
        const val = e.target.value.replace(/[^0-9]/g, '');
        e.target.value = val ? val[val.length - 1] : '';

if (e.target.value && index < slots.length - 1) {
          slots[index + 1].focus();
        }
      });

slot.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && !slot.value && index > 0) {
          slots[index - 1].focus();
        }
      });

slot.addEventListener('paste', (e) => {
        e.preventDefault();
        const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '');
        if (text) {
          text.split('').slice(0, slots.length).forEach((char, i) => {
            slots[i].value = char;
          });
          slots[Math.min(text.length, slots.length - 1)].focus();
          sound.playTone(550, 'sine', 0.1, 0.1);
        }
      });
    });

// 30s Countdown timer
    let timeLeft = 30;
    const totalTime = 30;
    setInterval(() => {
      timeLeft--;
      if (timeLeft <= 0) {
        timeLeft = totalTime;
        logToKernel('INFO', 'New ephemeral OTP matrix hash synchronized.');
      }
      secondsElem.textContent = timeLeft;
      const strokeVal = ((totalTime - timeLeft) / totalTime) * 100;
      ringElem.setAttribute('stroke-dasharray', `${100 - strokeVal}, 100`);
    }, 1000);

submitBtn.addEventListener('click', () => {
      const code = Array.from(slots).map(s => s.value).join('');
      if (code.length === 6) {
        sound.playSuccess();
        logToKernel('OK', `Matrix Token ${code} authenticated.`);
        onSuccess(`operator.otp-${code.slice(0, 3)}@aether.ai`);
      } else {
        sound.playError();
        logToKernel('WARN', 'Incomplete 6-digit matrix code.');
        slots[0].focus();
      }
    });
  }

// ===================================================================
  // 9. TELEMETRY, THEME & SYSTEM LOG CONTROLLER
  // ===================================================================
  function initHudBar(visualizer) {
    // Ping Telemetry Simulation
    const pingElem = document.getElementById('telemetry-ping');
    setInterval(() => {
      if (pingElem) {
        const ping = Math.floor(10 + Math.random() * 8);
        pingElem.textContent = `${ping}ms`;
      }
    }, 3500);

// Audio Toggle
    const soundBtn = document.getElementById('sound-toggle');
    const soundOnIcon = soundBtn.querySelector('.sound-on');
    const soundOffIcon = soundBtn.querySelector('.sound-off');
    const soundText = soundBtn.querySelector('.btn-text');

soundBtn.addEventListener('click', () => {
      sound.enabled = !sound.enabled;
      soundOnIcon.classList.toggle('hidden', !sound.enabled);
      soundOffIcon.classList.toggle('hidden', sound.enabled);
      soundText.textContent = sound.enabled ? 'AUDIO: ON' : 'AUDIO: OFF';
      if (sound.enabled) sound.playTone(660, 'sine', 0.08, 0.1);
    });

// Theme Switcher (Cyan -> Emerald -> Solaris)
    const themes = [
      { name: 'NEON', class: '', primary: 0x00f3ff, secondary: 0xff007f },
      { name: 'MATRIX', class: 'theme-matrix', primary: 0x00ff66, secondary: 0xa7ff00 },
      { name: 'SOLARIS', class: 'theme-solaris', primary: 0xffaa00, secondary: 0xff3344 }
    ];
    let currentThemeIdx = 0;
    const themeBtn = document.getElementById('theme-toggle');
    const themeText = themeBtn.querySelector('.btn-text');

themeBtn.addEventListener('click', () => {
      currentThemeIdx = (currentThemeIdx + 1) % themes.length;
      const t = themes[currentThemeIdx];

document.body.className = t.class;
      themeText.textContent = t.name;
      visualizer.setColors(t.primary, t.secondary);
      sound.playTone(700, 'triangle', 0.06, 0.08);
      logToKernel('SYS', `Color matrix switched to ${t.name}`);
    });

// System Log Toggle
    const syslogPanel = document.getElementById('syslog-panel');
    const syslogBar = document.getElementById('syslog-bar');
    syslogBar.addEventListener('click', () => {
      syslogPanel.classList.toggle('collapsed');
      sound.playTone(400, 'sine', 0.03, 0.05);
    });
  }

function logToKernel(type, msg) {
    const container = document.getElementById('syslog-content');
    if (!container) return;

const line = document.createElement('div');
    line.className = 'log-line';

const now = new Date();
    const timeStr = `[${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}]`;

let typeClass = 'log-sys';
    if (type === 'OK') typeClass = 'log-ok';
    if (type === 'INFO') typeClass = 'log-info';
    if (type === 'WARN') typeClass = 'log-warn';

line.innerHTML = `<span class="log-time">${timeStr}</span> <span class="${typeClass}">${type}:</span> ${msg}`;
    container.prepend(line);
  }

// ===================================================================
  // 10. AUTHENTICATION TRANSMISSION & HYPERDRIVE TRANSITION
  // ===================================================================
  function initAuthExecution(visualizer) {
    const form = document.getElementById('credentials-form');
    const successScreen = document.getElementById('success-screen');
    const successUser = document.getElementById('success-user');
    const sessionHash = document.getElementById('session-hash');
    const resetBtn = document.getElementById('btn-reset-session');
    const enterConsoleBtn = document.getElementById('btn-enter-console');

const triggerSuccessSequence = (userEmail) => {
      visualizer.triggerHyperdrive();
      sound.playSuccess();
      logToKernel('OK', `Access granted for ${userEmail}`);

// Generate simulated session hash
      const hash = '0x' + Array.from({ length: 12 }, () => Math.floor(Math.random() * 16).toString(16)).join('').toUpperCase();
      sessionHash.textContent = hash;
      successUser.textContent = userEmail;

setTimeout(() => {
        successScreen.classList.remove('hidden');
      }, 550);
    };

// Form submission
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const email = document.getElementById('input-email').value.trim();
      const pwd = document.getElementById('input-password').value;

if (!email || !pwd) {
        sound.playError();
        logToKernel('WARN', 'Credentials rejected: missing arguments.');
        return;
      }

const submitBtn = document.getElementById('submit-credentials');
      submitBtn.disabled = true;
      submitBtn.querySelector('.btn-text-main').textContent = 'VERIFYING ENTROPY...';

sound.playTone(500, 'triangle', 0.1, 0.1);

setTimeout(() => {
        submitBtn.disabled = false;
        submitBtn.querySelector('.btn-text-main').textContent = 'TRANSMIT CREDENTIALS';
        triggerSuccessSequence(email);
      }, 850);
    });

// Reset Button
    resetBtn.addEventListener('click', () => {
      successScreen.classList.add('hidden');
      visualizer.resetHyperdrive();
      sound.playTone(350, 'sine', 0.08, 0.1);
      logToKernel('SYS', 'Session terminated. Operator logged out.');
    });

// Enter Console Action
    enterConsoleBtn.addEventListener('click', () => {
      sound.playTone(880, 'sine', 0.12, 0.15);
      alert('⚡ HYPERLINK CONSTRUCT INITIALIZED!\n\nWelcome to AETHER Core Console.\nAll quantum subsystems are green.');
    });

// Pass success callback to Biometrics and OTP modules
    initBiometricScanner(triggerSuccessSequence);
    initOtpMatrix(triggerSuccessSequence);
  }

// ===================================================================
  // 11. BOOTSTRAP SYSTEM
  // ===================================================================
  document.addEventListener('DOMContentLoaded', () => {
    const visualizer = new HolographicVisualizer('canvas-container');
    initCardParallax();
    initEmailDynamics();
    initPasswordDynamics(visualizer);
    initTabs();
    initHudBar(visualizer);
    initAuthExecution(visualizer);

// Initial entropy evaluation for default value
    const pwdInput = document.getElementById('input-password');
    if (pwdInput && pwdInput.value) {
      pwdInput.dispatchEvent(new Event('input'));
    }
  });

})();

Advanced Login Form

Recommended