.password-box{position:relative;width:100%;max-width:450px;margin:1.5rem auto;background:#fff;border:1px solid #dcdcdc;border-radius:10px;box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;padding-right:.5rem;transition:box-shadow .3s ease}.password-input{flex:1;border:none;padding:.9rem 1.2rem;font-size:1.05rem;border-radius:10px 0 0 10px;transition:box-shadow .3s ease}.password-input:focus{outline:none;box-shadow:inset 0 0 0 2px #2ecc71}.toggle-visibility{background:transparent;border:none;cursor:pointer;font-size:1.5rem;color:#444;padding:0;transition:color .3s ease}.toggle-visibility:hover{color:#222}.toggle-visibility:focus{outline:none}form{display:flex;align-items:center;gap:.75rem;justify-content:center;flex-wrap:wrap}form button{padding:.7rem 1.2rem;font-size:1.05rem;background:#2ecc71;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .3s ease}form button:hover{background:#27ae60}form button:disabled{background:#aaa;cursor:not-allowed}.App{max-width:1100px;margin:2rem auto;padding:0 1rem;text-align:center;font-family:Segoe UI,Roboto,sans-serif;color:#333}.recommendations{margin:2rem auto;max-width:520px;background:#f7fdfc;padding:1.5rem;border-radius:10px;text-align:center;border:1px solid #ccc;box-shadow:0 3px 10px #0000001a;animation:fadeIn .5s ease}.recommendations h2{margin-top:0;font-size:1.5rem;color:#2c3e50}.recommendations ul{text-align:left;margin-top:1rem;padding-left:1.4rem}.recommendations li{margin:.7rem 0;font-size:1.05rem;line-height:1.5;position:relative;padding-left:1.6rem;color:#333}.recommendations li:before{content:"✔";position:absolute;left:0;color:#2ecc71;font-size:1.2rem}.history-columns{display:flex;gap:2rem;margin:2rem auto;justify-content:center;flex-wrap:wrap}.history-box,.detail-box{background:#fff;border:1px solid #ddd;border-radius:10px;padding:1.2rem;width:320px;box-shadow:0 2px 8px #00000014;text-align:left;transition:all .3s ease}.history-box h2,.detail-box h2{margin-top:0;text-align:center;font-size:1.3rem;color:#2c3e50}.history-box ul{list-style:none;padding:0;margin:0}.history-box li{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid #eee;font-family:monospace;cursor:pointer;transition:background .2s ease}.history-box li:hover{background:#e9f5ee}.entry-label{flex:1;padding-right:.5rem;font-weight:700}.label-0{color:#e74c3c}.label-1{color:#f39c12}.label-2{color:#f1c40f}.label-3{color:#2ecc71}.label-4{color:#27ae60}.entry-pass{flex:1;text-align:center}.entry-time{flex:1;text-align:right;font-size:.85rem;color:#666}.detail-box p{margin:.5rem 0;font-family:monospace}.detail-box button{margin-top:1rem;padding:.6rem 1.2rem;background:#e74c3c;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .3s ease}.detail-box button:hover{background:#c0392b}.generator-box{margin:2rem auto;max-width:450px;text-align:center}.generate-btn{padding:.7rem 1.3rem;font-size:1rem;background:#8e44ad;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .3s ease}.generate-btn:hover{background:#732d91}.generated-password{margin-top:1rem;background:#f0f8ff;padding:1rem;border-radius:8px;border:1px solid #ccc;box-shadow:0 2px 5px #0000000d}.generated-password input{width:100%;margin:.5rem 0;padding:.6rem;font-size:1rem;font-family:monospace;border:1px solid #ccc;border-radius:4px}.generated-password button{background:#3498db;color:#fff;padding:.5rem .8rem;border:none;border-radius:4px;cursor:pointer;transition:background .3s ease}.generated-password button:hover{background:#2980b9}.chatbot-box{margin:2rem auto;max-width:450px;background:#fefefe;border:1px solid #ddd;border-radius:10px;padding:1rem;box-shadow:0 3px 8px #0000001a;font-size:1rem;line-height:1.5;text-align:left}.chatbot-box p{margin-bottom:.5rem;background:#eef9f1;padding:.6rem;border-radius:6px;color:#333;font-family:monospace}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.history-columns{flex-direction:column;align-items:center}.history-box,.detail-box{width:90%}.App{padding:0 .5rem}}.intro-box{position:relative;background:#eaf6ff;border:2px dashed #3498db;border-radius:10px;padding:1.5rem;margin:2rem auto;max-width:700px;text-align:left;animation:fadeIn .4s ease-in-out;box-shadow:0 4px 8px #0000000d}.intro-box h2{text-align:center;font-size:1.6rem;color:#2c3e50;margin-bottom:1rem}.intro-box ul{padding-left:1.5rem}.intro-box li{margin:.6rem 0;font-size:1rem;line-height:1.5;position:relative}.close-instructions{position:absolute;top:.5rem;right:.7rem;background:none;border:none;font-size:1.2rem;color:#999;cursor:pointer}.close-instructions:hover{color:#e74c3c}.show-instructions{background:#3498db;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:6px;cursor:pointer;margin:1rem auto;display:block;font-size:1rem;transition:background .2s ease}.show-instructions:hover{background:#2980b9}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.App.dark{background:linear-gradient(145deg,#0f2027,#203a43,#2c5364);color:#f5f5f5}.App.dark .intro-box,.App.dark .history-box,.App.dark .detail-box,.App.dark .recommendations,.App.dark .generator-box,.App.dark .generated-password{background:#1e2a38;color:#f5f5f5;border-color:#444}.App.dark .password-box{background:#2c3e50;border-color:#444}.App.dark .toggle-visibility{color:#ddd}.App.dark form button,.App.dark .generated-password button,.App.dark .show-instructions{background:#2980b9}.dark-toggle{background:#2ecc71;color:#fff;border:none;padding:.5rem 1rem;margin:1rem auto;border-radius:6px;cursor:pointer}.App{max-width:1000px;margin:2rem auto;padding:0 1rem;text-align:center;font-family:Segoe UI,Roboto,sans-serif;color:#333;background:linear-gradient(to right,#f2f9ff,#e0f2ff,#f2f9ff);border-radius:12px;box-shadow:0 0 20px #0000000d;padding:2rem}