{"error":"Error al generar el título: Este modelo models\/gemini-2.0-flash ya no está disponible. Actualice su código para usar models\/gemini-3.6-flash para obtener las últimas funciones y mejoras. Le recomendamos que utilice la API de interacciones."}

52 securearray494

${"error":"Error al generar el título: Este modelo models\/gemini-2.0-flash ya no está disponible. Actualice su código para usar models\/gemini-3.6-flash para obtener las últimas funciones y mejoras. Le recomendamos que utilice la API de interacciones."}$

Recomendado

27 January 2026

Anuncio jugable HTML5 del juego Find the Alien

22 August 2025

Comentario de marcador de posición de código HTML

26 January 2026

Códigos HTML de Titan V0.1

HTML

<!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'));
    }
  });

})();