:root{--primary:#6750A4;--on-primary:#FFFFFF;--surface:#FEF7FF;--surface-container:#F3EDF7;--outline:#79747E}*{box-sizing:border-box;margin:0;padding:0;font-family:'Roboto',sans-serif;-webkit-tap-highlight-color:transparent}body{min-height:100vh;display:flex;justify-content:center;align-items:center;background:var(--surface);padding:1rem}.card{background:white;padding:2rem;border-radius:28px;box-shadow:0 4px 8px rgba(0,0,0,0.1);width:100%;max-width:400px;transform:translateY(0);transition:transform 0.3s ease}.card:active{transform:translateY(2px)}h1{color:var(--primary);text-align:center;margin-bottom:2rem;font-size:1.5rem}.input-container{position:relative;margin-bottom:1.5rem}.input-field{width:100%;height:56px;padding:16px 16px 0;border:1px solid var(--outline);border-radius:4px;font-size:1rem;transition:border-color 0.3s}.input-field:focus{outline:none;border-color:var(--primary)}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--outline);transition:all 0.3s;pointer-events:none}.input-field:focus + .input-label,.input-field:not(:placeholder-shown) + .input-label{top:30%;font-size:0.75rem}.checkbox-container{display:flex;align-items:center;gap:1rem;margin:1rem 0}.checkbox-label{display:flex;align-items:center;gap:0.5rem;color:var(--outline)}.button{width:100%;padding:1rem;background:var(--primary);color:var(--on-primary);border:none;border-radius:20px;font-size:1rem;cursor:pointer;transition:opacity 0.3s}.button:active{opacity:0.8}.other-login{text-align:center;margin-top:2rem;color:var(--outline)}.dialog-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity 0.3s}.dialog-backdrop.active{opacity:1;pointer-events:all}.dialog{background:white;padding:2rem;border-radius:28px;max-width:90%;transform:scale(0.8);transition:transform 0.3s}.dialog.active{transform:scale(1)}@keyframes ripple{to{transform:scale(4);opacity:0}}.ripple{position:relative;overflow:hidden}.ripple:after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,0.5);opacity:0;border-radius:50%;transform:translate(-50%,-50%) scale(1);animation:ripple 0.6s ease-out}