*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{color:#fff;background:radial-gradient(circle at 0 0,#2563eb 0%,#0000 30%),radial-gradient(circle at 100% 100%,#7c3aed 0%,#0000 30%),linear-gradient(135deg,#020617,#0f172a);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}#root{width:100%;max-width:520px}.app-container{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f172ab3;border:1px solid #ffffff14;border-radius:28px;width:100%;padding:36px;animation:.5s fadeIn;box-shadow:0 25px 50px #00000073,inset 0 1px #ffffff0f}.app-title{text-align:center;background:linear-gradient(90deg,#60a5fa,#c084fc);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:28px;font-size:2.4rem;font-weight:800}.tab-buttons{gap:14px;margin-bottom:28px;display:flex}.tab-buttons button{color:#fff;cursor:pointer;background:#ffffff0f;border:none;border-radius:14px;flex:1;padding:14px;font-size:1rem;font-weight:600;transition:all .3s}.tab-buttons button:hover{background:linear-gradient(135deg,#2563eb,#7c3aed);transform:translateY(-3px);box-shadow:0 10px 20px #2563eb40}form{flex-direction:column;gap:20px;display:flex}label{color:#cbd5e1;flex-direction:column;gap:8px;font-size:.95rem;font-weight:500;display:flex}input{color:#fff;background:#ffffff0d;border:1px solid #0000;border-radius:14px;outline:none;padding:15px 16px;font-size:.95rem;transition:all .3s}input::placeholder{color:#94a3b8}input:focus{background:#ffffff14;border-color:#60a5fa;box-shadow:0 0 0 4px #60a5fa2e}span{color:#f87171;margin-top:-6px;font-size:.85rem}button[type=submit]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb,#7c3aed);border:none;border-radius:14px;margin-top:8px;padding:15px;font-size:1rem;font-weight:700;transition:all .3s}button[type=submit]:hover{transform:translateY(-3px);box-shadow:0 12px 24px #2563eb4d}.success-message{color:#4ade80;text-align:center;background:#22c55e1f;border:1px solid #4ade8033;border-radius:14px;margin-bottom:18px;padding:14px;font-weight:600}.profile-card{flex-direction:column;gap:16px;display:flex}.profile-card h2{text-align:center;margin-bottom:10px;font-size:2rem}.profile-info{background:#ffffff0d;border:1px solid #ffffff0f;border-radius:16px;padding:16px}.profile-info p{color:#e2e8f0;margin-bottom:10px}.logout-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:14px;width:100%;margin-top:16px;padding:14px;font-size:1rem;font-weight:700;transition:all .3s}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #ef44444d}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.app-container{padding:26px}.app-title{font-size:1.9rem}}.profile-card{animation:.5s fadeIn}.profile-header{align-items:center;gap:18px;margin-bottom:28px;display:flex}.profile-avatar{object-fit:cover;border:3px solid #ffffff26;border-radius:50%;width:90px;height:90px;box-shadow:0 10px 20px #00000040}.profile-name{font-size:1.8rem;font-weight:700}.profile-role{color:#e293fd;background:#60a5fa26;border-radius:999px;margin-top:6px;padding:6px 12px;font-size:.85rem;font-weight:600;display:inline-block}.profile-info{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.profile-item{background:#ffffff0d;border:1px solid #ffffff0f;border-radius:16px;padding:16px}.profile-item span{color:#94a3b8;margin-bottom:6px;font-size:.85rem;font-weight:500;display:block}.profile-item p{color:#fff;font-size:1rem;font-weight:600}