body{margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.landing-container{align-items:center;background:linear-gradient(135deg,#1a202c,#2d3748 50%,#4a5568);border-radius:35px;display:flex;justify-content:center;min-height:90vh;padding:40px;width:100%}.landing-card{background:#fff;border-radius:20px;box-shadow:0 25px 50px #00000026;max-width:700px;min-width:600px;padding:80px 100px;text-align:center;width:100%}.landing-header{margin-bottom:50px}.logo{animation:pulse 2s infinite;font-size:80px;margin-bottom:30px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.landing-header h1{color:#2d3748;font-size:42px;font-weight:700;line-height:1.2;margin:0 0 20px}.subtitle{color:#38b2ac;font-size:22px;font-weight:600;margin:0 0 20px}.description{color:#718096;font-size:18px;line-height:1.6;margin:0 auto;max-width:500px}.get-started-button{background:linear-gradient(135deg,#38b2ac,#319795);border:none;border-radius:15px;box-shadow:0 8px 20px #38b2ac4d;color:#fff;cursor:pointer;font-size:20px;font-weight:600;padding:20px 50px;transition:all .3s ease}.get-started-button:hover{background:linear-gradient(135deg,#319795,#2c7a7b);box-shadow:0 12px 30px #38b2ac66;transform:translateY(-3px)}.get-started-button:active{transform:translateY(-1px)}@media (max-width:768px){.landing-card{min-width:auto;padding:60px 40px}.landing-header h1{font-size:32px}.subtitle{font-size:18px}.description{font-size:16px}}.password-generator{background:rgba(148,149,218,.133);border-radius:20px;box-shadow:0 25px 50px #00000026;margin:0 auto;max-width:800px;min-height:600px;padding:50px 60px}.generator-header{justify-items:center;margin-bottom:32px;text-align:center}.generator-header h2{color:#2d3748;font-size:32px;font-weight:700;margin:0 0 12px}.generator-header p{color:#718096;font-size:18px;margin:0}.options{grid-gap:40px;align-items:start;display:grid;gap:40px;grid-template-columns:1fr 1fr;margin-bottom:40px}.option-group{display:flex;flex-direction:column;gap:8px;margin-left:170px}.option-group label{color:#2d3748;font-size:14px;font-weight:600}.option-group select{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#fff,#f8fafc);background-image:url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23718096" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');background-position:right 16px center;background-repeat:no-repeat;background-size:12px;border:2px solid #e2e8f0;border-radius:12px;box-shadow:0 2px 4px #0000000d;cursor:pointer;font-size:18px;padding:16px 50px 16px 20px;transition:all .3s ease;width:350px}.option-group select:hover{background:linear-gradient(135deg,#f8fafc,#edf2f7);border-color:#38b2ac;box-shadow:0 4px 8px #0000001a;transform:translateY(-1px)}.option-group select:focus{background:#fff;border-color:#38b2ac;box-shadow:0 0 0 3px #38b2ac1a,0 4px 12px #00000026;outline:none}.option-group select option{background:#fff;border:none;color:#2d3748;font-size:16px;font-weight:500;padding:12px 16px}.option-group select option:hover{background:#f7fafc;color:#38b2ac}.option-group select option:checked{background:#38b2ac;color:#fff;font-weight:600}.length-control{display:flex;flex-direction:column;gap:12px;width:350px}.length-display{align-items:center;display:flex;justify-content:space-between}.length-value{background:#38b2ac;border-radius:20px;color:#fff;font-size:14px;font-weight:600;padding:4px 12px}.length-slider{-webkit-appearance:none;background:#e2e8f0;border-radius:3px;height:10px;outline:none;width:100%}.length-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#38b2ac;border-radius:50%;box-shadow:0 2px 6px #38b2ac4d;cursor:pointer;height:20px;width:20px}.generate-button{background:linear-gradient(135deg,#38b2ac,#319795);border:none;border-radius:15px;color:#fff;cursor:pointer;display:block;font-size:20px;font-weight:600;margin-bottom:32px;margin-left:auto;margin-right:auto;max-width:400px;padding:20px;transition:all .2s;width:100%}.generate-button:hover{background:linear-gradient(135deg,#244b49,#055b5a);box-shadow:0 8px 20px #1c4e4b4d;transform:translateY(-2px)}.password-display{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;margin-bottom:16px;padding:20px}.password-input{background:#fff;border:none;border-radius:12px;box-sizing:border-box;color:#2d3748;font-family:Courier New,monospace;font-size:20px;font-weight:600;letter-spacing:2px;margin-bottom:20px;padding:20px 24px;text-align:center;width:100%}.password-buttons{display:flex;gap:16px;justify-content:center}.password-buttons button{background:#fff;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;font-size:16px;font-weight:600;min-width:120px;padding:14px 28px;transition:all .2s}.password-buttons button:hover{border-color:#38b2ac;color:#38b2ac}.strength-meter{border-radius:3px;height:6px;margin-top:16px;transition:all .3s}.strength-meter.low{background:linear-gradient(90deg,#fc8181,#f56565)}.strength-meter.medium{background:linear-gradient(90deg,#f6ad55,#ed8936)}.strength-meter.high{background:linear-gradient(90deg,#68d391,#48bb78)}.error{background:#fed7d7;border-radius:8px;color:#c53030;font-size:14px;margin-top:16px;padding:12px 16px;text-align:center}.back-button{background:#0000;border:2px solid #fff;border-radius:10px;color:#7cb2bd;cursor:pointer;display:block;font-size:20px;font-weight:600;margin:30px auto 0;max-width:200px;padding:12px 24px;transition:all .2s}.back-button:hover{background:#38b2ac0d;border-color:#000;border-radius:50px;color:#38b2ac;transform:translateY(-1px)}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#2d3748,#4a5568 50%,#718096);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.App,body{min-height:100vh}.App{align-items:center;display:flex;justify-content:center;padding:40px}.app-container{margin:0 auto;max-width:1000px;position:relative;width:100%}@media (max-width:1024px){.options{gap:30px;grid-template-columns:1fr}}@media (max-width:768px){.App{padding:20px}.password-generator{min-height:auto;padding:30px}.login-card{min-width:auto;padding:40px 30px}}*{transition:all .2s ease-in-out}button:focus,input:focus,select:focus{outline:2px solid #38b2ac;outline-offset:2px}