:root{--primary:#2563eb;--primary-dark:#1d4ed8;--secondary:#4ade80;--dark:#1e293b;--light:#f8fafc;--gray:#64748b;--danger:#ef4444}*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}body{background-color:var(--light);color:var(--dark);line-height:1.6}header{background-color:var(--primary);color:#fff;padding:1rem;text-align:center}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header-content{display:flex;justify-content:space-between;align-items:center;width:100%}.language-selector{position:relative;display:inline-block}.language-selector-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;padding:.5rem 1rem;cursor:pointer;border-radius:4px;display:flex;align-items:center;gap:.5rem;font-size:.9rem}.language-selector-button:hover{background-color:rgba(255,255,255,.3)}.language-selector-dropdown{position:absolute;right:0;top:100%;background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);border-radius:4px;overflow:hidden;z-index:10;min-width:150px;display:none}.language-selector-dropdown.active{display:block}.language-option{padding:.75rem 1rem;cursor:pointer;color:var(--dark);transition:background-color .2s}.language-option:hover{background-color:#f1f5f9}.language-option.active{background-color:#e2e8f0;font-weight:600}.hero{padding:3rem 1rem;text-align:center;background-color:var(--primary);color:#fff}.hero h1{font-size:2.5rem;margin-bottom:1rem}.hero p{font-size:1.2rem;max-width:600px;margin:0 auto 2rem}.password-generator{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:2rem;margin:-5rem auto 3rem;max-width:800px;position:relative}.output-container{display:flex;margin-bottom:1.5rem;position:relative}#password-output{flex:1;padding:.75rem;font-size:1.2rem;border:2px solid #e2e8f0;border-radius:4px;font-family:monospace;background-color:#f8fafc}.copy-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:0 0;border:none;cursor:pointer;color:var(--gray)}.copy-btn:hover{color:var(--primary)}.copy-btn:focus-visible{outline:2px solid var(--primary);border-radius:4px;outline-offset:2px}.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:1.5rem}.setting-group{margin-bottom:1rem}.setting-group label{display:block;margin-bottom:.5rem;font-weight:600}input[type=range]{width:100%}input[type=checkbox]{margin-right:.5rem}.length-display{display:inline-block;width:2.5rem;text-align:center;font-weight:700}.generate-btn{background-color:var(--primary);color:#fff;border:none;padding:.75rem 1.5rem;font-size:1rem;border-radius:4px;cursor:pointer;font-weight:600;transition:background-color .2s;width:100%}.generate-btn:hover{background-color:var(--primary-dark)}.generate-btn:focus-visible{outline:3px solid rgba(37,99,235,.5);outline-offset:2px}.password-strength{display:flex;justify-content:space-between;margin:1.5rem 0}.strength-meter{height:8px;flex:1;margin-right:1rem;background-color:#e2e8f0;border-radius:4px;overflow:hidden}.strength-fill{height:100%;width:0;transition:width .3s,background-color .3s}.strength-text{font-weight:600;min-width:100px}.features{padding:4rem 1rem;text-align:center}.features h2{font-size:2rem;margin-bottom:2rem}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature-card{padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 15px rgba(0,0,0,.1)}.feature-icon{font-size:2.5rem;margin-bottom:1rem;color:var(--primary)}.how-it-works{padding:4rem 1rem;background-color:#f1f5f9}.how-it-works h2{text-align:center;font-size:2rem;margin-bottom:2rem}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.step{display:flex;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.05)}.step-number{background-color:var(--primary);color:#fff;font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:1rem;min-width:60px}.step-content{padding:1.5rem}.step h3{margin-bottom:.5rem}.password-tips{padding:4rem 1rem;background-color:#f1f5f9}.password-tips h2{text-align:center;font-size:2rem;margin-bottom:2rem}.tips-list{max-width:800px;margin:0 auto}.tips-list li{margin-bottom:1rem;list-style-position:inside}.faq{padding:4rem 1rem}.faq h2{text-align:center;font-size:2rem;margin-bottom:2rem}.faq-item{margin-bottom:1.5rem;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.faq-question{padding:1rem;background-color:#fff;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-answer{padding:0 1rem;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;background-color:#f8fafc}.faq-item.active .faq-answer{padding:1rem;max-height:500px}footer{background-color:var(--dark);color:#fff;padding:2rem 1rem;text-align:center}.footer-links{display:flex;justify-content:center;margin:1rem 0;flex-wrap:wrap}.footer-links a{color:#fff;margin:0 1rem;text-decoration:none}.footer-links a:hover{text-decoration:underline}@media (max-width:768px){.hero h1{font-size:2rem}.password-generator{margin-top:-3rem;padding:1.5rem}.settings{grid-template-columns:1fr}.feature-grid,.steps{grid-template-columns:1fr}.footer-links{flex-direction:column;gap:1rem}.footer-links a{margin:0}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .3s ease-in-out}[lang=zh]{font-family:'Microsoft YaHei','PingFang SC',sans-serif}[lang=ja]{font-family:'Hiragino Sans','Hiragino Kaku Gothic Pro',Meiryo,sans-serif}[lang=ar]{direction:rtl;font-family:Tahoma,Dubai,sans-serif}[lang=ar] .copy-btn,[lang=ar] .header-content,[lang=ar] .language-selector,[lang=ar] .language-selector-dropdown,[lang=ar] .step{direction:rtl}[lang=ar] .copy-btn{left:10px;right:auto}[lang=ar] .step-number{order:2}[lang=ar] .step-content{order:1}[lang=ar] .feature-card:hover{transform:translateY(-5px)}[lang=ar] input[type=checkbox]{margin-right:0;margin-left:.5rem}@media (prefers-contrast:high){:root{--primary:#0047ab;--primary-dark:#00308f}.password-generator{border:2px solid #000}.faq-item,.feature-card,.step{border:1px solid #000}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.feature-card:hover{transform:none}}