.app{max-width:600px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-header{text-align:center;margin-bottom:30px}.app-header h1{color:#333;margin-bottom:10px;font-size:2.5em}.app-header p{color:#666;font-size:1.1em}.password-container{background:#fff;border-radius:15px;padding:30px;box-shadow:0 10px 30px #0000001a}.password-display{display:flex;gap:10px;margin-bottom:20px}.password-input{flex:1;padding:15px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;font-family:Courier New,monospace;background:#f8f9fa;color:#333}.password-input:focus{outline:none;border-color:#007bff}.copy-button{padding:15px 20px;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;transition:all .3s ease;white-space:nowrap}.copy-button:hover{background:#0056b3}.copy-button.copied{background:#28a745}.copy-button:disabled{background:#6c757d;cursor:not-allowed}.strength-meter{margin-bottom:30px}.strength-bar{display:flex;gap:5px;margin-bottom:10px}.strength-segment{flex:1;height:8px;border-radius:4px;background:#e0e0e0;transition:background-color .3s ease}.strength-segment.active{background:#007bff}.strength-text{font-size:14px;color:#666;font-weight:500}.options-container{margin-bottom:30px}.options-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.options-header h3{color:#333;margin:0;font-size:1.3em}.toggle-options-button{padding:8px 16px;background:#6c757d;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .3s ease;margin-left:15px}.toggle-options-button:hover{background:#5a6268}.option-group{margin-bottom:20px}.option-label{display:flex;flex-direction:column;gap:10px;font-weight:500;color:#333}.option-label span{color:#333}.length-slider{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none}.length-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#007bff;cursor:pointer}.length-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#007bff;cursor:pointer;border:none}.checkbox-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px;border-radius:8px;transition:background-color .3s ease}.checkbox-label:hover{background:#f8f9fa}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff}.checkbox-label span{font-weight:500;color:#333}.generate-button{width:100%;padding:15px;background:linear-gradient(135deg,#74b9ff,#0984e3);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:20px}.generate-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.info{background:#f8f9fa;padding:26px;border-radius:8px;border-left:4px solid #007bff;margin-top:39px}.info p{margin:7px 0;color:#666;font-size:14px}@media (max-width: 768px){.app{padding:15px}.password-container{padding:20px}.password-display{flex-direction:column}.copy-button{width:100%}.checkbox-group{grid-template-columns:1fr}.app-header h1{font-size:2em}}.history-container{margin-top:39px;padding:26px;background:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.history-header h3{margin:0;color:#333;font-size:1.3em}.toggle-history-button{padding:8px 16px;background:#6c757d;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .3s ease;margin-left:15px}.toggle-history-button:hover{background:#5a6268}.history-list{display:flex;flex-direction:column;gap:15px}.history-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#fff;border-radius:6px;border:1px solid #e0e0e0}.history-password{display:flex;flex-direction:column;gap:5px;flex:1}.password-text{font-family:Courier New,monospace;font-size:14px;color:#333;word-break:break-all}.password-time{font-size:12px;color:#666}.history-actions{display:flex;gap:12px;margin-left:20px}.history-copy-button,.history-delete-button{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:all .3s ease;min-width:40px}.history-copy-button{background:#007bff;color:#fff}.history-copy-button:hover{background:#0056b3}.history-copy-button.copied{background:#28a745}.history-delete-button{background:#dc3545;color:#fff}.history-delete-button:hover{background:#c82333}.clear-history-button{padding:12px 20px;background:#dc3545;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .3s ease;margin-top:10px;width:100%}.clear-history-button:hover{background:#c82333}@media (prefers-color-scheme: dark){.app{background:#1a1a1a;color:#fff}.password-container{background:#2d2d2d;color:#fff}.password-input{background:#3d3d3d;color:#fff;border-color:#555}.checkbox-label:hover{background:#3d3d3d}.info{background:#3d3d3d;color:#fff}.history-container{background:#3d3d3d;border-color:#555}.history-item{background:#2d2d2d;border-color:#555}.app-header h1,.options-header h3,.checkbox-label span,.history-header h3,.option-label span{color:#fff}.app-header p,.strength-text,.info p,.password-text{color:#ccc}.password-time{color:#999}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:#fff;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9;color:#213547}}@media (prefers-color-scheme: dark){body{background:linear-gradient(135deg,#2c3e50,#34495e)}}#root{max-width:1280px;margin:0 auto;padding:2rem;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}