* {margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px;line-height:1.6}
.container{max-width:800px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:24px 20px}
header h1{font-size:2rem;margin-bottom:6px;font-weight:700}
.subtitle{font-size:1.05rem;opacity:.95}
.nav{color:#e2e8f0;text-decoration:none;font-weight:600}.nav:hover{opacity:.85}
main{padding:32px 24px}
.password-display-section{margin-bottom:32px}
.password-display{background:#f7f9fc;border:2px solid #e1e8ed;border-radius:12px;padding:22px;font-family:'Courier New',monospace;font-size:1.2rem;text-align:center;word-break:break-all;min-height:74px;display:flex;align-items:center;justify-content:center;color:#2d3748;margin-bottom:16px;transition:all .3s ease}
.password-display.generated{background:#e6fffa;border-color:#81e6d9;color:#234e52}
.button-group{display:flex;gap:12px;flex-wrap:wrap}
.btn{flex:1;min-width:180px;padding:14px 26px;font-size:1rem;border:none;border-radius:10px;cursor:pointer;font-weight:700;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}
.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(102,126,234,.4)}
.btn-secondary{background:#48bb78;color:#fff}
.btn-secondary:hover{background:#38a169;transform:translateY(-2px);box-shadow:0 10px 25px rgba(72,187,120,.4)}
.btn:active{transform:translateY(0)}
.copy-notification{margin-top:12px;padding:10px;background:#48bb78;color:#fff;border-radius:8px;text-align:center;font-weight:700;opacity:0;transition:opacity .3s ease}
.copy-notification.show{opacity:1}
.options-section{background:#f7f9fc;padding:22px;border-radius:12px;margin-bottom:28px}
.options-section h2{color:#2d3748;margin-bottom:18px;font-size:1.5rem}
.option{margin-bottom:16px}
.option label{display:flex;align-items:center;font-size:1.05rem;color:#4a5568;cursor:pointer}
.option input[type=checkbox]{margin-right:10px;width:18px;height:18px;cursor:pointer}
.option input[type=range]{width:100%;margin-top:8px;height:8px;border-radius:5px;background:#e1e8ed;outline:none;-webkit-appearance:none}
.option input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#667eea;cursor:pointer}
.option input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#667eea;cursor:pointer;border:none}
#lengthValue{font-weight:700;color:#667eea;margin-left:10px}
.strength-meter{margin-top:22px;padding-top:16px;border-top:2px solid #e1e8ed}
.strength-meter p{margin-bottom:8px;font-size:1.05rem;color:#4a5568}
.strength-bar{height:12px;background:#e1e8ed;border-radius:6px;overflow:hidden}
.strength-fill{height:100%;width:0;border-radius:6px;transition:all .3s ease}
.strength-fill.weak{width:33%;background:#f56565}
.strength-fill.medium{width:66%;background:#ed8936}
.strength-fill.strong{width:100%;background:#48bb78}
.info-section{color:#4a5568}
.info-section h2{color:#2d3748;margin-bottom:12px;margin-top:22px;font-size:1.5rem}
.info-section h3{color:#2d3748;margin-bottom:10px;margin-top:18px;font-size:1.25rem}
.info-section ul{margin-left:22px;margin-bottom:16px}
.info-section li{margin-bottom:8px;line-height:1.7}
.info-section p{margin-bottom:12px;line-height:1.8}
footer{background:#2d3748;color:#fff;text-align:center;padding:22px;font-size:.95rem}
footer a{text-decoration:none;transition:opacity .3s ease}
footer a:hover{opacity:.85}
@media (max-width:768px){header h1{font-size:1.6rem}.subtitle{font-size:.95rem}.password-display{font-size:1.05rem;padding:18px}.button-group{flex-direction:column}.btn{min-width:100%}main{padding:24px 16px}.options-section{padding:16px}}