.profile-container{box-sizing:border-box;background:linear-gradient(135deg,#0f172a,#1e293b,#334155);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.profile-card{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:500px;padding:35px;animation:.5s fadeIn;box-shadow:0 15px 40px #00000026}.profile-card h2{color:#0f172a;margin-bottom:25px;font-size:30px;font-weight:700}.profile-card img{object-fit:cover;border:5px solid #2563eb;border-radius:50%;width:150px;height:150px;margin-bottom:20px;box-shadow:0 5px 20px #2563eb4d}.profile-info{text-align:left;margin-top:20px}.profile-info p{color:#1e293b;word-wrap:break-word;background:#f8fafc;border-radius:10px;margin:12px 0;padding:12px;font-size:15px}.profile-info b{color:#2563eb}.profile-info input,.profile-info textarea{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;margin-bottom:12px;padding:12px;font-size:15px;transition:all .3s}.profile-info input:focus,.profile-info textarea:focus{border-color:#2563eb;box-shadow:0 0 8px #2563eb33}.profile-info textarea{resize:vertical;min-height:90px}button{cursor:pointer;border:none;border-radius:10px;margin:8px;padding:12px 22px;font-size:15px;font-weight:600;transition:all .3s}button:hover{transform:translateY(-2px)}button:first-of-type{color:#fff;background:#2563eb}button:first-of-type:hover{background:#1d4ed8}button:last-of-type{color:#fff;background:#ef4444}button:last-of-type:hover{background:#dc2626}.success-message{color:#16a34a;text-align:center;background:#ecfdf3;border:1px solid #22c55e;border-radius:12px;margin-top:20px;padding:14px;font-weight:700;animation:.4s slideUp}.profile-card h3{color:#64748b;margin-top:20px}@keyframes fadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.profile-card{padding:25px}.profile-card h2{font-size:24px}.profile-card img{width:120px;height:120px}button{width:100%;margin:8px 0}.profile-info p,.profile-info input,.profile-info textarea{font-size:14px}}body{background:#f0f0f0;margin:0;font-family:Arial}.container{background:#fff;border-radius:8px;width:320px;margin:80px auto;padding:20px}h2{text-align:center;color:#333}input{border:1px solid #ccc;border-radius:4px;width:100%;margin:6px 0;padding:10px}button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:4px;width:100%;margin-top:10px;padding:10px}button:hover{background:#1d4ed8}.link{text-align:center;margin-top:10px}a{color:#2563eb;text-decoration:none}
