body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#0f172a,#1e3a5f,#0d3b66);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.container{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%}.generator{background:#1a2332;border-radius:20px;padding:50px;box-shadow:0 25px 50px #00000080,0 0 1px #22c5ee33;width:100%;max-width:700px;animation:slideIn .6s ease-out;border:1px solid rgba(34,197,238,.1)}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.header{text-align:center;margin-bottom:40px}h1{color:#fff;font-size:32px;margin-bottom:10px;background:linear-gradient(135deg,#06b6d4,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}h3{color:#e2e8f0;font-size:16px;font-weight:600;margin-bottom:15px}.subtitle{color:#a0aec0;font-size:14px;font-weight:500}.categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:30px;animation:fadeInUp .7s ease-out .1s both}.category-btn{padding:12px 16px;background:transparent;color:#cbd5e1;border:2px solid #334155;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative}.category-btn:hover{border-color:#06b6d4;color:#06b6d4;transform:translateY(-2px)}.category-btn.active{background:linear-gradient(135deg,#06b6d4,#14b8a6);color:#0f172a;border-color:#06b6d4;box-shadow:0 4px 15px #06b6d44d}.category-btn[title]:after{content:attr(title);position:absolute;bottom:-35px;left:50%;transform:translate(-50%);background:#0f172a;color:#06b6d4;padding:6px 10px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease;border:1px solid rgba(6,182,212,.2);z-index:10}.category-btn:hover:after{opacity:1}.passwords-section{margin-bottom:30px;animation:fadeInUp .7s ease-out .2s both}.passwords-section.generating{opacity:.7}.passwords-list{display:flex;flex-direction:column;gap:15px;max-height:400px;overflow-y:auto;padding-right:10px}.passwords-list::-webkit-scrollbar{width:6px}.passwords-list::-webkit-scrollbar-track{background:#0f172a;border-radius:10px}.passwords-list::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#06b6d4,#14b8a6);border-radius:10px}.password-item{background:#0f172a;border:2px solid #334155;border-radius:12px;padding:16px;cursor:pointer;transition:all .3s ease;position:relative;animation:slideIn .4s ease-out}.password-item:hover{border-color:#06b6d4;box-shadow:0 4px 15px #06b6d433;transform:translate(5px)}.password-content{display:grid;grid-template-columns:1fr;gap:12px}.password-display{display:flex;gap:10px;align-items:center}.password-input{flex:1;padding:12px;border:1px solid #334155;border-radius:8px;font-size:14px;font-family:Courier New,monospace;font-weight:600;color:#06b6d4;background:#1a2332;transition:all .3s ease;letter-spacing:.5px}.password-input:focus{outline:none;border-color:#06b6d4;box-shadow:0 0 0 3px #06b6d433}.password-input::placeholder{color:#64748b}.copy-btn-small{width:40px;height:40px;padding:0;background:linear-gradient(135deg,#06b6d4,#14b8a6);color:#0f172a;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.copy-btn-small:hover{transform:scale(1.1);box-shadow:0 4px 12px #06b6d466}.copy-btn-small.copied{background:linear-gradient(135deg,#4caf50,#45a049)}.strength-bar{width:100%;height:6px;background:#334155;border-radius:3px;overflow:hidden}.strength-fill{height:100%;border-radius:3px;transition:all .4s ease}.password-stats{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600}.strength-label{font-weight:700}.crack-time{color:#a0aec0;font-size:11px}.qr-toggle-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;background:linear-gradient(135deg,#06b6d4,#14b8a6);color:#0f172a;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:all .3s ease}.qr-toggle-btn:hover{transform:scale(1.1)}.qr-section{background:linear-gradient(135deg,#0f172a,#1a2332);border:1px solid rgba(6,182,212,.2);border-radius:12px;padding:30px;margin-bottom:30px;text-align:center;animation:fadeInUp .5s ease-out}.qr-container{background:#fff;padding:15px;border-radius:12px;display:inline-block;margin:20px 0;box-shadow:0 4px 15px #06b6d44d}.qr-tip{color:#a0aec0;font-size:12px;font-style:italic}.settings{margin-bottom:30px;background:linear-gradient(135deg,#0f172a,#1a2332);padding:30px;border-radius:16px;border:1px solid rgba(6,182,212,.15);animation:fadeInUp .7s ease-out .2s both}.setting-group{margin-bottom:25px}.length-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.length-header label{color:#e2e8f0;font-weight:700;font-size:16px}.length-value{background:linear-gradient(135deg,#06b6d4,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-size:18px;min-width:30px;text-align:right}.slider{width:100%;height:8px;border-radius:5px;background:linear-gradient(to right,#334155,#1e293b);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#06b6d4,#14b8a6);cursor:pointer;box-shadow:0 2px 8px #06b6d466;transition:all .2s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 15px #06b6d499}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#06b6d4,#14b8a6);cursor:pointer;border:none;box-shadow:0 2px 8px #06b6d466;transition:all .2s ease}.slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 15px #06b6d499}.range-labels{display:flex;justify-content:space-between;font-size:11px;color:#64748b;margin-top:6px}.length-hints{margin-top:8px;text-align:right;font-size:12px;font-weight:600}.length-hints .weak{color:#ef5350}.length-hints .medium{color:#ffa726}.length-hints .strong{color:#4caf50}.divider{height:1px;background:linear-gradient(to right,transparent,rgba(6,182,212,.2),transparent);margin:20px 0}.checkboxes{display:flex;flex-direction:column;gap:15px}.checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;transition:all .3s ease}.checkbox-label:hover{transform:translate(5px)}.checkbox-label[title]:after{content:attr(title);position:absolute;left:40px;top:-30px;background:#0f172a;color:#06b6d4;padding:6px 10px;border-radius:6px;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease;border:1px solid rgba(6,182,212,.2);font-weight:500}.checkbox-label:hover:after{opacity:1}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-custom{width:22px;height:22px;border:2px solid #06b6d4;border-radius:6px;margin-right:12px;display:flex;align-items:center;justify-content:center;background:#0f172a;transition:all .3s ease;flex-shrink:0}.checkbox-input:checked~.checkbox-custom{background:linear-gradient(135deg,#06b6d4,#14b8a6);border-color:#06b6d4;box-shadow:0 2px 8px #06b6d44d;animation:pulse .3s ease-out}.checkbox-input:checked~.checkbox-custom:after{content:"✓";color:#fff;font-size:14px;font-weight:700}.checkbox-text{color:#cbd5e1;font-size:15px;font-weight:500}.checkbox-input:checked~.checkbox-text{color:#06b6d4;font-weight:600}.button-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:30px}.generate-btn{width:100%;padding:16px;background:linear-gradient(135deg,#06b6d4,#14b8a6);color:#0f172a;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #06b6d466;animation:fadeInUp .7s ease-out .3s both;letter-spacing:.5px}.generate-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 25px #06b6d499}.generate-btn:active:not(:disabled){transform:translateY(-1px)}.generate-btn:disabled{opacity:.7;cursor:not-allowed}.generate-btn.generating{animation:pulse .6s ease-in-out infinite}.export-section{background:linear-gradient(135deg,#0f172a,#1a2332);border:1px solid rgba(6,182,212,.2);border-radius:12px;padding:25px;animation:fadeInUp .7s ease-out .4s both}.export-btn{width:100%;padding:12px 16px;background:transparent;color:#e2e8f0;border:2px solid #334155;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.export-btn:hover{transform:translateY(-2px);border-color:#06b6d4;color:#06b6d4;box-shadow:0 4px 12px #06b6d433}.txt-btn{border-color:#06b6d4}.txt-btn:hover{background:#06b6d41a}.csv-btn{border-color:#14b8a6}.csv-btn:hover{background:#14b8a61a;border-color:#14b8a6;color:#14b8a6}@media (max-width: 768px){.generator{padding:30px 20px;max-width:100%}h1{font-size:24px}h3{font-size:14px}.categories{grid-template-columns:repeat(2,1fr)}.category-btn{padding:10px 12px;font-size:12px}.passwords-list{max-height:300px}.button-group{grid-template-columns:1fr}.strength-bar{height:4px}.password-stats{flex-direction:column;align-items:flex-start;gap:6px}.settings{padding:20px}.checkbox-label,.length-header label{font-size:14px}.export-section{padding:20px}}.checkboxes input[type=checkbox]{width:18px;height:18px;margin-right:10px;cursor:pointer;accent-color:#667eea}.generate-btn{width:100%;padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.generate-btn:active{transform:translateY(0)}@media (max-width: 480px){.generator{padding:25px}h1{font-size:22px;margin-bottom:20px}.password-display{flex-direction:column}.copy-btn{width:100%}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}