:root{--primary:#2563eb;--primary-hover:#1d4ed8;--bg-color:#ffffff;--surface-color:#ffffff;--text-main:#111827;--text-muted:#6b7280;--border-color:#e5e7eb;--input-bg:#f9fafb;--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--ring-color:rgba(37, 99, 235, 0.2);--transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:#f3f4f6;color:var(--text-main);display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;-webkit-font-smoothing:antialiased}.container{background-color:var(--surface-color);width:100%;max-width:480px;padding:3rem 2.5rem;border-radius:1.5rem;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.1)}header{text-align:center;margin-bottom:2.5rem}.logo{max-width:160px;height:auto;margin-bottom:1.5rem}h1{font-size:1.5rem;font-weight:700;color:var(--text-main);margin-bottom:.5rem;line-height:1.3}.subtitle{font-size:.95rem;color:var(--text-muted);line-height:1.5}.form-group{margin-bottom:1.5rem}label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem;color:var(--text-main)}input[type=password],input[type=text]{width:100%;padding:.75rem 1rem;font-size:1rem;font-family:inherit;color:var(--text-main);background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:.75rem;transition:var(--transition);outline:0}input[type=password]:focus,input[type=text]:focus{border-color:var(--primary);background-color:var(--surface-color);box-shadow:0 0 0 4px var(--ring-color)}input[type=password]::placeholder,input[type=text]::placeholder{color:#9ca3af}.btn-generate{width:100%;background-color:var(--primary);color:#fff;font-family:inherit;font-size:1rem;font-weight:600;padding:.875rem;border:none;border-radius:.75rem;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:.5rem;transition:var(--transition);margin-top:2rem;box-shadow:var(--shadow-md)}.btn-generate:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-generate:active{transform:translateY(0)}.btn-icon{width:20px;height:20px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(17,24,39,.6);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:var(--transition);z-index:50;padding:1rem}.modal-overlay.active{opacity:1;visibility:visible}.modal{background-color:var(--surface-color);padding:2.5rem;border-radius:1.5rem;width:100%;max-width:400px;text-align:center;box-shadow:var(--shadow-lg);transform:scale(.95);opacity:0;transition:var(--transition);position:relative}.modal-overlay.active .modal{transform:scale(1);opacity:1}.modal h2{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;color:var(--text-main)}.modal-close{position:absolute;top:1rem;right:1rem;background:0 0;border:none;color:var(--text-muted);cursor:pointer;padding:.5rem;border-radius:50%;display:flex;transition:var(--transition)}.modal-close:hover{background-color:var(--input-bg);color:var(--text-main)}.modal-close svg{width:24px;height:24px}#qrcode-container{display:flex;justify-content:center;align-items:center;margin:0 auto;padding:1.5rem;background:#fff;border-radius:1rem;border:1px solid var(--border-color);width:fit-content}.modal-instructions{margin-top:1.5rem;font-size:.875rem;color:var(--text-muted);line-height:1.5}