:root{--primary:#5b4ef5;--secondary:#8b7fd4;--text:#333;--bg:#f5f5f5;--border:#ddd}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px;display:flex;align-items:center;justify-content:center}
.container{background:white;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:40px;max-width:600px;width:100%}
h1{color:var(--primary);text-align:center;margin-bottom:30px;font-size:2rem;display:flex;align-items:center;justify-content:center;gap:10px}
.controls{display:flex;gap:15px;margin-bottom:30px;flex-wrap:wrap;justify-content:center}
input,select,button{padding:12px 24px;border:2px solid var(--border);border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}
input{background:white;color:var(--text);border-color:var(--primary);outline:none;flex:1;min-width:200px}
button{background:var(--primary);color:white;border:none;font-weight:700}
button:hover{background:var(--secondary);transform:translateY(-2px);box-shadow:0 5px 15px rgba(91,78,245,.3)}
.output{background:var(--bg);border:2px solid var(--border);border-radius:12px;padding:20px;margin:20px 0;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:1.1rem;word-break:break-all}
.strength{margin:20px 0;padding:15px;border-radius:8px;text-align:center;font-weight:600}
.strength.weak{background:#ffebee;color:#c62828}
.strength.medium{background:#fff3e0;color:#e65100}
.strength.strong{background:#e8f5e9;color:#2e7d32}
.copy-btn{background:var(--secondary);padding:10px 20px;font-size:.9rem}
.copy-btn:hover{background:var(--primary)}
@media(max-width:600px){.container{padding:20px}
h1{font-size:1.5rem}
.controls{flex-direction:column}
#password{background:var(--bg);border:2px solid var(--border);border-radius:12px;padding:20px;margin:20px 0;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:1.1rem;word-break:break-all;color:var(--text)}
input{min-width:100%}
