:root {

    --zai-dark: #0d385f;       /* Premium UOG Deep Sapphire */

    --zai-accent: #f59e0b;     /* Vivid UOG Amber Gold */

    --zai-accent-hover: #d97706;

    --uog-blue: #0f4c81;       /* UOG Deep Sapphire */

    --uog-blue-hover: #0b375e;

    --uog-orange: #fbbf24;

    --primary-color: var(--uog-blue);

    --primary-active: rgba(15, 76, 129, 0.06);

    --bg-main: #f3f4f6;        /* Sleek Cool Gray/Slate 50 */

    --bg-surface: rgba(255, 255, 255, 0.82);

    --bg-surface-solid: #ffffff;

    --text-primary: #0f172a;   /* Slate 900 */

    --text-secondary: #475569; /* Slate 600 */

    --border-color: rgba(226, 232, 240, 0.8);   /* Slate 200 softened */

    --success: #10b981;        /* Emerald */

    --danger: #ef4444;

    

    /* Modern Premium Shadows */

    --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.04), 0 1px 3px -1px rgba(15, 23, 42, 0.02);

    --shadow-md: 0 10px 20px -5px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.03);

    --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

    --shadow-glow: 0 0 20px rgba(15, 76, 129, 0.15);

    

    --glass-blur: blur(20px);

    --bubble-speed-multiplier: 1;

    --bubble-size-multiplier: 1;

    --bubble-display: block;

    

    /* Sleek Gradients */

    --gradient-primary: linear-gradient(135deg, #0f4c81 0%, #1e40af 100%);

    --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    --gradient-glow: linear-gradient(135deg, rgba(15, 76, 129, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);

    --radius-sm: 6px;

    --radius-md: 10px;

    --radius-lg: 16px;

    --radius-xl: 24px;

}



:root[data-theme="dark"] {

    --bg-main: #0b0f19;        /* Deep Midnight */

    --bg-surface: rgba(17, 24, 39, 0.8);

    --bg-surface-solid: #111827;

    --text-primary: #f9fafb;

    --text-secondary: #9ca3af;

    --border-color: rgba(255, 255, 255, 0.08);

    --primary-color: #3b82f6;   /* Rich Neon Blue for dark mode */

    --primary-active: rgba(59, 130, 246, 0.15);

    --zai-dark: #0f172a;

    --zai-accent: #f59e0b;

    --zai-accent-hover: #d97706;

    --uog-blue: #3b82f6;

    --uog-blue-hover: #2563eb;

    --uog-orange: #f59e0b;

    --success: #34d399;

    --danger: #f87171;

    --glass-blur: blur(20px);

    --bubble-display: block;

    

    /* Softer dark shadows with depth */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);

    --shadow-md: 0 8px 16px -2px rgba(0, 0, 0, 0.45);

    --shadow-lg: 0 16px 32px -4px rgba(0, 0, 0, 0.55);

    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25);

    

    --gradient-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    --gradient-glow: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(245, 130, 32, 0.05) 100%);

}



@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');



/* ── Global base font scale ── */

html { 

    font-size: 13px; 

    scroll-behavior: smooth;

}



* { 

    margin: 0; 

    padding: 0; 

    box-sizing: border-box; 

    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 

}

body { 

    background: var(--bg-main);

    color: var(--text-primary); 

    height: 100vh; 

    overflow: hidden; 

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* Custom Premium Scrollbar */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}

::-webkit-scrollbar-track {

    background: transparent;

}

::-webkit-scrollbar-thumb {

    background: var(--border-color);

    border-radius: 20px;

    border: 2px solid transparent;

    background-clip: content-box;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--text-secondary);

    border-radius: 20px;

    border: 2px solid transparent;

    background-clip: content-box;

}



.view { display: none; height: 100vh; width: 100%; }

.view.active { display: flex; }

.mt-4 { margin-top: 1.5rem; }



/* Reusable Inputs */









/* ─── PREMIUM AUTH VIEW ─── */

.auth-bg {

    background: linear-gradient(145deg, #f0f4ff 0%, #e8edf8 40%, #f3f0ff 100%);

    align-items: center;

    justify-content: center;

    position: relative;

}

:root[data-theme="dark"] .auth-bg {

    background: linear-gradient(145deg, #08101f 0%, #0b1628 50%, #0d0a1a 100%);

}

.auth-container {

    display: flex;

    width: 1040px;

    max-width: 100%;

    background: transparent;

    gap: 3.5rem;

    align-items: center;

    margin: 0 auto;

}



@media (max-width: 991px) {

    .auth-container {

        flex-direction: column;

        gap: 2.5rem;

        padding: 1.5rem;

        margin-top: 1rem;

    }

}



.auth-left {

    flex: 1.2;

    color: var(--text-primary);

    display: flex;

    flex-direction: column;

}



.auth-left-inner {

    width: 100%;

}



.auth-logo-wrap {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 2rem;

}



.auth-brand-name {

    font-size: 2.2rem;

    font-weight: 800;

    margin: 0;

    line-height: 1.1;

    background: linear-gradient(135deg, var(--uog-blue) 0%, #1e40af 60%, #4f46e5 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    letter-spacing: -0.5px;

}

:root[data-theme="dark"] .auth-brand-name {

    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 60%, #93c5fd 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.auth-brand-sub {

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--text-secondary);

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.auth-headline {

    font-size: 1.8rem;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 1.2rem;

    color: var(--text-primary);

    letter-spacing: -0.5px;

}



.auth-tagline {

    font-size: 1rem;

    line-height: 1.6;

    margin-bottom: 2.2rem;

    color: var(--text-secondary);

}



.auth-features-list {

    list-style: none;

    padding: 0;

    margin: 0 0 2.5rem 0;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



.auth-features-list li {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    text-align: left;

}



.auth-features-list li i {

    width: 38px;

    height: 38px;

    background: linear-gradient(135deg, rgba(15, 76, 129, 0.08) 0%, rgba(251, 191, 36, 0.06) 100%);

    border: 1px solid rgba(15, 76, 129, 0.12);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--uog-blue);

    font-size: 1rem;

    flex-shrink: 0;

    margin-top: 2px;

    box-shadow: var(--shadow-sm);

}



.auth-features-list li div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.auth-features-list li strong {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text-primary);

}



.auth-features-list li span {

    font-size: 0.85rem;

    color: var(--text-secondary);

    line-height: 1.4;

}



.auth-stats-row {

    display: flex;

    align-items: center;

    gap: 24px;

    background: rgba(255, 255, 255, 0.4);

    border: 1px solid rgba(226, 232, 240, 0.8);

    backdrop-filter: blur(12px);

    padding: 16px 24px;

    border-radius: 16px;

    width: fit-content;

}

:root[data-theme="dark"] .auth-stats-row {

    background: rgba(17, 24, 39, 0.4);

    border-color: rgba(255, 255, 255, 0.06);

}



.auth-stat {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.auth-stat-num {

    font-size: 1.4rem;

    font-weight: 800;

    color: var(--uog-blue);

}



.auth-stat-label {

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 2px;

}



.auth-stat-divider {

    height: 32px;

    width: 1px;

    background: rgba(226, 232, 240, 0.8);

}

:root[data-theme="dark"] .auth-stat-divider {

    background: rgba(255, 255, 255, 0.08);

}



.auth-right {

    flex: 0.95;

    width: 100%;

    max-width: 420px;

}



.auth-form-card {

    background: rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(24px) saturate(160%);

    -webkit-backdrop-filter: blur(24px) saturate(160%);

    border: 1px solid rgba(255, 255, 255, 0.5);

    padding: 32px;

    border-radius: 20px;

    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255,255,255,0.4) inset;

    width: 100%;

    transition: transform 0.25s, box-shadow 0.25s;

    text-align: left;

}

.auth-form-card:hover {

    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255,255,255,0.6) inset;

}

:root[data-theme="dark"] .auth-form-card {

    background: rgba(17, 24, 39, 0.85);

    border-color: rgba(255, 255, 255, 0.08);

    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04) inset;

}

:root[data-theme="dark"] .auth-form-card:hover {

    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;

}



.auth-form-header {

    margin-bottom: 1.8rem;

}



.auth-form-header h2 {

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 6px;

    letter-spacing: -0.5px;

}



.auth-form-header p {

    font-size: 0.88rem;

    color: var(--text-secondary);

    margin: 0;

}



.form-field {

    margin-bottom: 1.25rem;

}



.form-label {

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 8px;

    display: block;

}



/* Input icons */

.input-icon-wrapper {

    position: relative;

    width: 100%;

}



.input-icon-wrapper .input-icon {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-secondary);

    font-size: 0.95rem;

    pointer-events: none;

    transition: color 0.2s;

    z-index: 5;

}



.input-icon-wrapper .form-control,
.input-icon-wrapper .form-select,
.input-icon-wrapper .premium-input,
.modal .input-icon-wrapper .form-control,
.modal .input-icon-wrapper .form-select,
.modal .input-icon-wrapper .premium-input {

    padding-left: 42px !important;

}



.input-icon-wrapper:focus-within .input-icon {

    color: var(--uog-blue);

}



.auth-form-card .form-control {

    height: 48px;

    font-size: 0.92rem;

    border-radius: 12px;

    border: 1.5px solid var(--border-color);

    background: rgba(255, 255, 255, 0.6);

    color: var(--text-primary);

    transition: all 0.25s ease;

}

:root[data-theme="dark"] .auth-form-card .form-control {

    background: rgba(15, 23, 42, 0.6);

}



.auth-form-card .form-control:focus {

    border-color: var(--uog-blue);

    background: var(--bg-surface-solid);

    box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.12);

    outline: none;

}



.auth-form-card .btn-primary {

    background: var(--gradient-primary);

    border: none;

    border-radius: 12px;

    font-size: 0.95rem;

    padding: 12px 24px;

    font-weight: 700;

    margin-top: 8px;

    box-shadow: 0 8px 24px rgba(15, 76, 129, 0.25);

    color: white;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

}



.auth-form-card .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 32px rgba(15, 76, 129, 0.35);

}



.auth-divider {

    display: flex;

    align-items: center;

    text-align: center;

    margin: 1.5rem 0;

    color: var(--text-secondary);

    font-size: 0.78rem;

    font-weight: 700;

    gap: 12px;

}



.auth-divider::before,

.auth-divider::after {

    content: '';

    display: block;

    flex: 1;

    height: 1.5px;

    background: var(--border-color);

}



.auth-form-card .btn-outline-primary {

    background: transparent;

    border: 1.5px solid var(--border-color);

    border-radius: 12px;

    font-size: 0.9rem;

    padding: 12px 24px;

    font-weight: 700;

    color: var(--text-primary);

    transition: all 0.25s ease;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

}



.auth-form-card .btn-outline-primary:hover {

    background: var(--border-color);

    border-color: var(--border-color);

    color: var(--text-primary) !important;

}

:root[data-theme="dark"] .auth-form-card .btn-outline-primary:hover {

    background: rgba(255, 255, 255, 0.05);

}



.auth-footer-note {

    text-align: center;

    font-size: 0.78rem;

    color: var(--text-secondary);

    margin-top: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    opacity: 0.85;

}







/* Modals */







.edu-modal-overlay.active 











.edu-row { display: flex; gap: 10px; margin-bottom: 12px; }



.edu-privacy-note { color: #166534; font-size: 0.85rem; margin: 10px 0 20px; line-height: 1.4; display: flex; gap: 8px; align-items: flex-start; background: #f0fdf4; padding: 10px; border-radius: 8px; border: 1px solid #bbf7d0; }







/* Workspace & Navbar */

#workspace-view { flex-direction: column; }

/* ─── PREMIUM GLASSMORPHIC NAVBAR ─── */

.edu-navbar {

    height: 52px;

    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(24px) saturate(180%);

    -webkit-backdrop-filter: blur(24px) saturate(180%);

    border-bottom: 1px solid rgba(226, 232, 240, 0.6);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 16px;

    z-index: 100;

    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 16px -4px rgba(15,23,42,0.06);

    position: sticky;

    top: 0;

}

:root[data-theme="dark"] .edu-navbar {

    background: rgba(17, 24, 39, 0.9) !important;

    border-bottom-color: rgba(255,255,255,0.06) !important;

    box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 4px 16px -4px rgba(0,0,0,0.4) !important;

}

.nav-left { display: flex; align-items: center; gap: 8px; width: 240px; }

.nav-logo-img { height: 32px; border-radius: 8px; filter: drop-shadow(0 2px 4px rgba(15,76,129,0.2)); }

.nav-title {

    font-weight: 800;

    font-size: 0.92rem;

    background: linear-gradient(135deg, var(--uog-blue) 0%, #1e40af 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    letter-spacing: -0.4px;

}

.nav-middle { flex: 1; display: flex; justify-content: center; height: 100%; }

.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: auto; min-width: 220px; flex-shrink: 0; }



.nav-util-btn {

    position: relative;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: rgba(15,23,42,0.05);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-secondary);

    cursor: pointer;

    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);

    font-size: 0.88rem;

    flex-shrink: 0;

    border: 1px solid transparent;

}

.nav-util-btn:hover {

    background: var(--uog-blue);

    color: white;

    border-color: var(--uog-blue);

    box-shadow: 0 4px 12px rgba(15,76,129,0.25);

    transform: translateY(-1px);

}

.nav-util-btn:hover i { color: white !important; filter: none !important; }

.nav-util-mob-btn { display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }



.profile-chip {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 4px 10px 4px 4px;

    border-radius: 24px;

    cursor: pointer;

    transition: all 0.2s ease;

    background: transparent;

    border: 1px solid transparent;

}

.profile-chip:hover {

    background: rgba(15,76,129,0.06);

    border-color: rgba(15,76,129,0.15);

}



/* Nav Circle Button */

.nav-circle-btn {

    width: 36px; height: 36px;

    border-radius: 50%;

    background: rgba(15,23,42,0.05);

    display: flex; align-items: center; justify-content: center;

    color: var(--text-secondary);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.95rem;

    flex-shrink: 0;

}

.nav-circle-btn:hover { background: var(--uog-blue); color: white; box-shadow: 0 4px 12px rgba(15,76,129,0.25); }



/* Nav Tab (middle nav icons) */

.nav-tab {

    display: flex; align-items: center; justify-content: center;

    width: 80px; height: 100%;

    cursor: pointer;

    font-size: 1.15rem;

    color: var(--text-secondary);

    transition: all 0.2s ease;

    border-bottom: 2px solid transparent;

    position: relative;

}

.nav-tab:hover { color: var(--uog-blue); }

.nav-tab.active-tab {

    color: var(--uog-blue);

    border-bottom: 2px solid var(--uog-blue);

}

.nav-tab.active-tab::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 5px;

    height: 5px;

    background: var(--uog-blue);

    border-radius: 50%;

    bottom: -3px;

    display: none;

}



/* Avatars */

.avatar-small {

    width: 34px; height: 34px;

    border-radius: 50%;

    background: var(--gradient-primary);

    display: flex; align-items: center; justify-content: center;

    color: white; font-weight: 700; font-size: 0.8rem;

    overflow: hidden; flex-shrink: 0;

    box-shadow: 0 2px 8px rgba(15,76,129,0.2);

}

.avatar-small img { width: 100%; height: 100%; object-fit: cover; }

.avatar-large {

    width: 68px; height: 68px;

    border-radius: 50%;

    background: var(--gradient-primary);

    display: flex; align-items: center; justify-content: center;

    color: white; font-weight: 700; font-size: 1.5rem;

    margin: 0 auto; overflow: hidden;

    border: 3px solid var(--bg-surface-solid);

    box-shadow: 0 4px 16px rgba(15,76,129,0.25);

}

.avatar-large img { width: 100%; height: 100%; object-fit: cover; }



/* Profile Picture Upload in Sidebar */

.avatar-upload-container { position: relative; display: inline-block; margin: -28px auto 8px; z-index: 2; }

.avatar-edit-btn { position: absolute; bottom: 0; right: 0; background: var(--border-color); color: var(--text-primary); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7rem; border: 2px solid var(--bg-surface-solid); transition: 0.2s; z-index: 10; }

.avatar-edit-btn:hover { background: var(--text-secondary); color: white; transform: scale(1.1); }

.edit-profile-btn { margin: 12px auto 0; background: color-mix(in srgb, var(--zai-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--zai-accent) 25%, transparent); color: var(--zai-accent); padding: 7px 16px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s; width: fit-content; }

.edit-profile-btn:hover { background: var(--zai-accent); color: white; box-shadow: 0 4px 10px color-mix(in srgb, var(--zai-accent) 20%, transparent); }



/* Notifications Dropdown */

.nav-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; transition: 0.2s; }

.nav-icon:hover { background: var(--border-color); color: var(--text-primary); }

.badge { position: absolute; top: 0; right: 0; background: var(--danger); color: white; font-size: 0.65rem; padding: 2px 5px; border-radius: 10px; font-weight: bold; }

.circle-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; transition: 0.2s; }

.circle-icon:hover { background: var(--border-color); color: var(--text-primary); }



.notif-dropdown { display: none; position: absolute; top: 45px; right: 0; width: 320px; background: var(--bg-surface-solid); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 200; text-align: left; overflow: hidden; backdrop-filter: var(--glass-blur); }

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

.notif-dropdown h4 { padding: 12px 15px; border-bottom: 1px solid var(--border-color); margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }

.notif-dropdown ul { list-style: none; max-height: 300px; overflow-y: auto; }

.notif-dropdown li { padding: 12px 15px; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-primary); cursor: pointer; transition: 0.2s; line-height: 1.4; }

.notif-dropdown li:hover { background: var(--border-color); }

.notif-dropdown li strong { color: var(--text-primary); font-weight: 700; }



/* Body Area */

.edu-body { display: flex; flex: 1; overflow: hidden; background: var(--bg-main); margin: 0; width: 100%; max-width: 100%; }

/* ─── PREMIUM SIDEBAR ─── */

.edu-sidebar-left {

    width: 218px;

    padding: 8px 6px;

    overflow-y: auto;

    background: var(--bg-surface-solid) !important;

    color: var(--text-primary);

    border-right: 1px solid var(--border-color) !important;

    border-radius: 0;

    scrollbar-width: thin;

    scrollbar-color: rgba(15,76,129,0.12) transparent;

}

:root[data-theme="dark"] .edu-sidebar-left {

    background: #0f1729 !important;

    border-right-color: rgba(255,255,255,0.05) !important;

}

.edu-sidebar-right {

    width: 256px;

    padding: 0.75rem 0.6rem;

    overflow-y: auto;

    background: var(--bg-surface-solid);

    border-left: 1px solid var(--border-color);

}

:root[data-theme="dark"] .edu-sidebar-right {

    background: #0c1220 !important;

    border-left-color: rgba(255,255,255,0.05) !important;

}



.profile-summary {

    text-align: center;

    margin-bottom: 0.5rem;

    padding-bottom: 0.5rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: transparent;

    border: none;

    padding-top: 0.5rem;

}

.profile-summary h3 { font-size: 0.84rem; color: var(--text-primary); margin-bottom: 2px; font-weight: 700; }

.profile-summary p { font-size: 0.72rem; color: var(--text-secondary); }



.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.sidebar-list li {

    display: flex; align-items: center; gap: 12px;

    padding: 10px 14px;

    border-radius: 12px;

    cursor: pointer;

    font-weight: 500; font-size: 0.85rem;

    color: var(--text-secondary);

    transition: all 0.2s ease;

    position: relative;

    overflow: hidden;

    margin-bottom: 2px;

}

.sidebar-section-header {

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--text-secondary);

    opacity: 0.55;

    letter-spacing: 0.8px;

    padding: 16px 14px 6px;

    font-family: 'Outfit', sans-serif;

    user-select: none;

}

.sidebar-list li::before {

    content: '';

    position: absolute;

    left: 0; top: 0; bottom: 0;

    width: 3px;

    background: var(--gradient-primary);

    border-radius: 0 3px 3px 0;

    opacity: 0;

    transition: opacity 0.2s;

}

.sidebar-list li:hover {

    background: color-mix(in srgb, var(--text-primary) 6%, transparent) !important;

    color: var(--text-primary) !important;

}

.sidebar-list li.active-item {

    font-weight: 600 !important;

    background: linear-gradient(135deg, var(--zai-accent) 0%, var(--zai-accent-hover) 100%) !important;

    color: #ffffff !important;

    border-radius: 12px !important;

    box-shadow: 0 4px 12px color-mix(in srgb, var(--zai-accent) 25%, transparent) !important;

}

.sidebar-list li.active-item::before { opacity: 0; }

.sidebar-list li i {

    width: 30px; height: 30px;

    border-radius: 8px;

    background: color-mix(in srgb, var(--text-primary) 6%, transparent) !important;

    display: flex; align-items: center; justify-content: center;

    font-size: 0.88rem; flex-shrink: 0;

    color: var(--text-secondary) !important;

    transition: all 0.2s ease;

}

.sidebar-list li:hover i {

    background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;

    color: var(--text-primary) !important;

}

.sidebar-list li.active-item i {

    background: rgba(255, 255, 255, 0.2) !important;

    color: white !important;

    box-shadow: none !important;

}



/* Right Sidebar — Notice Board */

.notice-board {

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.notice-header {

    background: linear-gradient(135deg, rgba(15,76,129,0.06) 0%, rgba(251,191,36,0.04) 100%);

    padding: 10px 14px;

    border-bottom: 1px solid var(--border-color);

}

.notice-header h4 { font-size: 0.85rem; display: flex; align-items: center; gap: 8px; color: var(--uog-blue); font-weight: 700; }

.notice-list { list-style: none; }

.notice-list li { padding: 10px 14px; border-bottom: 1px solid var(--border-color); transition: background 0.15s; }

.notice-list li:last-child { border-bottom: none; }

.notice-list li:hover { background: rgba(15,76,129,0.03); }

.notice-date {

    display: inline-block;

    font-size: 0.7rem; font-weight: 700;

    color: var(--uog-orange);

    background: rgba(251,191,36,0.12);

    padding: 2px 7px; border-radius: 20px;

    margin-bottom: 4px;

    border: 1px solid rgba(251,191,36,0.2);

}

.notice-list li p { font-size: 0.78rem; color: var(--text-primary); line-height: 1.45; }

.stats-card {

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 12px; padding: 12px;

    box-shadow: var(--shadow-sm);

}

.stats-card h4 { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; font-weight: 700; }

.stat-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.78rem; color: var(--text-secondary); }

.stat-item strong { color: var(--text-primary); font-size: 0.85rem; font-weight: 700; }



/* ─── PREMIUM MAIN CONTENT ─── */

.edu-main {

    flex: 1;

    padding: 0.65rem;

    overflow-y: auto;

    max-width: 660px;

    margin: 0 auto;

    background: transparent;

    scrollbar-width: thin;

    scrollbar-color: rgba(15,76,129,0.12) transparent;

}

.view-header { margin-bottom: 0.6rem; padding: 0 0.1rem; }

.view-header h2 {

    font-size: 0.95rem;

    color: var(--text-primary);

    margin-bottom: 2px;

    font-weight: 800;

    letter-spacing: -0.3px;

}

.view-header p { color: var(--text-secondary); font-size: 0.75rem; }



.edu-card {

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    margin-bottom: 10px;

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);

}

.edu-card:hover {

    box-shadow: var(--shadow-md);

}



/* ─── CREATE POST ─── */

.create-post-card {

    padding: 0.85rem;

    background: var(--bg-surface-solid);

}

.create-top {

    display: flex; align-items: center; gap: 10px;

    margin-bottom: 0.6rem;

    background: var(--bg-main);

    border: 1.5px solid var(--border-color);

    border-radius: 24px;

    padding: 8px 14px;

    transition: all 0.2s ease;

    cursor: pointer;

}

.create-top:hover {

    border-color: rgba(15,76,129,0.3);

    background: rgba(15,76,129,0.02);

}

.create-top input {

    flex: 1; border: none; background: transparent;

    padding: 4px 0; font-size: 0.85rem;

    cursor: pointer; outline: none;

    color: var(--text-secondary);

}

.create-top input::placeholder { color: var(--text-secondary); }

.create-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 0.5rem; }

.create-actions-left { display: flex; gap: 4px; }

.create-action {

    display: flex; align-items: center; gap: 6px;

    cursor: pointer; font-weight: 600;

    color: var(--text-secondary); font-size: 0.8rem;

    padding: 6px 10px;

    border-radius: 8px;

    transition: all 0.18s ease;

}

.create-action:hover {

    background: rgba(15,76,129,0.06);

    color: var(--uog-blue);

}



/* ── Posts ─────────────────────────────────────────────────────────────── */

.post {

    padding: 0.9rem 1.1rem;

    cursor: default;

    transition: background 0.2s ease;

    border-bottom: 1px solid var(--border-color);

}

.post:last-child { border-bottom: none; }

.post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }

.post-user-info { display: flex; align-items: center; gap: 10px; }

.post-name {

    font-weight: 700; font-size: 0.84rem;

    color: var(--text-primary);

    display: flex; gap: 6px; align-items: center;

}

.post-meta {

    font-size: 0.72rem;

    color: var(--text-secondary);

    margin-top: 2px;

    display: flex; align-items: center; gap: 5px;

}

.post-badge {

    font-size: 0.67rem; font-weight: 700;

    padding: 2px 9px; border-radius: 20px;

    background: linear-gradient(135deg, rgba(15,76,129,0.08) 0%, rgba(15,76,129,0.04) 100%);

    color: var(--uog-blue);

    border: 1px solid rgba(15,76,129,0.15);

}

.post-text {

    font-size: 0.85rem; line-height: 1.6;

    color: var(--text-primary);

    margin-bottom: 10px;

    white-space: pre-wrap; word-break: break-word;

}



/* Post Owner Buttons */

.post-actions { display: flex; gap: 6px; }

.post-action-btn { border: none; background: transparent; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 0.78rem; font-weight: 500; display: flex; align-items: center; gap: 4px; transition: 0.2s; }

.post-action-btn.edit { color: #3b82f6; }

.post-action-btn.edit:hover { background: rgba(59,130,246,0.1); }

.post-action-btn.delete { color: var(--danger); }

.post-action-btn.delete:hover { background: rgba(239, 68, 68, 0.08); }



/* Interaction Bar */

.post-interaction-bar { display: flex; align-items: center; gap: 4px; padding: 8px 0 0; border-top: 1px solid var(--border-color); margin-top: 10px; }

.interaction-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; }

.interaction-btn:hover { background: #f5f5f5; color: var(--text-primary); }

.interaction-btn.liked { color: var(--zai-accent); filter: none; font-weight: 700; }

.interaction-btn.bookmarked { color: var(--primary-color); filter: none; font-weight: 700; }



/* Comments Section */

.comments-section { padding: 12px 1.5rem; background: #fafaf9; border-top: 1px solid var(--border-color); }

.comment-input-area { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.comment-input-box { flex: 1; border: 1px solid var(--border-color); border-radius: 20px; padding: 9px 16px; font-size: 0.88rem; outline: none; background: white; transition: border 0.2s; }

.comment-input-box:focus { border-color: var(--zai-accent); }

.comment-submit-btn { background: var(--zai-accent); color: #1f2937; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: 0.2s; flex-shrink: 0; }

.comment-submit-btn:hover { filter: brightness(0.9); }

.comment-item { display: flex; gap: 10px; margin-bottom: 12px; }

.comment-bubble { background: white; border: 1px solid var(--border-color); border-radius: 14px; padding: 9px 14px; flex: 1; }

.comment-author { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 3px; }

.comment-text { font-size: 0.88rem; color: var(--text-primary); line-height: 1.5; }

.comment-time { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; }



/* Attached Files */

.post-images { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }

.post-images img { width: 100%; max-height: 420px; object-fit: cover; cursor: pointer; transition: opacity 0.2s; }

.post-images img:hover { opacity: 0.93; }

.file-attachment { display: flex; align-items: center; gap: 12px; background: #f8fafc; border: 1px solid var(--border-color); padding: 12px 15px; border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: 0.2s; }

.file-attachment:hover { border-color: var(--zai-accent); background: rgba(188,235,117,0.05); }

.file-attachment i { font-size: 1.4rem; }

.file-attachment.video i { color: #ef4444; }

.file-attachment.doc i { color: #3b82f6; }

.file-details { flex: 1; }

.file-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); word-break: break-all; }

.file-meta { font-size: 0.74rem; color: var(--text-secondary); margin-top: 2px; }

.btn-download { background: none; border: none; color: var(--uog-blue); cursor: pointer; font-size: 1rem; }



/* Directory Grid */

.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }

.student-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: var(--shadow-sm); }

.student-card .avatar-large { margin: 0 auto 1rem; }

.student-card h3 { font-size: 1rem; margin-bottom: 5px; }

.student-card p { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px; }



/* Software Cards */

.software-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }

.sw-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }

.sw-header { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-start; }

.sw-icon { width: 50px; height: 50px; border-radius: 10px; background: rgba(245, 130, 32, 0.1); color: var(--uog-orange); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }

.sw-info h3 { font-size: 1.05rem; color: var(--uog-blue); font-weight: 600; margin-bottom: 4px; }

.sw-info p { font-size: 0.8rem; color: var(--text-secondary); }

.sw-desc { font-size: 0.9rem; color: var(--text-primary); line-height: 1.5; margin-bottom: 15px; flex: 1; }

.sw-footer { display: flex; gap: 10px; margin-top: auto; border-top: 1px solid var(--border-color); padding-top: 15px; }

.sw-btn { flex: 1; background: var(--success); color: white; border: none; padding: 10px; border-radius: 6px; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-align: center; text-decoration: none; transition: 0.2s; }

.sw-btn:hover { background: #059669; }



/* Compose Modal */

.post-privacy { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: 0.8rem; font-weight: 500; margin-top: 4px; }

.add-to-post { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border: 1px dashed var(--border-color); border-radius: 8px; margin-bottom: 15px; background: #f9fafb; }

.upload-btn { background: white; border: 1px solid var(--border-color); padding: 8px 15px; border-radius: 6px; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }

.upload-btn:hover { border-color: var(--uog-blue); color: var(--uog-blue); }





.image-preview-container { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

.preview-item { display: inline-flex; align-items: center; gap: 8px; background: #f3f4f6; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 0.85rem; }

.preview-item img { height: 40px; border-radius: 4px; }



/* ─── PREMIUM TOAST ─── */

#toast-container {

    position: fixed; bottom: 24px; right: 24px;

    z-index: 2000;

    display: flex; flex-direction: column; gap: 10px;

}

.toast {

    background: rgba(15, 23, 42, 0.96);

    color: white;

    padding: 12px 18px 12px 16px;

    border-radius: 12px;

    font-size: 0.88rem; font-weight: 500;

    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.08);

    animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    display: flex; align-items: center; gap: 10px;

    backdrop-filter: blur(16px);

    border-left: 3px solid var(--uog-blue);

    max-width: 320px;

}

.toast.success { border-left-color: var(--success); }

.toast.error { border-left-color: var(--danger); }

.toast.warning { border-left-color: var(--uog-orange); }

@keyframes toastSlideIn {

    from { transform: translateX(120%) scale(0.8); opacity: 0; }

    to { transform: translateX(0) scale(1); opacity: 1; }

}

@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }



/* ─── PREMIUM COMMUNITY BOOST ────────────────────────────────────────────────── */



/* Premium Post Interaction Bar */

.post-interaction-bar {

    display: flex;

    gap: 6px;

    border-top: 1px solid var(--border-color);

    margin-top: 0.5rem;

    padding-top: 0.4rem;

}

.interaction-btn {

    border: none;

    background: transparent;

    padding: 5px 8px;

    border-radius: 16px;

    cursor: pointer;

    font-size: 0.75rem;

    font-weight: 500;

    color: var(--text-secondary);

    display: flex;

    align-items: center;

    gap: 5px;

    transition: all 0.2s ease;

}

.interaction-btn:hover {

    background: #f3f4f6;

    color: var(--text-primary);

}

.interaction-btn.liked {

    color: var(--uog-orange);

    background: rgba(245, 130, 32, 0.08);

}

.interaction-btn.liked i {

    animation: thumbsPulse 0.3s ease-out;

}

@keyframes thumbsPulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.4) rotate(-15deg); }

    100% { transform: scale(1); }

}



/* Post Comments Section */

.post-comments-section {

    display: none;

    margin-top: 1rem;

    border-top: 1px dashed var(--border-color);

    padding-top: 1rem;

}

.post-comments-section.active {

    display: block;

    animation: slideDown 0.25s ease-out;

}

@keyframes slideDown {

    from { opacity: 0; transform: translateY(-8px); }

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

}

.comments-list {

    max-height: 250px;

    overflow-y: auto;

    margin-bottom: 1rem;

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding-right: 5px;

}

/* Slim Scrollbar for Comments */

.comments-list::-webkit-scrollbar { width: 4px; }

.comments-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }



.single-comment {

    background: #f9fafb;

    border: 1px solid var(--border-color);

    padding: 10px 12px;

    border-radius: 8px;

    font-size: 0.85rem;

}

.comment-user-header {

    display: flex;

    justify-content: space-between;

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--uog-blue);

    margin-bottom: 4px;

}

.comment-user-role {

    font-weight: 400;

    color: var(--text-secondary);

}

.comment-text {

    color: var(--text-primary);

    line-height: 1.4;

}



/* Comment Input Area */

.comment-input-area {

    display: flex;

    gap: 8px;

    align-items: center;

}

.comment-input-box {

    flex: 1;

    border: 1px solid var(--border-color);

    background: #f9fafb;

    padding: 8px 12px;

    border-radius: 20px;

    font-size: 0.85rem;

    outline: none;

    transition: 0.2s;

}

.comment-input-box:focus {

    border-color: var(--uog-blue);

    background: white;

}

.comment-submit-btn {

    background: var(--uog-blue);

    color: white;

    border: none;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

}

.comment-submit-btn:hover {

    background: var(--uog-blue-hover);

    transform: scale(1.08);

}



/* Boosted Micro-interactions & Glassmorphism Transitions */

.sidebar-list li, .sw-card, .student-card, .edu-card {

    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;

}

.sidebar-list li:hover {

    transform: translateX(4px);

}

.sw-card:hover, .student-card:hover, .edu-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

}



/* ─── DIRECTORY FILTER BAR & GLASSMORPHISM ───────────────────────────────────── */

.directory-filter-bar {

    display: flex;

    flex-direction: column;

    gap: 20px;

    background: var(--bg-surface);

    backdrop-filter: var(--glass-blur);

    -webkit-backdrop-filter: var(--glass-blur);

    border: 1px solid var(--border-color);

    padding: 24px;

    border-radius: 16px;

    margin-bottom: 28px;

    box-shadow: var(--shadow-md);

}



.directory-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 8px 10px;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 16px;

    width: 100%;

}



.dir-tab {

    border: none;

    background: transparent;

    padding: 8px 18px;

    border-radius: 20px;

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--text-secondary);

    cursor: pointer;

    white-space: nowrap;

    transition: background 0.2s ease, color 0.2s ease;

    flex-shrink: 0;

}



.dir-tab:hover {

    background: rgba(0, 0, 0, 0.06);

    color: var(--text-primary);

}



.dir-tab.active {

    background: var(--primary-active) !important;

    color: var(--primary-color) !important;

    box-shadow: none !important;

}



/* Dark / themed mode overrides for dir-tab */

:root[data-theme="dark"] .dir-tab:hover,

:root[data-theme="midnight"] .dir-tab:hover,

:root[data-theme="sapphire"] .dir-tab:hover,

:root[data-theme="emerald"] .dir-tab:hover,

:root[data-theme="uog-royal"] .dir-tab:hover,

:root[data-theme="aurora"] .dir-tab:hover {

    background: rgba(255, 255, 255, 0.08) !important;

}



:root[data-theme="dark"] .dir-tab.active,

:root[data-theme="midnight"] .dir-tab.active,

:root[data-theme="sapphire"] .dir-tab.active,

:root[data-theme="emerald"] .dir-tab.active,

:root[data-theme="uog-royal"] .dir-tab.active,

:root[data-theme="aurora"] .dir-tab.active {

    background: rgba(24, 119, 242, 0.22) !important;

    color: #5aabff !important;

}



.directory-selects {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

    width: 100%;

}



.dir-filter-select {

    height: 40px;

    padding: 0 16px;

    border-radius: 8px;

    border: 1px solid var(--border-color);

    font-size: 0.88rem;

    font-weight: 500;

    color: var(--text-primary);

    background: var(--bg-surface-solid);

    outline: none;

    cursor: pointer;

    min-width: 180px;

    transition: all 0.2s ease;

    box-shadow: var(--shadow-sm);

}



.dir-filter-select:hover {

    border-color: var(--uog-blue);

}



.dir-filter-select:focus {

    border-color: var(--uog-blue);

    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);

}



.dir-add-batch-btn {

    height: 40px;

    background: var(--uog-orange);

    color: #1f2937;

    border: none;

    padding: 0 18px;

    border-radius: 8px;

    font-size: 0.88rem;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

    box-shadow: 0 4px 10px rgba(188, 235, 117, 0.15);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.dir-add-batch-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 14px rgba(188, 235, 117, 0.3);

    filter: brightness(1.05);

}



.add-batch-inline-btn {

    border: 1px solid rgba(15, 76, 129, 0.2);

    background: rgba(15, 76, 129, 0.05);

    color: var(--uog-blue);

    width: 38px;

    height: 38px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

}



.add-batch-inline-btn:hover {

    background: var(--uog-blue);

    color: white;

    transform: scale(1.08);

}



/* ─── VIBRANT USER BADGES ────────────────────────────────────────────────────── */

.badge-stat {

    background: rgba(15, 76, 129, 0.08) !important;

    color: var(--uog-blue) !important;

    border: 1px solid rgba(15, 76, 129, 0.2) !important;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 0.72rem;

    display: inline-block;

    margin-top: 4px;

}



.badge-analytics {

    background: rgba(139, 92, 246, 0.08) !important;

    color: #8b5cf6 !important;

    border: 1px solid rgba(139, 92, 246, 0.2) !important;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 0.72rem;

    display: inline-block;

    margin-top: 4px;

}



.badge-faculty {

    background: rgba(245, 130, 32, 0.08) !important;

    color: var(--uog-orange) !important;

    border: 1px solid rgba(245, 130, 32, 0.2) !important;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 0.72rem;

    display: inline-block;

    margin-top: 4px;

}



.badge-batch {

    background: #f3f4f6 !important;

    color: #4b5563 !important;

    border: 1px solid #e5e7eb !important;

    font-weight: 500;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 0.72rem;

    display: inline-block;

    margin-top: 4px;

}



/* ─── GLOW HOVER BORDERS & CARD BOOSTS ───────────────────────────────────────── */

.student-card, .sw-card, .edu-card {

    border: 1px solid rgba(229, 231, 235, 0.7);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.student-card:hover {

    border-color: rgba(15, 76, 129, 0.4);

    box-shadow: 0 0 20px rgba(15, 76, 129, 0.08), 0 10px 15px -3px rgba(0, 0, 0, 0.04);

    transform: translateY(-4px);

}



/* Data Analytics Card hover gets special purple glow */

.student-card.analytics-card:hover {

    border-color: rgba(139, 92, 246, 0.4);

    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.04);

}



/* Faculty Card hover gets orange glow */

.student-card.faculty-card:hover {

    border-color: rgba(245, 130, 32, 0.4);

    box-shadow: 0 0 20px rgba(245, 130, 32, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.04);

}



.sw-card:hover {

    border-color: rgba(245, 130, 32, 0.4);

    box-shadow: 0 0 20px rgba(245, 130, 32, 0.08), 0 10px 15px -3px rgba(0, 0, 0, 0.04);

    transform: translateY(-4px);

}



.edu-card.post:hover {

    border-color: rgba(15, 76, 129, 0.3);

    box-shadow: 0 0 20px rgba(15, 76, 129, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.04);

}



/* Modern Gradient Banner on Sidebar */

.profile-summary {

    background: linear-gradient(135deg, rgba(15, 76, 129, 0.04), rgba(245, 130, 32, 0.04));

    border-bottom: 2px solid rgba(229, 231, 235, 0.5);

}



/* navbar enhancement already applied above */



/* ─── PRIVACY DASHBOARD & PREMIUM CONTROLS ───────────────────────────────────── */

.privacy-dashboard {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 30px;

}



.privacy-card {

    background: rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(229, 231, 235, 0.6);

    border-radius: 16px;

    padding: 24px;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.privacy-card:hover {

    border-color: rgba(15, 76, 129, 0.2);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);

}



.privacy-header {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 20px;

}



.privacy-icon {

    font-size: 1.6rem;

    padding: 12px;

    border-radius: 12px;

    background: rgba(15, 76, 129, 0.05);

    min-width: 50px;

    text-align: center;

}



.privacy-header h3 {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 4px;

}



.privacy-header p {

    font-size: 0.85rem;

    color: var(--text-secondary);

    line-height: 1.4;

}



.privacy-control {

    background: rgba(249, 250, 251, 0.5);

    border: 1px solid var(--border-color);

    padding: 16px 20px;

    border-radius: 12px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.toggle-control span {

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--text-primary);

}



/* Custom switch toggle */

.switch {

    position: relative;

    display: inline-block;

    width: 48px;

    height: 24px;

}



.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #cbd5e1;

    transition: .3s;

    border-radius: 24px;

}



.slider:before {

    position: absolute;

    content: "";

    height: 18px;

    width: 18px;

    left: 3px;

    bottom: 3px;

    background-color: white;

    transition: .3s;

    border-radius: 50%;

}



input:checked + .slider {

    background-color: var(--uog-blue);

    box-shadow: 0 0 8px rgba(15, 76, 129, 0.3);

}



input:checked + .slider:before {

    transform: translateX(24px);

}



/* Custom switch colors matching accents */

.privacy-card:nth-of-type(2) input:checked + .slider {

    background-color: var(--uog-orange);

    box-shadow: 0 0 8px rgba(245, 130, 32, 0.3);

}



.privacy-card:nth-of-type(4) input:checked + .slider {

    background-color: #8b5cf6;

    box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);

}



/* Danger panel styling */

.danger-panel {

    border-color: rgba(239, 68, 68, 0.2);

    background: rgba(254, 242, 242, 0.4);

}



.danger-panel:hover {

    border-color: rgba(239, 68, 68, 0.4);

    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.05);

}



.danger-panel .privacy-icon {

    background: rgba(239, 68, 68, 0.05);

    color: #ef4444;

}



.btn-danger {

    background: #ef4444 !important;

    border-color: #dc2626 !important;

    color: white !important;

    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);

}



.btn-danger:hover {

    background: #dc2626 !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3);

}



/* Specific Accent colors */

.uog-blue-text { color: var(--uog-blue); }

.uog-orange-text { color: var(--uog-orange); }

.blue-text { color: #3b82f6; }

.purple-text { color: #8b5cf6; }

.red-text { color: #ef4444; }



/* ─── SOCIAL PORTAL INTERACTION STYLES ───────────────────────────────────────── */

.feed-sort-bar {

    display: flex;

    align-items: center;

    gap: 8px;

    background: transparent;

    padding: 8px 12px;

    border-bottom: 1px solid var(--border-color);

}

.feed-sort-bar span {

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-right: auto;

}

.sort-btn {

    background: transparent;

    border: 1px solid transparent;

    padding: 4px 10px;

    border-radius: 8px;

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--text-secondary);

    cursor: pointer;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    align-items: center;

    gap: 5px;

}

.sort-btn:hover {

    background: rgba(15, 76, 129, 0.05);

    color: var(--uog-blue);

}

.sort-btn.active {

    background: var(--uog-blue);

    color: white;

    border-color: var(--uog-blue);

    box-shadow: 0 4px 12px rgba(15, 76, 129, 0.25);

}



/* LinkedIn/Facebook type Social Image Grids */

.post-images-grid {

    display: grid;

    gap: 6px;

    border-radius: 12px;

    overflow: hidden;

    margin-top: 12px;

    margin-bottom: 12px;

    border: 1px solid rgba(0, 0, 0, 0.03);

}

.post-images-grid img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    cursor: zoom-in;

}

.post-images-grid img:hover {

    transform: scale(1.02);

}

.post-images-grid.grid-1 {

    grid-template-columns: 1fr;

    max-height: 400px;

}

.post-images-grid.grid-2 {

    grid-template-columns: 1fr 1fr;

    max-height: 280px;

    height: 280px;

}

.post-images-grid.grid-3 {

    grid-template-columns: 1.2fr 1fr;

    grid-template-rows: 1fr 1fr;

    max-height: 340px;

    height: 340px;

}

.post-images-grid.grid-3 img:first-child {

    grid-row: span 2;

}

.post-images-grid.grid-4 {

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 140px 140px;

    max-height: 286px;

    height: 286px;

}

.post-images-grid.grid-more {

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: 120px 120px;

    max-height: 246px;

    height: 246px;

}

.post-images-grid .more-images-overlay {

    position: relative;

    width: 100%;

    height: 100%;

    cursor: pointer;

    overflow: hidden;

}

.post-images-grid .more-images-overlay img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.post-images-grid .more-images-label {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(15, 23, 42, 0.7);

    backdrop-filter: blur(2px);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: 700;

    font-size: 1.5rem;

    transition: all 0.2s ease;

}

.post-images-grid .more-images-overlay:hover .more-images-label {

    background: rgba(15, 23, 42, 0.85);

}



/* Fullscreen Immersive Glassmorphic Lightbox */

.lightbox-modal {

    position: fixed;

    z-index: 10000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background-color: rgba(10, 15, 30, 0.96);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.3s ease;

}

.lightbox-modal.active {

    opacity: 1;

}

.lightbox-container {

    position: relative;

    max-width: 90%;

    max-height: 90%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.lightbox-content {

    margin: auto;

    display: block;

    max-width: 100%;

    max-height: 80vh;

    border-radius: 12px;

    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);

    transform: scale(0.92);

    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.lightbox-modal.active .lightbox-content {

    transform: scale(1);

}

#lightbox-caption {

    margin: 15px auto 0;

    text-align: center;

    color: #e2e8f0;

    font-size: 0.95rem;

    font-weight: 500;

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

    padding: 8px 20px;

    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    max-width: 600px;

}

.lightbox-close {

    position: absolute;

    top: 30px;

    right: 40px;

    color: #f8fafc;

    font-size: 44px;

    font-weight: 300;

    transition: all 0.2s ease;

    cursor: pointer;

    z-index: 10001;

    line-height: 1;

}

.lightbox-close:hover {

    color: var(--uog-orange);

    transform: scale(1.1);

}



/* Bookmark States & Animations */

.interaction-btn.bookmarked {

    color: var(--uog-orange) !important;

}

.interaction-btn.bookmarked i {

    animation: bounceBookmark 0.4s ease;

}

@keyframes bounceBookmark {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.35); }

}



/* Blur Lock For Images */

.locked-image-container {

    position: relative;

    display: inline-block;

    width: 100%;

    max-height: 260px;

    overflow: hidden;

    border-radius: 12px;

    border: 1px dashed rgba(239, 68, 68, 0.3);

    margin-top: 12px;

    margin-bottom: 12px;

}

.locked-image-container img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: blur(14px) grayscale(100%);

    transform: scale(1.06);

    pointer-events: none;

}

.locked-image-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: rgba(15, 23, 42, 0.55);

    backdrop-filter: blur(1px);

    color: white;

    font-size: 0.85rem;

    font-weight: 600;

}



/* ─── PREMIUM COMMUNITY BOOST WAVE 2 ────────────────────────────────────────── */



/* Floating Glassmorphic Bubbles on Login */

.auth-bg {

    position: relative;

    overflow: hidden;

}

.floating-glass-bubble {

    position: absolute;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(15, 76, 129, 0.12) 0%, rgba(245, 130, 32, 0.05) 70%, rgba(255, 255, 255, 0) 100%);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    box-shadow: inset 0 0 20px rgba(255,255,255,0.25), 0 8px 32px rgba(0,0,0,0.05);

    pointer-events: none;

    z-index: 1;

    display: var(--bubble-display, block);

    animation: floatBubble calc(25s / var(--bubble-speed-multiplier, 1)) infinite ease-in-out;

}

.bubble-1 {

    width: calc(300px * var(--bubble-size-multiplier, 1));

    height: calc(300px * var(--bubble-size-multiplier, 1));

    top: -50px;

    left: -100px;

    animation-duration: calc(20s / var(--bubble-speed-multiplier, 1));

}

.bubble-2 {

    width: calc(450px * var(--bubble-size-multiplier, 1));

    height: calc(450px * var(--bubble-size-multiplier, 1));

    bottom: -150px;

    right: -100px;

    animation-duration: calc(28s / var(--bubble-speed-multiplier, 1));

    animation-delay: -5s;

}

.bubble-3 {

    width: calc(200px * var(--bubble-size-multiplier, 1));

    height: calc(200px * var(--bubble-size-multiplier, 1));

    top: 40%;

    right: 10%;

    animation-duration: calc(16s / var(--bubble-speed-multiplier, 1));

    animation-delay: -2s;

}

.bubble-4 {

    width: calc(150px * var(--bubble-size-multiplier, 1));

    height: calc(150px * var(--bubble-size-multiplier, 1));

    bottom: 20%;

    left: 20%;

    animation-duration: calc(22s / var(--bubble-speed-multiplier, 1));

    animation-delay: -8s;

}

@keyframes floatBubble {

    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }

    50% { transform: translateY(-40px) rotate(180deg) scale(1.08); }

}

.edu-login-container {

    position: relative;

    z-index: 10;

}



/* Multi-Reactions Hover Popup */

.appreciation-wrapper {

    position: relative;

    display: inline-block;

}

.reactions-popup {

    position: absolute;

    bottom: 42px;

    left: 0;

    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 30px;

    padding: 6px 14px;

    display: flex;

    gap: 12px;

    box-shadow: 0 10px 32px rgba(15, 76, 129, 0.16), inset 0 1px 0 rgba(255,255,255,0.4);

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px) scale(0.85);

    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    z-index: 100;

}

.appreciation-wrapper:hover .reactions-popup {

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

}

.react-emoji-btn {

    background: transparent;

    border: none;

    font-size: 1.45rem;

    cursor: pointer;

    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    padding: 2px;

}

.react-emoji-btn:hover {

    transform: scale(1.35) translateY(-6px);

}



/* Custom reactions counts display grid */

.post-reactions-display {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.8rem;

    color: var(--text-secondary);

    margin-bottom: 0.75rem;

    border-bottom: 1px solid rgba(15, 76, 129, 0.05);

    padding-bottom: 0.6rem;

}

.reaction-bubbles {

    display: inline-flex;

    align-items: center;

}

.reaction-bubble-icon {

    font-size: 0.95rem;

    margin-right: -5px;

    border: 1.5px solid var(--bg-surface);

    border-radius: 50%;

    background: white;

    width: 21px;

    height: 21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-sm);

    z-index: 2;

}



/* Connect button inside directory card */

.connect-btn {

    width: 100%;

    margin-top: 10px;

    background: transparent;

    color: var(--uog-blue);

    border: 1px solid rgba(15, 76, 129, 0.3);

    padding: 8px;

    font-size: 0.82rem;

    font-weight: 600;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.25s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

}

.connect-btn:hover {

    background: var(--uog-blue);

    color: white;

    border-color: var(--uog-blue);

    box-shadow: 0 4px 12px rgba(15, 76, 129, 0.15);

}

.connect-btn.connected {

    background: rgba(16, 185, 129, 0.08);

    color: var(--success);

    border-color: rgba(16, 185, 129, 0.3);

    cursor: default;

    box-shadow: none;

}



/* Sidebar Badges styling */

.sidebar-list li {

    display: flex;

    align-items: center;

    gap: 12px;

}

.sidebar-badge {

    margin-left: auto;

    background: #e4e6eb;

    color: #050505;

    font-size: 0.7rem;

    font-weight: 700;

    padding: 2px 8px;

    border-radius: 12px;

    border: none;

    transition: all 0.3s ease;

}

.sidebar-list li.active-item .sidebar-badge {

    background: var(--primary-color);

    color: #ffffff;

    border-color: var(--primary-color);

}

.sidebar-badge.pulse-badge {

    animation: badgePulse 0.4s ease-out;

}

@keyframes badgePulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.3); background: var(--primary-color); color: white; }

    100% { transform: scale(1); }

}



/* Composer Elevated actions button states */

.create-bottom {

    justify-content: space-between;

}

.create-action {

    flex: 1;

    justify-content: center;

    background: #f9fafb;

    border: 1px solid var(--border-color);

    margin: 0 4px;

    border-radius: 10px;

    padding: 10px;

    font-weight: 600;

    font-size: 0.85rem;

    transition: all 0.25s ease;

}

.create-action i {

    font-size: 1.05rem;

}

.create-action#open-compose-text:hover {

    background: rgba(15, 76, 129, 0.06);

    color: var(--uog-blue);

    border-color: rgba(15, 76, 129, 0.2);

    box-shadow: 0 4px 10px rgba(15, 76, 129, 0.08);

    transform: translateY(-2px);

}

.create-action#open-compose-doc:hover {

    background: rgba(66, 183, 42, 0.06);

    color: var(--success);

    border-color: rgba(66, 183, 42, 0.2);

    box-shadow: 0 4px 10px rgba(66, 183, 42, 0.08);

    transform: translateY(-2px);

}

.create-action#open-compose-sw:hover {

    background: rgba(69, 189, 98, 0.06);

    color: var(--uog-orange);

    border-color: rgba(69, 189, 98, 0.2);

    box-shadow: 0 4px 10px rgba(69, 189, 98, 0.08);

    transform: translateY(-2px);

}



/* ─── NEO-GLOW DARK/LIGHT MODE VARIABLES & TRANSITIONS ───────────────────────── */

:root {

    --theme-transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;

}



body, nav, aside, main, div, input, select, textarea, button, p, span, h1, h2, h3, h4, li, a {

    transition: var(--theme-transition);

}



:root[data-theme="dark"] {

    --bg-main: #0b0f19;

    --bg-surface: #111827;

    --text-primary: #f9fafb;

    --text-secondary: #9ca3af;

    --border-color: #1f2937;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);

    

    /* Neon enhancements in dark mode */

    --neon-blue-glow: 0 0 15px rgba(59, 130, 246, 0.35);

    --neon-orange-glow: 0 0 15px rgba(245, 130, 32, 0.35);

    --neon-purple-glow: 0 0 15px rgba(139, 92, 246, 0.35);

}



/* Dark mode overrides for hardcoded colors */

:root[data-theme="dark"] .edu-input, 

:root[data-theme="dark"] .edu-select, 

:root[data-theme="dark"] 



:root[data-theme="dark"] .edu-input:focus, 

:root[data-theme="dark"] .edu-select:focus, 

:root[data-theme="dark"] .edu-textarea:focus {

    background: #111827 !important;

    border-color: var(--uog-blue) !important;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;

}



:root[data-theme="dark"] 



:root[data-theme="dark"] .edu-navbar {

    background: #111827 !important;

    border-bottom-color: #1f2937 !important;

}



:root[data-theme="dark"] .edu-sidebar-left,

:root[data-theme="dark"] .edu-sidebar-right {

    background: #111827 !important;

    border-right-color: #1f2937 !important;

    border-left-color: #1f2937 !important;

}



:root[data-theme="dark"] .edu-sidebar-right {

    background: #0f131f !important;

}



:root[data-theme="dark"] .notice-board, 

:root[data-theme="dark"] .stats-card,

:root[data-theme="dark"] .edu-card {

    background: #111827 !important;

    border-color: #1f2937 !important;

}



:root[data-theme="dark"] .create-top input {

    background: #1f2937 !important;

    border-color: #374151 !important;

    color: #f9fafb !important;

}

:root[data-theme="dark"] .create-top input:hover {

    background: #111827 !important;

}



:root[data-theme="dark"] .create-bottom {

    border-top-color: #1f2937 !important;

}



:root[data-theme="dark"] .create-action {

    background: #1f2937 !important;

    border-color: #374151 !important;

    color: #9ca3af !important;

}



:root[data-theme="dark"] .nav-search {

    background: #1f2937 !important;

}

:root[data-theme="dark"] .nav-search:focus-within {

    background: #111827 !important;

}



:root[data-theme="dark"] .notif-dropdown {

    background: #111827 !important;

    border-color: #1f2937 !important;

}

:root[data-theme="dark"] .notif-dropdown h4 {

    background: #1f2937 !important;

    border-bottom-color: #1f2937 !important;

}

:root[data-theme="dark"] .notif-dropdown li {

    border-bottom-color: #1f2937 !important;

}

:root[data-theme="dark"] .notif-dropdown li:hover {

    background: #1f2937 !important;

}



:root[data-theme="dark"] .sidebar-list li:hover {

    background: #1f2937 !important;

}



:root[data-theme="dark"] .upload-btn {

    background: #1f2937 !important;

    color: #f9fafb !important;

    border-color: #374151 !important;

}



:root[data-theme="dark"] .add-to-post {

    border-color: #1f2937 !important;

    background: rgba(31, 41, 55, 0.4) !important;

}



:root[data-theme="dark"] .member-phone.private {

    background: rgba(31, 41, 55, 0.4) !important;

    border-color: rgba(255, 255, 255, 0.05) !important;

    color: #6b7280 !important;

}



:root[data-theme="dark"] .profile-chip {

    background: #1f2937 !important;

    border-color: #374151 !important;

    color: #f9fafb !important;

}



:root[data-theme="dark"] .post-card {

    background: #111827 !important;

    border-color: #1f2937 !important;

}



:root[data-theme="dark"] .comment-section {

    background: #0b0f19 !important;

    border-top-color: #1f2937 !important;

}

:root[data-theme="dark"] .comment-item {

    border-bottom-color: #1f2937 !important;

}



:root[data-theme="dark"] .post-actions {

    border-top-color: #1f2937 !important;

    border-bottom-color: #1f2937 !important;

}



:root[data-theme="dark"] .notice-header {

    background: rgba(59, 130, 246, 0.08) !important;

}

:root[data-theme="dark"] .notice-list li {

    border-bottom-color: #1f2937 !important;

}



:root[data-theme="dark"] 



:root[data-theme="dark"] .edu-privacy-note {

    background: rgba(6, 78, 59, 0.2) !important;

    border-color: rgba(5, 150, 105, 0.3) !important;

    color: #34d399 !important;

}



:root[data-theme="dark"] .lightbox-modal {

    background: rgba(0, 0, 0, 0.95) !important;

}



/* ─── PROFILE COVER CARD & SIDEBAR REDESIGN ────────────────────────────────── */

.profile-summary {

    position: relative;

    padding: 0 0 1.25rem 0 !important;

    overflow: hidden;

    border-radius: var(--radius-lg);

    border: 1px solid var(--border-color);

    background: var(--bg-surface-solid);

    margin: 10px;

    box-shadow: var(--shadow-sm);

    text-align: center;

}



.profile-cover-banner {

    width: 100%;

    height: 48px;

    background: linear-gradient(135deg, var(--uog-blue) 0%, var(--zai-accent) 100%);

    position: relative;

    z-index: 1;

}



.avatar-upload-container {

    position: relative;

    margin-top: -28px !important;

    z-index: 2;

    display: inline-block;

    margin-bottom: 6px !important;

}



.profile-tagline {

    font-size: 0.8rem;

    color: var(--text-secondary);

    margin: 8px 15px 0;

    line-height: 1.4;

    font-style: italic;

    font-weight: 500;

    max-width: 90%;

    word-break: break-word;

}



/* ─── ONLINE HEARTBEAT INDICATION ──────────────────────────────────────────── */

.avatar-small, .avatar-large {

    position: relative;

}



.online-pulse-dot {

    position: absolute;

    bottom: 2px;

    right: 2px;

    width: 12px;

    height: 12px;

    background-color: var(--success);

    border-radius: 50%;

    border: 2px solid var(--bg-surface);

    z-index: 5;

    box-shadow: 0 0 8px var(--success);

}



.online-pulse-dot::after {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 2px solid var(--success);

    animation: active-dot-pulse 1.8s infinite ease-in-out;

    opacity: 0.8;

}



@keyframes active-dot-pulse {

    0% {

        transform: scale(0.8);

        opacity: 1;

    }

    100% {

        transform: scale(2.4);

        opacity: 0;

    }

}



/* ─── PROGRAM-SPECIFIC HOVER NEON GLOWS ──────────────────────────────────────── */

.student-card {

    transition: var(--theme-transition), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.student-card:hover {

    transform: translateY(-5px);

}



/* BS Statistics card glow */

.student-card.stat-card:hover {

    border-color: var(--uog-blue) !important;

    box-shadow: var(--neon-blue-glow, 0 10px 20px rgba(15, 76, 129, 0.15)) !important;

}



/* BS Data Analytics card glow */

.student-card.analytics-card:hover {

    border-color: var(--uog-orange) !important;

    box-shadow: var(--neon-orange-glow, 0 10px 20px rgba(245, 130, 32, 0.15)) !important;

}



/* Faculty card glow */

.student-card.faculty-card:hover {

    border-color: #8b5cf6 !important;

    box-shadow: var(--neon-purple-glow, 0 10px 20px rgba(139, 92, 246, 0.15)) !important;

}

.student-card.faculty-interactive-card:active {

    transform: scale(0.98) translateY(-5px);

}



/* Glassmorphic theme switcher button in Navbar */

.theme-switch-btn {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    background: rgba(15, 76, 129, 0.05);

    border: 1px solid rgba(15, 76, 129, 0.1);

    color: var(--text-secondary);

    font-size: 1rem;

    transition: all 0.3s ease;

}



.theme-switch-btn:hover {

    background: var(--uog-blue);

    color: white;

    transform: rotate(15deg);

    box-shadow: 0 0 12px rgba(15, 76, 129, 0.2);

}



:root[data-theme="dark"] .theme-switch-btn {

    background: rgba(59, 130, 246, 0.1);

    border-color: rgba(59, 130, 246, 0.2);

}



:root[data-theme="dark"] .theme-switch-btn:hover {

    background: var(--uog-blue);

    color: white;

}



/* Sidebar Tweaks */

.edu-body {

    padding: 0;

    gap: 0;

}



.edu-sidebar-left {

    border-radius: 0;

    border-right: 1px solid var(--border-color) !important;

    border: none;

}



.edu-sidebar-right {

    border-radius: 0;

    border-left: 1px solid var(--border-color) !important;

    border: none;

    background: var(--bg-surface) !important; /* match left sidebar premium glass container */

}



/* Glassmorphic buttons */

.edu-btn-post, .edu-btn-signup, .edu-btn-login, 



/* View transitions */

.view {

    animation: slideIn 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ─── RESPONSIVE DESIGN & MEDIA QUERIES ───────────────────────────────────── */

/* ─── MOBILE TOP BAR (hidden on desktop) ─────────────────────────────────── */

.mobile-topbar { display: none; }

.mobile-search-bar { display: none; }

.mobile-bottom-nav { display: none; }

.mobile-overlay { display: none; }

.mobile-drawer { display: none; }



/* ─── MOBILE OVERLAY & DRAWER ────────────────────────────────────────────── */

.mobile-overlay {

    position: fixed; inset: 0;

    background: rgba(0,0,0,0.45);

    z-index: 300;

    backdrop-filter: blur(2px);

    animation: fadeIn 0.2s ease;

}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



.mobile-drawer {

    position: fixed;

    bottom: 0; left: 0; right: 0;

    background: linear-gradient(135deg, #182212 0%, #0c1208 100%);

    border-radius: 24px 24px 0 0;

    z-index: 400;

    padding: 12px 20px 32px;

    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);

    transform: translateY(100%);

    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);

    border: 1px solid rgba(188, 250, 117, 0.15);

    border-bottom: none;

}

.mobile-drawer.active {

    transform: translateY(0) !important;

}

.mobile-drawer-handle {

    width: 40px; height: 4px;

    background: rgba(188, 250, 117, 0.3);

    border-radius: 99px;

    margin: 0 auto 16px;

}

.mobile-drawer-title {

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--zai-accent);

    margin-bottom: 20px;

    text-align: center;

    letter-spacing: 0.02em;

    font-family: 'Outfit', sans-serif;

}

.mobile-drawer-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}

.mob-drawer-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px 4px;

    border-radius: 14px;

    transition: background 0.15s;

    font-family: 'Outfit', sans-serif;

}

.mob-drawer-item:active { background: rgba(188, 250, 117, 0.1); }

.mob-drawer-item span {

    font-size: 0.75rem;

    font-weight: 500;

    color: #e5e7eb;

}

.mob-drawer-icon {

    width: 54px; height: 54px;

    border-radius: 16px;

    display: flex; align-items: center; justify-content: center;

    font-size: 1.4rem;

    transition: transform 0.2s;

}

.mob-drawer-item:active .mob-drawer-icon { transform: scale(0.9); }



/* Mobile Profile Sheet */

.mob-profile-header {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 4px 0 20px;

    border-bottom: 1px solid rgba(188, 250, 117, 0.1);

    margin-bottom: 16px;

}

.mob-profile-avatar {

    width: 64px; height: 64px;

    font-size: 1.6rem;

    flex-shrink: 0;

}

.mob-profile-name {

    font-size: 1.1rem;

    font-weight: 700;

    color: #f3f4f6;

}

.mob-profile-role {

    font-size: 0.8rem;

    color: #9ca3af;

    margin-top: 2px;

}

.mob-profile-actions {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.mob-profile-btn {

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding: 14px 16px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(188, 250, 117, 0.1);

    border-radius: 14px;

    font-family: 'Outfit', sans-serif;

    font-size: 0.95rem;

    font-weight: 500;

    color: #e5e7eb;

    cursor: pointer;

    transition: background 0.15s, transform 0.15s;

    text-align: left;

}

.mob-profile-btn i { font-size: 1rem; color: var(--zai-accent); width: 20px; text-align: center; }

.mob-profile-btn:active { background: color-mix(in srgb, var(--zai-accent) 15%, transparent); color: var(--zai-accent); transform: scale(0.98); }

.mob-profile-btn.danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.2); }

.mob-profile-btn.danger i { color: #ef4444; }



.mob-avatar-top {

    width: 34px; height: 34px;

    font-size: 0.9rem;

    border: 2px solid var(--uog-blue);

}





/* ─── TABLET ─────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    .edu-login-container { width: 90%; min-height: auto; }

    .edu-body { padding: 1rem; gap: 1rem; }

    .edu-sidebar-left, .edu-sidebar-right { width: 220px; }

    .edu-main { padding: 1rem; }

    .create-bottom { flex-wrap: wrap; }

}



/* ─── MOBILE (max 768px) — Social App Style ───────────────────────────────── */

@media (max-width: 768px) {



    /* === GLOBAL === */

    body { height: auto; overflow: visible; background: var(--bg-main); }

    .view { display: none; }

    .view.active, #workspace-view.active { height: auto; min-height: 100vh; display: block; }



    /* === AUTH PAGE — Clean & centered === */

    .auth-bg { background: linear-gradient(160deg, #0f4c81 0%, #1e3a8a 50%, #0f4c81 100%); padding: 0; align-items: flex-end; }

    .edu-login-container {

        flex-direction: column;

        width: 100%;

        max-width: 100%;

        margin: 0;

        border-radius: 24px 24px 0 0;

        min-height: 75vh;

        box-shadow: 0 -10px 40px rgba(0,0,0,0.2);

    }

    .edu-left {

        display: none; /* Hide branding panel on mobile, show just form */

    }

    .edu-right {

        flex: 1;

        padding: 2rem 1.5rem;

        border-radius: 24px 24px 0 0;

    }

    .edu-right::before {

        content: '🎓 UOG Statistics Portal';

        display: block;

        font-size: 1.3rem;

        font-weight: 700;

        color: var(--uog-blue);

        margin-bottom: 1.5rem;

        text-align: center;

    }



    /* === HIDE DESKTOP NAVBAR & SIDEBAR on mobile === */

    .edu-navbar { display: none !important; }

    .edu-sidebar-left { display: none !important; }

    .edu-sidebar-right { display: none !important; }



    /* === MOBILE TOP BAR === */

    .mobile-topbar {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 10px 16px;

        background: white;

        border-bottom: 1px solid #e5e7eb;

        position: sticky;

        top: 0;

        z-index: 100;

        box-shadow: 0 2px 8px rgba(0,0,0,0.06);

    }

    .mobile-topbar-left { display: flex; align-items: center; gap: 10px; }

    .mobile-topbar-right { display: none !important; }

    .mobile-icon-btn {

        background: none;

        border: none;

        cursor: pointer;

        font-size: 1.1rem;

        color: var(--text-secondary);

        position: relative;

        padding: 6px;

        border-radius: 50%;

        transition: background 0.2s;

    }

    .mobile-icon-btn:active { background: #f3f4f6; }

    .mob-badge {

        position: absolute;

        top: 0; right: 0;

        background: #ef4444;

        color: white;

        font-size: 0.6rem;

        width: 16px; height: 16px;

        border-radius: 50%;

        display: flex; align-items: center; justify-content: center;

        font-weight: 700;

    }



    /* === MOBILE SEARCH BAR (slide down) === */

    .mobile-search-bar {

        display: none;

        padding: 8px 16px;

        background: white;

        border-bottom: 1px solid #e5e7eb;

        animation: slideDown 0.2s ease;

    }

    .mobile-search-bar.active { display: flex; }

    @keyframes slideDown {

        from { opacity: 0; transform: translateY(-8px); }

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

    }



    /* === LAYOUT BODY === */

    .edu-body {

        flex-direction: column;

        padding: 0;

        gap: 0;

        overflow-y: auto;

        padding-bottom: 80px; /* space for bottom nav */

    }

    .edu-main {

        width: 100% !important;

        height: auto !important;

        overflow: visible !important;

        padding: 12px 12px;

        border-radius: 0;

        border: none !important;

    }



    /* === VIEW HEADER === */

    .view-header { margin-bottom: 12px; }

    .view-header h2 { font-size: 1.1rem; }

    .view-header p  { font-size: 0.8rem; }



    /* === CREATE POST CARD === */

    .create-post-card {

        border-radius: 16px;

        padding: 12px;

        margin-bottom: 12px;

    }

    .create-top { gap: 10px; }

    .create-input { font-size: 0.9rem; padding: 8px 12px; }

    .create-bottom { flex-wrap: wrap; gap: 6px; }

    .create-bottom button, .create-bottom label { font-size: 0.8rem; padding: 6px 10px; }



    /* === FEED CARDS === */

    .post {

        border-radius: 16px;

        padding: 14px;

        margin-bottom: 10px;

        box-shadow: 0 2px 8px rgba(0,0,0,0.06);

    }

    .post-header { gap: 10px; }

    .post-user-name { font-size: 0.95rem; }

    .post-meta { font-size: 0.75rem; }

    .post-body { font-size: 0.9rem; line-height: 1.5; }

    .post-actions {

        display: flex;

        flex-direction: row;

        gap: 6px;

        flex-wrap: wrap;

        padding-top: 10px;

    }

    .post-actions button {

        flex: 1;

        min-width: 60px;

        font-size: 0.78rem;

        padding: 7px 4px;

        border-radius: 10px;

        justify-content: center;

    }



    /* === COMPOSE MODAL === */

    

    

    .edu-row { flex-direction: column; }



    /* === DIRECTORY CARDS === */

    .directory-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    .student-card { padding: 12px 10px; border-radius: 14px; }

    .student-card .card-name { font-size: 0.9rem; }

    .directory-filter-bar { padding: 16px; gap: 12px; }

    .directory-tabs { border-bottom: 1px solid var(--border-color); padding-bottom: 8px; gap: 6px 8px; }

    .dir-tab { font-size: 0.78rem; padding: 6px 12px; }

    .directory-selects { gap: 8px; }

    .dir-filter-select { flex: 1; min-width: 0; height: 38px; font-size: 0.82rem; }

    .dir-add-batch-btn { flex: 1; justify-content: center; height: 38px; font-size: 0.82rem; padding: 0 12px; }



    /* === SOFTWARE GRID === */

    .software-grid { grid-template-columns: 1fr !important; }

    .sw-card { border-radius: 14px; }



    /* === SORT BAR === */

    .feed-sort-bar { padding: 8px 12px; border-radius: 12px; font-size: 0.8rem; }

    .sort-btn { padding: 5px 12px; font-size: 0.78rem; }



    /* === ANALYTICS GRID === */

    #analytics-container { padding: 12px; }

    .charts-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    .analytics-card { min-height: 260px; border-radius: 14px; padding: 1rem; }

    .analytics-card:hover { transform: none; }



    /* === PRIVACY DASHBOARD === */

    .privacy-grid { grid-template-columns: 1fr !important; }



    /* === IMAGES GRID === */

    .post-images-grid.grid-3,

    .post-images-grid.grid-4,

    .post-images-grid.grid-more {

        grid-template-columns: 1fr 1fr;

        height: auto;

        max-height: none;

    }



    /* === MOBILE DRAWERS & OVERLAY === */

    .mobile-overlay { display: none; }

    .mobile-overlay.active { display: block; }

    .mobile-drawer  { display: block; }

    .mobile-search-bar {

        display: none;

        align-items: center;

        gap: 10px;

        padding: 10px 16px;

        background: white;

        border-bottom: 1px solid #e5e7eb;

        position: sticky;

        top: 56px;

        z-index: 99;

        animation: slideDown 0.2s ease;

    }

    .mobile-search-bar.active { display: flex; }



    /* === MOBILE BOTTOM NAV === */

    .mobile-bottom-nav {

        display: flex;

        position: fixed;

        bottom: 0; left: 0; right: 0;

        background: rgba(17, 26, 12, 0.95);

        backdrop-filter: blur(12px);

        border-top: 1px solid rgba(188, 250, 117, 0.15);

        padding: 6px 0 env(safe-area-inset-bottom, 6px);

        z-index: 200;

        box-shadow: 0 -4px 30px rgba(0,0,0,0.5);

        justify-content: space-around;

        align-items: center;

    }

    .mob-nav-btn {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 3px;

        background: none;

        border: none;

        cursor: pointer;

        color: #9ca3af;

        font-size: 0.65rem;

        font-family: 'Outfit', sans-serif;

        font-weight: 500;

        padding: 6px 14px;

        border-radius: 12px;

        transition: color 0.2s, background 0.2s;

        min-width: 52px;

    }

    .mob-nav-btn i { font-size: 22px; display: block; line-height: 1; transition: transform 0.2s; }

    .mob-nav-btn span:not(.mob-nav-icon-wrap):not(.mob-nav-dot):not(.chat-badge) {

        display: block;

        font-size: 0.65rem;

        line-height: 1.2;

        white-space: nowrap;

    }

    .mob-nav-btn:active i { transform: scale(0.88); }

    .mob-nav-btn.active-mob { color: var(--zai-accent); }

    .mob-nav-btn.active-mob i { color: var(--zai-accent); }



    /* === CENTER "+" COMPOSE BUTTON === */

    .mob-compose-btn {

        background: linear-gradient(135deg, var(--zai-accent), var(--zai-accent-hover));

        color: #111a0c !important;

        border-radius: 50% !important;

        width: 52px; height: 52px;

        padding: 0;

        min-width: 52px;

        box-shadow: 0 4px 14px color-mix(in srgb, var(--zai-accent) 35%, transparent);

        margin-bottom: 4px;

    }

    .mob-compose-btn i { font-size: 1.4rem; color: #0c1208 !important; }

    .mob-compose-btn span { display: none; }

}





/* ─── ANALYTICS STYLES ───────────────────────────────────────────────────── */

.analytics-card {

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 16px;

    padding: 1.5rem;

    box-shadow: var(--shadow-md);

    transition: transform 0.3s, box-shadow 0.3s;

    min-height: 300px;

}

.analytics-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);

}



/* ─── SOCIAL PORTAL STORIES / STATUS BUBBLES ───────────────────────────────── */

.status-stories-container {

    display: flex;

    gap: 10px;

    padding: 10px 12px;

    overflow-x: auto;

    scrollbar-width: none;

    border-bottom: 1px solid var(--border-color);

    background: var(--bg-surface-solid);

}

.status-stories-container::-webkit-scrollbar {

    display: none; /* Safari and Chrome */

}

.status-bubble {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    cursor: pointer;

    min-width: 58px;

    position: relative;

    user-select: none;

}

.status-avatar-ring {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 3px;

    background: var(--border-color);

    transition: transform 0.2s ease;

    position: relative;

}

.status-bubble.active-story .status-avatar-ring {

    background: linear-gradient(45deg, #10b981, #3b82f6);

}

.status-bubble:hover .status-avatar-ring {

    transform: scale(1.05);

}

.status-avatar {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    border: 2px solid var(--bg-surface-solid);

    background: var(--bg-surface-solid);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}

.status-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

    100% { transform: scale(1); opacity: 0.6; }

}

.status-bubble:hover .status-avatar-ring {

    transform: scale(1.06);

}

.status-avatar {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    border: 2px solid var(--bg-surface);

    overflow: hidden;

}

.status-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.status-label {

    font-size: 0.72rem;

    font-weight: 600;

    color: var(--text-secondary);

    max-width: 74px;

    text-align: center;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

}

.status-bubble:hover .status-label {

    color: var(--text-primary);

}

.status-add-btn {

    position: absolute;

    bottom: 22px;

    right: 6px;

    background: var(--zai-accent) !important;

    color: #111827 !important;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    border: 2px solid var(--bg-surface);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    font-weight: bold;

    box-shadow: 0 2px 5px rgba(0,0,0,0.15);

    cursor: pointer;

    transition: transform 0.2s ease, background 0.2s ease;

}

.status-add-btn:hover {

    transform: scale(1.2);

    background: #ffffff !important;

}



/* Story Viewer Modal */



.story-viewer-modal.active {

    display: flex !important;

}



.story-progress-bar {

    width: 100%;

    height: 4px;

    background: rgba(255,255,255,0.15);

    border-radius: 2px;

    margin-bottom: 20px;

    overflow: hidden;

    position: relative;

}

.story-progress-fill {

    height: 100%;

    width: 0;

    background: linear-gradient(to right, var(--uog-blue), var(--uog-orange));

    transition: width 0.1s linear;

}

.story-user-info {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

}

.story-user-desc h4 {

    margin: 0;

    font-size: 1rem;

    font-weight: 700;

    color: #f8fafc;

}

.story-user-desc p {

    margin: 2px 0 0;

    font-size: 0.75rem;

    color: #94a3b8;

}

.story-text-content {

    background: radial-gradient(circle at top right, rgba(15, 76, 129, 0.2), rgba(245, 130, 32, 0.1));

    border: 1px solid rgba(255,255,255,0.05);

    padding: 2.5rem 1.75rem;

    border-radius: 16px;

    text-align: center;

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.6;

    color: #f1f5f9;

    margin-bottom: 24px;

    min-height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    word-break: break-word;

    text-shadow: 0 2px 8px rgba(0,0,0,0.3);

}



.story-close-btn:hover {

    background: rgba(255,255,255,0.25);

}



/* ─── LINKEDIN HOVER REACTIONS ────────────────────────────────────────────── */

.reaction-container {

    position: relative;

    display: inline-block;

}

.appreciation-btn-wrapper {

    position: relative;

}

.reactions-popover {

    position: absolute;

    bottom: 100%;

    left: 0;

    background: var(--bg-surface);

    border: 1px solid var(--border-color);

    border-radius: 30px;

    padding: 6px 12px;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.05);

    display: flex;

    gap: 8px;

    z-index: 500;

    margin-bottom: 8px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px) scale(0.95);

    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;

    backdrop-filter: blur(8px);

}

.appreciation-btn-wrapper:hover .reactions-popover,

.reactions-popover:hover {

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

}

.reaction-emoji-btn {

    background: none;

    border: none;

    font-size: 1.6rem;

    cursor: pointer;

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    padding: 2px 4px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

.reaction-emoji-btn:hover {

    transform: scale(1.3) translateY(-4px);

}

.reaction-emoji-btn::before {

    content: attr(data-tooltip);

    position: absolute;

    bottom: 100%;

    background: #1e293b;

    color: white;

    font-size: 0.65rem;

    font-weight: 600;

    padding: 3px 8px;

    border-radius: 4px;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transform: translateY(4px);

    transition: 0.15s;

    pointer-events: none;

}

.reaction-emoji-btn:hover::before {

    opacity: 1;

    visibility: visible;

    transform: translateY(-4px);

}



/* Custom appreciation icons styling */

.btn-reacted-like { color: var(--uog-blue) !important; font-weight: bold; }

.btn-reacted-love { color: #ef4444 !important; font-weight: bold; }

.btn-reacted-celebrate { color: #f59e0b !important; font-weight: bold; }

.btn-reacted-insight { color: #10b981 !important; font-weight: bold; }

.btn-reacted-respect { color: #8b5cf6 !important; font-weight: bold; }



/* ─── LIVE POST POLLS ──────────────────────────────────────────────────────── */

.post-poll-container {

    background: rgba(15, 76, 129, 0.02);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 16px;

    margin: 12px 0;

}

.post-poll-question {

    font-weight: 600;

    color: var(--text-primary);

    font-size: 0.95rem;

    margin-bottom: 12px;

}

.post-poll-option {

    position: relative;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 10px 14px;

    margin-bottom: 8px;

    cursor: pointer;

    overflow: hidden;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: var(--bg-surface);

    transition: border-color 0.2s, background 0.2s;

    user-select: none;

}

.post-poll-option:hover {

    border-color: var(--uog-blue);

}

.post-poll-bar {

    position: absolute;

    left: 0; top: 0; bottom: 0;

    background: rgba(15, 76, 129, 0.07);

    border-right: 2px solid var(--uog-blue);

    z-index: 1;

    transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.post-poll-option.voted-option {

    border-color: rgba(15, 76, 129, 0.4);

    background: rgba(15, 76, 129, 0.02);

}

.post-poll-option.voted-option .post-poll-bar {

    background: rgba(15, 76, 129, 0.12);

}

.post-poll-text {

    position: relative;

    z-index: 2;

    font-size: 0.88rem;

    font-weight: 500;

    color: var(--text-primary);

}

.post-poll-percent {

    position: relative;

    z-index: 2;

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--uog-blue);

}

.post-poll-meta {

    font-size: 0.75rem;

    color: var(--text-secondary);

    margin-top: 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Compose Poll UI */

.poll-compose-trigger {

    background: none;

    border: none;

    color: var(--text-secondary);

    font-size: 0.85rem;

    font-weight: 500;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 8px;

    transition: color 0.2s;

}

.poll-compose-trigger:hover {

    color: var(--uog-blue);

}

.poll-builder-ui {

    background: rgba(15, 76, 129, 0.02);

    border: 1px dashed var(--border-color);

    border-radius: 8px;

    padding: 12px;

    margin: 10px 0;

}

.poll-builder-option-row {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

}

.poll-builder-option-row input {

    margin-bottom: 0 !important;

}

.remove-poll-opt-btn {

    background: none;

    border: none;

    color: #ef4444;

    cursor: pointer;

    padding: 6px;

    font-size: 0.9rem;

}



/* ─── SECURITY AUDIT LOGS ─────────────────────────────────────────────────── */

.security-card-title {

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 12px;

}

.security-logs-table-wrapper {

    width: 100%;

    overflow-x: auto;

    border: 1px solid var(--border-color);

    border-radius: 12px;

    background: var(--bg-surface);

}

.security-logs-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.8rem;

    text-align: left;

}

.security-logs-table th {

    background: rgba(15, 76, 129, 0.03);

    color: var(--text-primary);

    font-weight: 700;

    padding: 12px 16px;

    border-bottom: 1px solid var(--border-color);

}

.security-logs-table td {

    padding: 12px 16px;

    border-bottom: 1px solid var(--border-color);

    color: var(--text-secondary);

}

.security-logs-table tr:last-child td {

    border-bottom: none;

}

.security-badge {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 12px;

    font-size: 0.72rem;

    font-weight: 600;

}

.security-badge.badge-success { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.security-badge.badge-info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.security-badge.badge-warning { background: rgba(245, 130, 32, 0.1); color: var(--uog-orange); }

.security-badge.badge-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; }



/* ─── PRIVACY SETTINGS AUTO-LOGOUT ────────────────────────────────────────── */

.privacy-control select.edu-select {

    font-family: 'Outfit', sans-serif;

    border-radius: 8px;

    font-size: 0.85rem;

}



/* ─── DEPARTMENT ANALYTICS PORTIONS ───────────────────────────────────────── */

.analytics-tab {

    background: transparent;

    border: none;

    outline: none;

    color: var(--text-secondary);

    padding: 8px 16px;

    font-size: 0.85rem;

    font-weight: 600;

    border-radius: 6px;

    cursor: pointer;

    transition: background 0.2s, color 0.2s;

    font-family: 'Outfit', sans-serif;

}

.analytics-tab.active {

    background: var(--uog-blue);

    color: #fff;

    box-shadow: 0 4px 10px rgba(15, 76, 129, 0.2);

}

.analytics-tab:hover:not(.active) {

    background: rgba(15, 76, 129, 0.08);

    color: var(--uog-blue);

}

.analytics-tab-content {

    animation: fadeIn 0.4s ease;

}

.kpi-card {

    transition: transform 0.2s, box-shadow 0.2s;

}

.kpi-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-hover);

}



/* Thin premium scrollbars for sidebars */

.edu-sidebar-left {

    scrollbar-width: thin;

    scrollbar-color: rgba(15, 76, 129, 0.15) transparent;

}

.edu-sidebar-left::-webkit-scrollbar {

    width: 5px;

}

.edu-sidebar-left::-webkit-scrollbar-thumb {

    background: rgba(15, 76, 129, 0.15);

    border-radius: 4px;

}

.edu-sidebar-left::-webkit-scrollbar-track {

    background: transparent;

}



/* ──────────────────────────────────────────

   FORCED LAYOUT MODES (DESKTOP / MOBILE SIMULATION)

   ────────────────────────────────────────── */



/* 1. Simulation of Mobile Mode on Desktop Screen */

@media (min-width: 769px) {

    body.forced-mobile-mode {

        background: radial-gradient(circle at top right, rgba(15, 76, 129, 0.45), rgba(245, 130, 32, 0.25)), #0b0f19 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        min-height: 100vh !important;

        height: 100vh !important;

        overflow: hidden !important;

        padding: 0 !important;

        margin: 0 !important;

    }

    

    body.forced-mobile-mode #workspace-view {

        width: 412px !important;

        height: 840px !important;

        max-height: 95vh !important;

        border-radius: 40px !important;

        border: 12px solid rgba(255, 255, 255, 0.18) !important;

        outline: 4px solid #1e293b !important;

        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.15) !important;

        overflow: hidden !important;

        position: relative !important;

        background: var(--bg-main) !important;

        display: block !important;

        animation: phoneIntro 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    }

    

    body.forced-mobile-mode #workspace-view::before {

        content: '';

        position: absolute;

        top: 0;

        left: 50%;

        transform: translateX(-50%);

        width: 140px;

        height: 24px;

        background: #1e293b;

        border-radius: 0 0 16px 16px;

        z-index: 500;

        pointer-events: none;

    }

}



/* Force Mobile styles when .forced-mobile-mode is active */

body.forced-mobile-mode .edu-navbar { display: none !important; }

body.forced-mobile-mode .edu-sidebar-left { display: none !important; }

body.forced-mobile-mode .edu-sidebar-right { display: none !important; }

body.forced-mobile-mode .mobile-topbar { display: flex !important; }

body.forced-mobile-mode .mobile-bottom-nav { display: flex !important; }



body.forced-mobile-mode .edu-body {

    flex-direction: column !important;

    padding: 0 !important;

    gap: 0 !important;

    height: calc(100% - 114px) !important;

    overflow-y: auto !important;

    padding-bottom: 20px !important;

}



body.forced-mobile-mode .edu-main {

    width: 100% !important;

    height: auto !important;

    overflow: visible !important;

    padding: 12px !important;

    border-radius: 0 !important;

    border: none !important;

}



body.forced-mobile-mode .directory-grid {

    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;

}



body.forced-mobile-mode .software-grid {

    grid-template-columns: 1fr !important;

}



body.forced-mobile-mode .charts-grid {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

}



body.forced-mobile-mode .analytics-card {

    min-height: 260px !important;

    border-radius: 14px !important;

    padding: 1rem !important;

}



body.forced-mobile-mode .post {

    border-radius: 16px !important;

    padding: 14px !important;

    margin-bottom: 10px !important;

    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;

}



body.forced-mobile-mode .create-post-card {

    border-radius: 16px !important;

    padding: 12px !important;

    margin-bottom: 12px !important;

}



body.forced-mobile-mode .mobile-overlay {

    position: absolute !important;

    z-index: 300 !important;

}



body.forced-mobile-mode .mobile-drawer {

    position: absolute !important;

    z-index: 400 !important;

}



body.forced-mobile-mode .mobile-search-bar {

    position: absolute !important;

    left: 0;

    right: 0;

    z-index: 150 !important;

}



/* 2. Simulation of Desktop Mode on Mobile Screen */

@media (max-width: 768px) {

    body.forced-desktop-mode {

        height: 100vh !important;

        overflow: auto !important;

        background: #f3f4f6 !important;

    }

    

    body.forced-desktop-mode #workspace-view {

        display: block !important;

        width: 1280px !important;

        min-width: 1280px !important;

        height: calc(100vh * (1280 / 100vw)) !important;

        transform: scale(calc(100vw / 1280)) !important;

        transform-origin: top left !important;

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

    }

    

    body.forced-desktop-mode .edu-navbar { display: flex !important; }

    body.forced-desktop-mode .edu-sidebar-left { display: block !important; }

    body.forced-desktop-mode .edu-sidebar-right { display: block !important; }

    body.forced-desktop-mode .mobile-topbar { display: none !important; }

    body.forced-desktop-mode .mobile-bottom-nav { display: none !important; }

    

    body.forced-desktop-mode .edu-body {

        flex-direction: row !important;

        padding: 1.5rem !important;

        gap: 1.5rem !important;

        height: auto !important;

        overflow: visible !important;

    }

}



/* Direct Post Link Highlights */

@keyframes postHighlight {

    0% {

        box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.4), 0 10px 25px rgba(0,0,0,0.1);

        border-color: var(--uog-blue);

        transform: scale(1.01);

    }

    50% {

        box-shadow: 0 0 0 8px rgba(15, 76, 129, 0.6), 0 10px 25px rgba(0,0,0,0.15);

        border-color: var(--uog-orange);

        transform: scale(1.01);

    }

    100% {

        box-shadow: 0 0 0 0px rgba(15, 76, 129, 0), 0 4px 12px rgba(0,0,0,0.05);

        transform: scale(1);

    }

}

.post-highlight-pulse {

    animation: postHighlight 2s ease-in-out infinite alternate;

    border-width: 2px !important;

}



/* Glassmorphic Ticker Styling */

.ticker-container {

    background: rgba(255, 255, 255, 0.7);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 12px;

    padding: 10px 15px;

    margin-bottom: 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow: 0 8px 32px 0 rgba(15, 76, 129, 0.05);

    overflow: hidden;

}

.dark-mode .ticker-container {

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.08);

}

.ticker-badge {

    background: linear-gradient(135deg, #ef4444, var(--uog-orange));

    color: white;

    font-size: 0.75rem;

    font-weight: 700;

    padding: 4px 10px;

    border-radius: 20px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: 4px;

    animation: pulseTicker 1.5s infinite;

}

@keyframes pulseTicker {

    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }

    70% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }

    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }

}

.ticker-wrapper {

    flex: 1;

    overflow: hidden;

    white-space: nowrap;

    position: relative;

    height: 20px;

}

.ticker-content {

    display: inline-block;

    padding-left: 100%;

    animation: tickerMove 25s linear infinite;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-primary);

    cursor: pointer;

}

.ticker-content:hover {

    animation-play-state: paused;

    color: var(--uog-blue);

    text-decoration: underline;

}

@keyframes tickerMove {

    0% { transform: translate3d(0, 0, 0); }

    100% { transform: translate3d(-120%, 0, 0); }

}



/* ─── ZAIALUMNI PREMIUM ADDITIONS ──────────────────────────────────────────────── */

.sidebar-logo {

    transition: background 0.3s;

}

.sidebar-list li {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}

.sidebar-list li .chevron-right {

    margin-left: auto;

    font-size: 0.8rem;

    opacity: 0.5;

    transition: transform 0.2s;

}

.sidebar-list li:hover .chevron-right {

    transform: translateX(2px);

    opacity: 0.9;

}



/* Dynamic Views Grid Layouts */

.events-grid, .jobs-board-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 1.5rem;

    padding: 0 5px;

}



/* Job Widget Item (Right Sidebar) */

.job-widget-item {

    background: #fdfdfb;

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 12px;

    transition: transform 0.2s, border-color 0.2s;

}

.job-widget-item:hover {

    transform: translateY(-2px);

    border-color: var(--zai-accent);

}

.job-widget-header {

    display: flex;

    gap: 10px;

    align-items: center;

    margin-bottom: 8px;

}

.job-widget-logo {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    background: #f0fdf4;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #10b981;

    font-size: 1rem;

    font-weight: 700;

}

.job-widget-title {

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.2;

}

.job-widget-meta {

    font-size: 0.72rem;

    color: var(--text-secondary);

    display: flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 4px;

}

.job-widget-desc {

    font-size: 0.78rem;

    color: var(--text-secondary);

    line-height: 1.3;

    margin-bottom: 8px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.job-widget-tags {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    font-size: 0.65rem;

    font-weight: 600;

}

.job-tag {

    background: #f3f4f6;

    color: #4b5563;

    padding: 2px 6px;

    border-radius: 4px;

}

.job-tag.location {

    background: rgba(59, 130, 246, 0.08);

    color: #2563eb;

}

.job-tag.salary {

    background: rgba(16, 185, 129, 0.08);

    color: #059669;

}



/* Job Board Card */

.job-board-card {

    background: white;

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-radius: 18px;

    padding: 1.5rem;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);

    display: flex;

    flex-direction: column;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

    position: relative;

    overflow: hidden;

}

.job-board-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 30px color-mix(in srgb, var(--zai-accent) 15%, transparent);

    border-color: var(--zai-accent);

}

.job-board-logo-box {

    background: color-mix(in srgb, var(--zai-accent) 12%, transparent);

    color: #4a7c10;

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.35rem;

    font-weight: 700;

    flex-shrink: 0;

}

.job-board-title {

    font-size: 1.15rem;

    font-weight: 800;

    color: #1f2937;

    margin: 0 0 2px 0;

    font-family: 'Outfit', sans-serif;

}

.job-board-company {

    font-size: 0.85rem;

    color: var(--text-secondary);

    font-weight: 600;

}

.job-board-desc {

    font-size: 0.88rem;

    color: #4b5563;

    line-height: 1.55;

    margin: 1rem 0;

    flex: 1;

}

.job-board-meta {

    font-size: 0.76rem;

    color: #9ca3af;

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 12px;

}

.job-board-tags {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 1.25rem;

}

.job-board-pill {

    font-size: 0.72rem;

    font-weight: 600;

    padding: 4px 12px;

    border-radius: 99px;

    background: #f3f4f6;

    color: #4b5563;

    display: flex;

    align-items: center;

    gap: 4px;

}

.job-board-pill.type {

    background: rgba(188, 250, 117, 0.15);

    color: #558c14;

}

.job-board-pill.location {

    background: rgba(59, 130, 246, 0.08);

    color: #2563eb;

}

.job-board-pill.salary {

    background: rgba(16, 185, 129, 0.08);

    color: #059669;

}

.job-board-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid rgba(0, 0, 0, 0.05);

    padding-top: 1rem;

}

.job-board-author {

    font-size: 0.75rem;

    color: #9ca3af;

    font-weight: 500;

}

.job-board-btn {

    background: var(--zai-accent);

    color: #111a0c;

    font-weight: 700;

    padding: 8px 18px;

    border-radius: 99px;

    text-decoration: none;

    display: inline-block;

    font-size: 0.82rem;

    transition: all 0.2s ease;

    border: none;

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(188,250,117,0.1);

}

.job-board-btn:hover {

    background: #a3e054;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(188,250,117,0.3);

}



/* Event Card (My Events Tab) */

.event-card {

    background: white;

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 1.5rem;

    box-shadow: var(--shadow-sm);

    display: flex;

    flex-direction: column;

    transition: transform 0.2s, box-shadow 0.2s;

}

.event-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

    border-color: rgba(188, 235, 117, 0.5);

}

.event-title {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 8px;

}

.event-desc {

    font-size: 0.88rem;

    color: var(--text-secondary);

    line-height: 1.5;

    margin-bottom: 1rem;

    flex: 1;

}

.event-info-row {

    font-size: 0.8rem;

    color: var(--text-secondary);

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;

}

.event-info-row i {

    width: 16px;

    color: var(--text-secondary);

}

.event-footer {

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.event-attendees {

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--text-secondary);

}

.event-btn {

    border: none;

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 0.82rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

}

.event-btn.register {

    background: var(--zai-accent);

    color: #1e1e1e;

}

.event-btn.register:hover {

    background: var(--zai-accent-hover);

}

.event-btn.registered {

    background: rgba(16, 185, 129, 0.1);

    color: #059669;

    border: 1px solid rgba(16, 185, 129, 0.3);

}



/* Messages / Chat View Layout */

.chat-layout {

    display: flex;

    height: 600px;

    background: white;

    border-radius: 16px;

    border: 1px solid var(--border-color);

    overflow: hidden;

}

.chat-sidebar {

    width: 240px;

    border-right: 1px solid var(--border-color);

    background: #fcfcfc;

    display: flex;

    flex-direction: column;

}

.chat-sidebar-header {

    padding: 1rem;

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text-primary);

    border-bottom: 1px solid var(--border-color);

}

.chat-users-list {

    flex: 1;

    overflow-y: auto;

    list-style: none;

}

.chat-user-item {

    padding: 12px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    border-bottom: 1px solid #f9f9fafb;

    transition: background 0.2s;

}

.chat-user-item:hover, .chat-user-item.active {

    background: rgba(188, 235, 117, 0.1);

}

.chat-user-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--zai-dark);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.8rem;

    font-weight: 600;

    overflow: hidden;

}

.chat-user-info {

    flex: 1;

    min-width: 0;

}

.chat-user-name {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.chat-user-role {

    font-size: 0.72rem;

    color: var(--text-secondary);

}

.chat-main {

    flex: 1;

    display: flex;

    flex-direction: column;

    background: var(--bg-main);

    position: relative;

}

.chat-header {

    padding: 1rem 1.5rem;

    background: var(--zai-dark);

    color: white;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow: var(--shadow-md);

}

.chat-header .chat-user-name {

    color: white !important;

    font-weight: 700 !important;

}

.chat-header .chat-user-role {

    color: rgba(255, 255, 255, 0.7) !important;

}

.chat-body {

    flex: 1;

    padding: 1.5rem;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 12px;

    background-color: var(--bg-main);

    background-image: radial-gradient(circle at 10% 20%, rgba(188, 235, 117, 0.05) 0%, transparent 40%),

                      radial-gradient(circle at 90% 80%, rgba(15, 76, 129, 0.03) 0%, transparent 50%);

}

.chat-bubble {

    max-width: 70%;

    padding: 10px 14px;

    border-radius: 12px;

    font-size: 0.9rem;

    line-height: 1.45;

    word-wrap: break-word;

    position: relative;

    box-shadow: 0 2px 4px rgba(0,0,0,0.02);

    transition: all 0.2s ease;

}

.chat-bubble.sent {

    align-self: flex-end;

    background: var(--zai-dark);

    color: white;

    border-bottom-right-radius: 2px;

}

.chat-bubble.sent .chat-link-preview {

    color: var(--zai-accent) !important;

}

.chat-bubble.sent .chat-bubble-time {

    color: rgba(255, 255, 255, 0.6);

}

.chat-bubble.received {

    align-self: flex-start;

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-bottom-left-radius: 2px;

    color: var(--text-primary);

}

.chat-bubble.received .chat-bubble-time {

    color: var(--text-secondary);

}

.chat-bubble-time {

    font-size: 0.65rem;

    margin-top: 6px;

    text-align: right;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 4px;

}

.chat-input-row {

    padding: 12px 20px;

    background: var(--bg-surface-solid);

    border-top: 1px solid var(--border-color);

    display: flex;

    gap: 12px;

    align-items: center;

}

.chat-input-field {

    flex: 1;

    border: 1px solid var(--border-color);

    border-radius: 30px;

    padding: 10px 20px;

    font-size: 0.9rem;

    outline: none;

    background: var(--bg-main);

    transition: all 0.2s ease;

}

.chat-input-field:focus {

    border-color: var(--zai-dark);

    background: white;

    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.05);

}

.chat-send-btn {

    background: var(--zai-dark);

    color: var(--zai-accent);

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 1rem;

    box-shadow: var(--shadow-sm);

    transition: all 0.2s ease;

}

.chat-send-btn:hover {

    background: var(--zai-accent);

    color: var(--zai-dark);

    transform: scale(1.05);

}



/* Custom Document Attachment Card in Chat */

.chat-doc-card {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    margin-bottom: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: inherit;

}

.chat-bubble.received .chat-doc-card {

    background: rgba(0, 0, 0, 0.03);

    border: 1px solid rgba(0, 0, 0, 0.08);

}

.chat-doc-card:hover {

    background: rgba(255, 255, 255, 0.15);

    transform: translateY(-1px);

}

.chat-bubble.received .chat-doc-card:hover {

    background: rgba(0, 0, 0, 0.06);

}



/* Rich Shared Feed/Software Resource Cards in Chat */

.chat-shared-card {

    margin-top: 8px;

    padding: 12px;

    background: rgba(255, 255, 255, 0.07);

    border-left: 3px solid var(--zai-accent);

    border-radius: 6px;

    cursor: pointer;

    font-size: 0.8rem;

    text-align: left;

    transition: all 0.2s ease;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    border-right: 1px solid rgba(255, 255, 255, 0.05);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

.chat-bubble.received .chat-shared-card {

    background: rgba(0, 0, 0, 0.02);

    border-left: 3px solid var(--uog-blue);

    border-top: 1px solid rgba(0, 0, 0, 0.03);

    border-right: 1px solid rgba(0, 0, 0, 0.03);

    border-bottom: 1px solid rgba(0, 0, 0, 0.03);

}

.chat-shared-card:hover {

    background: rgba(255, 255, 255, 0.12);

    transform: scale(1.01);

}

.chat-bubble.received .chat-shared-card:hover {

    background: rgba(0, 0, 0, 0.04);

}



/* User Card Direct Chat Button hover animations */

.chat-direct-btn:hover {

    background: var(--zai-dark) !important;

    color: var(--zai-accent) !important;

    border-color: var(--zai-dark) !important;

    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);

}



/* Glassmorphism Share Modal custom styles */

.premium-modal-content {

    background: rgba(255, 255, 255, 0.8) !important;

    backdrop-filter: var(--glass-blur) !important;

    -webkit-backdrop-filter: var(--glass-blur) !important;

    border: 1px solid rgba(255, 255, 255, 0.4) !important;

    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;

    border-radius: 16px !important;

    overflow: hidden;

}

:root[data-theme="dark"] .premium-modal-content {

    background: rgba(30, 30, 30, 0.8) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

}



.share-contact-item {

    transition: background 0.2s ease, transform 0.15s ease;

}

.share-contact-item:hover {

    background: #f8fafc;

    transform: translateX(2px);

}

:root[data-theme="dark"] .share-contact-item:hover {

    background: rgba(255,255,255,0.03);

}



/* Membership View */

.membership-tiers {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 1.5rem;

    padding: 0 5px;

}

.tier-card {

    background: white;

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 2rem 1.5rem;

    text-align: center;

    position: relative;

    overflow: hidden;

    transition: transform 0.2s, box-shadow 0.2s;

}

.tier-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}

.tier-card.popular {

    border-color: var(--zai-accent);

}

.tier-card.popular::before {

    content: "POPULAR";

    position: absolute;

    top: 15px;

    right: -30px;

    background: var(--zai-accent);

    color: #1e1e1e;

    font-size: 0.65rem;

    font-weight: 700;

    padding: 4px 30px;

    transform: rotate(45deg);

}

.tier-name {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 10px;

}

.tier-price {

    font-size: 1.75rem;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 20px;

}

.tier-price span {

    font-size: 0.85rem;

    font-weight: 500;

    color: var(--text-secondary);

}

.tier-features {

    list-style: none;

    padding: 0;

    margin: 0 0 24px 0;

    text-align: left;

}

.tier-features li {

    font-size: 0.85rem;

    color: var(--text-secondary);

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

}

.tier-features li i {

    color: #10b981;

}

.tier-btn {

    width: 100%;

    border: 1px solid var(--border-color);

    background: transparent;

    padding: 10px;

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

}

.tier-btn.primary {

    background: var(--zai-accent);

    color: #1e1e1e;

    border: none;

}

.tier-btn:hover {

    background: var(--zai-dark);

    color: white;

}



/* Election (Addon) Dashboard */

.election-card {

    background: white;

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

}

.election-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 12px;

    margin-bottom: 1.2rem;

}

.election-title {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--text-primary);

    margin: 0;

}

.election-status-badge {

    background: rgba(16, 185, 129, 0.1);

    color: #059669;

    font-size: 0.72rem;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 20px;

}

.candidates-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.candidate-row {

    background: #fafafa;

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 12px 16px;

    display: flex;

    align-items: center;

    gap: 16px;

    position: relative;

    overflow: hidden;

}

.candidate-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: var(--zai-dark);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    font-weight: 700;

}

.candidate-info {

    flex: 1;

    z-index: 2;

}

.candidate-name {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text-primary);

}

.candidate-role {

    font-size: 0.75rem;

    color: var(--text-secondary);

    margin-top: 2px;

}

.candidate-results-bar {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    background: rgba(188, 235, 117, 0.2);

    z-index: 1;

    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}

.vote-btn {

    border: none;

    background: var(--zai-dark);

    color: white;

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

    z-index: 2;

}

.vote-btn:hover {

    background: var(--zai-accent);

    color: #1e1e1e;

}

.vote-count-label {

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--text-primary);

    z-index: 2;

}



/* Transaction List Table styling */

.tx-container {

    background: white;

    border: 1px solid var(--border-color);

    border-radius: 16px;

    overflow: hidden;

}

.tx-table {

    width: 100%;

    border-collapse: collapse;

    text-align: left;

}

.tx-table th {

    background: #fcfcfd;

    border-bottom: 1px solid var(--border-color);

    padding: 14px 18px;

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--text-secondary);

}

.tx-table td {

    padding: 14px 18px;

    border-bottom: 1px solid var(--border-color);

    font-size: 0.88rem;

    color: var(--text-primary);

}

.tx-table tr:last-child td {

    border-bottom: none;

}

.tx-status {

    font-size: 0.72rem;

    font-weight: 700;

    padding: 4px 10px;

    border-radius: 20px;

    display: inline-block;

}

.tx-status.paid {

    background: rgba(16, 185, 129, 0.1);

    color: #059669;

}

.tx-status.pending {

    background: rgba(245, 158, 11, 0.1);

    color: #d97706;

}

.tx-amount {

    font-weight: 700;

    color: var(--text-primary);

}



/* Stories View Grid */

.stories-view-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

    gap: 1rem;

    padding: 5px 0;

}

.story-card-wrapper {

    aspect-ratio: 9/16;

    border-radius: 14px;

    overflow: hidden;

    position: relative;

    cursor: pointer;

    border: 1px solid var(--border-color);

    box-shadow: var(--shadow-sm);

    transition: transform 0.2s;

}

.story-card-wrapper:hover {

    transform: scale(1.03);

}

.story-card-bg {

    width: 100%;

    height: 100%;

    object-fit: cover;

    background: linear-gradient(180deg, #1e3a8a, #111827);

}

.story-card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 10px;

}

.story-card-user-avatar {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    border: 2px solid var(--zai-accent);

    background: var(--zai-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.72rem;

    font-weight: 600;

    color: white;

    overflow: hidden;

}

.story-card-user-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.story-card-user-name {

    color: white;

    font-size: 0.75rem;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.create-story-card {

    aspect-ratio: 9/16;

    border-radius: 14px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.02) !important;

    border: 1px dashed rgba(188, 250, 117, 0.3) !important;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    transition: all 0.25s ease;

}

.create-story-card:hover {

    background: color-mix(in srgb, var(--zai-accent) 5%, transparent) !important;

    border-color: var(--zai-accent) !important;

    transform: translateY(-2px);

}

.create-story-icon {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: var(--zai-accent) !important;

    color: #111a0c !important;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    box-shadow: 0 4px 10px color-mix(in srgb, var(--zai-accent) 25%, transparent);

}

.create-story-label {

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--zai-accent) !important;

}



/* Social Interactions Styles (Like, Comment, Edit, Delete) */

.social-bar {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 1rem;

    padding-top: 12px;

    border-top: 1px solid rgba(0, 0, 0, 0.06);

    flex-wrap: wrap;

}

.action-btn {

    background: transparent;

    border: none;

    color: #6b7280;

    font-size: 0.84rem;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 8px;

    transition: all 0.2s ease;

}

.action-btn:hover {

    background: rgba(0, 0, 0, 0.04);

    color: #1f2937;

}

.action-btn.liked {

    color: #ef4444;

}

.action-btn.liked i {

    font-weight: 900; /* Solid heart */

}

.action-btn.edit-btn:hover {

    background: rgba(59, 130, 246, 0.08);

    color: #2563eb;

}

.action-btn.delete-btn:hover {

    background: rgba(239, 68, 68, 0.08);

    color: #dc2626;

}



/* Collapsible Comments Section */

.comments-wrapper {

    background: #f9fafb;

    border-radius: 12px;

    margin-top: 12px;

    padding: 12px;

    border: 1px solid rgba(0, 0, 0, 0.04);

}

.comments-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-height: 250px;

    overflow-y: auto;

    margin-bottom: 12px;

    padding-right: 4px;

}

.comments-list::-webkit-scrollbar {

    width: 4px;

}

.comments-list::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 2px;

}

.comment-item {

    display: flex;

    gap: 10px;

    align-items: flex-start;

    padding: 8px 10px;

    background: white;

    border-radius: 10px;

    border: 1px solid rgba(0, 0, 0, 0.03);

    position: relative;

}

.comment-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--zai-accent);

    color: #111a0c;

    font-weight: 700;

    font-size: 0.85rem;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.comment-body {

    flex: 1;

    min-width: 0;

}

.comment-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.comment-author-name {

    font-size: 0.8rem;

    font-weight: 700;

    color: #1f2937;

}

.comment-author-role {

    font-size: 0.68rem;

    color: #6b7280;

    background: #f3f4f6;

    padding: 1px 6px;

    border-radius: 4px;

    margin-left: 6px;

}

.comment-date {

    font-size: 0.65rem;

    color: #9ca3af;

}

.comment-text {

    font-size: 0.8rem;

    color: #4b5563;

    line-height: 1.4;

    margin-top: 3px;

    word-wrap: break-word;

}

.comment-delete-btn {

    background: transparent;

    border: none;

    color: #9ca3af;

    cursor: pointer;

    font-size: 0.75rem;

    padding: 2px;

    transition: color 0.2s;

}

.comment-delete-btn:hover {

    color: #ef4444;

}



/* Comment Form */

.comment-form {

    display: flex;

    gap: 8px;

    margin-top: 10px;

}

.comment-input {

    flex: 1;

    border: 1px solid #cbd5e1;

    border-radius: 8px;

    padding: 8px 12px;

    font-size: 0.82rem;

    outline: none;

    transition: border-color 0.2s;

}

.comment-input:focus {

    border-color: var(--zai-accent);

}

.comment-submit-btn {

    background: var(--zai-accent);

    color: #111a0c;

    border: none;

    border-radius: 8px;

    padding: 8px 14px;

    font-weight: 700;

    font-size: 0.8rem;

    cursor: pointer;

    transition: background 0.2s;

}

.comment-submit-btn:hover {

    background: #a3e054;

}



/* Premium Modal Styles for Job & Event Forms - Adaptive Theme Support */
.premium-modal-content {
    background: var(--bg-surface-solid) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
    overflow: hidden;
}
.premium-modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1.2rem 1.5rem !important;
    background: var(--primary-active);
}
.premium-modal-header .modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.premium-modal-header .modal-title i {
    color: var(--uog-blue);
}
.premium-modal-body {
    padding: 1.5rem !important;
}
.premium-modal-body .form-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.premium-input {
    background: var(--bg-main) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    transition: all 0.25s ease !important;
}
.premium-input::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}
.premium-input:focus {
    background: var(--bg-surface-solid) !important;
    border-color: var(--uog-blue) !important;
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.15) !important;
    outline: none !important;
}
select.premium-input option {
    background: var(--bg-surface-solid);
    color: var(--text-primary);
}
.premium-modal-footer {
    border-top: 1px solid var(--border-color) !important;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.btn-secondary-premium {
    background: transparent !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
}
.btn-secondary-premium:hover {
    background: var(--border-color) !important;
}
.btn-primary-premium {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(15, 76, 129, 0.2);
}
.btn-primary-premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 76, 129, 0.3);
}

.btn-primary-premium:active {

    transform: translateY(0);

}



/* ─────────────────────────────────────────────────────────────────────────────

   PREMIUM CUSTOM THEMES OVERRIDES

   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="midnight"] {

    --bg-main: #060814 !important;

    --bg-surface: #0b0f19 !important;

    --bg-surface-solid: #0d1222 !important;

    --text-primary: #f1f5f9 !important;

    --text-secondary: #94a3b8 !important;

    --border-color: #1e293b !important;

    --zai-dark: #0b0f19 !important;

    --zai-accent: #00d2ff !important;

    --zai-accent-hover: #00b4db !important;

    --uog-blue: #0b0f19 !important;

    --uog-blue-hover: #1e293b !important;

    --uog-orange: #00d2ff !important;

    --shadow-md: 0 4px 20px rgba(0, 210, 255, 0.15) !important;

}

:root[data-theme="midnight"] .edu-navbar,

:root[data-theme="midnight"] .edu-sidebar-left,

:root[data-theme="midnight"] .edu-sidebar-right,

:root[data-theme="midnight"] .notice-board, 

:root[data-theme="midnight"] .stats-card,

:root[data-theme="midnight"] .edu-card,

:root[data-theme="midnight"] .post-card,

:root[data-theme="midnight"] .edu-input,

:root[data-theme="midnight"] .edu-select,

:root[data-theme="midnight"] .edu-textarea {

    background: #0b0f19 !important;

    border-color: #1e293b !important;

    color: #f1f5f9 !important;

}

:root[data-theme="midnight"] .sidebar-list li:hover,

:root[data-theme="midnight"] .profile-chip {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #f1f5f9 !important;

}



:root[data-theme="emerald"] {

    --bg-main: #022c22 !important;

    --bg-surface: #064e3b !important;

    --bg-surface-solid: #065f46 !important;

    --text-primary: #ecfdf5 !important;

    --text-secondary: #a7f3d0 !important;

    --border-color: #065f46 !important;

    --zai-dark: #064e3b !important;

    --zai-accent: #fbbf24 !important;

    --zai-accent-hover: #f59e0b !important;

    --uog-blue: #064e3b !important;

    --uog-blue-hover: #065f46 !important;

    --uog-orange: #fbbf24 !important;

    --shadow-md: 0 4px 20px rgba(251, 191, 36, 0.15) !important;

}

:root[data-theme="emerald"] .edu-navbar,

:root[data-theme="emerald"] .edu-sidebar-left,

:root[data-theme="emerald"] .edu-sidebar-right,

:root[data-theme="emerald"] .notice-board, 

:root[data-theme="emerald"] .stats-card,

:root[data-theme="emerald"] .edu-card,

:root[data-theme="emerald"] .post-card,

:root[data-theme="emerald"] .edu-input,

:root[data-theme="emerald"] .edu-select,

:root[data-theme="emerald"] .edu-textarea {

    background: #064e3b !important;

    border-color: #065f46 !important;

    color: #ecfdf5 !important;

}

:root[data-theme="emerald"] .sidebar-list li:hover,

:root[data-theme="emerald"] .profile-chip {

    background: #065f46 !important;

    border-color: #047857 !important;

    color: #ecfdf5 !important;

}



:root[data-theme="sapphire"] {

    --bg-main: #020617 !important;

    --bg-surface: #1e1b4b !important;

    --bg-surface-solid: #312e81 !important;

    --text-primary: #e0e7ff !important;

    --text-secondary: #c7d2fe !important;

    --border-color: #312e81 !important;

    --zai-dark: #1e1b4b !important;

    --zai-accent: #d8b4fe !important;

    --zai-accent-hover: #c084fc !important;

    --uog-blue: #1e1b4b !important;

    --uog-blue-hover: #312e81 !important;

    --uog-orange: #d8b4fe !important;

    --shadow-md: 0 4px 20px rgba(216, 180, 254, 0.15) !important;

}

:root[data-theme="sapphire"] .edu-navbar,

:root[data-theme="sapphire"] .edu-sidebar-left,

:root[data-theme="sapphire"] .edu-sidebar-right,

:root[data-theme="sapphire"] .notice-board, 

:root[data-theme="sapphire"] .stats-card,

:root[data-theme="sapphire"] .edu-card,

:root[data-theme="sapphire"] .post-card,

:root[data-theme="sapphire"] .edu-input,

:root[data-theme="sapphire"] .edu-select,

:root[data-theme="sapphire"] .edu-textarea {

    background: #1e1b4b !important;

    border-color: #312e81 !important;

    color: #e0e7ff !important;

}

:root[data-theme="sapphire"] .sidebar-list li:hover,

:root[data-theme="sapphire"] .profile-chip {

    background: #312e81 !important;

    border-color: #4338ca !important;

    color: #e0e7ff !important;

}



:root[data-theme="uog-royal"] {

    --bg-main: #0b1329 !important;

    --bg-surface: #111d3d !important;

    --bg-surface-solid: #1c2d5a !important;

    --text-primary: #f8fafc !important;

    --text-secondary: #94a3b8 !important;

    --border-color: #1e2d5a !important;

    --zai-dark: #111d3d !important;

    --zai-accent: #fbbf24 !important;

    --zai-accent-hover: #d97706 !important;

    --uog-blue: #111d3d !important;

    --uog-blue-hover: #1c2d5a !important;

    --uog-orange: #fbbf24 !important;

    --shadow-md: 0 4px 20px rgba(251, 191, 36, 0.15) !important;

}

:root[data-theme="uog-royal"] .edu-navbar,

:root[data-theme="uog-royal"] .edu-sidebar-left,

:root[data-theme="uog-royal"] .edu-sidebar-right,

:root[data-theme="uog-royal"] .notice-board, 

:root[data-theme="uog-royal"] .stats-card,

:root[data-theme="uog-royal"] .edu-card,

:root[data-theme="uog-royal"] .post-card,

:root[data-theme="uog-royal"] .edu-input,

:root[data-theme="uog-royal"] .edu-select,

:root[data-theme="uog-royal"] .edu-textarea {

    background: #111d3d !important;

    border-color: #1e2d5a !important;

    color: #f8fafc !important;

}

:root[data-theme="uog-royal"] .sidebar-list li:hover,

:root[data-theme="uog-royal"] .profile-chip {

    background: #1c2d5a !important;

    border-color: #2e437b !important;

    color: #f8fafc !important;

}



:root[data-theme="aurora"] {

    --bg-main: #030712 !important;

    --bg-surface: rgba(17, 24, 39, 0.75) !important;

    --bg-surface-solid: #111827 !important;

    --text-primary: #f9fafb !important;

    --text-secondary: #94a3b8 !important;

    --border-color: rgba(255, 255, 255, 0.09) !important;

    --zai-dark: #0f172a !important;

    --zai-accent: #2dd4bf !important;

    --zai-accent-hover: #0d9488 !important;

    --uog-blue: #0f172a !important;

    --uog-blue-hover: #1e293b !important;

    --uog-orange: #2dd4bf !important;

    --shadow-md: 0 8px 32px 0 rgba(45, 212, 191, 0.08) !important;

}

:root[data-theme="aurora"] .edu-navbar,

:root[data-theme="aurora"] .edu-sidebar-left,

:root[data-theme="aurora"] .edu-sidebar-right,

:root[data-theme="aurora"] .notice-board, 

:root[data-theme="aurora"] .stats-card,

:root[data-theme="aurora"] .edu-card,

:root[data-theme="aurora"] .post-card {

    background: rgba(17, 24, 39, 0.75) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;

    color: #f9fafb !important;

}

:root[data-theme="aurora"] .edu-input,

:root[data-theme="aurora"] .edu-select,

:root[data-theme="aurora"] .edu-textarea {

    background: rgba(31, 41, 55, 0.8) !important;

    border-color: rgba(255, 255, 255, 0.12) !important;

    color: #f9fafb !important;

}

:root[data-theme="aurora"] .sidebar-list li:hover,

:root[data-theme="aurora"] .profile-chip {

    background: rgba(255, 255, 255, 0.08) !important;

    border-color: rgba(255, 255, 255, 0.15) !important;

    color: #f9fafb !important;

}



/* ─────────────────────────────────────────────────────────────────────────────

   STATLAB PLAYGROUND STYLES

   ───────────────────────────────────────────────────────────────────────────── */

.statlab-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 15px;

}

@media (max-width: 992px) {

    .statlab-layout {

        grid-template-columns: 1fr;

    }

}

.stat-metric-card {

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 1rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    transition: all 0.3s ease;

    box-shadow: var(--shadow-sm);

}

.stat-metric-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    border-color: var(--zai-accent);

}

.stat-metric-val {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text-primary);

}

.stat-metric-lbl {

    font-size: 0.75rem;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 4px;

}

.stat-metric-badge {

    align-self: flex-start;

    padding: 2px 8px;

    border-radius: 12px;

    font-size: 0.68rem;

    font-weight: 600;

    margin-top: 8px;

}

.stat-badge-normal {

    background: rgba(16, 185, 129, 0.15);

    color: #10b981;

}

.stat-badge-skewed {

    background: rgba(245, 158, 11, 0.15);

    color: #f59e0b;

}



.data-chip-container {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;

}

.dataset-chip {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border-color);

    color: var(--text-primary);

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

}

.dataset-chip:hover {

    background: var(--zai-accent);

    color: #1e1e1e;

    border-color: var(--zai-accent);

    transform: scale(1.03);

}



/* ─────────────────────────────────────────────────────────────────────────────

   GPACAST DASHBOARD STYLES

   ───────────────────────────────────────────────────────────────────────────── */

.gpa-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 20px;

}

@media (max-width: 992px) {

    .gpa-grid {

        grid-template-columns: 1fr;

    }

}

.gpa-gauge-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 2rem 1.5rem;

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    box-shadow: var(--shadow-sm);

    text-align: center;

}

.gpa-circle-container {

    position: relative;

    width: 180px;

    height: 180px;

    margin-bottom: 1.2rem;

}

.gpa-circle-svg {

    transform: rotate(-90deg);

    width: 100%;

    height: 100%;

}

.gpa-circle-bg {

    fill: none;

    stroke: var(--border-color);

    stroke-width: 12px;

}

.gpa-circle-val {

    fill: none;

    stroke: var(--zai-accent);

    stroke-width: 12px;

    stroke-linecap: round;

    stroke-dasharray: 502;

    stroke-dashoffset: 502;

    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    filter: drop-shadow(0 0 6px var(--zai-accent));

}

.gpa-circle-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

}

.gpa-circle-num {

    font-size: 2.2rem;

    font-weight: 800;

    color: var(--text-primary);

    line-height: 1;

}

.gpa-circle-lbl {

    font-size: 0.72rem;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 4px;

}



.gpa-table {

    width: 100%;

    border-collapse: collapse;

}

.gpa-table th {

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--text-secondary);

    border-bottom: 2px solid var(--border-color);

    padding: 8px 12px;

    text-align: left;

}

.gpa-table td {

    padding: 8px 12px;

    border-bottom: 1px solid var(--border-color);

}

.gpa-row-remove {

    background: transparent;

    border: none;

    color: var(--danger);

    cursor: pointer;

    font-size: 0.95rem;

    transition: 0.2s;

}

.gpa-row-remove:hover {

    transform: scale(1.15);

}



/* ─────────────────────────────────────────────────────────────────────────────

   STATHALL PODIUMS STYLES

   ───────────────────────────────────────────────────────────────────────────── */

.hall-podium-container {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    gap: 15px;

    height: 310px;

    margin: 2rem 0;

    padding-bottom: 10px;

}

.podium-step {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 160px;

    border-radius: 12px 12px 0 0;

    position: relative;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

}

.podium-step:hover {

    transform: translateY(-8px);

}

.podium-step.gold {

    height: 250px;

    background: linear-gradient(135deg, rgba(253, 224, 71, 0.15) 0%, rgba(234, 179, 8, 0.05) 100%);

    border: 2px solid rgba(234, 179, 8, 0.4);

}

.podium-step.silver {

    height: 200px;

    background: linear-gradient(135deg, rgba(226, 232, 240, 0.15) 0%, rgba(148, 163, 184, 0.05) 100%);

    border: 2px solid rgba(148, 163, 184, 0.4);

}

.podium-step.bronze {

    height: 160px;

    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(194, 65, 12, 0.05) 100%);

    border: 2px solid rgba(194, 65, 12, 0.4);

}

.podium-crown {

    position: absolute;

    top: -38px;

    font-size: 1.8rem;

    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));

}

.podium-crown.gold i { color: #f59e0b; }

.podium-crown.silver i { color: #94a3b8; }

.podium-crown.bronze i { color: #c2410c; }



.podium-avatar {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    margin-top: -30px;

    border: 3px solid;

    background: var(--zai-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: 700;

    overflow: hidden;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}

.gold .podium-avatar { border-color: #ea580c; }

.silver .podium-avatar { border-color: #64748b; }

.bronze .podium-avatar { border-color: #b45309; }



.podium-info {

    text-align: center;

    padding: 10px;

    width: 100%;

}

.podium-name {

    font-weight: 700;

    font-size: 0.9rem;

    color: var(--text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.podium-stat {

    font-size: 0.78rem;

    color: var(--text-secondary);

    margin-top: 4px;

    font-weight: 600;

}

.podium-rank {

    position: absolute;

    bottom: 12px;

    font-size: 1.8rem;

    font-weight: 800;

    opacity: 0.12;

}



/* ─────────────────────────────────────────────────────────────────────────────

   PERSONALIZATION SECTORS & SLIDERS

   ───────────────────────────────────────────────────────────────────────────── */

.theme-picker-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 10px;

}

@media (max-width: 576px) {

    .theme-picker-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

.theme-card-option {

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 10px;

    cursor: pointer;

    background: var(--bg-surface-solid);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    transition: all 0.25s ease;

}

.theme-card-option:hover {

    border-color: var(--zai-accent);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}

.theme-card-option.active {

    border-color: var(--zai-accent);

    box-shadow: 0 0 10px rgba(188, 250, 117, 0.15);

    background: rgba(188, 250, 117, 0.03);

}

.theme-preview-dot {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.2);

}

.theme-preview-dot.zai { background: #bceb75; }

.theme-preview-dot.midnight { background: #00d2ff; }

.theme-preview-dot.emerald { background: #fbbf24; }

.theme-preview-dot.sapphire { background: #d8b4fe; }

.theme-preview-dot.uog-royal { background: linear-gradient(135deg, #1e3a8a 0%, #fbbf24 100%); }

.theme-preview-dot.aurora { background: linear-gradient(135deg, #2dd4bf 0%, #6366f1 100%); }



.settings-slider-row {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 12px;

}

.settings-slider-lbl {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-secondary);

    min-width: 140px;

}

.premium-range-slider {

    -webkit-appearance: none;

    width: 100%;

    height: 6px;

    border-radius: 3px;

    background: var(--border-color);

    outline: none;

    transition: background 0.3s;

}

.premium-range-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--zai-accent);

    cursor: pointer;

    box-shadow: 0 0 8px rgba(188, 250, 117, 0.5);

    transition: transform 0.1s ease;

}

.premium-range-slider::-webkit-slider-thumb:hover {

    transform: scale(1.2);

}



/* WhatsApp Style Mobile Chat View */

@media (max-width: 768px) {

    .chat-layout {

        position: relative;

        height: calc(100vh - 160px);

        border: none;

        border-radius: 0;

    }

    .chat-sidebar {

        width: 100%;

        border-right: none;

    }

    .chat-main {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 99999;

        transform: translateX(100%);

        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        border-radius: 0 !important;

        border: none !important;

    }

    .chat-main.active {

        transform: translateX(0);

    }

    body.chat-active {

        overflow: hidden !important;

    }

    .chat-back-btn {

        display: block !important;

    }

}

.chat-back-btn {

    display: none;

}



/* ==========================================================================

   🎓 FACEBOOK REDESIGN PREMIUM FLAT UI STYLES

   ========================================================================== */



/* 1. Active Contacts pulsing dot & hover transitions */

@keyframes pulse-active {

    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }

    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }

    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

}



.active-contacts-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: #10b981;

    display: inline-block;

    animation: pulse-active 2s infinite;

    border: 1px solid white;

}



.active-contact-item {

    transition: background-color 0.2s ease, transform 0.1s ease;

}



.active-contact-item:hover {

    background-color: var(--border-color) !important;

}



.active-contact-item:active {

    transform: scale(0.98);

}



/* 2. Compose card actions hover styling */

.create-action-btn {

    transition: background-color 0.2s ease, transform 0.1s ease;

}



.create-action-btn:hover {

    background-color: var(--border-color) !important;

}



.create-action-btn:active {

    transform: scale(0.97);

}



#open-compose:hover {

    background-color: #e4e6eb !important;

}



/* 3. Story Card Animations and Enhancements */

.status-story-card {

    transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;

}



.status-story-card:hover {

    transform: scale(1.04) !important;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;

}



.status-story-card:active {

    transform: scale(0.98) !important;

}









/* ==========================================================================

   FACEBOOK DESKTOP HIGH-FIDELITY LAYOUT (desktop only — never mobile)

   ========================================================================== */

@media (min-width: 769px) {



body:not(.forced-mobile-mode),

body.forced-desktop-mode {

    background-color: #f0f2f5 !important;

}



/* Sidebar Overrides */

body:not(.forced-mobile-mode) .edu-sidebar-left,

body.forced-desktop-mode .edu-sidebar-left {

    width: 300px !important;

    min-width: 300px !important;

    background: #fff !important;

    border-right: none !important;

    padding: 12px 10px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    position: sticky !important;

    top: 60px !important;

    align-self: flex-start !important;

    max-height: calc(100vh - 72px) !important;

    overflow-y: auto !important;

    border-radius: 12px !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;

    flex-shrink: 0 !important;

}



body:not(.forced-mobile-mode) .sidebar-logo,

body.forced-desktop-mode .sidebar-logo {

    display: none !important;

}



body:not(.forced-mobile-mode) .profile-summary,

body.forced-desktop-mode .profile-summary {

    display: none !important;

}



body:not(.forced-mobile-mode) .sidebar-list,

body.forced-desktop-mode .sidebar-list {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 2px !important;

}



body:not(.forced-mobile-mode) .sidebar-list li,

body.forced-desktop-mode .sidebar-list li {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 8px 12px !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    font-weight: 500 !important;

    font-size: 0.93rem !important;

    color: #050505 !important;

    background: transparent !important;

    transition: background 0.2s !important;

    border: none !important;

    box-shadow: none !important;

    transform: none !important;

}



body:not(.forced-mobile-mode) .sidebar-list li:hover,

body.forced-desktop-mode .sidebar-list li:hover {

    background: #f0f2f5 !important;

    color: #050505 !important;

    transform: none !important;

}



body:not(.forced-mobile-mode) .sidebar-list li.active-item,

body.forced-desktop-mode .sidebar-list li.active-item {

    font-weight: 600 !important;

    background: #e7f3ff !important;

    color: #1877f2 !important;

    border-left: none !important;

    box-shadow: none !important;

}



body:not(.forced-mobile-mode) .sidebar-list li.active-item i,

body.forced-desktop-mode .sidebar-list li.active-item i {

    background: #dbeafe !important;

    color: #1877f2 !important;

}



/* Sidebar colorful round icons */

.sidebar-icon-wrap {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.1rem;

    flex-shrink: 0;

}



.bg-home { background: var(--uog-blue) !important; }

.bg-events { background: #f02849 !important; }

.bg-jobs { background: #f7b928 !important; }

.bg-alumni { background: #2ab8a6 !important; }

.bg-election { background: #e04a3f !important; }

.bg-messages { background: #10b981 !important; }

.bg-settings { background: #8e9aa8 !important; }

.bg-records { background: #7c3aed !important; }

.bg-software { background: #f97316 !important; }

.bg-hall { background: #eab308 !important; }

.bg-saved { background: #a855f7 !important; }



/* Navbar Active Tab styling */

.nav-tab {

    position: relative;

    border-radius: 8px;

    margin: 4px 0;

    height: 48px !important;

}



.nav-tab:hover {

    background: var(--border-color) !important;

}



.nav-tab.active-tab {

    color: var(--uog-blue) !important;

    background: transparent !important;

}



.nav-tab.active-tab::after {

    content: '';

    position: absolute;

    bottom: -4px;

    left: 0;

    width: 100%;

    height: 3px;

    background-color: var(--uog-blue);

}



.nav-circle-btn:hover {

    background: var(--border-color) !important;

}



.fb-dropdown-item:hover {

    background: var(--border-color) !important;

}



/* Main Layout Styles */

body:not(.forced-mobile-mode) .edu-body,

body.forced-desktop-mode .edu-body {

    background-color: #f0f2f5 !important;

    padding: 16px !important;

    gap: 16px !important;

    align-items: flex-start !important;

    overflow: visible !important;

}



body:not(.forced-mobile-mode) .edu-main,

body.forced-desktop-mode .edu-main {

    background-color: transparent !important;

    max-width: 680px !important;

    flex: 1 1 680px !important;

    min-width: 0 !important;

    margin: 0 auto !important;

    padding: 0 8px 24px !important;

}



body:not(.forced-mobile-mode) .edu-sidebar-right,

body.forced-desktop-mode .edu-sidebar-right {

    background: transparent !important;

    width: 300px !important;

    min-width: 300px !important;

    position: sticky !important;

    top: 60px !important;

    align-self: flex-start !important;

    max-height: calc(100vh - 72px) !important;

    overflow-y: auto !important;

    flex-shrink: 0 !important;

    padding: 0 !important;

}



body:not(.forced-mobile-mode) .edu-navbar,

body.forced-desktop-mode .edu-navbar {

    background: #fff !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;

    border-bottom: 1px solid #e4e6eb !important;

}



body:not(.forced-mobile-mode) .view-header,

body.forced-desktop-mode .view-header {

    background: transparent !important;

    padding: 4px 0 12px !important;

}



body:not(.forced-mobile-mode) .create-post-card,

body.forced-desktop-mode .create-post-card {

    border-radius: 8px !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;

    border: none !important;

    background: #fff !important;

    margin-bottom: 12px !important;

}



/* Post Cards */

body:not(.forced-mobile-mode) .edu-card,

body:not(.forced-mobile-mode) .post-card,

body.forced-desktop-mode .edu-card,

body.forced-desktop-mode .post-card {

    border-radius: 8px !important;

    border: none !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;

    background: #fff !important;

    backdrop-filter: none !important;

    margin-bottom: 12px !important;

}



body:not(.forced-mobile-mode) .post-interaction-bar,

body.forced-desktop-mode .post-interaction-bar {

    border-top: 1px solid #ced0d4 !important;

}



body:not(.forced-mobile-mode) .create-action-btn:hover,

body.forced-desktop-mode .create-action-btn:hover {

    background-color: #f0f2f5 !important;

}



} /* end @media (min-width: 769px) desktop layout */



/* Toast Container positioning */

#toast-container {

    z-index: 9999 !important;

}



/* === MULTI-IMAGE BATCH UPLOAD STYLES === */

.post-images-grid { display: grid; gap: 4px; overflow: hidden; border-radius: 12px; margin-top: 10px; }

.post-images-grid.grid-1 { grid-template-columns: 1fr; }

.post-images-grid.grid-1 img { height: auto !important; max-height: 500px; object-fit: contain !important; border-radius: 12px; background: rgba(0,0,0,0.03); }

.post-images-grid.grid-2 { grid-template-columns: 1fr 1fr; }

.post-images-grid.grid-3 { grid-template-columns: 1fr 1fr; }

.post-images-grid.grid-3 img:first-child { grid-column: span 2; }

.post-images-grid.grid-4, .post-images-grid.grid-more { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }

.post-images-grid img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: 0.2s; }

.post-images-grid img:hover { filter: brightness(0.9); transform: scale(1.02); }



/* === FANCY MOBILE MODE === */

@media (max-width: 768px) {

    /* Glassmorphic Topbar */

    .mobile-topbar {

        background: rgba(255, 255, 255, 0.75) !important;

        backdrop-filter: blur(15px);

        -webkit-backdrop-filter: blur(15px);

        box-shadow: 0 4px 20px rgba(0,0,0,0.05);

        border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    }

    body.dark-mode .mobile-topbar {

        background: rgba(15, 23, 42, 0.75) !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    }

    

    /* Fancy Bottom Nav */

    .mobile-bottom-nav {

        background: rgba(255, 255, 255, 0.85) !important;

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        border-top: 1px solid rgba(255, 255, 255, 0.3);

        box-shadow: 0 -5px 25px rgba(0,0,0,0.05);

        border-radius: 20px 20px 0 0;

        padding: 5px 10px;

    }

    body.dark-mode .mobile-bottom-nav {

        background: rgba(15, 23, 42, 0.85) !important;

        border-top: 1px solid rgba(255, 255, 255, 0.05);

    }

    .mob-nav-btn {

        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

    }

    .mob-nav-btn.active-mob {

        color: var(--uog-blue);

        transform: scale(1.1);

    }

    

    /* Floating Compose Button */

    .mob-compose-btn {

        background: linear-gradient(135deg, var(--uog-blue), var(--zai-accent));

        color: white !important;

        border-radius: 50%;

        box-shadow: 0 10px 25px rgba(15, 76, 129, 0.4);

        transform: translateY(-15px);

        height: 60px;

        width: 60px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 4px solid var(--bg-main) !important;

    }

    

    /* Posts Styling */

    .edu-card.post-card {

        border-radius: 20px !important;

        box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;

        margin-bottom: 24px !important;

        border: 1px solid rgba(255,255,255,0.5) !important;

        background: rgba(255, 255, 255, 0.95);

    }

    body.dark-mode .edu-card.post-card {

        background: rgba(30, 41, 59, 0.95);

        border: 1px solid rgba(255,255,255,0.05) !important;

    }



    .post-header {

        flex-wrap: wrap;

        gap: 8px;

    }

    .post-header > div:last-child {

        width: 100%;

        justify-content: flex-start;

        flex-wrap: wrap;

    }

    .post-action-btn {

        min-height: 36px;

        padding: 6px 12px !important;

        font-size: 0.8rem !important;

    }

    .chat-layout {

        height: calc(100dvh - 130px) !important;

        min-height: 420px;

        border-radius: 12px !important;

    }

    .chat-input-row {

        padding-bottom: max(8px, env(safe-area-inset-bottom));

    }

    .chat-user-item {

        padding: 14px 16px;

        min-height: 64px;

    }

}



/* Profile photo upload (profile tab + sidebar) */

.profile-avatar-upload {

    position: relative;

}

.profile-avatar-upload-badge {

    position: absolute;

    right: 2px;

    bottom: 2px;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background: var(--zai-accent);

    color: #1e1e1e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.7rem;

    border: 2px solid #fff;

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

    pointer-events: none;

}

.avatar-upload-container .avatar-edit-btn {

    cursor: pointer;

}



/* Social-style ⋮ content menu */

.content-menu-wrap {

    position: relative;

    display: inline-flex;

    align-items: center;

}

.content-menu-btn {

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 50%;

    background: var(--bg-main);

    color: var(--text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s, color 0.2s;

}

.content-menu-btn:hover {

    background: var(--border-color);

    color: var(--text-primary);

}

.content-menu-dropdown {

    display: none;

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 4px;

    min-width: 160px;

    background: var(--bg-surface-solid, #fff);

    border: 1px solid var(--border-color);

    border-radius: 10px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

    z-index: 200;

    overflow: hidden;

    padding: 4px 0;

}

.content-menu-dropdown.open {

    display: block;

}

.content-menu-item {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 10px 14px;

    border: none;

    background: transparent;

    font-size: 0.88rem;

    color: var(--text-primary);

    cursor: pointer;

    text-align: left;

}

.content-menu-item:hover {

    background: var(--bg-main);

}

.content-menu-item.danger {

    color: #dc2626;

}

.content-menu-item i {

    width: 16px;

    text-align: center;

}

.comment-actions {

    display: flex;

    gap: 4px;

}

.comment-action-link {

    border: none;

    background: transparent;

    color: var(--text-secondary);

    cursor: pointer;

    padding: 2px 6px;

    font-size: 0.75rem;

    border-radius: 4px;

}

.comment-action-link:hover {

    background: rgba(0,0,0,0.05);

    color: var(--text-primary);

}

.comment-action-link.danger:hover {

    color: #dc2626;

}

.comment-edited-tag {

    font-size: 0.68rem;

    color: #9ca3af;

    font-style: italic;

    font-weight: 400;

}

.social-bar .content-menu-wrap {

    margin-left: auto;

}



/* Mobile: NEVER show desktop sidebar in main layout (use bottom nav + menu drawer) */

@media (max-width: 768px) {

    .edu-sidebar-left,

    .edu-sidebar-right,

    .desktop-sidebar-nav {

        display: none !important;

        visibility: hidden !important;

        width: 0 !important;

        min-width: 0 !important;

        max-width: 0 !important;

        padding: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;

        position: absolute !important;

        left: -9999px !important;

        pointer-events: none !important;

        opacity: 0 !important;

    }

    .edu-body {

        flex-direction: column !important;

    }

    .edu-main {

        width: 100% !important;

        max-width: 100% !important;

        flex: 1 1 auto !important;

    }

}



/* ==========================================================================

   FACEBOOK-STYLE MOBILE SHELL (max-width 768px + forced-mobile-mode)

   ========================================================================== */

@media (max-width: 768px), (body.forced-mobile-mode) {



    body.fb-mobile-shell {

        background: #f0f2f5 !important;

        -webkit-tap-highlight-color: transparent;

    }



    /* ── Top header (Facebook blue bar) ── */

    .fb-mobile-shell .mobile-topbar {

        display: flex !important;

        align-items: center;

        justify-content: space-between;

        padding: 8px 12px !important;

        min-height: 56px;

        background: var(--bg-surface-solid) !important;

        border-bottom: 1px solid var(--border-color) !important;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;

        position: sticky;

        top: 0;

        z-index: 150;

    }

    .fb-mobile-shell .mobile-topbar-left {

        gap: 8px;

        flex: 1;

        min-width: 0;

    }

    .fb-mobile-shell .mob-hamburger-btn {

        color: var(--text-primary) !important;

        width: 40px;

        height: 40px;

        border-radius: 50%;

        background: var(--border-color);

    }

    .fb-mobile-shell .mob-header-logo {

        display: none;

    }

    .fb-mobile-shell .fb-mobile-brand {

        min-width: 0;

        flex: 1;

    }

    .fb-mobile-shell .fb-mobile-brand-title {

        font-size: 1.35rem;

        font-weight: 700;

        color: var(--text-primary);

        letter-spacing: -0.3px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        font-family: 'Outfit', 'Segoe UI', sans-serif;

    }

    .fb-mobile-shell .mobile-topbar-right {

        gap: 4px;

    }

    .fb-mobile-shell .mobile-icon-btn {

        color: var(--text-primary) !important;

        width: 40px;

        height: 40px;

        border-radius: 50%;

        background: var(--border-color);

        font-size: 1.05rem;

    }

    .fb-mobile-shell .mobile-icon-btn:active {

        background: var(--text-secondary);

        color: white !important;

    }

    .fb-mobile-shell .nav-util-mob-btn i {

        color: var(--text-primary) !important;

        filter: none !important;

    }

    .fb-mobile-shell .mob-avatar-top {

        width: 36px !important;

        height: 36px !important;

        border: 2px solid rgba(255, 255, 255, 0.9) !important;

        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

    }



    /* Search strip under header */

    .fb-mobile-shell .mobile-search-bar {

        background: #fff !important;

        padding: 8px 12px !important;

        border-bottom: 1px solid #e4e6eb;

        top: 56px;

    }

    .fb-mobile-shell .mobile-search-bar input {

        background: #f0f2f5 !important;

        border-radius: 20px !important;

        padding: 10px 14px !important;

        font-size: 0.95rem !important;

    }



    /* ── Main feed area ── */

    .fb-mobile-shell .edu-body {

        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;

        background: #f0f2f5;

    }

    .fb-mobile-shell .edu-main {

        padding: 0 !important;

        background: #f0f2f5 !important;

        border: none !important;

        box-shadow: none !important;

        border-radius: 0 !important;

    }



    /* ── Pro Apps on Mobile — full scrollable view ── */

    .fb-mobile-shell.pro-apps-view .edu-body {

        display: block !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        padding-bottom: 0 !important;

        height: calc(100dvh - 56px) !important;

        background: var(--bg-main) !important;

    }

    .fb-mobile-shell.pro-apps-view .edu-main {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        height: calc(100dvh - 56px) !important;

        padding: 0 !important;

        background: var(--bg-main) !important;

        flex: none !important;

    }

    .fb-mobile-shell.pro-apps-view #list-container,

    .fb-mobile-shell.pro-apps-view #list-container.pro-apps-active {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 10px !important;

        overflow: visible !important;

        padding: 0 !important;

        margin: 0 !important;

    }

    .fb-mobile-shell.pro-apps-view .pro-apps-shell {

        display: block !important;

        height: auto !important;

        min-height: 10px !important;

        overflow-y: visible !important;

        padding: 12px 10px 80px !important;

        width: 100% !important;

    }

    .fb-mobile-shell.mob-feed-layout .view-header {

        display: none !important;

    }

    .fb-mobile-shell #broadcast-ticker-container {

        margin: 0 0 8px !important;

        border-radius: 0 !important;

    }



    /* Composer — Facebook "What's on your mind" */

    .fb-mobile-shell .create-post-card {

        margin: 0 0 8px !important;

        padding: 12px 14px !important;

        border-radius: 0 !important;

        border: none !important;

        box-shadow: none !important;

        background: #fff !important;

    }

    .fb-mobile-shell .create-post-card #open-compose {

        background: #f0f2f5 !important;

        border-radius: 999px !important;

        padding: 12px 16px !important;

        min-height: 44px;

    }

    .fb-mobile-shell .create-action-btn {

        border-radius: 8px !important;

        padding: 10px 6px !important;

    }

    .fb-mobile-shell .create-action-btn span {

        font-size: 0.8rem !important;

    }



    /* Stories rail */

    .fb-mobile-shell .fb-stories-rail,

    .fb-mobile-shell .status-stories-container {

        margin: 0 0 8px !important;

        padding: 12px 10px !important;

        border-radius: 0 !important;

        border: none !important;

        background: #fff !important;

        gap: 10px !important;

        box-shadow: none !important;

    }

    .fb-mobile-shell .status-story-card {

        flex-shrink: 0;

        border-radius: 10px !important;

        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;

    }



    /* Feed posts — edge-to-edge cards */

    .fb-mobile-shell .edu-card.post,

    .fb-mobile-shell .post {

        margin: 0 0 8px !important;

        padding: 12px 14px !important;

        border-radius: 0 !important;

        border: none !important;

        box-shadow: none !important;

        background: #fff !important;

    }

    .fb-mobile-shell .post-header {

        margin-bottom: 8px;

    }

    .fb-mobile-shell .post-header .avatar-small {

        width: 40px !important;

        height: 40px !important;

    }

    .fb-mobile-shell .post-name {

        font-size: 0.95rem !important;

        font-weight: 700 !important;

        color: #050505 !important;

    }

    .fb-mobile-shell .post-meta {

        font-size: 0.75rem !important;

        color: #65676b !important;

    }

    .fb-mobile-shell .post-text {

        font-size: 0.95rem !important;

        line-height: 1.45 !important;

        color: #050505 !important;

        margin-bottom: 10px !important;

    }

    .fb-mobile-shell .post-badge {

        background: #e7f3ff !important;

        color: #1877f2 !important;

        border: none !important;

    }



    /* Like / Comment / Share bar */

    .fb-mobile-shell .post-interaction-bar {

        display: flex !important;

        align-items: stretch !important;

        gap: 0 !important;

        margin-top: 8px !important;

        padding: 4px 0 0 !important;

        border-top: 1px solid #ced0d4 !important;

    }

    .fb-mobile-shell .interaction-btn {

        flex: 1 !important;

        padding: 10px 4px !important;

        border-radius: 4px !important;

        font-size: 0.78rem !important;

        font-weight: 600 !important;

        color: #65676b !important;

        gap: 6px !important;

    }

    .fb-mobile-shell .interaction-btn i {

        font-size: 1.15rem !important;

    }

    .fb-mobile-shell .interaction-btn:active {

        background: #f0f2f5 !important;

    }

    .fb-mobile-shell .interaction-btn.liked {

        color: #1877f2 !important;

    }



    /* Comments */

    .fb-mobile-shell .post-comments-section {

        background: #f0f2f5 !important;

        margin: 10px -14px -12px !important;

        padding: 10px 14px !important;

        border-top: 1px solid #e4e6eb;

    }

    .fb-mobile-shell .comment-input-box {

        background: #f0f2f5 !important;

        border: none !important;

        border-radius: 999px !important;

        min-height: 40px;

    }

    .fb-mobile-shell .comment-submit-btn {

        background: #1877f2 !important;

        color: #fff !important;

    }



    /* Sort bar */

    .fb-mobile-shell .feed-sort-bar {

        margin: 0 0 8px !important;

        border-radius: 0 !important;

        background: #fff !important;

        border: none !important;

        box-shadow: none !important;

    }



    /* Events / Jobs cards on mobile */

    .fb-mobile-shell .event-card,

    .fb-mobile-shell .job-board-card {

        border-radius: 0 !important;

        margin-bottom: 8px !important;

        box-shadow: none !important;

        border: none !important;

        border-bottom: 8px solid #f0f2f5 !important;

    }

    .fb-mobile-shell .social-bar {

        flex-wrap: wrap;

        gap: 6px;

    }



    /* Directory — 2 col grid */

    .fb-mobile-shell .directory-grid {

        padding: 8px !important;

        gap: 8px !important;

    }

    .fb-mobile-shell .directory-filter-bar {

        margin: 0 0 8px !important;

        border-radius: 0 !important;

    }



    /* Software cards */

    .fb-mobile-shell .software-grid {

        padding: 0 !important;

        gap: 8px !important;

    }

    .fb-mobile-shell .sw-card {

        border-radius: 0 !important;

        margin-bottom: 8px !important;

    }



    /* Messages full screen feel */

    .fb-mobile-shell .chat-layout {

        margin: 0 !important;

        height: calc(100dvh - 56px - 62px) !important;

        min-height: 0 !important;

        border-radius: 0 !important;

        border: none !important;

    }

    .fb-mobile-shell .chat-sidebar {

        width: 100% !important;

        background: #fff !important;

    }

    .fb-mobile-shell .chat-header {

        background: #1877f2 !important;

    }



    /* ── Bottom nav (white, 5 tabs) ── */

    .fb-mobile-shell .mobile-bottom-nav,

    .fb-mobile-shell .fb-bottom-nav {

        display: flex !important;

        position: fixed !important;

        bottom: 0;

        left: 0;

        right: 0;

        z-index: 200;

        background: #fff !important;

        border-top: 1px solid #ced0d4 !important;

        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important;

        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;

        border-radius: 0 !important;

        backdrop-filter: none !important;

        justify-content: space-around;

        align-items: flex-end;

        min-height: 56px;

    }

    .fb-mobile-shell .mob-nav-btn {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 3px !important;

        color: #65676b !important;

        font-size: 0.62rem !important;

        font-weight: 600 !important;

        padding: 4px 10px !important;

        min-width: 0;

        flex: 1;

        max-width: 72px;

        line-height: 1.2 !important;

    }

    .fb-mobile-shell .mob-nav-btn i,

    .fb-mobile-shell .mob-nav-btn .fab {

        font-size: 22px !important;

        color: #65676b !important;

        display: block !important;

        line-height: 1 !important;

    }

    .fb-mobile-shell .mob-nav-btn span:not(.mob-nav-icon-wrap):not(.mob-nav-dot):not(.chat-badge) {

        display: block !important;

        font-size: 0.65rem !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

    }

    .fb-mobile-shell .mob-nav-btn.active-mob {

        color: #1877f2 !important;

        transform: none !important;

        background: transparent !important;

    }

    .fb-mobile-shell .mob-nav-btn.active-mob i,

    .fb-mobile-shell .mob-nav-btn.active-mob .fab {

        color: #1877f2 !important;

    }

    .fb-mobile-shell .mob-nav-icon-wrap {

        position: relative;

        display: inline-flex;

    }

    .fb-mobile-shell .mob-nav-dot {

        position: absolute;

        top: 0;

        right: -2px;

        width: 9px;

        height: 9px;

        background: #e41e3f;

        border-radius: 50%;

        border: 2px solid #fff;

    }



    /* Center create button */

    .fb-mobile-shell .mob-compose-btn {

        flex: 0 0 auto !important;

        width: 48px !important;

        height: 48px !important;

        min-width: 48px !important;

        max-width: 48px !important;

        margin-top: -22px !important;

        border-radius: 50% !important;

        background: #1877f2 !important;

        color: #fff !important;

        border: 4px solid #fff !important;

        box-shadow: 0 4px 12px rgba(24, 119, 242, 0.45) !important;

        transform: none !important;

    }

    .fb-mobile-shell .mob-compose-btn i {

        font-size: 1.25rem !important;

        color: #fff !important;

    }



    /* Menu drawer — light Facebook menu sheet */

    .fb-mobile-shell .mobile-drawer {

        background: #fff !important;

        border: none !important;

        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15) !important;

        padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;

    }

    .fb-mobile-shell .mobile-drawer-handle {

        background: #ced0d4 !important;

    }

    .fb-mobile-shell .mobile-drawer-title {

        color: #050505 !important;

        font-size: 1.1rem !important;

    }

    .fb-mobile-shell .mob-drawer-item span {

        color: #050505 !important;

        font-weight: 600 !important;

    }

    .fb-mobile-shell .mob-drawer-item:active {

        background: #f0f2f5 !important;

        border-radius: 12px;

    }



    /* Profile sheet */

    .fb-mobile-shell #mobile-profile-sheet.mobile-drawer {

        background: #fff !important;

    }

    .fb-mobile-shell .mob-profile-name {

        color: #050505 !important;

    }

    .fb-mobile-shell .mob-profile-role {

        color: #65676b !important;

    }

    .fb-mobile-shell .mob-profile-btn {

        background: #f0f2f5 !important;

        border: none !important;

        color: #050505 !important;

        font-weight: 600 !important;

    }

    .fb-mobile-shell .mob-profile-btn i {

        color: #1877f2 !important;

    }

    .fb-mobile-shell .mob-profile-header {

        border-bottom-color: #e4e6eb !important;

    }



    /* Toast above bottom nav */

    .fb-mobile-shell #toast-container {

        bottom: calc(72px + env(safe-area-inset-bottom, 0px));

    }



    /* Content menu on mobile */

    .fb-mobile-shell .content-menu-dropdown {

        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    }

}



/* forced-mobile-mode inherits same shell when JS adds fb-mobile-shell */

body.forced-mobile-mode.fb-mobile-shell .edu-navbar,

body.forced-mobile-mode.fb-mobile-shell .edu-sidebar-left,

body.forced-mobile-mode.fb-mobile-shell .edu-sidebar-right,

body.forced-mobile-mode.fb-mobile-shell .desktop-sidebar-nav {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

}



/* Mobile menu drawer — full sidebar as list (no duplicate on screen) */

.mob-menu-list {

    display: flex;

    flex-direction: column;

    gap: 2px;

    max-height: min(70vh, 520px);

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    padding-bottom: 8px;

}

.mob-menu-row {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 10px 12px;

    border: none;

    border-radius: 8px;

    background: transparent;

    cursor: pointer;

    font-family: 'Outfit', 'Segoe UI', sans-serif;

    font-size: 0.95rem;

    font-weight: 500;

    color: #050505;

    text-align: left;

    transition: background 0.15s;

}

.mob-menu-row:active,

.mob-menu-row.active {

    background: #f0f2f5;

}

.mob-menu-row.active {

    color: #1877f2;

    font-weight: 600;

}

.mob-menu-row-danger > span:nth-child(2) {

    color: #dc2626;

    font-weight: 700;

}

.mob-menu-icon {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 1rem;

    flex-shrink: 0;

}

.mob-menu-icon.bg-home { background: #1877f2; }

.mob-menu-icon.bg-posts { background: #6366f1; }

.mob-menu-icon.bg-events { background: #f02849; }

.mob-menu-icon.bg-jobs { background: #f7b928; color: #1c1e21; }

.mob-menu-icon.bg-alumni { background: #2ab8a6; }

.mob-menu-icon.bg-election { background: #e04a3f; }

.mob-menu-icon.bg-messages { background: #10b981; }

.mob-menu-icon.bg-profile { background: #8b5cf6; }

.mob-menu-icon.bg-settings { background: #6b7280; }

.mob-menu-icon.bg-records { background: #7c3aed; }

.mob-menu-icon.bg-software { background: #f97316; }

.mob-menu-icon.bg-hall { background: #eab308; color: #1c1e21; }

.mob-menu-icon.bg-saved { background: #a855f7; }

.mob-menu-chevron {

    margin-left: auto;

    font-size: 0.75rem;

    color: #9ca3af;

}

.mob-menu-badge {

    margin-left: auto;

    min-width: 22px;

    height: 22px;

    padding: 0 6px;

    border-radius: 999px;

    background: #e4e6eb;

    color: #050505;

    font-size: 0.72rem;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

.mob-menu-divider {

    height: 1px;

    background: #e4e6eb;

    margin: 8px 4px;

}

#mobile-more-drawer .mobile-drawer-grid {

    display: none;

}



/* Global Search Panel */

.global-search-overlay {

    position: fixed;

    inset: 0;

    z-index: 1200;

    background: rgba(15, 23, 42, 0.45);

    backdrop-filter: blur(4px);

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding: 72px 16px 24px;

}

.global-search-panel {

    width: 100%;

    max-width: 640px;

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    box-shadow: var(--shadow-lg);

    overflow: hidden;

    max-height: min(70vh, 560px);

    display: flex;

    flex-direction: column;

}

.gs-header {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    border-bottom: 1px solid var(--border-color);

    font-weight: 700;

    color: var(--text-primary);

}

.gs-header i { color: var(--uog-blue); }

.gs-close-btn {

    margin-left: auto;

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    background: var(--border-color);

    color: var(--text-primary);

    cursor: pointer;

}

.gs-filters {

    display: none !important;

    flex-wrap: wrap;

    gap: 8px;

    padding: 12px 16px;

    border-bottom: 1px solid var(--border-color);

}

.gs-filter-chip {

    border: 1px solid var(--border-color);

    background: var(--bg-main);

    color: var(--text-secondary);

    font-size: 0.8rem;

    font-weight: 600;

    padding: 6px 12px;

    border-radius: 20px;

    cursor: pointer;

    font-family: inherit;

    transition: 0.2s;

}

.gs-filter-chip.active,

.gs-filter-chip:hover {

    background: var(--uog-blue);

    color: #fff;

    border-color: var(--uog-blue);

}

.gs-results {

    display: none !important;

    overflow-y: auto;

    padding: 8px 0 12px;

    flex: 1;

}

.gs-hint, .gs-empty, .gs-loading {

    padding: 2rem 1.5rem;

    text-align: center;

    color: var(--text-secondary);

    font-size: 0.9rem;

}

.gs-empty i { font-size: 2rem; opacity: 0.25; margin-bottom: 10px; display: block; }

.gs-section-title {

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--text-secondary);

    padding: 10px 16px 6px;

}

.gs-result-row {

    display: block;

    width: 100%;

    text-align: left;

    border: none;

    background: transparent;

    padding: 10px 16px;

    cursor: pointer;

    font-family: inherit;

    transition: background 0.15s;

}

.gs-result-row:hover { background: var(--primary-active); }

.gs-result-main {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-primary);

    line-height: 1.35;

}

.gs-result-sub {

    font-size: 0.78rem;

    color: var(--text-secondary);

    margin-top: 2px;

}

body.gs-open { overflow: hidden; }



/* Alumni sub-tabs & Career Map */

.alumni-view-tabs {

    display: flex;

    gap: 8px;

    margin-bottom: 14px;

    flex-wrap: wrap;

}

.alumni-subtab {

    flex: 1;

    min-width: 140px;

    padding: 10px 16px;

    border-radius: 10px;

    border: 1px solid var(--border-color);

    background: var(--bg-surface-solid);

    color: var(--text-secondary);

    font-weight: 600;

    font-size: 0.88rem;

    cursor: pointer;

    font-family: inherit;

    transition: 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}

.alumni-subtab.active {

    background: var(--uog-blue);

    color: #fff;

    border-color: var(--uog-blue);

    box-shadow: 0 4px 12px rgba(15, 76, 129, 0.25);

}

#career-map-panel { margin-bottom: 16px; }

.career-map-wrap { padding: 1.25rem !important; }

.career-map-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 12px;

    flex-wrap: wrap;

    margin-bottom: 1rem;

}

.career-map-header h3 {

    margin: 0 0 4px;

    font-size: 1.15rem;

    color: var(--uog-blue);

}

.career-map-header p {

    margin: 0;

    font-size: 0.85rem;

    color: var(--text-secondary);

}

.career-jobs-link-btn {

    border: 1px solid var(--uog-blue);

    background: transparent;

    color: var(--uog-blue);

    font-weight: 600;

    font-size: 0.85rem;

    padding: 8px 14px;

    border-radius: 8px;

    cursor: pointer;

    font-family: inherit;

}

.career-jobs-link-btn:hover { background: var(--primary-active); }

.career-map-filters {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 12px;

    margin-bottom: 1.25rem;

}

.career-map-filters label {

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--text-secondary);

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.career-map-stats {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 16px;

    margin-bottom: 1rem;

}

.career-stat-block h4 {

    font-size: 0.8rem;

    margin: 0 0 10px;

    color: var(--text-secondary);

}

.career-chip-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.career-chip {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 12px;

    border-radius: 20px;

    border: 1px solid var(--border-color);

    background: var(--bg-main);

    cursor: pointer;

    font-family: inherit;

    font-size: 0.82rem;

    color: var(--text-primary);

}

.career-chip strong {

    background: var(--uog-blue);

    color: #fff;

    font-size: 0.72rem;

    padding: 2px 7px;

    border-radius: 10px;

}

.career-chip.active { border-color: var(--uog-blue); background: var(--primary-active); }

.career-chip.industry strong { background: var(--zai-accent); color: #1e293b; }

.career-map-count {

    font-size: 0.85rem;

    color: var(--text-secondary);

    margin-bottom: 12px;

}

.career-alumni-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

    gap: 14px;

}

.career-alumni-card {

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 14px;

    background: var(--bg-surface-solid);

    cursor: pointer;

    transition: border-color 0.2s, box-shadow 0.2s;

}

.career-alumni-card:hover {

    border-color: var(--uog-blue);

    box-shadow: var(--shadow-md);

}

.career-alumni-top {

    display: flex;

    gap: 12px;

    align-items: center;

    margin-bottom: 10px;

}

.career-alumni-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: var(--uog-blue);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    flex-shrink: 0;

}

.career-alumni-name { font-weight: 700; color: var(--text-primary); }

.career-alumni-meta { font-size: 0.78rem; color: var(--text-secondary); }

.career-line {

    font-size: 0.82rem;

    color: var(--text-secondary);

    margin-bottom: 6px;

}

.career-li {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.8rem;

    font-weight: 600;

    color: #0a66c2;

    text-decoration: none;

    margin-bottom: 8px;

}

.career-jobs-label {

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--text-secondary);

    margin: 8px 0 6px;

}

.career-related-jobs { display: flex; flex-direction: column; gap: 6px; }

.career-job-pill {

    text-align: left;

    border: 1px dashed var(--border-color);

    background: var(--bg-main);

    border-radius: 8px;

    padding: 6px 10px;

    font-size: 0.75rem;

    cursor: pointer;

    font-family: inherit;

    color: var(--text-primary);

}

.career-job-pill:hover { border-color: var(--uog-blue); }

.career-muted, .career-muted-sm, .career-empty {

    font-size: 0.82rem;

    color: var(--text-secondary);

}

.career-muted-sm { font-size: 0.75rem; }

.career-empty { grid-column: 1 / -1; padding: 2rem; text-align: center; }

.career-map-loading { padding: 2rem; text-align: center; color: var(--text-secondary); }

.career-self-banner,

.career-admin-banner {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 14px;

    border: 1px solid rgba(15, 76, 129, 0.2);

    background: rgba(15, 76, 129, 0.06);

}

.career-self-banner.complete {

    border-color: rgba(16, 185, 129, 0.35);

    background: rgba(16, 185, 129, 0.08);

}

.career-admin-banner {

    border-color: rgba(245, 158, 11, 0.35);

    background: rgba(245, 158, 11, 0.08);

}

.career-self-banner p,

.career-admin-banner p {

    margin: 4px 0 0;

    font-size: 0.82rem;

    color: var(--text-secondary);

}

.career-admin-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

}

.career-admin-actions select { min-width: 200px; }

.career-fill-btn {

    background: var(--uog-blue);

    color: #fff;

    border: none;

    padding: 10px 16px;

    border-radius: 8px;

    font-weight: 700;

    font-size: 0.85rem;

    cursor: pointer;

    font-family: inherit;

    white-space: nowrap;

}

.career-fill-btn.small {

    padding: 6px 12px;

    font-size: 0.78rem;

    width: 100%;

}

.career-fill-btn:hover { filter: brightness(1.08); }

.career-edit-btn {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    border: 1px solid var(--border-color);

    background: var(--bg-main);

    color: var(--uog-blue);

    cursor: pointer;

    flex-shrink: 0;

}

.career-edit-btn:hover { background: var(--primary-active); }

.career-alumni-card.incomplete { border-style: dashed; opacity: 0.95; }

.career-badge {

    font-size: 0.65rem;

    font-weight: 700;

    padding: 2px 8px;

    border-radius: 10px;

    vertical-align: middle;

    margin-left: 4px;

}

.career-badge.ok { background: rgba(16, 185, 129, 0.15); color: #059669; }

.career-badge.grad { background: rgba(15, 76, 129, 0.12); color: var(--uog-blue); }

.career-badge.missing { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.career-chat-link {

    margin-top: 10px;

    background: none;

    border: none;

    color: var(--uog-blue);

    font-size: 0.8rem;

    font-weight: 600;

    cursor: pointer;

    font-family: inherit;

    padding: 0;

}



@media (max-width: 768px) {

    .global-search-overlay { padding-top: 56px; }

    .global-search-panel { max-height: 75vh; border-radius: 12px 12px 0 0; }

    .career-map-header { flex-direction: column; }

}





/* ═══════════════════════════════════════════════════════════════════════════

   ✨ ENHANCED MOBILE & DESKTOP UX — v2026.05

   ═══════════════════════════════════════════════════════════════════════════ */



/* ── Auth Page: Better mobile login experience ── */

@media (max-width: 768px) {

    .auth-bg {

        background: linear-gradient(160deg, #0a2d52 0%, #0f4c81 45%, #1a6eb5 100%) !important;

        min-height: 100dvh;

        align-items: flex-end !important;

        padding: 0 !important;

    }

    .edu-login-container {

        background: var(--bg-surface-solid) !important;

        border-radius: 28px 28px 0 0 !important;

        min-height: 72dvh !important;

        padding: 0 !important;

        box-shadow: 0 -16px 60px rgba(0,0,0,0.35) !important;

        width: 100% !important;

        max-width: 100% !important;

    }

    .edu-right {

        padding: 2rem 1.5rem 2.5rem !important;

        background: transparent !important;

    }

    .edu-right::before {

        content: '' !important;

        display: block;

        width: 44px;

        height: 5px;

        background: var(--border-color);

        border-radius: 3px;

        margin: 0 auto 1.5rem;

    }

    .edu-login-box {

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        padding: 0 !important;

    }

    .edu-login-box .form-control {

        height: 52px;

        font-size: 1rem !important;

        border-radius: 14px !important;

        border: 1.5px solid var(--border-color) !important;

        padding: 0 16px !important;

        background: var(--bg-main) !important;

        margin-bottom: 14px !important;

    }

    .edu-login-box .form-control:focus {

        border-color: var(--uog-blue) !important;

        box-shadow: 0 0 0 3px rgba(15,76,129,0.12) !important;

    }

    .edu-login-box .btn-primary {

        height: 52px !important;

        border-radius: 14px !important;

        font-size: 1rem !important;

        font-weight: 700 !important;

        letter-spacing: 0.01em;

        background: var(--uog-blue) !important;

        box-shadow: 0 6px 20px rgba(15,76,129,0.35) !important;

    }

    .edu-login-box .btn-outline-primary {

        height: 48px !important;

        border-radius: 14px !important;

        font-size: 0.95rem !important;

        font-weight: 600 !important;

        width: 100% !important;

    }

    .edu-divider {

        margin: 18px 0 !important;

    }

    /* Floating bubbles hidden on mobile for performance */

    .floating-glass-bubble { display: none !important; }

}



/* ── Mobile Top Bar: Glassmorphic UOG style ── */

@media (max-width: 768px) {

    .mobile-topbar {

        background: var(--bg-surface-solid) !important;

        backdrop-filter: blur(20px) !important;

        -webkit-backdrop-filter: blur(20px) !important;

        border-bottom: 1px solid var(--border-color) !important;

        box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;

        padding: 8px 14px !important;

        min-height: 56px;

        position: sticky;

        top: 0;

        z-index: 150;

    }

    .fb-mobile-brand-title {

        font-size: 1rem !important;

        font-weight: 800 !important;

        color: var(--uog-blue) !important;

        letter-spacing: -0.3px;

    }

    .mobile-icon-btn {

        width: 38px !important;

        height: 38px !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 1.05rem !important;

        color: var(--text-primary) !important;

        background: var(--bg-main) !important;

        transition: background 0.2s, transform 0.15s !important;

    }

    .mobile-icon-btn:active {

        background: var(--border-color) !important;

        transform: scale(0.92) !important;

    }

    .mob-avatar-top {

        width: 34px !important;

        height: 34px !important;

        font-size: 0.85rem !important;

        border: 2px solid var(--border-color) !important;

    }

}



/* ── Mobile Bottom Nav: Premium UOG style ── */

@media (max-width: 768px) {

    .mobile-bottom-nav {

        background: var(--bg-surface-solid) !important;

        backdrop-filter: blur(20px) !important;

        -webkit-backdrop-filter: blur(20px) !important;

        border-top: 1px solid var(--border-color) !important;

        box-shadow: 0 -4px 24px rgba(0,0,0,0.08) !important;

        border-radius: 20px 20px 0 0 !important;

        padding: 6px 8px env(safe-area-inset-bottom, 8px) !important;

        height: auto !important;

    }

    .mob-nav-btn {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 3px !important;

        color: var(--text-secondary) !important;

        font-size: 0.62rem !important;

        font-weight: 600 !important;

        padding: 6px 10px !important;

        border-radius: 14px !important;

        transition: color 0.2s, background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;

        min-width: 48px !important;

        line-height: 1.2 !important;

    }

    .mob-nav-btn i {

        font-size: 22px !important;

        display: block !important;

        line-height: 1 !important;

        transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;

    }

    .mob-nav-btn span:not(.mob-nav-icon-wrap):not(.mob-nav-dot):not(.chat-badge) {

        display: block !important;

        font-size: 0.65rem !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

    }

    .mob-nav-btn.active-mob {

        color: var(--uog-blue) !important;

        background: rgba(15,76,129,0.08) !important;

    }

    .mob-nav-btn.active-mob i {

        transform: scale(1.15) !important;

        color: var(--uog-blue) !important;

    }

    .mob-nav-btn:active i {

        transform: scale(0.88) !important;

    }

    /* Center compose button */

    .mob-compose-btn {

        background: linear-gradient(135deg, var(--uog-blue), #1a6eb5) !important;

        color: white !important;

        border-radius: 50% !important;

        width: 54px !important;

        height: 54px !important;

        min-width: 54px !important;

        padding: 0 !important;

        box-shadow: 0 6px 20px rgba(15,76,129,0.4) !important;

        transform: translateY(-12px) !important;

        border: 3px solid var(--bg-surface-solid) !important;

        margin-bottom: 0 !important;

    }

    .mob-compose-btn i {

        font-size: 1.3rem !important;

        color: white !important;

    }

    .mob-compose-btn span { display: none !important; }

}



/* ── Mobile Feed: Better card spacing & touch targets ── */

@media (max-width: 768px) {

    .edu-body {

        padding-bottom: 90px !important;

    }

    .edu-main {

        padding: 10px 10px !important;

    }

    /* Post cards */

    .edu-card {

        border-radius: 18px !important;

        margin-bottom: 12px !important;

        box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;

        border: 1px solid var(--border-color) !important;

        overflow: hidden;

    }

    .post {

        padding: 14px 16px !important;

    }

    .post-name { font-size: 0.95rem !important; }

    .post-meta { font-size: 0.75rem !important; }

    .post-text { font-size: 0.92rem !important; line-height: 1.6 !important; }

    /* Interaction buttons — bigger touch targets */

    .interaction-btn {

        padding: 10px 8px !important;

        font-size: 0.85rem !important;

        border-radius: 12px !important;

        min-height: 42px !important;

    }

    /* Comment input */

    .comment-input-box {

        font-size: 0.9rem !important;

        padding: 10px 14px !important;

        border-radius: 22px !important;

    }

    .comment-submit-btn {

        width: 40px !important;

        height: 40px !important;

    }

    /* Create post card */

    .create-post-card {

        border-radius: 18px !important;

        padding: 14px 16px !important;

    }

    .create-top {

        border-radius: 22px !important;

        padding: 10px 14px !important;

    }

    .create-top input {

        font-size: 0.95rem !important;

    }

    /* Action buttons */

    .create-action {

        font-size: 0.85rem !important;

        gap: 6px !important;

    }

    /* View header */

    .view-header h2 { font-size: 1.15rem !important; font-weight: 800 !important; }

    .view-header p { font-size: 0.82rem !important; }

    /* Directory grid */

    .directory-grid {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 10px !important;

    }

    .student-card {

        padding: 14px 10px !important;

        border-radius: 16px !important;

    }

    .student-card h3 { font-size: 0.88rem !important; }

    .student-card p { font-size: 0.75rem !important; }

    /* Software grid */

    .software-grid { grid-template-columns: 1fr !important; }

    .sw-card { border-radius: 16px !important; }

    /* Notice board */

    .notice-board { border-radius: 16px !important; }

    /* Sidebar drawer */

    .mobile-drawer {

        border-radius: 24px 24px 0 0 !important;

        background: var(--bg-surface-solid) !important;

        border-top: 1px solid var(--border-color) !important;

        box-shadow: 0 -8px 40px rgba(0,0,0,0.15) !important;

        padding: 12px 16px 24px !important;

        max-height: 85dvh !important;

        overflow-y: auto !important;

    }

    .mobile-drawer-handle {

        background: var(--border-color) !important;

        width: 44px !important;

        height: 5px !important;

        border-radius: 3px !important;

        margin: 0 auto 16px !important;

    }

    .mobile-drawer-title {

        font-size: 1.1rem !important;

        font-weight: 800 !important;

        color: var(--text-primary) !important;

        margin-bottom: 16px !important;

    }

    /* Menu rows in drawer */

    .mob-menu-row {

        display: flex !important;

        align-items: center !important;

        gap: 14px !important;

        padding: 12px 10px !important;

        border-radius: 14px !important;

        font-size: 0.95rem !important;

        font-weight: 600 !important;

        color: var(--text-primary) !important;

        background: transparent !important;

        border: none !important;

        width: 100% !important;

        text-align: left !important;

        cursor: pointer !important;

        transition: background 0.15s !important;

        min-height: 52px !important;

    }

    .mob-menu-row:active {

        background: var(--border-color) !important;

    }

    .mob-menu-icon {

        width: 40px !important;

        height: 40px !important;

        border-radius: 12px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 1.1rem !important;

        flex-shrink: 0 !important;

    }

    /* Profile sheet */

    .mobile-profile-sheet {

        border-radius: 24px 24px 0 0 !important;

        background: var(--bg-surface-solid) !important;

        padding: 16px 16px 32px !important;

        max-height: 90dvh !important;

        overflow-y: auto !important;

    }

    /* Search bar */

    .mobile-search-bar {

        background: var(--bg-surface-solid) !important;

        border-bottom: 1px solid var(--border-color) !important;

        padding: 10px 14px !important;

        gap: 10px !important;

        position: sticky !important;

        top: 56px !important;

        z-index: 140 !important;

    }

    .mobile-search-bar input {

        font-size: 0.95rem !important;

        color: var(--text-primary) !important;

    }

    /* Notification dropdown on mobile */

    .notif-dropdown {

        width: calc(100vw - 24px) !important;

        right: -8px !important;

        max-height: 70dvh !important;

        overflow-y: auto !important;

    }

    /* Toast on mobile */

    #toast-container {

        bottom: 100px !important;

        right: 12px !important;

        left: 12px !important;

    }

    .toast {

        border-radius: 14px !important;

        text-align: center !important;

        font-size: 0.88rem !important;

    }

    /* Modal improvements */

    .modal-dialog {

        margin: 0 !important;

        max-width: 100% !important;

        position: fixed !important;

        bottom: 0 !important;

        left: 0 !important;

        right: 0 !important;

    }

    .modal-content {

        border-radius: 24px 24px 0 0 !important;

        border: none !important;

        max-height: 92dvh !important;

        overflow-y: auto !important;

    }

    .modal-header {

        padding: 16px 20px 12px !important;

        border-bottom: 1px solid var(--border-color) !important;

        position: sticky !important;

        top: 0 !important;

        background: var(--bg-surface-solid) !important;

        z-index: 10 !important;

    }

    .modal-body {

        padding: 16px 20px !important;

    }

    .modal-footer {

        padding: 12px 20px !important;

        border-top: 1px solid var(--border-color) !important;

        position: sticky !important;

        bottom: 0 !important;

        background: var(--bg-surface-solid) !important;

    }

    /* Form controls in modals */

    .modal .form-control,

    .modal .form-select {

        height: 48px !important;

        font-size: 0.95rem !important;

        border-radius: 12px !important;

        padding: 0 14px !important;

    }

    .modal textarea.form-control {

        height: auto !important;

        padding: 12px 14px !important;

    }

    /* Signup modal handle */

    .modal-content::before {

        content: '';

        display: block;

        width: 44px;

        height: 5px;

        background: var(--border-color);

        border-radius: 3px;

        margin: 12px auto 0;

    }

    /* Analytics */

    .analytics-card {

        border-radius: 16px !important;

        padding: 14px !important;

        min-height: 240px !important;

    }

    /* Chat */

    .chat-layout {

        height: calc(100dvh - 130px) !important;

        border-radius: 16px !important;

    }

    .chat-user-item {

        min-height: 64px !important;

        padding: 12px 16px !important;

    }

    /* Profile view */

    .profile-cover {

        height: 140px !important;

        border-radius: 0 !important;

    }

    /* Settings */

    .settings-section {

        border-radius: 16px !important;

        margin-bottom: 12px !important;

    }

    /* Elections */

    .candidate-row {

        padding: 12px 14px !important;

        border-radius: 14px !important;

    }

    .vote-btn {

        padding: 8px 14px !important;

        font-size: 0.82rem !important;

        min-height: 36px !important;

    }

    /* Events & Jobs cards */

    .event-card, .job-card {

        border-radius: 16px !important;

        padding: 14px !important;

    }

    /* Stories */

    .stories-view-grid {

        grid-template-columns: repeat(3, 1fr) !important;

        gap: 8px !important;

    }

    /* Status bubbles */

    .status-stories-container {

        padding: 12px 14px !important;

        gap: 12px !important;

    }

    .status-avatar-ring {

        width: 58px !important;

        height: 58px !important;

    }

    .status-label { font-size: 0.68rem !important; }

    /* GPA Cast */

    .gpa-grid { grid-template-columns: 1fr !important; }

    .gpa-gauge-box { padding: 1.5rem 1rem !important; }

    /* Podium */

    .hall-podium-container {

        gap: 8px !important;

        height: 260px !important;

    }

    .podium-step { width: 100px !important; }

    .podium-name { font-size: 0.78rem !important; }

    /* Transaction table */

    .tx-table th, .tx-table td {

        padding: 10px 12px !important;

        font-size: 0.8rem !important;

    }

    /* Directory filter bar */

    .directory-filter-bar {

        padding: 14px !important;

        border-radius: 16px !important;

        gap: 12px !important;

    }

    .dir-tab {

        font-size: 0.78rem !important;

        padding: 6px 12px !important;

        border-radius: 20px !important;

    }

    .dir-filter-select {

        height: 42px !important;

        font-size: 0.85rem !important;

        border-radius: 10px !important;

    }

}



/* ── Desktop: Refined sidebar & layout ── */

@media (min-width: 769px) {

    /* Sidebar hover improvements */

    .sidebar-list li {

        border-radius: 12px !important;

        padding: 10px 14px !important;

        min-height: 44px !important;

        transition: background 0.15s, transform 0.15s !important;

    }

    .sidebar-list li:hover {

        background: var(--border-color) !important;

        transform: translateX(3px) !important;

    }

    .sidebar-list li.active-item {

        background: var(--primary-active) !important;

        color: var(--primary-color) !important;

        transform: none !important;

    }

    .sidebar-list li i {

        width: 36px !important;

        height: 36px !important;

        border-radius: 10px !important;

        font-size: 0.95rem !important;

    }

    /* Navbar improvements */

    .edu-navbar {

        height: 58px !important;

        padding: 0 20px !important;

    }

    .nav-circle-btn {

        width: 38px !important;

        height: 38px !important;

        border-radius: 50% !important;

        transition: background 0.15s, transform 0.15s !important;

    }

    .nav-circle-btn:hover {

        background: var(--border-color) !important;

        transform: scale(1.08) !important;

    }

    /* Main content max-width */

    .edu-main {

        padding: 1rem 1.2rem !important;

    }

    /* Post cards on desktop */

    .edu-card {

        border-radius: 12px !important;

        transition: box-shadow 0.2s !important;

    }

    .edu-card:hover {

        box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important;

    }

    /* Interaction buttons */

    .interaction-btn {

        border-radius: 10px !important;

        transition: background 0.15s, color 0.15s !important;

    }

    /* Right sidebar */

    .edu-sidebar-right {

        padding: 1rem 0.8rem !important;

    }

    .notice-board, .stats-card {

        border-radius: 14px !important;

        overflow: hidden !important;

    }

    /* Notification dropdown */

    .notif-dropdown {

        border-radius: 16px !important;

        box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;

    }

    .notif-dropdown li {

        transition: background 0.15s !important;

    }

    .notif-dropdown li:hover {

        background: var(--bg-main) !important;

    }

    /* Profile chip */

    .profile-chip {

        border-radius: 20px !important;

        padding: 4px 10px 4px 4px !important;

        transition: background 0.15s !important;

    }

    .profile-chip:hover {

        background: var(--border-color) !important;

    }

    /* Search bar */

    .nav-search-container {

        transition: box-shadow 0.2s !important;

    }

    .nav-search-container:focus-within {

        box-shadow: 0 0 0 2px rgba(15,76,129,0.2) !important;

        background: var(--bg-surface-solid) !important;

    }

    /* Software cards */

    .sw-card {

        border-radius: 14px !important;

        transition: transform 0.2s, box-shadow 0.2s !important;

    }

    .sw-card:hover {

        transform: translateY(-4px) !important;

        box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;

    }

    /* Student cards */

    .student-card {

        border-radius: 14px !important;

        transition: transform 0.2s, box-shadow 0.2s !important;

    }

    .student-card:hover {

        transform: translateY(-3px) !important;

        box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important;

    }

    /* Toast position */

    #toast-container {

        bottom: 24px !important;

        right: 24px !important;

    }

    .toast {

        border-radius: 12px !important;

        padding: 12px 20px !important;

        font-size: 0.9rem !important;

        min-width: 240px !important;

    }

}



/* ── Smooth scrolling & focus improvements ── */

* {

    -webkit-tap-highlight-color: transparent;

}

:focus-visible {

    outline: 2px solid var(--uog-blue);

    outline-offset: 2px;

    border-radius: 4px;

}

html {

    scroll-behavior: smooth;

}

/* Better scrollbars on desktop */

@media (min-width: 769px) {

    .edu-main::-webkit-scrollbar,

    .edu-sidebar-left::-webkit-scrollbar,

    .edu-sidebar-right::-webkit-scrollbar {

        width: 6px;

    }

    .edu-main::-webkit-scrollbar-track,

    .edu-sidebar-left::-webkit-scrollbar-track,

    .edu-sidebar-right::-webkit-scrollbar-track {

        background: transparent;

    }

    .edu-main::-webkit-scrollbar-thumb,

    .edu-sidebar-left::-webkit-scrollbar-thumb,

    .edu-sidebar-right::-webkit-scrollbar-thumb {

        background: var(--border-color);

        border-radius: 6px;

    }

    .edu-main::-webkit-scrollbar-thumb:hover,

    .edu-sidebar-left::-webkit-scrollbar-thumb:hover,

    .edu-sidebar-right::-webkit-scrollbar-thumb:hover {

        background: var(--text-secondary);

    }

}



/* ── Loading skeleton animation ── */

@keyframes shimmer {

    0% { background-position: -400px 0; }

    100% { background-position: 400px 0; }

}

.skeleton {

    background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-main) 50%, var(--border-color) 75%);

    background-size: 800px 100%;

    animation: shimmer 1.5s infinite;

    border-radius: 8px;

}



/* ── Micro-interactions for buttons ── */

.btn-primary, .btn-success, .btn-outline-primary {

    transition: transform 0.15s, box-shadow 0.15s !important;

}

.btn-primary:active, .btn-success:active, .btn-outline-primary:active {

    transform: scale(0.97) !important;

}



/* ── Dark mode improvements ── */

:root[data-theme="dark"] .mobile-topbar {

    background: var(--bg-surface-solid) !important;

    border-bottom: 1px solid var(--border-color) !important;

}

:root[data-theme="dark"] .mobile-bottom-nav {

    background: var(--bg-surface-solid) !important;

    border-top: 1px solid var(--border-color) !important;

}

:root[data-theme="dark"] .mobile-drawer {

    background: var(--bg-surface-solid) !important;

    border-top: 1px solid var(--border-color) !important;

}

:root[data-theme="dark"] .edu-card {

    background: var(--bg-surface-solid) !important;

}

:root[data-theme="dark"] .create-top {

    background: var(--bg-main) !important;

}

:root[data-theme="dark"] .modal-content {

    background: var(--bg-surface-solid) !important;

    color: var(--text-primary) !important;

}

:root[data-theme="dark"] .modal-header,

:root[data-theme="dark"] .modal-footer {

    background: var(--bg-surface-solid) !important;

    border-color: var(--border-color) !important;

}

:root[data-theme="dark"] .form-control,

:root[data-theme="dark"] .form-select {

    background: var(--bg-main) !important;

    border-color: var(--border-color) !important;

    color: var(--text-primary) !important;

}

:root[data-theme="dark"] .notif-dropdown {

    background: var(--bg-surface-solid) !important;

    border-color: var(--border-color) !important;

}

:root[data-theme="dark"] .notif-dropdown li:hover {

    background: var(--bg-main) !important;

}





/* ═══════════════════════════════════════════════════════════════════════════

   💬 MESSAGES / CHAT — ENHANCED UI v2026.05

   ═══════════════════════════════════════════════════════════════════════════ */



/* ── Layout ── */

.chat-layout {

    height: calc(100vh - 130px) !important;

    min-height: 500px;

    border-radius: 18px !important;

    border: 1px solid var(--border-color) !important;

    overflow: hidden;

    box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;

    background: var(--bg-surface-solid) !important;

}



/* ── Sidebar ── */

.chat-sidebar {

    width: 300px !important;

    background: var(--bg-surface-solid) !important;

    border-right: 1px solid var(--border-color) !important;

    display: flex;

    flex-direction: column;

}

.chat-sidebar-header {

    padding: 14px 16px !important;

    background: var(--bg-surface-solid) !important;

    border-bottom: 1px solid var(--border-color) !important;

    position: sticky;

    top: 0;

    z-index: 2;

}

.chat-sidebar-header > div:first-child {

    font-size: 1.1rem !important;

    font-weight: 800 !important;

    color: var(--text-primary) !important;

    margin-bottom: 10px !important;

}

.chat-search-wrapper input {

    background: var(--bg-main) !important;

    border: 1.5px solid var(--border-color) !important;

    border-radius: 22px !important;

    padding: 8px 12px 8px 32px !important;

    font-size: 0.88rem !important;

    transition: border-color 0.2s, box-shadow 0.2s !important;

    color: var(--text-primary) !important;

}

.chat-search-wrapper input:focus {

    border-color: var(--uog-blue) !important;

    box-shadow: 0 0 0 3px rgba(15,76,129,0.1) !important;

    outline: none !important;

    background: var(--bg-surface-solid) !important;

}



/* ── User list items ── */

.chat-users-list {

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color: var(--border-color) transparent;

}

.chat-users-list::-webkit-scrollbar { width: 4px; }

.chat-users-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }



.chat-user-item {

    padding: 12px 16px !important;

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    border-bottom: 1px solid var(--border-color) !important;

    transition: background 0.15s !important;

    position: relative;

}

.chat-user-item:hover {

    background: var(--bg-main) !important;

}

.chat-user-item.active {

    background: rgba(15,76,129,0.07) !important;

    border-left: 3px solid var(--uog-blue) !important;

}

.chat-user-avatar {

    width: 46px !important;

    height: 46px !important;

    border-radius: 50% !important;

    background: var(--uog-blue) !important;

    color: white !important;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem !important;

    font-weight: 700 !important;

    overflow: hidden;

    flex-shrink: 0;

    border: 2px solid var(--border-color) !important;

}

.chat-user-name {

    font-size: 0.92rem !important;

    font-weight: 700 !important;

    color: var(--text-primary) !important;

}

.unread-badge {

    background: var(--uog-blue) !important;

    color: white !important;

    font-size: 0.65rem !important;

    font-weight: 800 !important;

    padding: 2px 7px !important;

    border-radius: 12px !important;

    min-width: 20px;

    text-align: center;

    animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);

}

@keyframes badgePop {

    0% { transform: scale(0); }

    100% { transform: scale(1); }

}



/* ── Chat main area ── */

.chat-main {

    flex: 1;

    display: flex;

    flex-direction: column;

    background: var(--bg-main) !important;

}

.chat-header {

    padding: 12px 18px !important;

    background: linear-gradient(125deg, #0a2d52 0%, var(--uog-blue) 60%, #1a6eb5 100%) !important;

    color: white !important;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow: 0 2px 12px rgba(15,76,129,0.3) !important;

    min-height: 60px;

}

.chat-header .chat-user-avatar {

    width: 38px !important;

    height: 38px !important;

    border: 2px solid rgba(255,255,255,0.3) !important;

    background: rgba(255,255,255,0.15) !important;

}



/* Online indicator dot */

.chat-online-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #22c55e;

    border: 2px solid white;

    position: absolute;

    bottom: 0;

    right: 0;

    box-shadow: 0 0 0 2px rgba(34,197,94,0.3);

    animation: pulse-green 2s infinite;

}

@keyframes pulse-green {

    0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }

    50% { box-shadow: 0 0 0 5px rgba(34,197,94,0.1); }

}



/* ── Chat body ── */

.chat-body {

    flex: 1;

    padding: 16px 18px !important;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 8px !important;

    background: var(--bg-main) !important;

    scrollbar-width: thin;

    scrollbar-color: var(--border-color) transparent;

}

.chat-body::-webkit-scrollbar { width: 4px; }

.chat-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }



/* Date divider */

.chat-date-divider {

    text-align: center;

    margin: 8px 0;

    position: relative;

}

.chat-date-divider::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

    background: var(--border-color);

}

.chat-date-divider span {

    position: relative;

    background: var(--bg-main);

    padding: 2px 12px;

    font-size: 0.72rem;

    font-weight: 600;

    color: var(--text-secondary);

    border-radius: 20px;

    border: 1px solid var(--border-color);

}



/* ── Bubbles ── */

.chat-bubble {

    max-width: 68% !important;

    padding: 10px 14px !important;

    border-radius: 16px !important;

    font-size: 0.9rem !important;

    line-height: 1.5 !important;

    word-wrap: break-word;

    position: relative;

    animation: bubbleIn 0.2s ease-out;

    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;

}

@keyframes bubbleIn {

    from { opacity: 0; transform: translateY(6px) scale(0.97); }

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

}

.chat-bubble.sent {

    align-self: flex-end;

    background: linear-gradient(135deg, var(--uog-blue), #1a6eb5) !important;

    color: white !important;

    border-bottom-right-radius: 4px !important;

}

.chat-bubble.received {

    align-self: flex-start;

    background: var(--bg-surface-solid) !important;

    border: 1px solid var(--border-color) !important;

    color: var(--text-primary) !important;

    border-bottom-left-radius: 4px !important;

}

.chat-bubble-time {

    font-size: 0.65rem !important;

    margin-top: 5px !important;

    opacity: 0.75;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 4px;

}



/* ── Input row ── */

.chat-input-row {

    padding: 12px 16px !important;

    background: var(--bg-surface-solid) !important;

    border-top: 1px solid var(--border-color) !important;

    display: flex;

    gap: 10px;

    align-items: center;

}

.chat-input-field {

    flex: 1;

    border: 1.5px solid var(--border-color) !important;

    border-radius: 24px !important;

    padding: 10px 18px !important;

    font-size: 0.92rem !important;

    outline: none;

    background: var(--bg-main) !important;

    color: var(--text-primary) !important;

    transition: border-color 0.2s, box-shadow 0.2s !important;

}

.chat-input-field:focus {

    border-color: var(--uog-blue) !important;

    box-shadow: 0 0 0 3px rgba(15,76,129,0.1) !important;

    background: var(--bg-surface-solid) !important;

}

.chat-send-btn {

    background: linear-gradient(135deg, var(--uog-blue), #1a6eb5) !important;

    color: white !important;

    border: none;

    width: 42px !important;

    height: 42px !important;

    border-radius: 50% !important;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 0.95rem !important;

    box-shadow: 0 4px 12px rgba(15,76,129,0.3) !important;

    transition: transform 0.15s, box-shadow 0.15s !important;

    flex-shrink: 0;

}

.chat-send-btn:hover {

    transform: scale(1.08) !important;

    box-shadow: 0 6px 16px rgba(15,76,129,0.4) !important;

}

.chat-send-btn:active {

    transform: scale(0.95) !important;

}

.chat-attach-btn {

    color: var(--text-secondary) !important;

    font-size: 1.1rem !important;

    padding: 0 8px !important;

    transition: color 0.15s !important;

    cursor: pointer;

}

.chat-attach-btn:hover {

    color: var(--uog-blue) !important;

}



/* ── Empty state ── */

.chat-empty-state {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: var(--text-secondary);

    padding: 40px 20px;

    text-align: center;

    gap: 12px;

}

.chat-empty-state i {

    font-size: 3.5rem;

    opacity: 0.25;

    color: var(--uog-blue);

}

.chat-empty-state h3 {

    font-size: 1.1rem;

    font-weight: 700;

#nav-chat-icon .badge.hidden,

.mob-chat-top-btn .mob-badge.hidden {

    display: none !important;

}



/* ── Mobile chat ── */

@media (max-width: 768px) {

    .chat-layout {

        height: calc(100dvh - 130px) !important;

        border-radius: 0 !important;

        border: none !important;

        box-shadow: none !important;

    }

    .chat-sidebar {

        width: 100% !important;

        border-right: none !important;

    }

    .chat-main {

        position: fixed !important;

        inset: 0 !important;

        z-index: 9999 !important;

        transform: translateX(100%) !important;

        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;

        border-radius: 0 !important;

    }

    .chat-main.active {

        transform: translateX(0) !important;

    }

    .chat-header {

        padding: 10px 14px !important;

        min-height: 56px !important;

    }

    .chat-bubble {

        max-width: 80% !important;

    }

    .chat-input-row {

        padding: 10px 12px !important;

        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;

    }

    .chat-user-item {

        min-height: 68px !important;

        padding: 12px 16px !important;

    }

    .chat-user-avatar {

        width: 48px !important;

        height: 48px !important;

    }

}



/* ── Dark mode ── */

:root[data-theme="dark"] .chat-layout {

    background: var(--bg-surface-solid) !important;

    border-color: var(--border-color) !important;

}

:root[data-theme="dark"] .chat-sidebar {

    background: var(--bg-surface-solid) !important;

}

:root[data-theme="dark"] .chat-user-item:hover {

    background: var(--bg-main) !important;

}

:root[data-theme="dark"] .chat-user-item.active {

    background: rgba(15,76,129,0.15) !important;

}

:root[data-theme="dark"] .chat-bubble.received {

    background: var(--bg-surface-solid) !important;

    border-color: var(--border-color) !important;

}

:root[data-theme="dark"] .chat-input-field {

    background: var(--bg-main) !important;

    border-color: var(--border-color) !important;

    color: var(--text-primary) !important;

}

:root[data-theme="dark"] .chat-date-divider span {

    background: var(--bg-main) !important;

    border-color: var(--border-color) !important;

}



/* -----------------------------------------------------------------------

   ?? ULTRA PREMIUM DESIGN ENHANCEMENTS v2026.06

   ----------------------------------------------------------------------- */



/* -- Software Cards -- */

.software-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }

.sw-card {

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 1.5rem;

    box-shadow: var(--shadow-sm);

    display: flex; flex-direction: column;

    transition: all 0.28s cubic-bezier(0.4,0,0.2,1);

    position: relative;

    overflow: hidden;

}

.sw-card::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    background: var(--gradient-primary);

    opacity: 0;

    transition: opacity 0.25s;

}

.sw-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 40px -8px rgba(15,76,129,0.15), 0 8px 16px -4px rgba(0,0,0,0.04);

    border-color: rgba(15,76,129,0.25);

}

.sw-card:hover::before { opacity: 1; }

.sw-header { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; }

.sw-icon {

    width: 52px; height: 52px;

    border-radius: 14px;

    background: linear-gradient(135deg, rgba(15,76,129,0.1) 0%, rgba(251,191,36,0.08) 100%);

    color: var(--uog-blue);

    display: flex; align-items: center; justify-content: center;

    font-size: 1.5rem; flex-shrink: 0;

    border: 1px solid rgba(15,76,129,0.12);

}

.sw-info h3 { font-size: 1rem; color: var(--uog-blue); font-weight: 700; margin-bottom: 4px; }

.sw-info p { font-size: 0.78rem; color: var(--text-secondary); }

.sw-desc { font-size: 0.88rem; color: var(--text-primary); line-height: 1.55; margin-bottom: 14px; flex: 1; }

.sw-footer { display: flex; gap: 10px; margin-top: auto; border-top: 1px solid var(--border-color); padding-top: 14px; }

.sw-btn {

    flex: 1;

    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);

    color: white;

    border: none;

    padding: 10px;

    border-radius: 10px;

    font-weight: 700;

    font-size: 0.88rem;

    cursor: pointer;

    text-align: center;

    text-decoration: none;

    transition: all 0.22s ease;

    box-shadow: 0 4px 12px rgba(16,185,129,0.2);

    display: flex; align-items: center; justify-content: center; gap: 6px;

}

.sw-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(16,185,129,0.35);

}



/* -- Student / Directory Cards -- */

.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }

.student-card {

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 1.5rem 1.25rem;

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition: all 0.28s cubic-bezier(0.4,0,0.2,1);

    position: relative;

    overflow: hidden;

}

.student-card::after {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: 16px;

    background: linear-gradient(135deg, rgba(15,76,129,0.03) 0%, rgba(251,191,36,0.02) 100%);

    opacity: 0;

    transition: opacity 0.25s;

    pointer-events: none;

}

.student-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 40px -8px rgba(15,76,129,0.12), 0 8px 16px -4px rgba(0,0,0,0.04);

    border-color: rgba(15,76,129,0.2);

}

.student-card:hover::after { opacity: 1; }

.student-card .avatar-large { margin: 0 auto 1rem; }

.student-card h3 { font-size: 0.95rem; margin-bottom: 5px; font-weight: 700; color: var(--text-primary); }

.student-card p { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; }



/* -- Connect Button -- */

.connect-btn {

    width: 100%; margin-top: 10px;

    background: transparent;

    color: var(--uog-blue);

    border: 1.5px solid rgba(15,76,129,0.25);

    padding: 8px;

    font-size: 0.8rem; font-weight: 700;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.22s ease;

    display: flex; align-items: center; justify-content: center; gap: 6px;

}

.connect-btn:hover {

    background: var(--gradient-primary);

    color: white;

    border-color: transparent;

    box-shadow: 0 6px 16px rgba(15,76,129,0.25);

    transform: translateY(-1px);

}



/* -- Premium Sort Bar -- */

.feed-sort-bar {

    display: flex; align-items: center; gap: 8px;

    background: var(--bg-surface-solid);

    padding: 8px 14px;

    border-bottom: 1px solid var(--border-color);

    border-radius: 12px 12px 0 0;

}

.feed-sort-bar span { font-size: 0.8rem; font-weight: 800; color: var(--text-primary); margin-right: auto; }

.sort-btn {

    background: transparent;

    border: 1px solid transparent;

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 0.75rem; font-weight: 700;

    color: var(--text-secondary);

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex; align-items: center; gap: 5px;

}

.sort-btn:hover { background: rgba(15,76,129,0.06); color: var(--uog-blue); }

.sort-btn.active {

    background: var(--gradient-primary);

    color: white;

    border-color: transparent;

    box-shadow: 0 4px 12px rgba(15,76,129,0.2);

}



/* -- Interaction Bar -- */

.post-interaction-bar {

    display: flex;

    gap: 2px;

    border-top: 1px solid var(--border-color);

    margin-top: 0.5rem;

    padding-top: 0.4rem;

    background: transparent;

}

.interaction-btn {

    flex: 1;

    border: none;

    background: transparent;

    padding: 7px 6px;

    border-radius: 10px;

    cursor: pointer;

    font-size: 0.78rem; font-weight: 600;

    color: var(--text-secondary);

    display: flex; align-items: center; justify-content: center; gap: 5px;

    transition: all 0.18s ease;

}

.interaction-btn:hover {

    background: rgba(15,76,129,0.06);

    color: var(--uog-blue);

}

.interaction-btn.liked {

    color: var(--uog-orange);

    background: rgba(251,191,36,0.08);

}

.interaction-btn.bookmarked {

    color: var(--uog-blue);

    background: rgba(15,76,129,0.08);

}



/* -- Premium Analytics Cards -- */

.analytics-card {

    background: rgba(255,255,255,0.9);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.6);

    border-radius: 18px;

    padding: 1.5rem;

    box-shadow: var(--shadow-md);

    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);

    min-height: 300px;

    position: relative;

    overflow: hidden;

}

.analytics-card::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 4px;

    background: var(--gradient-primary);

    border-radius: 18px 18px 0 0;

}

.analytics-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 24px 48px -8px rgba(15,76,129,0.12), 0 8px 16px -4px rgba(0,0,0,0.06);

}

:root[data-theme="dark"] .analytics-card {

    background: rgba(17,24,39,0.85) !important;

    border-color: rgba(255,255,255,0.06) !important;

}



/* -- Profile Cover -- */

.profile-cover-banner {

    width: 100%;

    height: 52px;

    background: linear-gradient(135deg, var(--uog-blue) 0%, #1e40af 50%, #4f46e5 100%);

    position: relative; z-index: 1;

}



/* -- Sidebar Section Header -- */

.sidebar-section-title {

    font-size: 0.68rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--text-secondary);

    padding: 8px 10px 4px;

    margin-top: 4px;

}



/* -- Premium Form Inputs -- */

.edu-input, .edu-select, .edu-textarea {

    width: 100%;

    padding: 10px 14px;

    border: 1.5px solid var(--border-color);

    border-radius: 10px;

    font-size: 0.88rem;

    color: var(--text-primary);

    background: var(--bg-surface-solid);

    outline: none;

    transition: all 0.2s ease;

    font-family: inherit;

}

.edu-input:focus, .edu-select:focus, .edu-textarea:focus {

    border-color: var(--uog-blue);

    box-shadow: 0 0 0 3px rgba(15,76,129,0.1);

    background: var(--bg-surface-solid);

}

.edu-input::placeholder, .edu-textarea::placeholder {

    color: var(--text-secondary);

    opacity: 0.7;

}



/* -- Premium Theme Switcher -- */

.theme-switch-btn {

    width: 36px; height: 36px;

    border-radius: 50%;

    display: flex; align-items: center; justify-content: center;

    cursor: pointer;

    background: rgba(15,76,129,0.06);

    border: 1px solid rgba(15,76,129,0.12);

    color: var(--text-secondary);

    font-size: 0.95rem;

    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);

}

.theme-switch-btn:hover {

    background: var(--gradient-primary);

    color: white;

    transform: rotate(20deg) scale(1.05);

    box-shadow: 0 6px 16px rgba(15,76,129,0.25);

    border-color: transparent;

}



/* -- Notif Dropdown -- */

.notif-dropdown {

    display: none;

    position: absolute;

    top: 50px; right: 0;

    width: 330px;

    background: var(--bg-surface-solid);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    box-shadow: 0 16px 48px -8px rgba(15,23,42,0.15), 0 0 0 1px rgba(255,255,255,0.5) inset;

    z-index: 200;

    text-align: left;

    overflow: hidden;

    backdrop-filter: blur(20px);

}

.notif-dropdown.active { display: block; animation: dropdownPop 0.2s cubic-bezier(0.34,1.56,0.64,1); }

@keyframes dropdownPop {

    from { opacity: 0; transform: translateY(-8px) scale(0.96); }

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

}

.notif-dropdown h4 {

    padding: 14px 16px;

    border-bottom: 1px solid var(--border-color);

    margin: 0;

    font-size: 0.95rem; font-weight: 800;

    color: var(--text-primary);

}

.notif-dropdown ul { list-style: none; max-height: 320px; overflow-y: auto; }

.notif-dropdown li {

    padding: 12px 16px;

    border-bottom: 1px solid var(--border-color);

    font-size: 0.84rem;

    color: var(--text-primary);

    cursor: pointer;

    transition: background 0.15s;

    line-height: 1.45;

}

.notif-dropdown li:hover { background: rgba(15,76,129,0.04); }

.notif-dropdown li:last-child { border-bottom: none; }



/* -- Page View Transition -- */

.view { animation: viewFadeIn 0.35s cubic-bezier(0.4,0,0.2,1); }

@keyframes viewFadeIn {

    from { opacity: 0; transform: translateY(10px); }

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

}



/* -- Elevated Card Hover Glows -- */

.edu-card.post:hover {

    background: rgba(255,255,255,0.98);

}

:root[data-theme="dark"] .edu-card.post:hover {

    background: rgba(22,32,50,0.98);

}



/* -- Privacy Note -- */

.edu-privacy-note {

    color: #166534;

    font-size: 0.84rem;

    margin: 10px 0 18px;

    line-height: 1.5;

    display: flex; gap: 10px; align-items: flex-start;

    background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.04) 100%);

    padding: 12px 14px;

    border-radius: 10px;

    border: 1px solid rgba(16,185,129,0.2);

}

:root[data-theme="dark"] .edu-privacy-note {

    background: rgba(6,78,59,0.2) !important;

    border-color: rgba(52,211,153,0.2) !important;

    color: #6ee7b7 !important;

}



/* -- Badge Pulse Enhance -- */

.badge {

    position: absolute; top: 2px; right: 2px;

    background: var(--danger);

    color: white;

    font-size: 0.62rem;

    padding: 2px 5px;

    border-radius: 10px;

    font-weight: 800;

    min-width: 18px;

    text-align: center;

    box-shadow: 0 2px 6px rgba(239,68,68,0.35);

}



/* -- Overall body background shimmer -- */

body {

    background-image: radial-gradient(ellipse at 20% 0%, rgba(15,76,129,0.04) 0%, transparent 50%),

                      radial-gradient(ellipse at 80% 100%, rgba(251,191,36,0.03) 0%, transparent 50%);

    background-attachment: fixed;

}

:root[data-theme="dark"] body {

    background-image: radial-gradient(ellipse at 20% 0%, rgba(59,130,246,0.06) 0%, transparent 50%),

                      radial-gradient(ellipse at 80% 100%, rgba(245,158,11,0.04) 0%, transparent 50%);

}



/* -- Dark mode sidebar -- */

:root[data-theme="dark"] .edu-sidebar-left { background: #0a1220 !important; }

:root[data-theme="dark"] .edu-sidebar-right { background: #0c1525 !important; }

:root[data-theme="dark"] .profile-summary { border-color: rgba(255,255,255,0.05) !important; }

:root[data-theme="dark"] .sidebar-list li:hover { background: rgba(59,130,246,0.08) !important; color: #93c5fd; }

:root[data-theme="dark"] .sidebar-list li.active-item { background: rgba(59,130,246,0.12) !important; color: #93c5fd; }

:root[data-theme="dark"] .sidebar-list li.active-item i { background: linear-gradient(135deg, #1d4ed8, #2563eb) !important; color: white !important; }

:root[data-theme="dark"] .notice-board { background: #0c1525 !important; border-color: rgba(255,255,255,0.06) !important; }

:root[data-theme="dark"] .stats-card { background: #0c1525 !important; border-color: rgba(255,255,255,0.06) !important; }

:root[data-theme="dark"] .sw-card { background: #111827 !important; border-color: rgba(255,255,255,0.06) !important; }

:root[data-theme="dark"] .sw-card:hover { border-color: rgba(59,130,246,0.2) !important; }

:root[data-theme="dark"] .student-card { background: #111827 !important; border-color: rgba(255,255,255,0.06) !important; }

:root[data-theme="dark"] .edu-card { background: #111827 !important; border-color: rgba(255,255,255,0.06) !important; }

:root[data-theme="dark"] .create-post-card { background: #111827 !important; }

:root[data-theme="dark"] .create-top { background: #0a1220 !important; border-color: rgba(255,255,255,0.08) !important; }

:root[data-theme="dark"] .create-action:hover { background: rgba(59,130,246,0.08) !important; color: #93c5fd !important; }

:root[data-theme="dark"] .interaction-btn:hover { background: rgba(59,130,246,0.08) !important; color: #93c5fd !important; }

:root[data-theme="dark"] .sort-btn.active { background: linear-gradient(135deg, #1d4ed8, #2563eb) !important; }



/* ══════════════════════════════════════════════════════════════════════════
   🔥 STATBOOK — MODERN FACEBOOK-STYLE UPGRADE v2 (2026)
   Overrides and enhancements for a cleaner, more polished social UI
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── NAVBAR: Tighter, more modern ─── */
.edu-navbar {
    height: 56px !important;
    padding: 0 20px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 2px 12px rgba(0,0,0,0.04) !important;
}
.nav-left { gap: 12px !important; }
.nav-search {
    background: #f0f2f5 !important;
    border-radius: 24px !important;
    height: 40px !important;
    transition: all 0.2s ease !important;
}
.nav-search:focus-within {
    background: #e8eaed !important;
    box-shadow: 0 0 0 2px rgba(15,76,129,0.15) !important;
}
:root[data-theme="dark"] .nav-search {
    background: #3a3b3c !important;
}
:root[data-theme="dark"] .nav-search:focus-within {
    background: #4a4b4c !important;
}
.nav-circle-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e4e6eb !important;
    transition: all 0.15s ease !important;
}
.nav-circle-btn:hover {
    background: #d8dadf !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}
:root[data-theme="dark"] .nav-circle-btn {
    background: #3a3b3c !important;
}
:root[data-theme="dark"] .nav-circle-btn:hover {
    background: #4a4b4c !important;
    color: white !important;
}

/* ─── BACKGROUND: Softer, more FB-like ─── */
body {
    background: #f0f2f5 !important;
}
:root[data-theme="dark"] body {
    background: #18191a !important;
}
.edu-body {
    background: #f0f2f5 !important;
}
:root[data-theme="dark"] .edu-body {
    background: #18191a !important;
}

/* ─── LEFT SIDEBAR: Modern FB sidebar ─── */
.edu-sidebar-left {
    background: #ffffff !important;
    border-right: none !important;
    padding: 8px 8px !important;
}
:root[data-theme="dark"] .edu-sidebar-left {
    background: #242526 !important;
    border-right: none !important;
}
.profile-summary {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 4px 4px 8px !important;
}
:root[data-theme="dark"] .profile-summary {
    background: #242526 !important;
}
.sidebar-list li {
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    transition: background 0.15s ease !important;
    margin-bottom: 1px !important;
}
.sidebar-list li:hover {
    background: #e4e6eb !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .sidebar-list li:hover {
    background: #3a3b3c !important;
}
.sidebar-list li.active-item {
    background: rgba(15,76,129,0.1) !important;
    color: var(--uog-blue) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .sidebar-list li.active-item {
    background: rgba(59,130,246,0.15) !important;
    color: #93c5fd !important;
}
.sidebar-list li.active-item i {
    background: rgba(15,76,129,0.12) !important;
    color: var(--uog-blue) !important;
}
:root[data-theme="dark"] .sidebar-list li.active-item i {
    background: rgba(59,130,246,0.15) !important;
    color: #93c5fd !important;
}
.sidebar-list li i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #e4e6eb !important;
    color: var(--text-primary) !important;
    font-size: 0.9rem !important;
}
:root[data-theme="dark"] .sidebar-list li i {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
}

/* ─── RIGHT SIDEBAR ─── */
.edu-sidebar-right {
    background: #f0f2f5 !important;
    border-left: none !important;
    padding: 12px 8px !important;
}
:root[data-theme="dark"] .edu-sidebar-right {
    background: #18191a !important;
}
.notice-board {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
}
:root[data-theme="dark"] .notice-board {
    background: #242526 !important;
    box-shadow: none !important;
}
.stats-card {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}
:root[data-theme="dark"] .stats-card {
    background: #242526 !important;
    box-shadow: none !important;
}

/* ─── MAIN FEED: Cleaner spacing ─── */
.edu-main {
    padding: 12px 8px !important;
    max-width: 680px !important;
}

/* ─── CREATE POST CARD: Modern FB look ─── */
.edu-card.create-post-card,
.create-post-card {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
}
:root[data-theme="dark"] .edu-card.create-post-card,
:root[data-theme="dark"] .create-post-card {
    background: #242526 !important;
    box-shadow: none !important;
}
#open-compose {
    background: #f0f2f5 !important;
    border-radius: 24px !important;
    padding: 10px 18px !important;
    border: none !important;
    transition: background 0.15s !important;
}
#open-compose:hover {
    background: #e4e6eb !important;
}
:root[data-theme="dark"] #open-compose {
    background: #3a3b3c !important;
}
:root[data-theme="dark"] #open-compose:hover {
    background: #4a4b4c !important;
}
#open-compose span {
    color: #65676b !important;
    font-size: 0.97rem !important;
    font-weight: 400 !important;
}
:root[data-theme="dark"] #open-compose span {
    color: #b0b3b8 !important;
}
.create-action-btn {
    border-radius: 10px !important;
    transition: background 0.15s !important;
    padding: 8px 12px !important;
}
.create-action-btn:hover {
    background: #f0f2f5 !important;
}
:root[data-theme="dark"] .create-action-btn:hover {
    background: #3a3b3c !important;
}

/* ─── STORY CARDS: Facebook-style ─── */
.story-card-wrapper {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.story-card-wrapper:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
}
.story-card-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border: 3px solid var(--uog-blue) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.create-story-card {
    border-radius: 14px !important;
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
:root[data-theme="dark"] .create-story-card {
    background: #3a3b3c !important;
}
.create-story-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 12px rgba(15,76,129,0.3) !important;
}

/* ─── POST CARDS: Modern Facebook-style ─── */
.edu-card.post-card,
.edu-card {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    margin-bottom: 12px !important;
    transition: box-shadow 0.2s !important;
}
.edu-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
:root[data-theme="dark"] .edu-card.post-card,
:root[data-theme="dark"] .edu-card {
    background: #242526 !important;
    box-shadow: none !important;
    border: none !important;
}
:root[data-theme="dark"] .edu-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}
.post-header {
    padding: 12px 16px 8px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
}
.post-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}
.post-meta {
    font-size: 0.75rem !important;
    color: #65676b !important;
    margin-top: 1px !important;
}
:root[data-theme="dark"] .post-meta {
    color: #b0b3b8 !important;
}
.post-text {
    padding: 0 16px 10px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
}
.post-images {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}
.post-images img {
    transition: opacity 0.15s !important;
}
.post-images img:hover {
    opacity: 0.95 !important;
}

/* ─── REACTION COUNT ROW ─── */
.post-reactions-display {
    padding: 6px 16px !important;
    font-size: 0.82rem !important;
    color: #65676b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e4e6eb !important;
}
:root[data-theme="dark"] .post-reactions-display {
    border-bottom-color: #3a3b3c !important;
    color: #b0b3b8 !important;
}

/* ─── INTERACTION BAR: Facebook-style like/comment/share ─── */
.post-interaction-bar {
    display: flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    gap: 2px !important;
    border-top: 1px solid #e4e6eb !important;
    margin-top: 0 !important;
    border-bottom: 1px solid #e4e6eb !important;
}
:root[data-theme="dark"] .post-interaction-bar {
    border-color: #3a3b3c !important;
}
.interaction-btn {
    flex: 1 !important;
    padding: 8px 4px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #65676b !important;
    gap: 6px !important;
    transition: background 0.15s !important;
}
.interaction-btn:hover {
    background: #f0f2f5 !important;
    color: var(--text-primary) !important;
}
.interaction-btn.liked {
    color: #1877f2 !important;
    font-weight: 700 !important;
}
.interaction-btn.bookmarked {
    color: var(--uog-blue) !important;
    font-weight: 700 !important;
}
:root[data-theme="dark"] .interaction-btn {
    color: #b0b3b8 !important;
}
:root[data-theme="dark"] .interaction-btn:hover {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
}
:root[data-theme="dark"] .interaction-btn.liked {
    color: #4599ff !important;
}

/* ─── COMMENT SECTION ─── */
.comments-section {
    padding: 10px 12px !important;
    background: transparent !important;
    border-top: none !important;
}
:root[data-theme="dark"] .comments-section {
    background: transparent !important;
}
.comment-input-box {
    background: #f0f2f5 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 9px 18px !important;
    font-size: 0.88rem !important;
    transition: background 0.15s !important;
}
.comment-input-box:focus {
    background: #e4e6eb !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}
:root[data-theme="dark"] .comment-input-box {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
}
:root[data-theme="dark"] .comment-input-box:focus {
    background: #4a4b4c !important;
}
.comment-bubble {
    background: #f0f2f5 !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 8px 14px !important;
}
:root[data-theme="dark"] .comment-bubble {
    background: #3a3b3c !important;
}
.comment-author {
    font-weight: 700 !important;
    font-size: 0.83rem !important;
}
.comment-text {
    font-size: 0.88rem !important;
}

/* ─── POST BADGE: Refined ─── */
.post-badge {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    background: rgba(15,76,129,0.08) !important;
    color: var(--uog-blue) !important;
    border: none !important;
}

/* ─── FEED SORT BAR ─── */
.feed-sort-bar {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    margin-bottom: 12px !important;
    padding: 10px 14px !important;
}
:root[data-theme="dark"] .feed-sort-bar {
    background: #242526 !important;
    box-shadow: none !important;
}

/* ─── PROFILE CHIP: Cleaner ─── */
.profile-chip {
    padding: 4px 10px 4px 4px !important;
    border-radius: 24px !important;
    transition: background 0.15s !important;
}
.profile-chip:hover {
    background: #e4e6eb !important;
    border-color: transparent !important;
}
:root[data-theme="dark"] .profile-chip:hover {
    background: #3a3b3c !important;
}

/* ─── NOTICE HEADER ─── */
.notice-header {
    background: #ffffff !important;
    padding: 12px 16px !important;
}
:root[data-theme="dark"] .notice-header {
    background: #242526 !important;
}
.notice-list li {
    padding: 10px 16px !important;
    font-size: 0.83rem !important;
    transition: background 0.15s !important;
}
.notice-list li:hover {
    background: #f0f2f5 !important;
}
:root[data-theme="dark"] .notice-list li:hover {
    background: #3a3b3c !important;
}

/* ─── AUTH PAGE: Slightly more polished ─── */
.auth-form-card {
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
}
.auth-form-card .btn-primary {
    background: var(--uog-blue) !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    height: 48px !important;
    box-shadow: none !important;
    transition: opacity 0.15s, transform 0.15s !important;
}
.auth-form-card .btn-primary:hover {
    opacity: 0.9 !important;
    transform: none !important;
    box-shadow: none !important;
}
.auth-form-card .btn-outline-primary {
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    font-size: 0.95rem !important;
}
.auth-form-card .btn-outline-primary:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* ─── ACTIVE CONTACTS WIDGET ─── */
#active-contacts-widget .notice-header h4 {
    font-size: 1rem !important;
    font-weight: 700 !important;
}
#active-contacts-list {
    gap: 4px !important;
}

/* ─── MOBILE: Keep consistent ─── */
@media (max-width: 768px) {
    .edu-main {
        padding: 8px 0 !important;
    }
    .edu-card.post-card,
    .edu-card {
        border-radius: 0 !important;
        margin-bottom: 8px !important;
    }
    .create-post-card,
    .edu-card.create-post-card {
        border-radius: 0 !important;
    }
    .feed-sort-bar {
        border-radius: 0 !important;
    }
}

/* ─── STORY STRIP: Horizontal scrollable bar ─── */
.status-bubble-strip {
    gap: 10px !important;
    padding: 4px 0 8px !important;
    scrollbar-width: none !important;
}
.status-bubble-strip::-webkit-scrollbar {
    display: none !important;
}
.status-story-card {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    overflow: hidden !important;
}
.status-story-card:hover {
    transform: scale(1.04) translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* ─── POST ACTIONS (edit/delete) ─── */
.post-action-btn {
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
}

/* ─── REACTIONS POPUP ─── */
.reactions-popup,
.reactions-popover {
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    border: none !important;
    padding: 8px 10px !important;
}

/* ─── MODAL HEADERS ─── */
.modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e6eb !important;
    padding: 16px 20px !important;
}
:root[data-theme="dark"] .modal-header {
    background: #242526 !important;
    border-bottom-color: #3a3b3c !important;
}
.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
}
:root[data-theme="dark"] .modal-content {
    background: #242526 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}

/* ─── TAGS & SMALL CHIPS ─── */
.sidebar-badge {
    font-size: 0.72rem !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    background: #e4e6eb !important;
    color: var(--text-primary) !important;
}
.sidebar-badge[style*="var(--zai-accent)"] {
    background: var(--zai-accent) !important;
    color: #1e293b !important;
}

/* ─── BOTTOM MOBILE NAV ─── */
.mobile-bottom-nav.fb-bottom-nav {
    border-top: 1px solid #e4e6eb !important;
    background: #ffffff !important;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.08) !important;
}
:root[data-theme="dark"] .mobile-bottom-nav.fb-bottom-nav {
    background: #242526 !important;
    border-top-color: #3a3b3c !important;
}

/* ─── DROPDOWN MENUS ─── */
.fb-dropdown,
.notif-dropdown {
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    border: none !important;
}
:root[data-theme="dark"] .fb-dropdown,
:root[data-theme="dark"] .notif-dropdown {
    background: #242526 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.fb-dropdown-item:hover {
    background: #f0f2f5 !important;
    border-radius: 8px !important;
}
:root[data-theme="dark"] .fb-dropdown-item:hover {
    background: #3a3b3c !important;
}

/* ─── FOCUS STATES ─── */
.form-control:focus,
.form-select:focus {
    border-color: var(--uog-blue) !important;
    box-shadow: 0 0 0 3px rgba(15,76,129,0.12) !important;
}

/* ─── ACTIVE CONTACTS ─── */
#active-contacts-list .contact-item,
#active-contacts-list > div {
    border-radius: 10px !important;
    padding: 8px 10px !important;
    transition: background 0.15s !important;
}
#active-contacts-list > div:hover {
    background: #f0f2f5 !important;
}

/* ─── SMOOTH TRANSITIONS ─── */
.edu-card,
.sidebar-list li,
.interaction-btn,
.nav-circle-btn,
.create-action-btn,
.notice-list li {
    transition: all 0.15s ease !important;
}

/* ─── SCROLLBAR: Thin & clean ─── */
.edu-main::-webkit-scrollbar,
.edu-sidebar-left::-webkit-scrollbar,
.edu-sidebar-right::-webkit-scrollbar {
    width: 4px !important;
}
.edu-main::-webkit-scrollbar-thumb,
.edu-sidebar-left::-webkit-scrollbar-thumb,
.edu-sidebar-right::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15) !important;
    border-radius: 4px !important;
}
:root[data-theme="dark"] .edu-main::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .edu-sidebar-left::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .edu-sidebar-right::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1) !important;
}

/* ─── VIEW HEADER ─── */
.view-header {
    padding: 4px 2px 8px !important;
}
.view-header h2 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}

/* ─── JOBS / EVENTS WIDGET ─── */
#right-jobs-widget {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    border: none !important;
}
:root[data-theme="dark"] #right-jobs-widget {
    background: #242526 !important;
    box-shadow: none !important;
}

/* ─── NOTIFICATION BADGE ─── */
.badge {
    border-radius: 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    border: 2px solid var(--bg-surface-solid) !important;
    min-width: 18px !important;
    text-align: center !important;
}

/* ─── COVER BANNER in sidebar ─── */
.profile-cover-banner {
    background: var(--gradient-primary) !important;
    height: 44px !important;
    border-radius: 12px 12px 0 0 !important;
}

/* ─── FOOTER END ─── */

/* ══════════════════════════════════════════════════════════════════
   🔥 STATBOOK v3 — FINAL FACEBOOK POLISH (Override priority fix)
   ══════════════════════════════════════════════════════════════════ */

/* Sidebar icon-wrap — override the plain <i> reset */
body:not(.forced-mobile-mode) .sidebar-list li .sidebar-icon-wrap,
body.forced-desktop-mode .sidebar-list li .sidebar-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    background: #e4e6eb !important; /* fallback, overridden by color classes */
}

/* Colorful sidebar backgrounds */
body:not(.forced-mobile-mode) .sidebar-list li .bg-home,
body.forced-desktop-mode .sidebar-list li .bg-home { background: #0f4c81 !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-events,
body.forced-desktop-mode .sidebar-list li .bg-events { background: #f02849 !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-jobs,
body.forced-desktop-mode .sidebar-list li .bg-jobs { background: #f7b928 !important; color: #1e293b !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-alumni,
body.forced-desktop-mode .sidebar-list li .bg-alumni { background: #2ab8a6 !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-election,
body.forced-desktop-mode .sidebar-list li .bg-election { background: #e04a3f !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-messages,
body.forced-desktop-mode .sidebar-list li .bg-messages { background: #10b981 !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-records,
body.forced-desktop-mode .sidebar-list li .bg-records { background: #7c3aed !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-software,
body.forced-desktop-mode .sidebar-list li .bg-software { background: #f97316 !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-hall,
body.forced-desktop-mode .sidebar-list li .bg-hall { background: #eab308 !important; color: #1e293b !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-saved,
body.forced-desktop-mode .sidebar-list li .bg-saved { background: #a855f7 !important; }

body:not(.forced-mobile-mode) .sidebar-list li .bg-settings,
body.forced-desktop-mode .sidebar-list li .bg-settings { background: #8e9aa8 !important; }

/* Active item: keep icon colors */
body:not(.forced-mobile-mode) .sidebar-list li.active-item .sidebar-icon-wrap,
body.forced-desktop-mode .sidebar-list li.active-item .sidebar-icon-wrap {
    opacity: 1 !important;
}

/* Create Post card dark-mode fix */
:root[data-theme="dark"] #compose-card {
    background: #242526 !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] #open-compose {
    background: #3a3b3c !important;
}
:root[data-theme="dark"] #open-compose span {
    color: #b0b3b8 !important;
}
:root[data-theme="dark"] #open-compose:hover {
    background: #4a4b4c !important;
}
:root[data-theme="dark"] .create-action-btn:hover {
    background: #3a3b3c !important;
}

/* Story card container */
.status-stories-container.fb-stories-rail {
    display: flex !important;
    gap: 10px !important;
    padding: 4px 0 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
.status-stories-container.fb-stories-rail::-webkit-scrollbar {
    display: none !important;
}

/* Right sidebar widget cards */
body:not(.forced-mobile-mode) .notice-board,
body.forced-desktop-mode .notice-board {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}
body:not(.forced-mobile-mode) .stats-card,
body.forced-desktop-mode .stats-card {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}
:root[data-theme="dark"] .notice-board,
:root[data-theme="dark"] .stats-card {
    background: #242526 !important;
    box-shadow: none !important;
}

/* Right sidebar transparent bg */
body:not(.forced-mobile-mode) .edu-sidebar-right,
body.forced-desktop-mode .edu-sidebar-right {
    padding: 0 4px !important;
}

/* Post card: fix remaining border */
body:not(.forced-mobile-mode) .edu-card,
body.forced-desktop-mode .edu-card {
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .edu-card,
:root[data-theme="dark"] body.forced-desktop-mode .edu-card {
    background: #242526 !important;
    box-shadow: none !important;
}

/* Feed sort bar */
body:not(.forced-mobile-mode) .feed-sort-bar,
body.forced-desktop-mode .feed-sort-bar {
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    margin-bottom: 12px !important;
}
:root[data-theme="dark"] .feed-sort-bar {
    background: #242526 !important;
    box-shadow: none !important;
}

/* Interaction bar buttons */
body:not(.forced-mobile-mode) .interaction-btn,
body.forced-desktop-mode .interaction-btn {
    color: #65676b !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}
body:not(.forced-mobile-mode) .interaction-btn:hover,
body.forced-desktop-mode .interaction-btn:hover {
    background: #f0f2f5 !important;
    color: #050505 !important;
}
body:not(.forced-mobile-mode) .interaction-btn.liked,
body.forced-desktop-mode .interaction-btn.liked {
    color: #1877f2 !important;
}
:root[data-theme="dark"] .interaction-btn {
    color: #b0b3b8 !important;
}
:root[data-theme="dark"] .interaction-btn:hover {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
}

/* Section header in sidebar */
body:not(.forced-mobile-mode) .sidebar-section-header,
body.forced-desktop-mode .sidebar-section-header {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #65676b !important;
    padding: 14px 12px 4px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}

/* View header */
body:not(.forced-mobile-mode) .view-header,
body.forced-desktop-mode .view-header {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   🔧 STATBOOK v4 — Sidebar top-fix + polish
   ══════════════════════════════════════════════════════════════════ */

/* Fix sidebar cut-off: start from very top of scroll container */
body:not(.forced-mobile-mode) .edu-sidebar-left,
body.forced-desktop-mode .edu-sidebar-left {
    top: 0 !important;
    position: relative !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    align-self: stretch !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-right: 1px solid #e4e6eb !important;
    background: #ffffff !important;
    padding: 8px 8px !important;
    width: 260px !important;
    min-width: 260px !important;
    flex-shrink: 0 !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .edu-sidebar-left,
:root[data-theme="dark"] body.forced-desktop-mode .edu-sidebar-left {
    background: #242526 !important;
    border-right-color: #3a3b3c !important;
}

/* edu-body: no extra padding so sidebar starts at top */
body:not(.forced-mobile-mode) .edu-body,
body.forced-desktop-mode .edu-body {
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
    height: calc(100vh - 56px) !important;
}

/* Main feed: proper padding & scroll */
body:not(.forced-mobile-mode) .edu-main,
body.forced-desktop-mode .edu-main {
    overflow-y: auto !important;
    padding: 16px 8px 24px !important;
    max-width: 660px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: #f0f2f5 !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .edu-main,
:root[data-theme="dark"] body.forced-desktop-mode .edu-main {
    background: #18191a !important;
}

/* Right sidebar: scroll with content */
body:not(.forced-mobile-mode) .edu-sidebar-right,
body.forced-desktop-mode .edu-sidebar-right {
    width: 280px !important;
    min-width: 280px !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    position: relative !important;
    top: 0 !important;
    align-self: stretch !important;
    background: #f0f2f5 !important;
    padding: 16px 8px !important;
    border-left: 1px solid #e4e6eb !important;
    flex-shrink: 0 !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .edu-sidebar-right,
:root[data-theme="dark"] body.forced-desktop-mode .edu-sidebar-right {
    background: #18191a !important;
    border-left-color: #3a3b3c !important;
}

/* Sidebar profile summary: show again */
body:not(.forced-mobile-mode) .profile-summary,
body.forced-desktop-mode .profile-summary {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 12px 8px 16px !important;
    border-bottom: 1px solid #e4e6eb !important;
    margin-bottom: 4px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 4px !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .profile-summary,
:root[data-theme="dark"] body.forced-desktop-mode .profile-summary {
    border-bottom-color: #3a3b3c !important;
}

/* Keep sidebar-logo hidden */
body:not(.forced-mobile-mode) .sidebar-logo,
body.forced-desktop-mode .sidebar-logo {
    display: none !important;
}

/* View header: hide the "Department Feed" title */
body:not(.forced-mobile-mode) .view-header,
body.forced-desktop-mode .view-header {
    display: none !important;
}

/* Sidebar section header color fix */
body:not(.forced-mobile-mode) .sidebar-section-header,
body.forced-desktop-mode .sidebar-section-header {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #65676b !important;
    padding: 14px 12px 4px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .sidebar-section-header,
:root[data-theme="dark"] body.forced-desktop-mode .sidebar-section-header {
    color: #b0b3b8 !important;
}

/* Sidebar list items */
body:not(.forced-mobile-mode) .sidebar-list li,
body.forced-desktop-mode .sidebar-list li {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    gap: 10px !important;
}

/* Active item blue highlight */
body:not(.forced-mobile-mode) .sidebar-list li.active-item,
body.forced-desktop-mode .sidebar-list li.active-item {
    background: #e7f3ff !important;
    color: #1877f2 !important;
    font-weight: 700 !important;
}

/* Notice cards in right sidebar */
body:not(.forced-mobile-mode) .notice-board,
body.forced-desktop-mode .notice-board,
body:not(.forced-mobile-mode) .stats-card,
body.forced-desktop-mode .stats-card,
body:not(.forced-mobile-mode) #right-jobs-widget,
body.forced-desktop-mode #right-jobs-widget {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
}
:root[data-theme="dark"] .notice-board,
:root[data-theme="dark"] .stats-card,
:root[data-theme="dark"] #right-jobs-widget {
    background: #242526 !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   ✨ STATBOOK v5 — Attractive Sidebar Redesign
   ══════════════════════════════════════════════════════════════════ */

/* ── Sidebar base ── */
body:not(.forced-mobile-mode) .edu-sidebar-left,
body.forced-desktop-mode .edu-sidebar-left {
    background: #ffffff !important;
    border-right: 1px solid #e8eaed !important;
    padding: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e4e6eb transparent !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .edu-sidebar-left,
:root[data-theme="dark"] body.forced-desktop-mode .edu-sidebar-left {
    background: #1c1e21 !important;
    border-right-color: #2d2f33 !important;
}

/* ── Profile summary: clean minimal card ── */
body:not(.forced-mobile-mode) .profile-summary,
body.forced-desktop-mode .profile-summary {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 16px 16px !important;
    border-bottom: 1px solid #f0f2f5 !important;
    margin: 0 0 6px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body:not(.forced-mobile-mode) .profile-summary h3,
body.forced-desktop-mode .profile-summary h3 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    margin: 8px 0 2px !important;
    color: #050505 !important;
}
body:not(.forced-mobile-mode) .profile-summary p,
body.forced-desktop-mode .profile-summary p {
    font-size: 0.78rem !important;
    color: #65676b !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .profile-summary h3,
:root[data-theme="dark"] body.forced-desktop-mode .profile-summary h3 {
    color: #e4e6eb !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .profile-summary p,
:root[data-theme="dark"] body.forced-desktop-mode .profile-summary p {
    color: #b0b3b8 !important;
}

/* ── Section header: small caps, spaced ── */
body:not(.forced-mobile-mode) .sidebar-section-header,
body.forced-desktop-mode .sidebar-section-header {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #90949c !important;
    padding: 16px 16px 6px !important;
    opacity: 1 !important;
    display: block !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .sidebar-section-header,
:root[data-theme="dark"] body.forced-desktop-mode .sidebar-section-header {
    color: #6a6d72 !important;
}

/* ── Sidebar list wrapper ── */
body:not(.forced-mobile-mode) .sidebar-list,
body.forced-desktop-mode .sidebar-list {
    padding: 0 8px !important;
    gap: 2px !important;
}

/* ── Sidebar list item base ── */
body:not(.forced-mobile-mode) .sidebar-list li,
body.forced-desktop-mode .sidebar-list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #050505 !important;
    background: transparent !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}
body:not(.forced-mobile-mode) .sidebar-list li:hover,
body.forced-desktop-mode .sidebar-list li:hover {
    background: #f2f4f8 !important;
    transform: none !important;
    color: #050505 !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .sidebar-list li,
:root[data-theme="dark"] body.forced-desktop-mode .sidebar-list li {
    color: #e4e6eb !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .sidebar-list li:hover,
:root[data-theme="dark"] body.forced-desktop-mode .sidebar-list li:hover {
    background: #2d2f33 !important;
}

/* ── Active item: gradient pill ── */
body:not(.forced-mobile-mode) .sidebar-list li.active-item,
body.forced-desktop-mode .sidebar-list li.active-item {
    background: linear-gradient(90deg, #e8f0fe 0%, #f0f4ff 100%) !important;
    color: #1a73e8 !important;
    font-weight: 700 !important;
    border-left: 3px solid #1a73e8 !important;
    padding-left: 9px !important;
    box-shadow: 0 1px 4px rgba(26,115,232,0.12) !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .sidebar-list li.active-item,
:root[data-theme="dark"] body.forced-desktop-mode .sidebar-list li.active-item {
    background: linear-gradient(90deg, rgba(26,115,232,0.15) 0%, rgba(26,115,232,0.08) 100%) !important;
    color: #6ba3ff !important;
    border-left-color: #6ba3ff !important;
}

/* ── Sidebar colorful icon-wrap ── */
body:not(.forced-mobile-mode) .sidebar-list li .sidebar-icon-wrap,
body.forced-desktop-mode .sidebar-list li .sidebar-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
body:not(.forced-mobile-mode) .sidebar-list li:hover .sidebar-icon-wrap,
body.forced-desktop-mode .sidebar-list li:hover .sidebar-icon-wrap {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
}

/* Icon colors - rounded rect style */
body:not(.forced-mobile-mode) .sidebar-list li .bg-home,
body.forced-desktop-mode .sidebar-list li .bg-home {
    background: linear-gradient(135deg, #1a73e8, #0d47a1) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li [style*="background:#0f4c81"],
body.forced-desktop-mode .sidebar-list li [style*="background:#0f4c81"] {
    background: linear-gradient(135deg, #0f4c81, #1565c0) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-events,
body.forced-desktop-mode .sidebar-list li .bg-events {
    background: linear-gradient(135deg, #f44336, #b71c1c) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-jobs,
body.forced-desktop-mode .sidebar-list li .bg-jobs {
    background: linear-gradient(135deg, #f9a825, #e65100) !important;
    color: #fff !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-alumni,
body.forced-desktop-mode .sidebar-list li .bg-alumni {
    background: linear-gradient(135deg, #00bcd4, #006064) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-election,
body.forced-desktop-mode .sidebar-list li .bg-election {
    background: linear-gradient(135deg, #e53935, #7b1fa2) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-messages,
body.forced-desktop-mode .sidebar-list li .bg-messages {
    background: linear-gradient(135deg, #00c853, #1b5e20) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-records,
body.forced-desktop-mode .sidebar-list li .bg-records {
    background: linear-gradient(135deg, #7c3aed, #4c1d95) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-software,
body.forced-desktop-mode .sidebar-list li .bg-software {
    background: linear-gradient(135deg, #ff6d00, #bf360c) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-hall,
body.forced-desktop-mode .sidebar-list li .bg-hall {
    background: linear-gradient(135deg, #fbc02d, #e65100) !important;
    color: #fff !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-saved,
body.forced-desktop-mode .sidebar-list li .bg-saved {
    background: linear-gradient(135deg, #ab47bc, #6a1b9a) !important;
}
body:not(.forced-mobile-mode) .sidebar-list li .bg-settings,
body.forced-desktop-mode .sidebar-list li .bg-settings {
    background: linear-gradient(135deg, #78909c, #37474f) !important;
}

/* ── Sidebar badge ── */
body:not(.forced-mobile-mode) .sidebar-badge,
body.forced-desktop-mode .sidebar-badge {
    margin-left: auto !important;
    background: #e4e6eb !important;
    color: #050505 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 2px 9px !important;
    border-radius: 20px !important;
    min-width: 24px !important;
    text-align: center !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .sidebar-badge,
:root[data-theme="dark"] body.forced-desktop-mode .sidebar-badge {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
}

/* Chevron icon in list items */
body:not(.forced-mobile-mode) .sidebar-list li .chevron-right,
body.forced-desktop-mode .sidebar-list li .chevron-right {
    margin-left: auto !important;
    font-size: 0.72rem !important;
    color: #bcc0c4 !important;
}

/* ── Navbar: Crisp clean ── */
body:not(.forced-mobile-mode) .edu-navbar,
body.forced-desktop-mode .edu-navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e8eaed !important;
    box-shadow: none !important;
    height: 56px !important;
    padding: 0 20px !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .edu-navbar,
:root[data-theme="dark"] body.forced-desktop-mode .edu-navbar {
    background: #242526 !important;
    border-bottom-color: #3a3b3c !important;
}

/* ── Navbar search bar ── */
.nav-search-container {
    background: #f0f2f5 !important;
    border-radius: 50px !important;
    height: 40px !important;
    max-width: 240px !important;
    border: none !important;
    transition: background 0.15s, box-shadow 0.15s !important;
}
.nav-search-container:focus-within {
    background: #e4e6eb !important;
    box-shadow: 0 0 0 2px rgba(26,115,232,0.2) !important;
}
:root[data-theme="dark"] .nav-search-container {
    background: #3a3b3c !important;
}

/* ── Profile chip ── */
.profile-chip {
    background: transparent !important;
    border-radius: 30px !important;
    padding: 4px 10px 4px 4px !important;
    transition: background 0.15s !important;
    border: none !important;
}
.profile-chip:hover {
    background: #f0f2f5 !important;
}
:root[data-theme="dark"] .profile-chip:hover {
    background: #3a3b3c !important;
}

/* ── Nav action buttons ── */
body:not(.forced-mobile-mode) .nav-circle-btn,
body.forced-desktop-mode .nav-circle-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e4e6eb !important;
    color: #050505 !important;
    font-size: 1rem !important;
    transition: background 0.15s !important;
    box-shadow: none !important;
}
body:not(.forced-mobile-mode) .nav-circle-btn:hover,
body.forced-desktop-mode .nav-circle-btn:hover {
    background: #ccd0d5 !important;
    color: #050505 !important;
    transform: none !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .nav-circle-btn,
:root[data-theme="dark"] body.forced-desktop-mode .nav-circle-btn {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
}
:root[data-theme="dark"] body:not(.forced-mobile-mode) .nav-circle-btn:hover,
:root[data-theme="dark"] body.forced-desktop-mode .nav-circle-btn:hover {
    background: #4a4b4c !important;
}

/* ── Edit profile button ── */
.edit-profile-btn {
    background: #e7f3ff !important;
    color: #1877f2 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    width: 90% !important;
    justify-content: center !important;
    transition: background 0.15s !important;
}
.edit-profile-btn:hover {
    background: #cce0ff !important;
    color: #1877f2 !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .edit-profile-btn {
    background: rgba(26,115,232,0.15) !important;
    color: #6ba3ff !important;
}

/* Avatar in sidebar */
body:not(.forced-mobile-mode) #side-avatar,
body.forced-desktop-mode #side-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    font-size: 1.8rem !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   🎨 STATBOOK v6 — FINAL icon white + gradient fix (highest specificity)
   ══════════════════════════════════════════════════════════════════ */

/* Force all icons inside sidebar-icon-wrap to be WHITE no matter what */
.sidebar-list li .sidebar-icon-wrap i,
.sidebar-list li .sidebar-icon-wrap i.fas,
.sidebar-list li .sidebar-icon-wrap i.fab,
.sidebar-list li .sidebar-icon-wrap i.far,
body:not(.forced-mobile-mode) .sidebar-list li .sidebar-icon-wrap i,
body.forced-desktop-mode .sidebar-list li .sidebar-icon-wrap i {
    color: #ffffff !important;
    font-size: 0.9rem !important;
}

/* Rounded square shape for all icon wraps */
.sidebar-list li .sidebar-icon-wrap,
body:not(.forced-mobile-mode) .sidebar-list li .sidebar-icon-wrap,
body.forced-desktop-mode .sidebar-list li .sidebar-icon-wrap {
    border-radius: 10px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}
.sidebar-list li:hover .sidebar-icon-wrap {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Gradient backgrounds for each icon class */
.sidebar-list li .bg-home       { background: linear-gradient(135deg,#1877f2,#0d47a1) !important; }
.sidebar-list li .bg-events     { background: linear-gradient(135deg,#e53935,#880e0e) !important; }
.sidebar-list li .bg-jobs       { background: linear-gradient(135deg,#ff8f00,#e65100) !important; }
.sidebar-list li .bg-alumni     { background: linear-gradient(135deg,#00acc1,#004d61) !important; }
.sidebar-list li .bg-election   { background: linear-gradient(135deg,#8e24aa,#4a0072) !important; }
.sidebar-list li .bg-messages   { background: linear-gradient(135deg,#00c853,#1b5e20) !important; }
.sidebar-list li .bg-records    { background: linear-gradient(135deg,#5c35d4,#2d1473) !important; }
.sidebar-list li .bg-software   { background: linear-gradient(135deg,#f4511e,#8b1a00) !important; }
.sidebar-list li .bg-hall       { background: linear-gradient(135deg,#ffa000,#c67000) !important; }
.sidebar-list li .bg-saved      { background: linear-gradient(135deg,#9c27b0,#560a6e) !important; }
.sidebar-list li .bg-settings   { background: linear-gradient(135deg,#607d8b,#263238) !important; }

/* Active item: blue left border highlight, no gradient background */
body:not(.forced-mobile-mode) .sidebar-list li.active-item,
body.forced-desktop-mode .sidebar-list li.active-item {
    background: #e7f3ff !important;
    color: #1877f2 !important;
    font-weight: 700 !important;
    border-left: 3px solid #1877f2 !important;
}
/* Keep icon colors in active state */
body:not(.forced-mobile-mode) .sidebar-list li.active-item .sidebar-icon-wrap i,
body.forced-desktop-mode .sidebar-list li.active-item .sidebar-icon-wrap i {
    color: #ffffff !important;
}


/* ─── MAIN PAGE SCROLLBAR — Visible & Styled ─────────────────────────── */
/* Make the main content area always scrollable with a proper scrollbar */
#main-content,
.edu-main {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 76, 129, 0.35) rgba(241, 245, 249, 0.8) !important;
}

#main-content::-webkit-scrollbar,
.edu-main::-webkit-scrollbar {
    width: 7px !important;
    background: rgba(241, 245, 249, 0.8) !important;
    border-radius: 8px !important;
}

#main-content::-webkit-scrollbar-thumb,
.edu-main::-webkit-scrollbar-thumb {
    background: rgba(15, 76, 129, 0.30) !important;
    border-radius: 8px !important;
    transition: background 0.2s !important;
}

#main-content::-webkit-scrollbar-thumb:hover,
.edu-main::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 76, 129, 0.55) !important;
}

#main-content::-webkit-scrollbar-track,
.edu-main::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.6) !important;
    border-radius: 8px !important;
}

/* Pro Apps body — also scrollable */
body.pro-apps-view #main-content,
body.pro-apps-view .edu-main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
}

/* Full-screen apps (CV, AI, exam-seating) — own internal scroll, hide outer */
body.cv-builder-full #main-content,
body.cv-builder-full .edu-main {
    overflow: hidden !important;
    scrollbar-width: none !important;
}
body.cv-builder-full #main-content::-webkit-scrollbar,
body.cv-builder-full .edu-main::-webkit-scrollbar {
    display: none !important;
}

/* ─── VIEW HEADER — never flash on full-screen apps ─────────────────── */
body.cv-builder-full .view-header {
    display: none !important;
}


/* ── Main page scrollbar — always visible on right side ─────────────────── */
html {
    overflow-y: scroll !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 76, 129, 0.4) rgba(241, 245, 249, 0.9) !important;
}

html::-webkit-scrollbar {
    width: 8px !important;
}

html::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.9) !important;
    border-radius: 0 !important;
}

html::-webkit-scrollbar-thumb {
    background: rgba(15, 76, 129, 0.4) !important;
    border-radius: 4px !important;
    transition: background 0.2s !important;
}

html::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 76, 129, 0.65) !important;
}

/* Pro Apps main content scrollbar */
#main-content,
.edu-main {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 76, 129, 0.4) rgba(241, 245, 249, 0.9) !important;
}

#main-content::-webkit-scrollbar,
.edu-main::-webkit-scrollbar {
    width: 8px !important;
}

#main-content::-webkit-scrollbar-track,
.edu-main::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.9) !important;
    border-radius: 4px !important;
}

#main-content::-webkit-scrollbar-thumb,
.edu-main::-webkit-scrollbar-thumb {
    background: rgba(15, 76, 129, 0.4) !important;
    border-radius: 4px !important;
}

#main-content::-webkit-scrollbar-thumb:hover,
.edu-main::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 76, 129, 0.65) !important;
}

/* list-container scrollbar */
#list-container {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 76, 129, 0.4) rgba(241, 245, 249, 0.9) !important;
}

#list-container::-webkit-scrollbar { width: 8px !important; }
#list-container::-webkit-scrollbar-track { background: rgba(241,245,249,0.9) !important; border-radius:4px !important; }
#list-container::-webkit-scrollbar-thumb { background: rgba(15,76,129,0.4) !important; border-radius:4px !important; }
#list-container::-webkit-scrollbar-thumb:hover { background: rgba(15,76,129,0.65) !important; }


/* ── Pro Apps page: force visible right-side scrollbar ──────────────────── */
body.pro-apps-view,
body.pro-apps-view .edu-body,
body.pro-apps-view #main-content,
body.pro-apps-view .edu-main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.pro-apps-view #main-content::-webkit-scrollbar,
body.pro-apps-view .edu-main::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

body.pro-apps-view #main-content::-webkit-scrollbar-track,
body.pro-apps-view .edu-main::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

body.pro-apps-view #main-content::-webkit-scrollbar-thumb,
body.pro-apps-view .edu-main::-webkit-scrollbar-thumb {
    background: rgba(15, 76, 129, 0.45) !important;
    border-radius: 4px !important;
}

body.pro-apps-view #main-content::-webkit-scrollbar-thumb:hover,
body.pro-apps-view .edu-main::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 76, 129, 0.7) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE SHELL — Topbar inner layout (injected by buildMobileShell)
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Show topbar on mobile */
    #mobile-topbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        height: 50px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 0;
        z-index: 150;
        flex-shrink: 0;
        box-shadow: 0 1px 6px rgba(0,0,0,.07);
    }

    .mobile-topbar-left { display: flex !important; align-items: center; gap: 8px; }

    .mob-logo-wrap {
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .mob-logo-text {
        font-size: 14px;
        font-weight: 800;
        color: #0f4c81;
        letter-spacing: -.3px;
    }

    .mobile-topbar-center {
        font-size: 14px;
        font-weight: 700;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

    .mobile-topbar-right-inner {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-icon-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 15px;
        color: #64748b;
        padding: 7px;
        border-radius: 50%;
        transition: background .15s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-icon-btn:active { background: #f1f5f9; }

    /* Search bar */
    #mobile-search-bar {
        display: none;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 50px;
        z-index: 149;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    #mobile-search-bar.active { display: flex !important; }

    /* Bottom nav — show on mobile */
    #mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #e4e6eb;
        padding: 4px 0 env(safe-area-inset-bottom, 4px);
        z-index: 200;
        box-shadow: 0 -2px 12px rgba(0,0,0,.08);
        justify-content: space-around;
        align-items: center;
    }

    .mob-nav-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        background: none;
        border: none;
        cursor: pointer;
        color: #64748b;
        font-size: 10px;
        font-family: inherit;
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 10px;
        transition: color .15s, background .15s;
        min-width: 52px;
        position: relative;
    }
    .mob-nav-btn:active { background: #f1f5f9; }
    .mob-nav-btn.active-mob { color: #0f4c81; }
    .mob-nav-btn.active-mob i { transform: scale(1.1); }
    .mob-nav-btn i { font-size: 20px; display: block; line-height: 1; transition: transform .2s; }

    .mob-nav-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

    .mob-nav-dot {
        position: absolute;
        top: -3px; right: -5px;
        width: 8px; height: 8px;
        background: #ef4444;
        border-radius: 50%;
        border: 2px solid #fff;
    }

    /* Add bottom padding to main content so it doesn't hide behind nav */
    .edu-main,
    #list-container {
        padding-bottom: 70px !important;
    }

    /* More menu drawer */
    .mobile-drawer {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-radius: 20px 20px 0 0;
        padding: 0 0 env(safe-area-inset-bottom, 16px);
        z-index: 400;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,1,.56,1);
        max-height: 80vh;
        overflow-y: auto;
    }
    .mobile-drawer.active { transform: translateY(0); }
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 300;
    }
    .mobile-overlay.active { display: block; }

    .mobile-drawer-handle {
        width: 36px; height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
        margin: 10px auto 0;
    }
    .mobile-drawer-title {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
        padding: 12px 20px 8px;
        border-bottom: 1px solid #f1f5f9;
    }
    .mob-menu-list { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
    .mob-menu-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 11px 12px;
        border-radius: 10px;
        border: none;
        background: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        width: 100%;
        text-align: left;
        transition: background .15s;
    }
    .mob-menu-row:hover, .mob-menu-row.active { background: #f1f5f9; }
    .mob-menu-icon {
        width: 36px; height: 36px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }
    .mob-menu-divider { height: 1px; background: #f1f5f9; margin: 4px 0; }
}

/* Tablet (769–1024px) — same nav but slightly larger */
@media (min-width: 769px) and (max-width: 1024px) {
    #mobile-topbar { display: flex !important; }
    #mobile-bottom-nav { display: flex !important; }
    .edu-sidebar-left,
    .edu-sidebar-right { display: none !important; }
    .edu-main, #list-container { padding-bottom: 70px !important; }
    .mob-nav-btn { min-width: 64px; padding: 6px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE PRO APPS — OPTIMIZED RESPONSIVE LAYOUT
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Layout Toggle Button — compact, no oversized background ────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    #mobile-layout-toggle-btn {
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        font-size: 0.95rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: background 0.15s !important;
    }
    #mobile-layout-toggle-btn:active {
        background: var(--border-color) !important;
    }
    /* Make all topbar icon buttons consistent & compact */
    .mobile-topbar-right-inner {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .mobile-topbar-right-inner .mobile-icon-btn {
        width: 34px !important;
        height: 34px !important;
        background: transparent !important;
        font-size: 0.92rem !important;
    }
}

/* ── 2. Topbar Compact Mode — for full-screen app views ────────────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    /* When a Pro App is open, topbar shrinks to 38px */
    #mobile-topbar.topbar-compact {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    }
    #mobile-topbar.topbar-compact #mob-page-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--text-secondary) !important;
    }
    #mobile-topbar.topbar-compact .mobile-icon-btn,
    #mobile-topbar.topbar-compact #mobile-layout-toggle-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.82rem !important;
        background: transparent !important;
    }
    #mobile-topbar.topbar-compact .avatar-small {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
    #mobile-topbar.topbar-compact .mobile-topbar-right-inner {
        gap: 0 !important;
    }

    /* Content area when compact topbar (38px) instead of 56px */
    body.mob-app-view.fb-mobile-shell .edu-body {
        height: calc(100dvh - 38px) !important;
        padding-bottom: 0 !important;
    }
    body.mob-app-view.fb-mobile-shell .edu-main {
        height: calc(100dvh - 38px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body.mob-app-view.fb-mobile-shell #list-container {
        height: calc(100dvh - 38px) !important;
        overflow: hidden !important;
    }
}

/* ── 3. CV Builder — mobile full screen, no bottom nav overlap ──────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    body.mob-app-view.fb-mobile-shell .cv-app {
        height: calc(100dvh - 38px) !important;
        min-height: calc(100dvh - 38px) !important;
        max-height: calc(100dvh - 38px) !important;
    }
    .cv-app {
        width: 100% !important;
        overflow: hidden !important;
    }
    /* Toolbar inside app: keep it slim */
    .cv-toolbar {
        min-height: 46px !important;
        padding: 6px 10px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    .cv-toolbar-title p { display: none !important; }
    .cv-toolbar-title h1 { font-size: 0.88rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cv-toolbar-actions { display: none !important; }
    .cv-toolbar-back { padding: 6px 10px !important; font-size: 0.78rem !important; }
    /* Form scroll area: account for toolbar + compact topbar */
    .cv-form-scroll {
        padding-bottom: 70px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Progress strip */
    .cv-progress-strip { padding: 4px 10px !important; }
    .cv-fields-badge { display: none !important; }
}

/* ── 4. PPT / Doc-to-PPT — mobile layout ───────────────────────────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    body.mob-app-view.fb-mobile-shell .ppt-app {
        position: fixed !important;
        top: 38px !important;   /* below compact topbar */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: calc(100dvh - 38px) !important;
        z-index: 200 !important;
        overflow: hidden !important;
    }
    .ppt-titlebar {
        height: 40px !important;
        padding: 0 8px !important;
        font-size: 0.82rem !important;
    }
    .ppt-titlebar-title { font-size: 0.82rem !important; }
    .ppt-titlebar-btn { width: 28px !important; height: 28px !important; font-size: 0.78rem !important; }
    .ppt-ribbon { min-height: 0 !important; }
    .ppt-ribbon-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
    .ppt-ribbon-tabs::-webkit-scrollbar { display: none !important; }
    .ppt-ribbon-body { padding: 4px 6px !important; overflow-x: auto !important; }
    .ppt-ribbon-group { min-width: 0 !important; flex-shrink: 0 !important; }
    .ppt-workspace {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .ppt-left-panel {
        width: 100% !important;
        height: 30vw !important;
        min-height: 90px !important;
        max-height: 160px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-direction: row !important;
        border-right: none !important;
        border-bottom: 1px solid var(--ppt-border) !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .dppt-stage {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        transform: none !important;
        max-width: 100% !important;
    }
    .ppt-notes-bar { display: none !important; }
    .ppt-statusbar { height: 22px !important; font-size: 0.68rem !important; padding: 0 8px !important; }
}

/* ── 5. Thesis Format — mobile ──────────────────────────────────────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    body.mob-app-view.fb-mobile-shell .thesis-app,
    body.mob-app-view.fb-mobile-shell #thesis-format-root {
        height: calc(100dvh - 38px) !important;
        max-height: calc(100dvh - 38px) !important;
        overflow: hidden !important;
    }
    .thesis-toolbar, .thesis-header {
        padding: 6px 10px !important;
        min-height: 44px !important;
    }
    .thesis-toolbar-title { font-size: 0.88rem !important; }
    .thesis-toolbar-actions { display: none !important; }
    .thesis-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    .thesis-main-area {
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        padding: 8px 10px !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ── 6. AI Detector / AI Humanizer / Plagiarism — mobile ───────────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    body.mob-app-view.fb-mobile-shell .ai-detector-app,
    body.mob-app-view.fb-mobile-shell .ai-humanizer-app,
    body.mob-app-view.fb-mobile-shell .plagiarism-app,
    body.mob-app-view.fb-mobile-shell #ai-detector-root,
    body.mob-app-view.fb-mobile-shell #ai-remover-root,
    body.mob-app-view.fb-mobile-shell #plagiarism-root {
        height: calc(100dvh - 38px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Input/output panels: stack vertically */
    .ai-split-panel, .ai-two-col, .plagiarism-split {
        flex-direction: column !important;
        height: auto !important;
    }
    .ai-input-panel, .ai-output-panel,
    .plagiarism-input, .plagiarism-output {
        width: 100% !important;
        min-height: 180px !important;
        max-height: 40vh !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    /* Toolbars inside these apps */
    .ai-toolbar, .detector-toolbar {
        padding: 6px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-height: 44px !important;
    }
    .ai-toolbar-title { font-size: 0.85rem !important; }
    /* Buttons: full width on mobile */
    .ai-run-btn, .ai-submit-btn, .detector-run-btn, .plagiarism-check-btn {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.88rem !important;
        justify-content: center !important;
    }
    /* Result cards: compact */
    .ai-result-card, .detector-result, .plagiarism-result {
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
    }
    /* Textarea: full width, comfortable height */
    .ai-text-input, .detector-textarea, .plagiarism-textarea {
        width: 100% !important;
        min-height: 120px !important;
        font-size: 0.9rem !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        resize: vertical !important;
    }
}

/* ── 7. Exam Seating — mobile ───────────────────────────────────────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    body.mob-app-view.fb-mobile-shell .seating-app,
    body.mob-app-view.fb-mobile-shell #exam-seating-root {
        height: calc(100dvh - 38px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .seating-toolbar, .seating-header {
        padding: 6px 10px !important;
        min-height: 44px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .seating-toolbar-title { font-size: 0.88rem !important; }
    .seating-controls {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }
    .seating-grid-container {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px !important;
    }
    .seating-cell {
        min-width: 56px !important;
        min-height: 40px !important;
        font-size: 0.68rem !important;
        padding: 4px !important;
    }
    /* Action buttons */
    .seating-action-btn {
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }
    /* Tables on mobile */
    .seating-table {
        font-size: 0.75rem !important;
    }
    .seating-table th, .seating-table td {
        padding: 6px 8px !important;
    }
}

/* ── 8. Pro Apps Grid — mobile cards ────────────────────────────────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    .pam-root {
        padding: 10px 8px 80px !important;
    }
    .pam-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .pam-card {
        padding: 12px 10px !important;
        border-radius: 14px !important;
    }
    .pam-card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        border-radius: 12px !important;
        margin-bottom: 8px !important;
    }
    .pam-card-name {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }
    .pam-card-desc {
        font-size: 0.68rem !important;
        -webkit-line-clamp: 2 !important;
    }
    .pam-hero {
        padding: 14px 12px !important;
        border-radius: 16px !important;
        margin-bottom: 10px !important;
    }
    .pam-hero-title {
        font-size: 1rem !important;
    }
    .pam-hero-sub {
        font-size: 0.78rem !important;
    }
    .pam-stat-pill {
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
    }
    .pam-section-label {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
        padding: 0 2px !important;
    }
}

/* ── 9. General mobile form/card/table improvements ────────────────────── */
@media (max-width: 768px), (body.forced-mobile-mode) {
    /* Forms */
    .form-control, .form-select {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }
    /* Cards */
    .edu-card {
        border-radius: 10px !important;
        margin-bottom: 8px !important;
    }
    /* Tables: horizontal scroll */
    .table-responsive-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px !important;
    }
    table {
        min-width: 480px;
    }
    /* Buttons: touch-friendly */
    .btn, button.btn-primary, button.btn-secondary {
        min-height: 40px !important;
        font-size: 0.88rem !important;
    }
    /* Modal: full width */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* ── 10. Forced Mobile Mode — same rules apply ──────────────────────────── */
body.forced-mobile-mode #mobile-topbar.topbar-compact {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
}
body.forced-mobile-mode.mob-app-view .edu-body {
    height: calc(100dvh - 38px) !important;
    padding-bottom: 0 !important;
}
body.forced-mobile-mode.mob-app-view .edu-main {
    height: calc(100dvh - 38px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
}
body.forced-mobile-mode.mob-app-view #list-container {
    height: calc(100dvh - 38px) !important;
    overflow: hidden !important;
}


/* ══════════════════════════════════════════════════════════════════════
   TOPBAR PROPER FIX — mob-topbar-right (no conflict with old class)
   ══════════════════════════════════════════════════════════════════════ */

/* Topbar layout: flex row, space-between */
#mobile-topbar {
    display: none;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

.mob-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mob-topbar-right .mobile-icon-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--text-secondary);
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
.mob-topbar-right .mobile-icon-btn:active {
    background: var(--border-color);
}

#mobile-layout-toggle-btn {
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Show topbar on mobile */
@media (max-width: 768px) {
    #mobile-topbar {
        display: flex !important;
        height: 50px;
        min-height: 50px;
        padding: 0 12px;
        position: sticky;
        top: 0;
        z-index: 150;
        background: var(--bg-surface-solid);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    /* Compact mode when app is open */
    #mobile-topbar.topbar-compact {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
    }
    #mobile-topbar.topbar-compact #mob-page-title {
        font-size: 11px !important;
        color: var(--text-secondary) !important;
    }
    #mobile-topbar.topbar-compact .mobile-icon-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.78rem !important;
    }
    #mobile-topbar.topbar-compact .mob-topbar-right {
        gap: 2px !important;
    }
    #mobile-topbar.topbar-compact .avatar-small {
        width: 24px !important;
        height: 24px !important;
    }
    /* Content area: full height minus topbar */
    body.mob-app-view .edu-body {
        height: calc(100dvh - 38px) !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }
    body.mob-app-view .edu-main {
        height: calc(100dvh - 38px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body.mob-app-view #list-container {
        height: calc(100dvh - 38px) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    /* Normal views */
    body:not(.mob-app-view) .edu-body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    /* Center text: page title */
    #mob-page-title {
        flex: 1;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 8px;
    }
    .mobile-topbar-left {
        display: flex;
        align-items: center;
        min-width: 40px;
        flex-shrink: 0;
    }
}

/* Forced mobile mode: same rules */
body.forced-mobile-mode #mobile-topbar {
    display: flex !important;
    height: 50px;
    min-height: 50px;
    padding: 0 12px;
    position: sticky;
    top: 0;
    z-index: 150;
    background: var(--bg-surface-solid);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.forced-mobile-mode #mobile-topbar.topbar-compact {
    height: 38px !important;
    min-height: 38px !important;
}
body.forced-mobile-mode.mob-app-view .edu-body {
    height: calc(100dvh - 38px) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}
body.forced-mobile-mode.mob-app-view .edu-main {
    height: calc(100dvh - 38px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CRITICAL FIX: Hide desktop navbar on real mobile screens
   The body:not(.forced-mobile-mode) rule was showing navbar on real phones
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .edu-navbar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Also hide the layout toggle button injected into desktop navbar */
    #layout-toggle-btn {
        display: none !important;
    }
}
/* Tablet same */
@media (min-width: 769px) and (max-width: 1024px) {
    .edu-navbar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    #layout-toggle-btn {
        display: none !important;
    }
}