:root {
     --primary-blue: #0C66E4;
     --hover-blue: #1976d2;
     --text-dark: #333;
     --border-color: #e0e0e0;
 }

 .nav-header {
     position: absolute;
     top: 20px;
     right: 20px;
 }

 .open-btn {
     background: #004a99;
     color: white;
     border: none;
     padding: 10px 25px !important;
     border-radius: 5px;
     cursor: pointer;
     font-weight: 600;
 }
.open-btn:hover{
    color: #fff;
}
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 1000;
 }

 .card {
     background: white;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
     width: 420px;
     text-align: center;
     position: relative;
     animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .logo-placeholder {
     background: var(--primary-blue);
     width: 45px;
     height: 45px;
     margin: 0 auto 15px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
 }

 h2 {
     font-size: 24px;
     color: var(--text-dark);
     margin-bottom: 25px;
 }

 .btn-google {
     width: 100%;
     padding: 12px;
     background: white;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin-bottom: 20px;
     font-weight: 500;
 }

 .input-group {
     margin-bottom: 15px;
     text-align: left;
 }

 .label-text {
     display: block;
     font-size: 13px;
     font-weight: 600;
     color: #666;
     margin-bottom: 5px;
 }

 .input-group input {
     width: 100%;
     padding: 12px;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     box-sizing: border-box;
     outline: none;
 }

 .form-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 13px;
     margin: 15px 0;
 }

 .btn-submit {
     width: 100%;
     padding: 14px;
     background: var(--primary-blue);
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 600;
     font-size: 16px;
     margin-top: 10px;
 }

 .toggle-mode {
     margin-top: 25px;
     font-size: 14px;
     color: #777;
 }

 .blue-link {
     color: var(--primary-blue);
     cursor: pointer;
     font-weight: 600;
     text-decoration: none;
 }

 .hidden {
     display: none !important;
 }

 .user-profile-header {
     position: relative;
     background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 50px;
    padding: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .profile-button {
     width: 42px;
     height: 42px;
     background: var(--primary-color);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     cursor: pointer;
     box-shadow: 0 4px 10px rgba(93, 95, 239, 0.3);
 }

 .profile-dropdown {
     position: absolute;
     top: 55px;
     right: 0;
     width: 300px;
     background: white;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     display: none;
     z-index: 1000;
     border: 1px solid #eee;
     overflow: hidden;
     animation: slideDown 0.2s ease-out;
 }

 .profile-dropdown.active {
     display: block;
 }

 @keyframes slideDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .user-info-section {
     padding: 20px;
     display: flex;
     align-items: center;
     gap: 15px;
     background: #fafafa;
     border-bottom: 1px solid #eee;
 }

 .avatar-l {
     width: 50px;
     height: 50px;
     background: var(--primary-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 20px;
     font-weight: bold;
 }

 .text-info h4 {
     margin: 0;
     font-size: 16px;
     color: black;
 }

 .text-info p {
     margin: 0;
     font-size: 13px;
     color: #777;
 }

 .menu-items .item {
     display: flex;
     align-items: center;
     padding: 14px 20px;
     text-decoration: none;
     color: #444;
     font-size: 14px;
     transition: 0.2s;
     border: none;
     width: 100%;
     background: none;
     cursor: pointer;
 }

 .menu-items .item:hover {
     background: #f0f2f5;
     color: var(--primary-color);
 }

 .icon {
     margin-right: 15px;
     font-style: normal;
 }

 .arrow {
     margin-left: auto;
     color: #ccc;
     font-weight: bold;
 }

 .logout {
     color: #d93025 !important;
     border-top: 1px solid #eee !important;
     margin-top: 5px;
 }

 .logout:hover {
     background: #fff1f0 !important;
 }

 /* --- Auth Modal (TinyWow Style) --- */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 2000;
 }

 .auth-card {
     background: white;
     padding: 40px;
     border-radius: 12px;
     width: 400px;
     text-align: center;
     position: relative;
 }

 .input-group {
     text-align: left;
     margin-bottom: 15px;
 }

 .input-group label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 5px;
     color: #666;
 }

 .input-group input {
     width: 100%;
     padding: 12px;
     border: 1px solid #ddd;
     border-radius: 6px;
     box-sizing: border-box;
 }

 .btn-submit {
     width: 100%;
     padding: 14px;
     background: var(--primary-color);
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 600;
     font-size: 16px;
 }

 .btn-google {
     width: 100%;
     padding: 12px;
     background: white;
     border: 1px solid #ddd;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     cursor: pointer;
     margin-bottom: 20px;
 }

 .hidden {
     display: none !important;
 }

 .blue-link {
     color: var(--primary-color);
     cursor: pointer;
     font-weight: 600;
 }