/* Password Generator Tool Styles - Optimized for performance */
.password-generator-container{max-width:800px;margin:0 auto 40px;padding:30px;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);font-family:'Poppins',Arial,sans-serif}
.password-output-container{margin-bottom:30px}
.password-display-wrapper{display:flex;position:relative;margin-bottom:15px}
.password-output{width:100%;padding:20px;font-size:20px;border:2px solid #e0e0e0;border-radius:10px;background-color:#f8f8f8;color:#333;letter-spacing:1px;transition:all .3s ease;outline:none;font-family:monospace}
.password-output:focus{border-color:#0261BC;box-shadow:0 0 0 3px rgba(2,97,188,.2)}
.copy-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background-color:#0261BC;color:#fff;border:none;border-radius:8px;padding:10px 15px;display:flex;align-items:center;cursor:pointer;transition:all .3s ease}
.copy-btn:hover{background-color:#37bce5;transform:translateY(-50%) scale(1.05)}
.copy-icon{margin-right:6px;display:flex;align-items:center}
.copy-text{font-size:14px;font-weight:600}
.strength-indicator{display:flex;align-items:center;margin-top:15px;flex-wrap:wrap}
.strength-label{font-size:14px;font-weight:600;color:#555;margin-right:10px}
.strength-bars{display:flex;gap:5px;margin-right:15px}
.bar{height:10px;width:40px;background-color:#e0e0e0;border-radius:5px;transition:background-color .3s ease}
.weak .bar:nth-child(1){background-color:#ff4d4d}
.medium .bar:nth-child(1),.medium .bar:nth-child(2){background-color:#ffaa00}
.strong .bar:nth-child(1),.strong .bar:nth-child(2),.strong .bar:nth-child(3){background-color:#73c973}
.very-strong .bar{background-color:#00b300}
.strength-text{font-size:14px;font-weight:600;color:#777}
.password-settings{background-color:#f9f9f9;border-radius:15px;padding:25px;margin-bottom:30px}
.setting-item{margin-bottom:20px}
.setting-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.setting-label label{font-weight:600;color:#333;font-size:16px}
.length-value{font-weight:700;background-color:#0261BC;color:#fff;padding:4px 12px;border-radius:20px;font-size:14px}
.slider-container{position:relative;padding:10px 0}
.length-slider{-webkit-appearance:none;width:100%;height:10px;background:linear-gradient(to right,#0261BC,#37bce5);border-radius:10px;outline:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.1);transition:all .3s ease}
.length-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #0261BC;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.2);position:relative;z-index:2}
.length-slider::-webkit-slider-thumb:hover{background:#f8f8f8;transform:scale(1.1);border-color:#37bce5}
.length-slider::-webkit-slider-thumb:active{transform:scale(1.15);background:#f0f0f0;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.length-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #0261BC;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.2);position:relative;z-index:2}
.length-slider::-moz-range-thumb:hover{background:#f8f8f8;transform:scale(1.1);border-color:#37bce5}
.length-slider::-moz-range-thumb:active{transform:scale(1.15);background:#f0f0f0;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.length-slider::-moz-range-progress{background-color:#0261BC;height:10px;border-radius:10px}
.slider-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#666;margin-top:10px;padding:0 2px}
.slider-ticks{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:space-between;padding:0 14px;pointer-events:none}
.tick{width:2px;height:6px;background-color:rgba(255,255,255,.5);border-radius:1px}
.slider-bubbles{position:absolute;top:-30px;left:0;width:100%;pointer-events:none}
.bubble{position:absolute;background:#0261BC;color:#fff;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:700;transform:translateX(-50%);bottom:0;opacity:0;transition:opacity .3s ease,bottom .3s ease}
.bubble:after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#0261BC transparent transparent transparent}
.length-slider:active+.slider-bubbles .bubble{opacity:1;bottom:5px}
.checkbox-setting{margin-bottom:15px}
.checkbox-wrapper{display:flex;align-items:center}
.setting-checkbox{-webkit-appearance:none;appearance:none;width:22px;height:22px;border:2px solid #c4c4c4;border-radius:6px;margin-right:10px;position:relative;cursor:pointer;transition:all .2s ease}
.setting-checkbox:checked{background-color:#0261BC;border-color:#0261BC}
.setting-checkbox:checked::after{content:'';position:absolute;top:5px;left:5px;width:8px;height:4px;border:2px solid #fff;border-top:none;border-right:none;transform:rotate(-45deg)}
.setting-checkbox:hover{border-color:#0261BC}
.checkbox-wrapper label{font-size:15px;cursor:pointer}
.generate-btn{width:100%;padding:16px;background-color:#0261BC;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px;text-transform:uppercase;letter-spacing:1px}
.generate-btn:hover{background-color:#37bce5;transform:translateY(-3px);box-shadow:0 5px 15px rgba(2,97,188,.3)}
.password-history{background-color:#f9f9f9;border-radius:15px;padding:20px}
.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.history-title{font-weight:600;font-size:18px;color:#333}
.clear-history-btn{background-color:#f0f0f0;border:none;border-radius:8px;padding:6px 12px;font-size:14px;cursor:pointer;color:#555;transition:all .2s ease}
.clear-history-btn:hover{background-color:#e0e0e0;color:#333}
.history-container{max-height:200px;overflow-y:auto;padding-right:5px}
.empty-history{color:#888;font-style:italic;text-align:center;padding:20px 0}
.history-item{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background-color:#fff;border-radius:8px;margin-bottom:8px;transition:all .2s ease}
.history-item:hover{box-shadow:0 4px 10px rgba(0,0,0,.05)}
.history-password{font-family:monospace;letter-spacing:1px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}
.history-action{display:flex;gap:5px}
.use-password-btn,.delete-password-btn{background:none;border:none;cursor:pointer;padding:5px;color:#888;transition:all .2s ease}
.use-password-btn:hover{color:#0261BC}
.delete-password-btn:hover{color:#ff4d4d}
.copy-success{position:fixed;top:20px;right:20px;background-color:#4caf50;color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.2);z-index:9999;animation:fadeInOut 2s ease-in-out}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
fieldset{border:0;padding:0;margin:0}
@keyframes fadeInOut{0%{opacity:0;transform:translateY(-20px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}
@media screen and (max-width:768px){.password-generator-container{padding:20px}.password-output{font-size:16px;padding:15px}.copy-btn{padding:8px 12px}.strength-indicator{flex-direction:column;align-items:flex-start}.strength-label{margin-bottom:5px}.strength-bars{margin-bottom:5px}.bar{width:30px}}
@media screen and (max-width:480px){.password-settings{padding:15px}.setting-label label{font-size:14px}.checkbox-wrapper label{font-size:14px}.generate-btn{padding:14px;font-size:14px}.bar{width:25px}}