nav{display:flex;justify-content:center;align-items:center;gap:2rem;padding:1rem 2rem;background-color:#333;color:#fff;border-bottom:1px solid #444}nav a{color:#fff;text-decoration:none;font-size:1.1rem;font-weight:500;transition:color .3s ease}nav a:hover{color:#00d8ff}.logout-btn{background-color:#e74c3c;color:#fff;padding:5px 12px;border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500}.logout-btn:hover{background-color:#c0392b}@media (max-width: 768px){nav{flex-direction:column;gap:1rem}nav a,.logout-btn{font-size:1rem}}@media (max-width: 480px){nav{padding:1rem}nav a,.logout-btn{font-size:.95rem}}.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background:#f4f4f4}.login-form{background:#fff;padding:30px;border-radius:8px;box-shadow:0 0 10px #0000001a;width:300px}.login-form h2{text-align:center;margin-bottom:20px}.login-form input{width:100%;padding:10px;margin:8px 0;border:1px solid #ccc;border-radius:4px}.login-form button{width:100%;padding:10px;background-color:#07f;color:#fff;border:none;border-radius:4px;cursor:pointer}.login-form button:hover{background-color:#005ecc}.signup-container{display:flex;justify-content:center;align-items:center;min-height:80vh;background-color:#f2f2f2}.signup-form{background:#fff;padding:2rem;border-radius:10px;width:300px;box-shadow:0 0 10px #0000001a}.signup-form h2{text-align:center;margin-bottom:1.5rem;color:#333}.signup-form input{width:100%;padding:10px;margin-bottom:1rem;border:1px solid #ccc;border-radius:5px}.signup-form button{width:100%;padding:10px;background-color:#333;color:#fff;border:none;border-radius:5px;cursor:pointer}.signup-form button:hover{background-color:#555}@media (max-width: 500px){.signup-form{width:90%}}.profile-form{display:flex;flex-direction:column;gap:15px;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 10px #0000001a;max-width:400px;margin:20px auto}.profile-form input[type=text],.profile-form textarea,.profile-form input[type=file]{padding:10px 12px;font-size:1rem;border:1px solid #ccc;border-radius:8px;outline:none;width:100%;transition:border-color .2s ease}.profile-form input[type=text]:focus,.profile-form textarea:focus{border-color:#36d7b7}.profile-form textarea{resize:vertical;min-height:80px}.preview-image{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:10px;border:2px solid #ccc;align-self:center}.form-buttons{display:flex;gap:10px;justify-content:flex-end}.form-buttons button{padding:8px 16px;font-size:.95rem;border:none;border-radius:6px;cursor:pointer;background-color:#36d7b7;color:#fff;transition:background-color .2s ease}.form-buttons button:hover{background-color:#2db0a2}.form-buttons button:disabled{background-color:#aaa;cursor:not-allowed}.error-message{color:#e74c3c;font-size:.9rem;text-align:center;margin-top:-5px}.loading-container{display:flex;justify-content:center;align-items:center;height:250px}.profile-container{max-width:500px;margin:30px auto;padding:20px;border-radius:10px;background-color:#f9f9f9;box-shadow:0 2px 8px #0000001a}.profile-header{display:flex;justify-content:space-between;align-items:center}.profile-header h3{font-size:1.4rem;margin:0}.menu{position:relative;cursor:pointer}.dropdown{position:absolute;top:24px;right:0;background:#fff;border:1px solid #ccc;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a;z-index:10}.dropdown button{padding:8px 12px;border:none;background:none;width:100%;text-align:left;cursor:pointer}.dropdown button:hover{background-color:#f0f0f0}.profile-body{text-align:center;margin-top:20px}.profile-image-placeholder{width:120px;height:120px;border-radius:50%;background-color:#eee;margin:0 auto 10px}.profile-image{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:10px;transition:transform .3s ease}.profile-image:hover{transform:scale(1.05)}.profile-body h2{font-size:1.3rem;margin:5px 0}.profile-body p{color:#555;font-size:1rem}
