:root{--bg-color-light:#f4f7f6;--text-color-light:#2c3e50;--card-bg-light:#ffffff;--accent-color-light:#E91E63;--border-color-light:#e0e0e0;--input-bg-light:#e9ecef;--icon-color-light:#2c3e50;--bg-color-dark:#121212;--text-color-dark:#e0e0e0;--card-bg-dark:#1e1e1e;--accent-color-dark:#FF4081;--border-color-dark:#333333;--input-bg-dark:#2a2a2a;--icon-color-dark:#e0e0e0;--font-family:'Inter',sans-serif;--border-radius:10px;--box-shadow:0 6px 20px rgba(0, 0, 0, 0.08);--box-shadow-dark:0 6px 20px rgba(0, 0, 0, 0.25)}body{font-family:var(--font-family);margin:0;padding:20px;display:flex;flex-direction:column;align-items:center;min-height:100vh;box-sizing:border-box;transition:background-color .3s,color .3s}body.light-mode{background-color:var(--bg-color-light);color:var(--text-color-light)}body.dark-mode{background-color:var(--bg-color-dark);color:var(--text-color-dark)}.container{width:100%;max-width:650px;padding:25px 30px;border-radius:var(--border-radius);transition:background-color .3s,box-shadow .3s}body.light-mode .container{background-color:var(--card-bg-light);box-shadow:var(--box-shadow)}body.dark-mode .container{background-color:var(--card-bg-dark);box-shadow:var(--box-shadow-dark)}header{text-align:center;margin-bottom:25px;position:relative}.header-top-controls{display:flex;justify-content:space-between;align-items:center;position:absolute;top:5px;left:5px;right:5px;z-index:10}.language-switcher{display:flex;gap:5px}.lang-button{background:0 0;border:1px solid;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:.85em;font-weight:500;transition:background-color .2s,color .2s}body.light-mode .lang-button{border-color:var(--border-color-light);color:var(--text-color-light)}body.dark-mode .lang-button{border-color:var(--border-color-dark);color:var(--text-color-dark)}body.light-mode .lang-button.active,body.light-mode .lang-button:hover{background-color:rgba(233,30,99,.1);color:var(--accent-color-light);border-color:var(--accent-color-light)}body.dark-mode .lang-button.active,body.dark-mode .lang-button:hover{background-color:rgba(255,64,129,.1);color:var(--accent-color-dark);border-color:var(--accent-color-dark)}.logo{font-size:2.8em;font-weight:700;margin-bottom:8px;letter-spacing:-1px;margin-top:50px}body.light-mode #copyMessage,body.light-mode .logo{color:var(--accent-color-light)}body.dark-mode #copyMessage,body.dark-mode .logo{color:var(--accent-color-dark)}.logo-pw{display:inline-block;min-width:90px;text-align:left}.theme-toggle-button{background:0 0;border:none;border-radius:50%;padding:10px;cursor:pointer;font-size:1.2em;transition:background-color .2s,color .2s,transform .2s;width:44px;height:44px;display:flex;align-items:center;justify-content:center}body.light-mode .theme-toggle-button{color:var(--icon-color-light)}body.dark-mode .theme-toggle-button{color:var(--icon-color-dark)}body.light-mode .theme-toggle-button:hover{background-color:rgba(0,0,0,.05);transform:scale(1.1)}body.dark-mode .theme-toggle-button:hover{background-color:rgba(255,255,255,.1);transform:scale(1.1)}.password-display-area{display:flex;align-items:center;margin-bottom:30px;border-radius:var(--border-radius);padding:18px 20px}body.light-mode .password-display-area{background-color:var(--input-bg-light);border:1px solid var(--border-color-light)}body.dark-mode .password-display-area{background-color:var(--input-bg-dark);border:1px solid var(--border-color-dark)}#generatedPassword{flex-grow:1;font-size:1.5em;font-weight:500;word-break:break-all;margin-right:15px;min-height:30px}body.light-mode #generatedPassword{color:var(--text-color-light)}body.dark-mode #generatedPassword{color:var(--text-color-dark)}#copyButton{padding:12px 20px;border:none;border-radius:var(--border-radius);cursor:pointer;font-weight:600;transition:background-color .2s,transform .1s;white-space:nowrap;display:flex;align-items:center;gap:8px}body.light-mode #copyButton{background-color:var(--accent-color-light);color:#fff}body.dark-mode #copyButton{background-color:var(--accent-color-dark);color:var(--bg-color-dark)}#copyButton:hover{opacity:.9}#copyButton:active{transform:scale(.97)}#copyMessage{font-size:.85em;margin-left:12px;opacity:0;transition:opacity .3s;font-weight:500}.options-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:30px}@media (min-width:600px){.options-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}.option-group{padding:20px;border-radius:var(--border-radius);transition:border-color .3s}body.light-mode .option-group{background-color:#fdfdfd;border:1px solid var(--border-color-light)}body.dark-mode .option-group{background-color:#252525;border:1px solid var(--border-color-dark)}body.light-mode .option-group:hover{border-color:var(--accent-color-light)}body.dark-mode .option-group:hover{border-color:var(--accent-color-dark)}.option-group>label:first-child{display:block;margin-bottom:15px;font-weight:600;font-size:1.05em}.option-item{display:flex;align-items:center;margin-bottom:12px}.option-item input[type=checkbox]{display:none}.option-item span{font-size:.95em}input[type=range]{width:100%;cursor:pointer;margin-top:5px;accent-color:var(--accent-color-light)}body.dark-mode input[type=range]{accent-color:var(--accent-color-dark)}#lengthValue{font-weight:600;padding:3px 6px;border-radius:4px}body.light-mode #lengthValue{color:var(--accent-color-light);background-color:rgba(233,30,99,.1)}body.dark-mode #lengthValue{color:var(--accent-color-dark);background-color:rgba(255,64,129,.1)}#generateButton{display:block;width:100%;padding:16px;font-size:1.25em;font-weight:700;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s,transform .1s,box-shadow .2s;letter-spacing:.5px}body.light-mode #generateButton{background-color:var(--accent-color-light);color:#fff;box-shadow:0 4px 10px rgba(233,30,99,.3)}body.dark-mode #generateButton,body.dark-mode input:checked+.slider-custom{background-color:var(--accent-color-dark)}body.dark-mode #generateButton{color:var(--bg-color-dark);box-shadow:0 4px 10px rgba(255,64,129,.2)}#generateButton:hover{opacity:.9;box-shadow:0 6px 15px rgba(233,30,99,.4)}body.dark-mode #generateButton:hover{box-shadow:0 6px 15px rgba(255,64,129,.3)}#generateButton:active{transform:scale(.98);box-shadow:0 2px 5px rgba(233,30,99,.2)}body.dark-mode #generateButton:active{box-shadow:0 2px 5px rgba(255,64,129,.15)}.error-message{color:#e74c3c;text-align:center;margin-top:15px;font-size:.9em;min-height:1.2em;font-weight:500}footer{text-align:center;margin-top:auto;padding-top:40px;padding-bottom:20px}.privacy-warning{font-size:.9em;max-width:550px;margin:0 auto 15px;line-height:1.6}body.light-mode .privacy-warning{color:#555}body.dark-mode .privacy-warning{color:#999}.copyright{font-size:.85em}body.light-mode .copyright{color:#666}body.dark-mode .copyright{color:#777}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider-custom{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border-radius:24px;transition:.4s}body.light-mode .slider-custom{background-color:#ccc}body.dark-mode .slider-custom{background-color:#555}.slider-custom:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.4s}input:checked+.slider-custom{background-color:var(--accent-color-light)}input:checked+.slider-custom:before{transform:translateX(20px)}.option-item label.switch-label{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:8px 0}.option-item label.switch-label span:first-child{margin-right:10px;flex-grow:1}@media (max-width:768px){.logo{margin-top:60px;font-size:2.2em}.container{padding:20px 15px}.theme-toggle-button{font-size:1.1em;padding:8px;width:40px;height:40px}.password-display-area{flex-direction:column;align-items:stretch;padding:15px}#generatedPassword{margin-right:0;margin-bottom:12px;font-size:1.3em}#copyButton{width:100%;justify-content:center}#copyMessage{text-align:center;margin-left:0;margin-top:8px}.options-grid{grid-template-columns:1fr}}@media (max-width:480px){.logo{font-size:2em}#generateButton{font-size:1.15em;padding:14px}.option-group{padding:15px}.lang-button{padding:5px 8px;font-size:.8em}}
