/* Global Styles & Variables */
:root {
    --transition-speed: 0.4s;
    --main-bg-color: #f8f9fa;
    --accent-color: #8ab4f8;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --btn-dark-bg: #333;
    --btn-dark-hover-bg: #24292e;
    --btn-blue-bg: #4285F4;
    --btn-blue-hover-bg: #3367D6;
    --btn-light-bg: #f1f1f1;
    --btn-light-hover-bg: #e0e0e0;
}

/* Body, Main, etc. (No changes) */
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--main-bg-color); overflow-x: hidden; }
main { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; }
.main-title, .preloader-title { font-size: 8vw; font-weight: 700; letter-spacing: -0.02em; user-select: none; }

/* Sidebar, Preloader, etc. (No changes) */
.sidebar-container{position:fixed;top:15px;left:15px;z-index:1002;padding:10px}.hamburger-menu{display:flex;flex-direction:column;gap:5px;cursor:pointer}.hamburger-menu .bar{width:30px;height:3px;background-color:#333;border-radius:2px;transition:all .3s ease}.sidebar{height:100vh;width:300px;position:fixed;z-index:1000;top:0;left:0;box-shadow:2px 0 5px rgba(0,0,0,.1);transform:translateX(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:20px 0;box-sizing:border-box;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(255,255,255,.2)}.sidebar-container:hover .sidebar{transform:translateX(0)}.sidebar-nav{display:flex;flex-direction:column;padding:0 20px}.sidebar-nav a{padding:10px 15px;text-decoration:none;font-size:18px;color:#333;display:block;transition:background-color .2s;border-radius:8px}.sidebar-nav a:hover{background-color:#f1f1f1}.preloader{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--main-bg-color);z-index:9999;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:fadeOutUp .5s ease-out 2.2s forwards}.preloader-title{display:flex;animation:fadeIn .5s ease;font-family:'Nunito',sans-serif}.progress-bar{width:200px;height:4px;background-color:#e0e0e0;border-radius:2px;margin-top:20px;overflow:hidden}.progress{width:100%;height:100%;background-color:#4285F4;border-radius:2px;transform-origin:left;animation:fillProgress 1.6s cubic-bezier(.4,0,.2,1) .4s forwards}@keyframes fadeOutUp{to{opacity:0;transform:translateY(-20px);visibility:hidden}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fillProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}.material-symbols-rounded{font-size:20px;vertical-align:middle;line-height:0}.sidebar-search{padding:10px 20px;margin-bottom:10px;position:relative}.sidebar-search input{width:100%;padding:10px 40px 10px 15px;border:1px solid #ddd;border-radius:8px;font-size:16px;box-sizing:border-box;font-family:'Nunito',sans-serif}.sidebar-search input:focus{outline:none;border-color:#4285F4;box-shadow:0 0 0 2px rgba(66,133,244,.2)}.sidebar-search .material-symbols-rounded{position:absolute;top:50%;right:35px;transform:translateY(-50%);color:#aaa;cursor:pointer}


/* --- 【REFACTORED & BEAUTIFIED】User Menu --- */
.user-menu-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
}

.user-menu-shape {
    width: 40px;
    height: 40px;
    border: 3px solid;
    border-color: #4285F4 #DB4437 #F4B400 #0F9D58;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Menu open state (hover or clicked) */
.user-menu-container.menu-open .user-menu-shape {
    width: 380px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px var(--shadow-color);
}

/* Height adjustments based on current view (controlled by data-view attribute) */
.user-menu-container.menu-open .user-menu-shape[data-view="default"] { height: 60px; }
.user-menu-container.menu-open .user-menu-shape[data-view="login"] { height: 130px; width: 280px; }
.user-menu-container.menu-open .user-menu-shape[data-view="logout"] { height: 120px; width: 280px; }


/* --- 【REFACTORED】View & Content States --- */
.user-menu-content {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show content that matches the current data-view */
.user-menu-shape[data-view="default"] [data-content="buttons"],
.user-menu-shape[data-view="login"] [data-content="login"],
.user-menu-shape[data-view="logout"] [data-content="logout"] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition-delay: 0.2s; /* Delay appearance until after menu expands */
}

/* Specific styling for different content blocks */
[data-content="login"],
[data-content="logout"] {
    flex-direction: column;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
[data-content="logout"] p {
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}


/* --- 【REFACTORED & BEAUTIFIED】Buttons --- */
/* Base Button Class */
.btn {
    border: none;
    padding: 9px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}
.btn:active {
    transform: scale(0.97);
}
.btn:focus-visible { /* Modern focus indicator */
    outline: 2px solid var(--btn-blue-bg);
    outline-offset: 2px;
}

/* Light Theme (for main buttons & back button) */
.btn-light, .back-btn { background-color: var(--btn-light-bg); color: #333; }
.btn-light:hover, .back-btn:hover { background-color: var(--btn-light-hover-bg); }

/* Blue Theme (for submit) */
.submit-btn { background-color: var(--btn-blue-bg); color: white; }
.submit-btn:hover { background-color: var(--btn-blue-hover-bg); box-shadow: 0 2px 4px var(--shadow-color); }

/* Dark Theme (for provider logins) */
.btn-dark { background-color: var(--btn-dark-bg); color: white; }
.btn-dark:hover { background-color: var(--btn-dark-hover-bg); box-shadow: 0 3px 6px var(--shadow-color); }

/* Provider Login Button Specifics */
.btn-provider { width: 100%; padding: 10px; font-size: 15px; box-shadow: 0 1px 3px var(--shadow-color); }
.provider-icon { width: 20px; height: 20px; }

/* Action Button Container */
.form-actions-container { display: flex; width: 100%; gap: 12px; justify-content: center; }
.form-actions-container .btn { flex-grow: 1; }
.form-actions-container .btn:only-child { flex-grow: 0; width: 120px; }

#user-status-display {
    font-weight: bold;
    color: #333;
    margin-right: 15px;
    white-space: nowrap;
}