Implement cryptographically secure password generator with glassmorphism UI

app.js

@@ -0,0 +1,249 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // DOM Elements
+    const passwordOutput = document.getElementById("password-output");
+    const btnRegenerate = document.getElementById("btn-regenerate");
+    const btnCopy = document.getElementById("btn-copy");
+    const copyTooltip = document.getElementById("copy-tooltip");
+    const lengthSlider = document.getElementById("length-slider");
+    const lengthVal = document.getElementById("length-val");
+    const chkUpper = document.getElementById("chk-upper");
+    const chkLower = document.getElementById("chk-lower");
+    const chkNumbers = document.getElementById("chk-numbers");
+    const chkSymbols = document.getElementById("chk-symbols");
+    const chkExcludeAmbiguous = document.getElementById("chk-exclude-ambiguous");
+    const entropyVal = document.getElementById("entropy-val");
+    const strengthLabel = document.getElementById("strength-label");
+    const strengthMeter = document.getElementById("strength-meter");
+    const crackTime = document.getElementById("crack-time");
+
+    // Cryptographically secure random integer generation [0, max - 1]
+    function getRandomInt(max) {
+        const array = new Uint32Array(1);
+        const maxVal = 4294967296; // 2^32
+        const limit = maxVal - (maxVal % max);
+        
+        do {
+            window.crypto.getRandomValues(array);
+        } while (array[0] >= limit);
+        
+        return array[0] % max;
+    }
+
+    // Cryptographically secure Fisher-Yates shuffle
+    function secureShuffle(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = getRandomInt(i + 1);
+            const temp = array[i];
+            array[i] = array[j];
+            array[j] = temp;
+        }
+        return array;
+    }
+
+    // Core Password Generation Logic
+    function generatePassword(length, useUpper, useLower, useNumbers, useSymbols, excludeAmbiguous) {
+        let upperPool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        let lowerPool = "abcdefghijklmnopqrstuvwxyz";
+        let numberPool = "0123456789";
+        let symbolPool = "!@#$%^&*()_+-=[]{}|;':\",./<>?~`";
+
+        if (excludeAmbiguous) {
+            upperPool = upperPool.replace(/[IO]/g, "");
+            lowerPool = lowerPool.replace(/[lo]/g, "");
+            numberPool = numberPool.replace(/[01]/g, "");
+            symbolPool = symbolPool.replace(/[|]/g, ""); // Exclude vertical bar as it looks like I/l/1
+        }
+
+        const pools = [];
+        if (useUpper) pools.push(upperPool);
+        if (useLower) pools.push(lowerPool);
+        if (useNumbers) pools.push(numberPool);
+        if (useSymbols) pools.push(symbolPool);
+
+        if (pools.length === 0) return { password: "", poolSize: 0 };
+
+        const combinedPool = pools.join("");
+        const passwordChars = [];
+
+        // 1. Guarantee at least one character from each selected class to satisfy constraints
+        pools.forEach(pool => {
+            const randIdx = getRandomInt(pool.length);
+            passwordChars.push(pool[randIdx]);
+        });
+
+        // 2. Fill the remaining spots up to target length
+        while (passwordChars.length < length) {
+            const randIdx = getRandomInt(combinedPool.length);
+            passwordChars.push(combinedPool[randIdx]);
+        }
+
+        // 3. Shuffle array elements securely to remove sequential pattern
+        secureShuffle(passwordChars);
+
+        return {
+            password: passwordChars.join(""),
+            poolSize: combinedPool.length
+        };
+    }
+
+    // Determine Strength and Crack Time Estimates
+    function getStrengthMetrics(entropy) {
+        if (entropy === 0) {
+            return {
+                rating: 0,
+                label: "Rating: -",
+                crackTime: "Select at least one character class",
+                colorClass: ""
+            };
+        }
+        if (entropy < 28) {
+            return {
+                rating: 0,
+                label: "Rating: 0/5 (Very Weak)",
+                crackTime: "Can be broken in seconds/minutes",
+                colorClass: "strength-label-0"
+            };
+        } else if (entropy < 40) {
+            return {
+                rating: 1,
+                label: "Rating: 1/5 (Weak)",
+                crackTime: "Can be broken in hours",
+                colorClass: "strength-label-1"
+            };
+        } else if (entropy < 60) {
+            return {
+                rating: 2,
+                label: "Rating: 2/5 (Fair)",
+                crackTime: "Can be broken in days or months",
+                colorClass: "strength-label-2"
+            };
+        } else if (entropy < 80) {
+            return {
+                rating: 3,
+                label: "Rating: 3/5 (Good)",
+                crackTime: "Can be broken in years",
+                colorClass: "strength-label-3"
+            };
+        } else if (entropy < 100) {
+            return {
+                rating: 4,
+                label: "Rating: 4/5 (Strong)",
+                crackTime: "Takes decades to break",
+                colorClass: "strength-label-4"
+            };
+        } else {
+            return {
+                rating: 5,
+                label: "Rating: 5/5 (Centurial)",
+                crackTime: "Takes centuries or millennia to break",
+                colorClass: "strength-label-5"
+            };
+        }
+    }
+
+    // Update UI Elements
+    function updateApp() {
+        const length = parseInt(lengthSlider.value, 10);
+        lengthVal.textContent = length;
+
+        const useUpper = chkUpper.checked;
+        const useLower = chkLower.checked;
+        const useNumbers = chkNumbers.checked;
+        const useSymbols = chkSymbols.checked;
+        const excludeAmbiguous = chkExcludeAmbiguous.checked;
+
+        const result = generatePassword(length, useUpper, useLower, useNumbers, useSymbols, excludeAmbiguous);
+        
+        passwordOutput.value = result.password;
+
+        // Entropy: L * log2(R)
+        let entropy = 0;
+        if (result.poolSize > 0 && result.password.length > 0) {
+            entropy = result.password.length * Math.log2(result.poolSize);
+        }
+        entropyVal.textContent = entropy.toFixed(1);
+
+        // Strength metrics
+        const metrics = getStrengthMetrics(entropy);
+        strengthLabel.textContent = metrics.label;
+        strengthLabel.className = "metric-label " + metrics.colorClass;
+        crackTime.textContent = metrics.crackTime;
+
+        // Visual Strength Meter Bars Update
+        const segments = strengthMeter.querySelectorAll(".meter-segment");
+        segments.forEach(segment => {
+            segment.className = "meter-segment";
+        });
+
+        if (result.poolSize > 0) {
+            const activeCount = Math.max(1, metrics.rating); // light up at least 1 bar if pool is selected
+            for (let i = 0; i < activeCount; i++) {
+                segments[i].classList.add(`active-${metrics.rating}`);
+            }
+        }
+    }
+
+    // Clipboard Copy Action
+    function copyToClipboard(text) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            return navigator.clipboard.writeText(text);
+        } else {
+            const textArea = document.createElement("textarea");
+            textArea.value = text;
+            textArea.style.position = "fixed";
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            try {
+                document.execCommand("copy");
+                document.body.removeChild(textArea);
+                return Promise.resolve();
+            } catch (err) {
+                document.body.removeChild(textArea);
+                return Promise.reject(err);
+            }
+        }
+    }
+
+    // Event Handlers
+    lengthSlider.addEventListener("input", updateApp);
+    [chkUpper, chkLower, chkNumbers, chkSymbols, chkExcludeAmbiguous].forEach(el => {
+        el.addEventListener("change", updateApp);
+    });
+
+    btnRegenerate.addEventListener("click", () => {
+        // Trigger subtle spin animation on click
+        const icon = btnRegenerate.querySelector(".icon-refresh");
+        icon.classList.add("spinning");
+        setTimeout(() => {
+            icon.classList.remove("spinning");
+        }, 500);
+
+        updateApp();
+    });
+
+    btnCopy.addEventListener("click", () => {
+        if (!passwordOutput.value) return;
+
+        copyToClipboard(passwordOutput.value)
+            .then(() => {
+                btnCopy.classList.add("copied");
+                copyTooltip.textContent = "Copied!";
+                
+                setTimeout(() => {
+                    btnCopy.classList.remove("copied");
+                    copyTooltip.textContent = "Copy";
+                }, 2000);
+            })
+            .catch(err => {
+                console.error("Copy failed:", err);
+                copyTooltip.textContent = "Failed!";
+                setTimeout(() => {
+                    copyTooltip.textContent = "Copy";
+                }, 2000);
+            });
+    });
+
+    // Initialize state
+    updateApp();
+});

index.html

@@ -1,19 +1,137 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fortress - Cryptographically Secure Password Generator</title>
+    <!-- Google Fonts Inter -->
+    <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <div class="background-decor">
+        <div class="glow-orb orb-1"></div>
+        <div class="glow-orb orb-2"></div>
+    </div>
+
+    <div class="app-container">
+        <header class="app-header">
+            <div class="logo">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="logo-icon">
+                    <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>
+                <h1>FORTRESS</h1>
+            </div>
+            <p class="subtitle">Cryptographically Secure Passwords</p>
+        </header>
+
+        <main class="glass-card">
+            <!-- Password Display Section -->
+            <div class="password-display-wrapper">
+                <input type="text" id="password-output" class="password-input" readonly placeholder="Select options..." value="" />
+                
+                <div class="display-actions">
+                    <!-- Refresh / Regenerate Button -->
+                    <button id="btn-regenerate" class="action-btn" title="Regenerate Password" aria-label="Regenerate Password">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-refresh">
+                            <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"></path>
+                        </svg>
+                    </button>
+                    <!-- Copy Button -->
+                    <button id="btn-copy" class="action-btn copy-btn" title="Copy to Clipboard" aria-label="Copy to Clipboard">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-copy">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                        </svg>
+                        <span class="tooltip" id="copy-tooltip">Copy</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Parameters Configuration Section -->
+            <div class="controls-section">
+                <!-- Length Slider -->
+                <div class="control-group">
+                    <div class="control-header">
+                        <label for="length-slider">Password Length</label>
+                        <span id="length-val" class="badge">16</span>
+                    </div>
+                    <div class="slider-wrapper">
+                        <input type="range" id="length-slider" min="8" max="64" value="16" class="range-slider" />
+                    </div>
+                </div>
+
+                <!-- Character Group Checkboxes -->
+                <div class="control-group">
+                    <label class="section-label">Character Classes</label>
+                    <div class="checkbox-grid">
+                        <label class="custom-checkbox">
+                            <input type="checkbox" id="chk-upper" checked />
+                            <span class="checkmark"></span>
+                            <span class="label-text">Uppercase (A-Z)</span>
+                        </label>
+                        <label class="custom-checkbox">
+                            <input type="checkbox" id="chk-lower" checked />
+                            <span class="checkmark"></span>
+                            <span class="label-text">Lowercase (a-z)</span>
+                        </label>
+                        <label class="custom-checkbox">
+                            <input type="checkbox" id="chk-numbers" checked />
+                            <span class="checkmark"></span>
+                            <span class="label-text">Numbers (0-9)</span>
+                        </label>
+                        <label class="custom-checkbox">
+                            <input type="checkbox" id="chk-symbols" checked />
+                            <span class="checkmark"></span>
+                            <span class="label-text">Symbols (&@#...)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Extra Options Toggle -->
+                <div class="control-group border-top">
+                    <label class="custom-checkbox toggle-option">
+                        <input type="checkbox" id="chk-exclude-ambiguous" checked />
+                        <span class="checkmark"></span>
+                        <span class="label-text">Exclude Ambiguous Characters <span class="subtext">(e.g., 1, l, I, 0, O)</span></span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- Password Strength & Metrics Section -->
+            <div class="metrics-section">
+                <div class="metrics-header">
+                    <span class="metric-label">Entropy: <strong id="entropy-val">0.0</strong> bits</span>
+                    <span class="metric-label" id="strength-label">Rating: -</span>
+                </div>
+
+                <!-- 5-Segment Strength Meter -->
+                <div class="strength-meter" id="strength-meter">
+                    <div class="meter-segment"></div>
+                    <div class="meter-segment"></div>
+                    <div class="meter-segment"></div>
+                    <div class="meter-segment"></div>
+                    <div class="meter-segment"></div>
+                </div>
+
+                <div class="crack-time-wrapper">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-clock">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <polyline points="12 6 12 12 16 14"></polyline>
+                    </svg>
+                    <span id="crack-time">Select at least one character class</span>
+                </div>
+            </div>
+        </main>
+
+        <footer class="app-footer">
+            <p>Secured by Web Crypto API. Zero server communication.</p>
+        </footer>
+    </div>
+
+    <script src="app.js"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,620 @@
+/* Modern CSS Reset & CSS Variables */
+:root {
+    --bg-color: #0b0d19;
+    --card-bg: rgba(16, 20, 38, 0.6);
+    --border-color: rgba(255, 255, 255, 0.08);
+    --text-primary: #f3f4f6;
+    --text-secondary: #9ca3af;
+    --text-muted: #6b7280;
+    
+    /* Neon Accent Colors */
+    --accent-cyan: #00f2fe;
+    --accent-purple: #9b51e0;
+    --accent-magenta: #f35588;
+    
+    /* Strength colors */
+    --str-0: #ff3860; /* Crimson Red */
+    --str-1: #ff7626; /* Neon Orange */
+    --str-2: #ffb800; /* Neon Amber */
+    --str-3: #4facfe; /* Neon Blue */
+    --str-4: #00f2fe; /* Neon Cyan */
+    --str-5: #a18cd1; /* Neon Purple/Pink Gradient target */
+    
+    --transition-speed: 0.2s;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
+    position: relative;
+}
+
+/* Background Ambient Orbs */
+.background-decor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.glow-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.35;
+    animation: pulse 12s infinite alternate ease-in-out;
+}
+
+.orb-1 {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, var(--accent-cyan) 0%, rgba(0, 242, 254, 0) 70%);
+    top: -10%;
+    left: -10%;
+}
+
+.orb-2 {
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, var(--accent-purple) 0%, rgba(155, 81, 224, 0) 70%);
+    bottom: -15%;
+    right: -10%;
+    animation-delay: -6s;
+}
+
+@keyframes pulse {
+    0% {
+        transform: translate(0, 0) scale(1);
+    }
+    100% {
+        transform: translate(80px, 40px) scale(1.2);
+    }
+}
+
+/* App Layout Container */
+.app-container {
+    width: 100%;
+    max-width: 480px;
+    padding: 20px;
+    z-index: 10;
+}
+
+.app-header {
+    text-align: center;
+    margin-bottom: 24px;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 6px;
+}
+
+.logo-icon {
+    color: var(--accent-cyan);
+    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6));
+}
+
+.app-header h1 {
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: 4px;
+    background: linear-gradient(135deg, #ffffff 30%, var(--accent-cyan) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 2px 10px rgba(0, 242, 254, 0.15));
+}
+
+.subtitle {
+    font-size: 13px;
+    color: var(--text-secondary);
+    letter-spacing: 0.5px;
+}
+
+/* Glassmorphic Card Panel */
+.glass-card {
+    background: var(--card-bg);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid var(--border-color);
+    border-radius: 24px;
+    padding: 30px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+    transition: box-shadow var(--transition-speed), border var(--transition-speed);
+}
+
+.glass-card:hover {
+    border-color: rgba(255, 255, 255, 0.12);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 242, 254, 0.03);
+}
+
+/* Password Display Wrapper */
+.password-display-wrapper {
+    position: relative;
+    background: rgba(8, 10, 21, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 16px;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    transition: border var(--transition-speed), box-shadow var(--transition-speed);
+}
+
+.password-display-wrapper:focus-within {
+    border-color: rgba(0, 242, 254, 0.4);
+    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
+}
+
+.password-input {
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #ffffff;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 19px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    padding: 12px 0;
+    overflow-x: auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.spinning {
+    animation: spin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Hide scrollbar for password input */
+.password-input::-webkit-scrollbar {
+    display: none;
+}
+.password-input {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+}
+
+.display-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 12px;
+}
+
+.action-btn {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    width: 42px;
+    height: 42px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--text-secondary);
+    cursor: pointer;
+    position: relative;
+    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.action-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+    transform: translateY(-2px);
+}
+
+.action-btn:active {
+    transform: translateY(0);
+}
+
+/* Specific button styles */
+#btn-regenerate:hover {
+    color: var(--accent-purple);
+    box-shadow: 0 0 12px rgba(155, 81, 224, 0.3);
+    border-color: rgba(155, 81, 224, 0.4);
+}
+
+#btn-regenerate:hover .icon-refresh {
+    transform: rotate(180deg);
+}
+
+.icon-refresh {
+    transition: transform 0.5s ease;
+}
+
+#btn-copy:hover {
+    color: var(--accent-cyan);
+    box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
+    border-color: rgba(0, 242, 254, 0.4);
+}
+
+/* Tooltip design */
+.tooltip {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    background: rgba(15, 17, 28, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 5px 10px;
+    border-radius: 6px;
+    opacity: 0;
+    pointer-events: none;
+    white-space: nowrap;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    transition: all var(--transition-speed) ease;
+}
+
+.tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgba(15, 17, 28, 0.95) transparent transparent transparent;
+}
+
+.action-btn:hover .tooltip {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+/* Copy State Classes */
+.action-btn.copied {
+    background: rgba(0, 242, 254, 0.1);
+    color: var(--accent-cyan);
+    border-color: var(--accent-cyan);
+}
+
+/* Settings Controls Section */
+.controls-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.control-group.border-top {
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding-top: 20px;
+}
+
+.control-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.control-header label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.badge {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 4px 10px;
+    border-radius: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--accent-cyan);
+    box-shadow: 0 0 10px rgba(0, 242, 254, 0.05);
+}
+
+.section-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* Custom Range Slider */
+.slider-wrapper {
+    position: relative;
+    width: 100%;
+    height: 6px;
+    margin: 10px 0;
+}
+
+.range-slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.06);
+    outline: none;
+    transition: background 0.3s;
+}
+
+.range-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #ffffff;
+    border: 2px solid var(--accent-cyan);
+    box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
+    cursor: pointer;
+    transition: transform var(--transition-speed) ease, background-color var(--transition-speed);
+}
+
+.range-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    background-color: var(--accent-cyan);
+}
+
+.range-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #ffffff;
+    border: 2px solid var(--accent-cyan);
+    box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
+    cursor: pointer;
+    transition: transform var(--transition-speed) ease, background-color var(--transition-speed);
+}
+
+.range-slider::-moz-range-thumb:hover {
+    transform: scale(1.2);
+    background-color: var(--accent-cyan);
+}
+
+/* Grid Checkboxes */
+.checkbox-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+}
+
+/* Custom Checkbox Design */
+.custom-checkbox {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    user-select: none;
+    height: 24px;
+}
+
+.custom-checkbox input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.checkmark {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    background-color: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 6px;
+    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.custom-checkbox:hover input ~ .checkmark {
+    border-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.06);
+}
+
+.custom-checkbox input:checked ~ .checkmark {
+    background-color: var(--accent-cyan);
+    border-color: var(--accent-cyan);
+    box-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
+}
+
+/* Create the checkmark indicator */
+.checkmark::after {
+    content: "";
+    position: absolute;
+    display: none;
+    left: 6px;
+    top: 2px;
+    width: 4px;
+    height: 9px;
+    border: solid #000;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.custom-checkbox input:checked ~ .checkmark::after {
+    display: block;
+}
+
+/* Special styling for custom toggle option */
+.toggle-option {
+    padding-left: 32px;
+    height: auto;
+}
+
+.toggle-option .checkmark {
+    height: 20px;
+    width: 20px;
+    border-radius: 6px;
+    top: 0;
+}
+
+.toggle-option .checkmark::after {
+    left: 6px;
+    top: 2px;
+}
+
+.subtext {
+    display: block;
+    font-size: 11px;
+    color: var(--text-muted);
+    font-weight: 400;
+    margin-top: 2px;
+}
+
+/* Password Strength & Metrics Panel */
+.metrics-section {
+    background: rgba(0, 0, 0, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 16px;
+    padding: 16px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.metrics-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    letter-spacing: 0.5px;
+}
+
+.metrics-header strong {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    color: #ffffff;
+}
+
+/* 5-segment meter styling */
+.strength-meter {
+    display: flex;
+    gap: 6px;
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+}
+
+.meter-segment {
+    flex: 1;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+    transition: background-color 0.4s ease, box-shadow 0.4s ease;
+}
+
+/* Visual Glow classes */
+.meter-segment.active-0 {
+    background-color: var(--str-0);
+    box-shadow: 0 0 8px rgba(255, 56, 96, 0.5);
+}
+.meter-segment.active-1 {
+    background-color: var(--str-1);
+    box-shadow: 0 0 8px rgba(255, 118, 38, 0.5);
+}
+.meter-segment.active-2 {
+    background-color: var(--str-2);
+    box-shadow: 0 0 8px rgba(255, 184, 0, 0.5);
+}
+.meter-segment.active-3 {
+    background-color: var(--str-3);
+    box-shadow: 0 0 8px rgba(79, 172, 254, 0.5);
+}
+.meter-segment.active-4 {
+    background-color: var(--str-4);
+    box-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
+}
+.meter-segment.active-5 {
+    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
+    box-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
+}
+
+.crack-time-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.icon-clock {
+    color: var(--text-muted);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#crack-time {
+    font-weight: 500;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Active coloring for crack time text based on strength rating */
+.strength-label-0 { color: var(--str-0) !important; text-shadow: 0 0 10px rgba(255, 56, 96, 0.2); }
+.strength-label-1 { color: var(--str-1) !important; text-shadow: 0 0 10px rgba(255, 118, 38, 0.2); }
+.strength-label-2 { color: var(--str-2) !important; text-shadow: 0 0 10px rgba(255, 184, 0, 0.2); }
+.strength-label-3 { color: var(--str-3) !important; text-shadow: 0 0 10px rgba(79, 172, 254, 0.2); }
+.strength-label-4 { color: var(--str-4) !important; text-shadow: 0 0 10px rgba(0, 242, 254, 0.2); }
+.strength-label-5 { 
+    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700 !important;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* App Footer Info */
+.app-footer {
+    text-align: center;
+    margin-top: 24px;
+    font-size: 11px;
+    color: var(--text-muted);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Responsiveness overrides */
+@media (max-width: 480px) {
+    .glass-card {
+        padding: 20px;
+        border-radius: 20px;
+    }
+    
+    .checkbox-grid {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+    
+    .password-input {
+        font-size: 17px;
+    }
 }