/* auth.css - CORRECTED */

/* ========================================================== */
/* == CORE STYLES IMPORTED FROM APP.CSS FOR CONSISTENCY ===== */
/* ========================================================== */
:root {
    --color-bg-main-dark: #0a0312;
    --color-bg-sidebar-dark: rgba(15, 8, 35, 0.85);
    --color-border-dark: rgba(120, 80, 180, 0.25);
    --text-light: #f0f0f0;
    --text-medium: #c0c0d8;
    --neon-pink: #f900bf;
    --neon-cyan: #0ffbfb;
    --logo-opacity-dark: 0.85;
    --color-bg-main-light: #e8eaf6;
    --color-bg-sidebar-light: rgba(245, 245, 250, 0.9);
    --color-border-light: rgba(180, 180, 210, 0.5);
    --text-light-mode-main: #1A1A1A;
    --text-light-mode-medium: #333333;
    --neon-pink-light-mode: #e81098; --neon-cyan-light-mode: #00c8c8; --logo-opacity-light: 0.9;
}
body { margin: 0; font-family: 'Rajdhani', sans-serif; color: var(--text-light); background-color: var(--color-bg-main-dark); overflow-x: hidden; height: 100vh; display: flex; transition: background-color 0.3s, color 0.3s; }
body.light-mode { color: var(--text-light-mode-main); background-color: var(--color-bg-main-light); }
.left-sidebar { width: 260px; height: 100vh; background-color: var(--color-bg-sidebar-dark); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; position: fixed; left: 0; top: 0; z-index: 1000; border-right: 1px solid var(--color-border-dark); transition: background-color 0.3s, border-color 0.3s; }
body.light-mode .left-sidebar { background-color: var(--color-bg-sidebar-light); border-right: 1px solid var(--color-border-light); }
.sidebar-logo { text-align: center; padding: 0px 20px 20px 20px; margin-bottom: 10px; border-bottom: 1px solid var(--color-border-dark); }
body.light-mode .sidebar-logo { border-bottom: 1px solid var(--color-border-light); }
.sidebar-logo img { max-width: 80%; height: auto; max-height: 50px; transition: opacity 0.3s; mix-blend-mode: screen; opacity: var(--logo-opacity-dark); display: block; margin-left: auto; margin-right: auto; }
body.light-mode .sidebar-logo img { mix-blend-mode: normal; opacity: var(--logo-opacity-light); }
.sidebar-nav ul, .sidebar-bottom-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li a, .sidebar-bottom-nav li button, .sidebar-bottom-nav li a { display: flex; align-items: center; padding: 13px 25px; color: var(--text-light); font-weight: 700; text-decoration: none; font-size: 1.1rem; transition: color 0.2s, background-color 0.2s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; box-sizing: border-box; }
body.light-mode .sidebar-nav li a, body.light-mode .sidebar-bottom-nav li button, body.light-mode .sidebar-bottom-nav li a { color: var(--text-light-mode-medium); font-weight: 700; }
.sidebar-nav li a i, .sidebar-bottom-nav li button i, .sidebar-bottom-nav li a i { margin-right: 15px; width: 22px; text-align: center; color: var(--neon-cyan); transition: color 0.2s; }
body.light-mode .sidebar-nav li a i, body.light-mode .sidebar-bottom-nav li button i, body.light-mode .sidebar-bottom-nav li a i { color: var(--neon-pink-light-mode); }
.sidebar-nav li a:hover, .sidebar-nav li a.active, .sidebar-bottom-nav li button:hover, .sidebar-bottom-nav li a:hover, .sidebar-bottom-nav li a.active { color: var(--text-light); background-color: var(--neon-pink); }
.sidebar-nav li a:hover i, .sidebar-nav li a.active i, .sidebar-bottom-nav li button:hover i, .sidebar-bottom-nav li a:hover i { color: white; }
body.light-mode .sidebar-nav li a:hover, body.light-mode .sidebar-nav li a.active, body.light-mode .sidebar-bottom-nav li button:hover, body.light-mode .sidebar-bottom-nav li a:hover, body.light-mode .sidebar-bottom-nav li a.active { color: white; background-color: var(--neon-cyan-light-mode); }
body.light-mode .sidebar-nav li a:hover i, body.light-mode .sidebar-nav li a.active i, body.light-mode .sidebar-bottom-nav li button:hover i, body.light-mode .sidebar-bottom-nav li a:hover i { color: white; }
.sidebar-bottom-nav { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--color-border-dark); }
body.light-mode .sidebar-bottom-nav { border-top: 1px solid var(--color-border-light); }
.more-menu-modal { display: none; position: fixed; background-color: var(--color-bg-sidebar-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--color-border-dark); border-radius: 10px; z-index: 1001; min-width: 230px; box-shadow: 0 8px 25px rgba(0,0,0,0.5); animation: slideRightFadeIn 0.2s ease-out; }
body.light-mode .more-menu-modal { background-color: var(--color-bg-sidebar-light); border: 1px solid var(--color-border-light); box-shadow: 0 8px 25px rgba(100,100,150,0.2); }
.more-menu-modal ul { list-style: none; padding: 8px 0; margin: 0; }
.more-menu-modal ul li button, .more-menu-modal ul li a { display: flex; align-items: center; width: 100%; padding: 12px 20px; color: var(--text-light); font-weight: 700; background: none; border: none; text-align: left; font-size: 1rem; cursor: pointer; transition: color 0.2s, background-color 0.2s; text-decoration:none; }
body.light-mode .more-menu-modal ul li button, body.light-mode .more-menu-modal ul li a { color: var(--text-light-mode-medium); font-weight: 600; }
.more-menu-modal ul li button:hover, .more-menu-modal ul li a:hover { background-color: var(--neon-pink); color: var(--text-light); }
body.light-mode .more-menu-modal ul li button:hover, body.light-mode .more-menu-modal ul li a:hover { background-color: var(--neon-cyan-light-mode); color: white; }
.more-menu-modal ul li button i, .more-menu-modal ul li a i { margin-right: 12px; width: 18px; text-align: center; color: var(--neon-cyan); transition: color 0.2s; }
body.light-mode .more-menu-modal ul li button i, body.light-mode .more-menu-modal ul li a i { color: var(--neon-pink-light-mode); }
.more-menu-modal ul li button:hover i, .more-menu-modal ul li a:hover i { color: white; }
@keyframes slideRightFadeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.main-content-area { margin-left: 260px; flex-grow: 1; display: flex; flex-direction: column; height: 100vh; background-color: var(--color-bg-main-dark); transition: background-color 0.3s; position: relative; overflow-y: auto; }
body.light-mode .main-content-area { background-color: var(--color-bg-main-light); }
#mobile-top-nav, #mobile-bottom-nav, #mobile-slideout-menu, #mobile-menu-overlay { display: none; }


/* ========================================================== */
/* ========= MOBILE RESPONSIVE STYLES (from app.css) ======== */
/* ========================================================== */
@media (max-width: 992px) {
    body { height: 100dvh; overflow: hidden; padding-bottom: 65px; box-sizing: border-box; }
    .left-sidebar { display: none; }
    .main-content-area { margin-left: 0; width: 100%; height: 100%; overflow-y: auto; padding-top: 55px; /* Space for fixed top nav */ }
    #mobile-top-nav, #mobile-bottom-nav, #mobile-slideout-menu, #mobile-menu-overlay { display: block; -webkit-backdrop-filter: none; backdrop-filter: none; will-change: transform; transform: translateZ(0); }
    #mobile-top-nav { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 55px; z-index: 15; padding: 0 10px; box-sizing: border-box; background-color: var(--color-bg-sidebar-dark); border-bottom: 1px solid var(--color-border-dark); }
    body.light-mode #mobile-top-nav { background-color: var(--color-bg-sidebar-light); border-bottom: 1px solid var(--color-border-light); }
    #hamburger-btn { background: none; border: none; color: var(--text-light); font-size: 1.5rem; cursor: pointer; padding: 10px; }
    body.light-mode #hamburger-btn { color: var(--text-light-mode-main); }
    #mobile-top-nav .mobile-logo img { mix-blend-mode: screen; height: 35px; opacity: var(--logo-opacity-dark); }
    body.light-mode #mobile-top-nav .mobile-logo img { mix-blend-mode: normal; opacity: var(--logo-opacity-light); }
    #mobile-top-nav .spacer { width: 44px; }
    #mobile-bottom-nav { display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; height: 65px; z-index: 15; background-color: var(--color-bg-main-dark); border-top: 1px solid var(--color-border-dark); }
    body.light-mode #mobile-bottom-nav { background-color: #f8f9fa; border-top: 1px solid var(--color-border-light); }
    .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-medium); text-decoration: none; flex-grow: 1; height: 100%; }
    .bottom-nav-item.active, .bottom-nav-item:hover { color: var(--text-light); }
    body.light-mode .bottom-nav-item { color: var(--text-light-mode-medium); }
    body.light-mode .bottom-nav-item.active, body.light-mode .bottom-nav-item:hover { color: var(--text-light-mode-main); }
    .bottom-nav-item i { font-size: 1.5rem; }
    .bottom-nav-item span { font-size: 0.7rem; font-weight: 600; margin-top: 4px; }
    .bottom-nav-item.upload-btn i { font-size: 2.2rem; color: var(--neon-pink); }
    body.light-mode .bottom-nav-item.upload-btn i { color: var(--neon-cyan-light-mode); }
    .bottom-nav-item.upload-btn span { display: none; }
    #mobile-slideout-menu { display:block; background-color: #100820; z-index: 2012; transform: translateX(-100%); transition: transform 0.3s ease-in-out; width: 280px; height: 100vh; position: fixed; top: 0; left: 0; box-sizing: border-box; overflow-y: auto;}
    body.light-mode #mobile-slideout-menu { background-color: #f8f9fa; }
    #mobile-slideout-menu.is-open { transform: translateX(0); }
    #mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2011; }
    #mobile-menu-overlay.is-open { display: block; }
    .mobile-menu-header { padding: 20px 15px; border-bottom: 1px solid var(--color-border-dark); display: flex; align-items: center; font-weight: 700; font-size: 1.1rem; }
    body.light-mode .mobile-menu-header { border-bottom-color: var(--color-border-light); }
    #mobile-slideout-menu ul { list-style: none; padding: 10px 0; margin: 0; }
    #mobile-slideout-menu li a, #mobile-slideout-menu li button { display: flex; align-items: center; padding: 15px 20px; color: var(--text-medium); text-decoration: none; font-size: 1rem; font-weight: 600; transition: background-color 0.2s, color 0.2s; background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: 'Rajdhani', sans-serif; }
    body.light-mode #mobile-slideout-menu li a, body.light-mode #mobile-slideout-menu li button { color: var(--text-light-mode-medium); }
    #mobile-slideout-menu li a i, #mobile-slideout-menu li button i { margin-right: 18px; width: 22px; text-align: center; font-size: 1.1rem; color: var(--neon-cyan); }
    body.light-mode #mobile-slideout-menu li a i, body.light-mode #mobile-slideout-menu li button i { color: var(--neon-pink-light-mode); }
    #mobile-slideout-menu li a:hover, #mobile-slideout-menu li button:hover { background-color: var(--neon-pink); color: #fff; }
    body.light-mode #mobile-slideout-menu li a:hover, body.light-mode #mobile-slideout-menu li button:hover { background-color: var(--neon-cyan-light-mode); color: #fff; }
    #mobile-slideout-menu hr { border: 0; height: 1px; background-color: var(--color-border-dark); margin: 8px 20px; }
    body.light-mode #mobile-slideout-menu hr { background-color: var(--color-border-light); }
}

/* ======================================================== */
/* ========= AUTH PAGE SPECIFIC & OVERRIDE STYLES ========= */
/* ======================================================== */
:root {
    --color-bg-form-dark: rgba(15, 8, 35, 0.82);
    --color-border-form-dark: rgba(120, 80, 180, 0.4);
    --text-medium-dark: #c0c0d8;
    --input-bg-dark: rgba(255, 255, 255, 0.08);
    --input-border-dark: rgba(120, 80, 180, 0.5);
    --input-border-focus-dark: var(--neon-cyan);
    --link-color-dark: var(--neon-cyan);
    --link-hover-dark: var(--neon-pink);
    --color-bg-form-light: rgba(255, 255, 255, 0.92);
    --color-border-form-light: rgba(180, 180, 210, 0.65);
    --input-bg-light: rgba(0, 0, 0, 0.05);
    --input-border-light: rgba(150, 150, 180, 0.65);
    --input-border-focus-light: var(--neon-pink-light-mode);
    --link-color-light: var(--neon-pink-light-mode);
    --link-hover-light: var(--neon-cyan-light-mode);
}

/* Specific layout for the auth page's main content area */
.auth-page .main-content-area {
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
@media (max-width: 992px) {
    .auth-page .main-content-area {
        justify-content: flex-start; /* Align to top on mobile */
        padding: 75px 15px 20px 15px; /* Adjust padding for nav bars */
    }
}

#toast-notification-area { width: 100%; max-width: 450px; margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast { padding: 12px 18px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; text-align: left; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-success { background-color: rgba(0, 255, 251, 0.15); color: var(--neon-cyan); border: 1px solid var(--neon-cyan); }
body.light-mode .toast.toast-success { background-color: rgba(0, 200, 200, 0.15); color: var(--neon-cyan-light-mode); border: 1px solid var(--neon-cyan-light-mode); }
.toast.toast-error { background-color: rgba(249, 0, 191, 0.2); color: var(--neon-pink); border: 1px solid var(--neon-pink); }
body.light-mode .toast.toast-error { background-color: rgba(232, 16, 152, 0.2); color: var(--neon-pink-light-mode); border: 1px solid var(--neon-pink-light-mode); }
.toast strong { font-weight: 900; }

.auth-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 450px; box-sizing: border-box; }
/* UNUSED styles for .auth-header and #auth-logo-image removed */

.auth-form-wrapper { margin-top: 20px; background-color: var(--color-bg-form-dark); border: 1px solid var(--color-border-form-dark); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 18px; padding: 35px 40px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,0.45); transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
body.light-mode .auth-form-wrapper { background-color: var(--color-bg-form-light); border-color: var(--color-border-form-light); box-shadow: 0 12px 40px rgba(100,100,150,0.22); }
@media (max-width: 992px) {
    .auth-form-wrapper {
        margin-top: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 30px 10px;
    }
}

.form-container { display: none; flex-direction: column; gap: 22px; animation: fadeIn 0.5s ease-in-out; }
.form-container.active-form { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.form-container h2 { font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 700; color: var(--text-light); margin: 0 0 15px 0; text-align: center; }
body.light-mode .form-container h2 { color: var(--text-light-mode-main); }
.input-group { display: flex; flex-direction: column; text-align: left; position: relative; }
.input-group label { font-size: 1rem; font-weight: 600; margin-bottom: 10px; margin-top: 10px; color: var(--text-medium-dark); display: flex; align-items: center; }
.input-group label i { margin-right: 10px; color: var(--neon-cyan); width: 20px; text-align: center; font-size: 0.9em; }
body.light-mode .input-group label { color: var(--text-light-mode-medium); }
body.light-mode .input-group label i { color: var(--neon-pink-light-mode); }
.input-group input { background-color: var(--input-bg-dark); border: 1px solid var(--input-border-dark); color: var(--text-light); padding: 14px 18px; border-radius: 10px; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; width: 100%; box-sizing: border-box; }
.input-group input#login-password, .input-group input#signup-password, .input-group input#signup-confirm-password { padding-right: 45px; }
.input-group input::placeholder { font-size: 1rem; color: var(--text-medium-dark); opacity: 0.7; }
body.light-mode .input-group input::placeholder { color: var(--text-light-mode-medium); }
.input-group input:focus { outline: none; border-color: var(--input-border-focus-dark); box-shadow: 0 0 0 3px rgba(0, 255, 251, 0.2), 0 0 8px var(--input-border-focus-dark); }
body.light-mode .input-group input { background-color: var(--input-bg-light); border-color: var(--input-border-light); color: var(--text-light-mode-main); }
body.light-mode .input-group input:focus { border-color: var(--input-border-focus-light); box-shadow: 0 0 0 3px rgba(232, 16, 152, 0.15), 0 0 8px var(--input-border-focus-light); }
.password-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-medium-dark); z-index: 2; height: 100%; display: flex; align-items: center; }
.password-toggle i { font-size: 0.95em; transition: color 0.2s; margin-top: 40px;}
.password-toggle:hover i { color: var(--neon-cyan); }
body.light-mode .password-toggle { color: var(--text-light-mode-medium); }
body.light-mode .password-toggle:hover i { color: var(--neon-pink-light-mode); }
.input-group-password-wrapper { position: relative; }
.input-group-password-wrapper .input-group { margin-bottom: 0; }
.form-options { text-align: right; margin-top: 8px; margin-bottom: 20px; }
.form-options .forgot-password-link, .form-switch a { font-size: 0.95rem; color: var(--link-color-dark); text-decoration: none; transition: color 0.2s, text-shadow 0.2s; font-weight: 600; }
.form-options .forgot-password-link:hover, .form-switch a:hover { color: var(--link-hover-dark); text-shadow: 0 0 6px var(--link-hover-dark); }
body.light-mode .form-options .forgot-password-link, body.light-mode .form-switch a { color: var(--link-color-light); }
body.light-mode .form-options .forgot-password-link:hover, body.light-mode .form-switch a:hover { color: var(--link-hover-light); text-shadow: 0 0 6px var(--link-hover-light); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; font-family: 'Orbitron', sans-serif; font-size: 1.05rem; font-weight: 700; border-radius: 10px; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 1.2px; transition: all 0.25s ease; width: 100%; box-sizing: border-box; }
.btn i { margin-left: 12px; font-size: 0.95em; }
.btn-primary { background-color: var(--neon-pink); color: white; box-shadow: 0 4px 12px rgba(249,0,191,0.3), 0 0 15px rgba(249,0,191,0.2); }
.btn-primary:hover { background-color: #ff1aca; box-shadow: 0 6px 18px rgba(249,0,191,0.4), 0 0 20px rgba(249,0,191,0.3); transform: translateY(-3px); }
body.light-mode .btn-primary { background-color: var(--neon-pink-light-mode); box-shadow: 0 4px 12px rgba(232,16,152,0.3), 0 0 15px rgba(232,16,152,0.2); color: white; }
body.light-mode .btn-primary:hover { background-color: #f02aad; box-shadow: 0 6px 18px rgba(232,16,152,0.4), 0 0 20px rgba(232,16,152,0.3); }
.form-switch { font-size: 1rem; margin-top: 25px; color: var(--text-medium-dark); }
body.light-mode .form-switch { color: var(--text-light-mode-medium); }
.explore-guest { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--color-border-form-dark); }
body.light-mode .explore-guest { border-top-color: var(--color-border-form-light); }
.btn-secondary { background-color: transparent; color: var(--neon-cyan); border: 2px solid var(--neon-cyan); box-shadow: 0 0 10px rgba(0,255,251,0.3); }
.btn-secondary:hover { background-color: var(--neon-cyan); color: var(--color-bg-main-dark); box-shadow: 0 0 15px rgba(0,255,251,0.5), 0 0 20px rgba(0,255,251,0.2); transform: translateY(-3px); }
body.light-mode .btn-secondary { color: var(--neon-cyan-light-mode); border-color: var(--neon-cyan-light-mode); box-shadow: 0 0 10px rgba(0,200,200,0.3); }
body.light-mode .btn-secondary:hover { background-color: var(--neon-cyan-light-mode); color: white; box-shadow: 0 0 15px rgba(0,200,200,0.5), 0 0 20px rgba(0,200,200,0.2); }

@media (max-width: 480px) {
    .form-container h2 { font-size: 1.8rem; }
}