:root{--primary-blue: #60a5fa;--primary-purple: #a78bfa;--accent-green: #34d399;--bg-dark: #0f172a;--bg-darker: #020617;--surface: rgba(30, 41, 59, .8);--glass: rgba(255, 255, 255, .08);--glass-hover: rgba(255, 255, 255, .12);--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--status-weak: #ef4444;--status-medium: #f59e0b;--status-strong: #10b981;--border: rgba(255, 255, 255, .1);--input-bg: rgba(15, 23, 42, .6);--input-bg-focus: rgba(15, 23, 42, .8);--output-bg: rgba(0, 0, 0, .18);--meter-bg: rgba(255, 255, 255, .05);--hover-border: rgba(255, 255, 255, .2);--shadow: 0 8px 32px rgba(0, 0, 0, .2);--radius: 12px;--space-1: 8px;--space-2: 12px;--space-3: 16px;--space-4: 24px;--space-5: 32px}body.light-theme{--bg-dark: #edf4ff;--bg-darker: #dbeafe;--surface: rgba(255, 255, 255, .82);--glass: rgba(255, 255, 255, .68);--glass-hover: rgba(255, 255, 255, .9);--text-primary: #172554;--text-secondary: #334155;--text-muted: #64748b;--border: rgba(30, 41, 59, .14);--input-bg: rgba(255, 255, 255, .78);--input-bg-focus: rgba(255, 255, 255, .96);--output-bg: rgba(219, 234, 254, .58);--meter-bg: rgba(30, 41, 59, .12);--hover-border: rgba(30, 41, 59, .25)}*{box-sizing:border-box;margin:0;padding:0}html{min-width:320px;scroll-behavior:smooth}body{min-height:100vh;color:var(--text-primary);background:radial-gradient(circle at 8% 0%,rgba(96,165,250,.18),transparent 30rem),radial-gradient(circle at 92% 42%,rgba(167,139,250,.15),transparent 28rem),linear-gradient(145deg,var(--bg-darker),var(--bg-dark) 52%,#111827);font-family:DM Sans,Segoe UI,sans-serif;line-height:1.6;transition:background .3s ease,color .3s ease}body.light-theme{background:radial-gradient(circle at 8% 0%,rgba(96,165,250,.2),transparent 30rem),var(--bg-dark)}button,input,select{font:inherit}button{min-width:44px;min-height:44px}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(96,165,250,.5);outline-offset:3px}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:var(--space-5) 0}.header{position:relative;margin-bottom:var(--space-5)}.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;color:var(--primary-blue);font:700 .75rem Space Mono,monospace;letter-spacing:.12em}.brand-mark{font-size:2rem;line-height:1}.eyebrow{margin-left:8px;color:var(--text-muted);font-size:.62rem}.header-actions{position:absolute;top:0;right:0;display:flex;gap:8px}.header-actions select,.icon-button{min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;color:var(--text-primary);background:var(--glass);cursor:pointer;color-scheme:dark}.header-actions select option{color:#f8fafc;background:#0f172a}body.light-theme .header-actions select{color-scheme:light}body.light-theme .header-actions select option{color:#172554;background:#fff}.header-actions select{min-width:64px}.header h1{max-width:780px;margin-bottom:12px;font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.05;letter-spacing:-.03em}.header h1 em{color:var(--accent-green);font-style:normal}.subtitle{max-width:620px;color:var(--text-secondary);font-size:1.05rem}.glass-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,box-shadow .3s ease,transform .3s ease}.glass-card:hover{border-color:var(--hover-border);background:var(--glass-hover);box-shadow:0 12px 48px #60a5fa26}.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:var(--space-3);margin-bottom:var(--space-3)}.password-input-container,.strength-container,.criteria-section,.feedback-section,.suggestions-section,.utility-card{padding:var(--space-4)}.section-kicker{margin-bottom:var(--space-2);color:var(--primary-blue);font:700 .68rem Space Mono,monospace;letter-spacing:.1em}.field-label-row,.strength-header,.metric-row,.input-actions,.generated-output{display:flex;align-items:center}.field-label-row{justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2);font-weight:700}#privacyBadge{color:var(--accent-green);font:700 .62rem Space Mono,monospace}.input-wrapper{position:relative;display:flex;align-items:center}.icon-left{position:absolute;left:16px;z-index:1;color:var(--text-muted)}#passwordInput{width:100%;min-height:52px;padding:12px 90px 12px 44px;border:1px solid rgba(96,165,250,.3);border-radius:8px;color:var(--text-primary);background:var(--input-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}#passwordInput:focus{border-color:var(--primary-blue);background:var(--input-bg-focus);box-shadow:0 0 0 3px #60a5fa1a,inset 0 0 12px #60a5fa0d}#passwordInput::placeholder{color:var(--text-muted)}.toggle-password-btn{position:absolute;right:8px;min-height:36px;padding:6px 10px;border:0;border-radius:6px;color:var(--text-secondary);background:transparent;cursor:pointer;font:700 .62rem Space Mono,monospace}.toggle-password-btn:hover{color:var(--primary-blue);background:var(--glass)}.input-actions{gap:var(--space-2);margin-top:var(--space-3)}.primary-button,.secondary-button{min-height:44px;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,border-color .3s ease}.primary-button{flex:1;border:0;color:#fff;background:linear-gradient(135deg,var(--primary-blue),var(--primary-purple));box-shadow:0 4px 15px #60a5fa4d}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 25px #60a5fa66}.secondary-button{border:1px solid rgba(255,255,255,.2);color:var(--text-primary);background:var(--glass)}.secondary-button:hover,.icon-button:hover{border-color:var(--hover-border);background:var(--glass-hover);transform:translateY(-2px)}.primary-button:active,.secondary-button:active,.icon-button:active{transform:translateY(0)}.strength-header{justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}.strength-header h2{font-size:1.2rem}.score-display{color:var(--accent-green);font:700 1.4rem Space Mono,monospace;white-space:nowrap}.strength-meter{height:8px;overflow:hidden;border-radius:4px;background:var(--meter-bg)}.strength-bar{width:0;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--status-weak),var(--status-medium),var(--status-strong));box-shadow:0 0 12px currentColor;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.metric-row{flex-wrap:wrap;gap:8px 12px;margin-top:var(--space-3);color:var(--text-muted);font-size:.78rem}.metric-row strong{margin-right:8px;color:var(--text-primary);font-family:Space Mono,monospace}.generator-panel{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:var(--space-4);align-items:center;margin-bottom:var(--space-3);padding:var(--space-4)}.generator-panel h2{font-size:1.55rem;line-height:1.2}.generator-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}.generator-controls label{display:grid;gap:4px;color:var(--text-secondary);font-size:.8rem}.generator-controls output{color:var(--text-primary);font-family:Space Mono,monospace}.generator-controls input[type=range]{accent-color:var(--primary-blue)}.generated-output{justify-content:space-between;gap:var(--space-2);margin-top:var(--space-3);padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--output-bg)}.generated-output code{overflow-wrap:anywhere;color:var(--accent-green);font:700 .8rem Space Mono,monospace}.analysis-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-3)}.suggestions-section{grid-column:1 / -1}.criteria-section h3,.feedback-section h3,.suggestions-section h3,.utility-card h3{margin-bottom:var(--space-3);font-size:1.05rem}.criteria-list{display:grid;gap:8px;list-style:none}.criteria-item{display:flex;align-items:center;gap:10px;min-height:32px;color:var(--text-secondary);font-size:.9rem}.criteria-icon{display:grid;width:22px;height:22px;place-items:center;border-radius:50%;color:var(--accent-green);background:#34d3991f;font-weight:700}.feedback-content,.suggestions-content{color:var(--text-secondary);font-size:.9rem}.feedback-item{display:flex;gap:10px;padding:8px 0}.feedback-icon{color:var(--primary-blue)}.suggestions-content p{padding:5px 0}.initial-message{color:var(--text-muted);font-style:italic}.utility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.utility-card ol{display:grid;gap:6px;padding-left:20px;color:var(--text-secondary);font-size:.9rem}.compare-panel{margin-top:var(--space-3)}.compare-panel input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;color:var(--text-primary);background:var(--input-bg)}.compare-panel p{margin-top:8px;color:var(--accent-green);font-weight:700}.history-list{display:grid;gap:8px;list-style:none}.history-list li{overflow:hidden;color:var(--text-muted);font:.7rem Space Mono,monospace;text-overflow:ellipsis;white-space:nowrap}.footer{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--border);color:var(--text-muted);text-align:center;font-size:.78rem}.footer p+p{margin-top:6px}.toast-message{position:fixed;right:20px;bottom:20px;z-index:10;padding:12px 16px;border:1px solid rgba(52,211,153,.35);border-radius:8px;color:var(--text-primary);background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn .3s ease}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:1024px){.utility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.utility-card:last-child{grid-column:1 / -1}}@media(max-width:640px){.app-shell{width:min(100% - 24px,560px);padding-top:20px}.header-actions{position:static;justify-content:flex-end;margin-bottom:20px}.brand{margin-bottom:20px}.header h1{font-size:2.5rem}.hero-grid,.generator-panel,.analysis-container,.utility-grid{grid-template-columns:1fr}.suggestions-section,.utility-card:last-child{grid-column:auto}.generator-panel,.password-input-container,.strength-container,.criteria-section,.feedback-section,.suggestions-section,.utility-card{padding:18px}.input-actions{align-items:stretch;flex-direction:column}.primary-button{flex:auto}.footer{margin-top:28px}}