/* =========================================
   INNOCENT NYALALA - Academic Portfolio
   World-Class Modern Design with Dark/Light Mode
   ========================================= */

/* CSS Custom Properties - Light Theme (Default) */
:root {
    --primary: #0066cc;
    --primary-light: #3d8bda;
    --primary-dark: #004c99;
    --primary-gradient: linear-gradient(135deg, #0066cc 0%, #004c99 100%);
    --accent: #00a86b;
    --accent-light: #00d68f;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-hero: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1e3a5f 100%);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-display: 'Poppins', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

[data-theme="dark"] {
    --primary: #60a5fa;
    --primary-light: #93c5fd;
    --primary-dark: #3b82f6;
    --primary-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --accent: #34d399;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-hero: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0f172a;
    --border-color: #334155;
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-sans);line-height:1.7;color:var(--text-primary);background:var(--bg-primary);overflow-x:hidden;transition:background var(--transition-normal),color var(--transition-normal)}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--primary-dark)}
[data-theme="dark"] a:hover{color:var(--primary-light)}
ul,ol{list-style:none}

.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg, #0066cc 0%, #00a86b 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;transition:opacity 0.5s,visibility 0.5s}
.loading.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loading-content{text-align:center;color:white}
.loading-icon{font-size:4rem;margin-bottom:1.5rem;animation:float 2s ease-in-out infinite}
.loading-icon i{color:white;text-shadow:0 4px 20px rgba(0,0,0,0.2)}
.loading-text{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin-bottom:1rem;color:white;text-shadow:0 2px 10px rgba(0,0,0,0.1)}
.loading-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}
.loading-subtext{font-size:0.9rem;color:rgba(255,255,255,0.9);margin-top:1rem;font-weight:400}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.scroll-progress{position:fixed;top:0;left:0;width:0;height:3px;background:var(--primary-gradient);z-index:9999}

.theme-toggle{position:fixed;bottom:100px;right:30px;width:50px;height:50px;background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;box-shadow:var(--shadow-lg);transition:all var(--transition-normal)}
.theme-toggle:hover{transform:scale(1.1)}
.theme-toggle i{font-size:1.25rem;color:var(--text-primary)}
.theme-toggle .fa-sun{display:none}
[data-theme="dark"] .theme-toggle .fa-sun{display:block}
[data-theme="dark"] .theme-toggle .fa-moon{display:none}

.navbar{position:fixed;top:0;left:0;width:100%;padding:var(--space-md) 0;z-index:1000;transition:all var(--transition-normal)}
.navbar.scrolled{background:var(--bg-card);box-shadow:var(--shadow-md);padding:var(--space-sm) 0;backdrop-filter:blur(10px)}
[data-theme="dark"] .navbar.scrolled{background:rgba(30,41,59,0.95)}
.navbar .container{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;padding:0 var(--space-lg)}
.nav-brand{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--text-inverse)}
.navbar.scrolled .nav-brand{color:var(--text-primary)}
.nav-menu{display:flex;gap:var(--space-xs);align-items:center}
.nav-link{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);color:var(--text-inverse);font-size:0.9rem;font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast)}
.navbar.scrolled .nav-link{color:var(--text-secondary)}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,0.15);color:var(--text-inverse)}
.navbar.scrolled .nav-link:hover,.navbar.scrolled .nav-link.active{background:var(--bg-tertiary);color:var(--primary)}
.nav-link i{font-size:0.85rem}
.nav-link span{display:none}
@media(min-width:1200px){.nav-link span{display:inline}}

.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:var(--space-sm)}
.nav-toggle span{width:25px;height:2px;background:var(--text-inverse);transition:all var(--transition-fast)}
.navbar.scrolled .nav-toggle span{background:var(--text-primary)}
@media(max-width:1024px){
.nav-toggle{display:flex}
.nav-menu{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--bg-card);flex-direction:column;padding:var(--space-3xl) var(--space-lg);gap:var(--space-sm);transition:right var(--transition-normal);box-shadow:var(--shadow-xl)}
.nav-menu.active{right:0}
.nav-link{color:var(--text-primary);width:100%;justify-content:flex-start}
.nav-link span{display:inline}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}

.hero{min-height:65vh;background:var(--bg-hero);display:flex;align-items:center;justify-content:center;padding:var(--space-xl) var(--space-lg);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:0.5}
.hero-content{text-align:center;max-width:900px;position:relative;z-index:1}
.hero-image{width:180px;height:180px;margin:0 auto var(--space-xl);border-radius:var(--radius-full);overflow:hidden;border:5px solid rgba(255,255,255,0.3);box-shadow:0 20px 60px rgba(0,0,0,0.3);transition:transform var(--transition-normal)}
.hero-image:hover{transform:scale(1.05)}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:700;color:var(--text-inverse);margin-bottom:var(--space-sm);text-shadow:0 2px 10px rgba(0,0,0,0.2)}
.hero-subtitle{font-size:clamp(1.1rem,2.5vw,1.4rem);color:rgba(255,255,255,0.9);margin-bottom:var(--space-sm);font-weight:500}
.hero-affiliation{margin-bottom:var(--space-lg)}
.hero-affiliation a{color:rgba(255,255,255,0.85);font-size:1.1rem;display:inline-flex;align-items:center;gap:var(--space-sm)}
.hero-affiliation a:hover{color:var(--text-inverse)}

.lab-badge{display:inline-flex;align-items:center;gap:var(--space-sm);background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);margin-bottom:var(--space-xl);border:1px solid rgba(255,255,255,0.2);transition:all var(--transition-normal)}
.lab-badge:hover{background:rgba(255,255,255,0.25);transform:translateY(-2px)}
.lab-badge a{color:var(--text-inverse);font-weight:600;display:flex;align-items:center;gap:var(--space-sm)}
.lab-badge i{color:#34d399}

.stats-row{display:flex;justify-content:center;gap:var(--space-xl);flex-wrap:wrap;margin:var(--space-xl) 0}
.stat-item{text-align:center;padding:var(--space-md) var(--space-lg);background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.15);min-width:120px;transition:transform var(--transition-fast)}
.stat-item:hover{transform:translateY(-5px);background:rgba(255,255,255,0.15)}
.stat-number{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--text-inverse);line-height:1}
.stat-label{font-size:0.85rem;color:rgba(255,255,255,0.8);margin-top:var(--space-xs);text-transform:uppercase;letter-spacing:0.5px}
.hero-bio{color:rgba(255,255,255,0.9);font-size:1.05rem;max-width:700px;margin:0 auto var(--space-xl);line-height:1.8}
.hero-bio strong{color:var(--text-inverse)}

.social-links{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap}
.social-link{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.15);border-radius:var(--radius-full);border:1px solid rgba(255,255,255,0.2);transition:all var(--transition-fast)}
.social-link:hover{background:rgba(255,255,255,0.25);transform:translateY(-3px)}
.social-link img{width:24px;height:24px;filter:brightness(0) invert(1)}
.social-link i{font-size:1.25rem;color:var(--text-inverse)}
.social-links-alt .social-link{background:var(--bg-tertiary);border-color:var(--border-color)}
.social-links-alt .social-link i{color:var(--primary)}
.social-links-alt .social-link:hover{background:var(--primary);border-color:var(--primary)}
.social-links-alt .social-link:hover i{color:var(--text-inverse)}
.hero-buttons{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-xl)}

.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:1rem;font-weight:600;color:var(--text-inverse);background:var(--primary-gradient);border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--text-inverse)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:var(--text-inverse)}
.btn-light{background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3)}
.btn-light:hover{background:rgba(255,255,255,0.3)}

.section{padding:var(--space-3xl) var(--space-lg)}
.section-alt{background:var(--bg-secondary)}
.container{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:var(--space-2xl)}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-sm);position:relative;display:inline-block}
.section-title::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:60px;height:4px;background:var(--primary-gradient);border-radius:var(--radius-full)}
.section-subtitle{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:var(--space-md) auto 0}

.card{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-color);transition:all var(--transition-normal)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}
.card p{color:var(--text-secondary);line-height:1.7}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
@media(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}

.timeline{position:relative;padding-left:var(--space-xl)}
.timeline::before{content:'';position:absolute;left:0;top:0;height:100%;width:2px;background:var(--border-color)}
.timeline-item{position:relative;padding-bottom:var(--space-xl)}
.timeline-item::before{content:'';position:absolute;left:calc(-1*var(--space-xl) - 5px);top:5px;width:12px;height:12px;background:var(--primary);border-radius:var(--radius-full);border:3px solid var(--bg-primary)}
.timeline-date{display:inline-block;font-size:0.85rem;font-weight:600;color:var(--primary);background:var(--bg-tertiary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);margin-bottom:var(--space-xs)}
.timeline-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}
.timeline-subtitle{color:var(--text-muted);font-size:0.95rem}

.tags{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.tag{display:inline-block;padding:var(--space-xs) var(--space-md);font-size:0.85rem;font-weight:500;color:var(--primary);background:var(--bg-tertiary);border-radius:var(--radius-full);border:1px solid var(--border-color);transition:all var(--transition-fast)}
.tag:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}

.year-divider{text-align:center;margin:var(--space-2xl) 0 var(--space-lg);position:relative}
.year-divider h3{display:inline-block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--primary);background:var(--bg-primary);padding:0 var(--space-lg);position:relative;z-index:1}
.year-divider::before{content:'';position:absolute;left:0;top:50%;width:100%;height:2px;background:var(--border-color)}

.publication-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);border:1px solid var(--border-color);border-left:4px solid var(--primary);transition:all var(--transition-normal)}
.publication-card:hover{box-shadow:var(--shadow-md);transform:translateX(5px)}
.publication-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:var(--space-sm)}
.publication-title a{color:var(--text-primary)}
.publication-title a:hover{color:var(--primary)}
.publication-authors{color:var(--text-secondary);font-size:0.95rem;margin-bottom:var(--space-sm)}
.publication-authors .highlight{font-weight:600;color:var(--primary)}
.publication-journal{color:var(--text-muted);font-size:0.9rem;font-style:italic;margin-bottom:var(--space-sm)}
.publication-impact{display:inline-block;font-size:0.8rem;font-weight:600;color:var(--accent);background:rgba(0,168,107,0.1);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);margin-bottom:var(--space-sm)}
[data-theme="dark"] .publication-impact{background:rgba(52,211,153,0.15)}
.publication-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-md)}
.pub-btn{padding:var(--space-xs) var(--space-md);font-size:0.85rem;font-weight:500;color:var(--text-secondary);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-xs)}
.pub-btn:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}
.publication-abstract,.publication-bibtex{display:none;margin-top:var(--space-md);padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md);font-size:0.9rem;line-height:1.7}
.publication-abstract.show,.publication-bibtex.show{display:block}
.publication-bibtex pre{font-family:var(--font-mono);font-size:0.8rem;white-space:pre-wrap;word-break:break-all;color:var(--text-secondary)}

.news-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-color);transition:all var(--transition-normal);display:flex;flex-direction:column;text-decoration:none;height:100%}
.news-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.news-card-link{cursor:pointer}
.news-card-link:hover .news-title{color:var(--primary)}
.news-image{height:220px;overflow:hidden;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center}
.news-image img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform var(--transition-normal)}
.news-card:hover .news-image img{transform:scale(1.05)}
.news-content{padding:var(--space-lg);display:flex;flex-direction:column;flex:1}.news-footer{margin-top:auto}
.news-date{font-size:0.85rem;color:var(--primary);font-weight:600;margin-bottom:var(--space-sm)}
.news-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm);line-height:1.4;transition:color var(--transition-fast);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.news-excerpt{color:var(--text-secondary);font-size:0.9rem;margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.65;min-height:4.95em}
.news-footer{display:flex;justify-content:space-between;align-items:center}
.news-tag{display:inline-block;font-size:0.75rem;font-weight:600;color:var(--text-inverse);background:var(--primary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:0.5px}
.news-link-icon{color:var(--text-muted);font-size:0.9rem;transition:color var(--transition-fast)}
.news-card:hover .news-link-icon{color:var(--primary)}

.news-slider-container{position:relative;padding:0 50px}
.news-slider-wrapper{overflow:hidden;width:100%}
.news-slider{display:flex;transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);gap:var(--space-lg)}
.news-slide{flex:0 0 calc(33.333% - var(--space-lg));min-width:calc(33.333% - var(--space-lg));display:flex;flex-direction:column}
.news-slider-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:10;box-shadow:var(--shadow-md)}
.news-slider-btn:hover{background:var(--primary);color:var(--text-inverse);transform:translateY(-50%) scale(1.1)}
.news-slider-btn:disabled{opacity:0.3;cursor:not-allowed}
.news-slider-btn:disabled:hover{background:var(--bg-card);color:var(--text-primary);transform:translateY(-50%)}
.news-slider-btn-prev{left:0}
.news-slider-btn-next{right:0}
.news-slider-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--space-lg)}
.news-slider-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--border-color);cursor:pointer;transition:all var(--transition-fast)}
.news-slider-dot:hover{background:var(--text-muted)}
.news-slider-dot.active{background:var(--primary);width:24px}

@media (max-width: 1024px){.news-slide{flex:0 0 calc(50% - var(--space-lg));min-width:calc(50% - var(--space-lg))}}
@media (max-width: 768px){.news-slide{flex:0 0 100%;min-width:100%}.news-slider-container{padding:0 40px}.news-slider-btn{width:32px;height:32px;font-size:0.9rem}}

.conference-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--border-color);display:flex;gap:var(--space-lg);align-items:flex-start;transition:all var(--transition-normal)}
.conference-card:hover{box-shadow:var(--shadow-md);transform:translateX(5px)}
.conference-date-box{background:var(--primary-gradient);color:var(--text-inverse);padding:var(--space-md);border-radius:var(--radius-md);text-align:center;min-width:80px}
.conference-date-box .month{font-size:0.85rem;text-transform:uppercase;font-weight:600}
.conference-date-box .year{font-size:1.5rem;font-weight:700;font-family:var(--font-display)}
.conference-info h4{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}
.conference-info p{color:var(--text-secondary);font-size:0.95rem;margin-bottom:var(--space-xs)}
.conference-info .location{color:var(--text-muted);font-size:0.9rem;display:flex;align-items:center;gap:var(--space-xs)}
.conference-type{display:inline-block;font-size:0.75rem;font-weight:600;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);margin-top:var(--space-sm)}
.conference-type.keynote{background:rgba(234,179,8,0.15);color:#ca8a04}
.conference-type.presentation{background:rgba(0,102,204,0.1);color:var(--primary)}
.conference-type.workshop{background:rgba(0,168,107,0.1);color:var(--accent)}

.collaborator-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all var(--transition-normal)}
.collaborator-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.collaborator-avatar{width:50px;height:50px;background:var(--primary-gradient);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--text-inverse);font-size:1.1rem;flex-shrink:0}
.collaborator-info h4{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.collaborator-info p{font-size:0.85rem;color:var(--text-muted)}
.collaborator-info a{color:var(--text-muted)}
.collaborator-info a:hover{color:var(--primary)}

.student-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all var(--transition-normal)}
.student-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.student-avatar{width:45px;height:45px;background:var(--accent);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;color:var(--text-inverse);font-size:0.95rem;flex-shrink:0}
.student-avatar.graduated{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 0 0 3px rgba(251,191,36,0.2)}
.student-avatar.cosupervised{background:var(--primary-gradient)}
.student-card-graduated{border-left:3px solid var(--accent)}
.student-card h4{font-size:0.95rem;font-weight:600;color:var(--text-primary)}

.service-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);text-align:center;border:1px solid var(--border-color);transition:all var(--transition-normal)}
.service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.service-icon{width:60px;height:60px;margin:0 auto var(--space-md);background:var(--primary-gradient);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}
.service-icon i{font-size:1.5rem;color:var(--text-inverse)}
.service-card h4{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md)}
.styled-list{list-style:none}
.styled-list li{position:relative;padding-left:var(--space-lg);margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:0.9rem}
.styled-list li::before{content:'→';position:absolute;left:0;color:var(--primary);font-weight:bold}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:start}
@media(max-width:968px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:var(--space-lg)}
.contact-item{display:flex;align-items:flex-start;gap:var(--space-md)}
.contact-icon{width:50px;height:50px;background:var(--primary-gradient);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon i{font-size:1.25rem;color:var(--text-inverse)}
.contact-text h4{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}
.contact-text p,.contact-text a{color:var(--text-secondary);font-size:0.95rem}
.contact-text a:hover{color:var(--primary)}
.map-container{
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border-color);
    position: relative;
}

.map-container iframe{
    width:100%;
    height:400px;
    display:block;
    pointer-events: none;
}

.map-container.active iframe{
    pointer-events: auto;
}

.map-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.map-overlay.hidden{
    opacity: 0;
    pointer-events: none;
}

.map-overlay-message{
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    pointer-events: none;
}

/* Mobile specific: always require click to interact */
@media (max-width: 768px) {
    .map-container iframe{
        pointer-events: none;
    }

    .map-container.active iframe{
        pointer-events: auto;
    }
}

.footer{background:linear-gradient(135deg,#0a1628 0%,#1e3a5f 100%);padding:var(--space-3xl) var(--space-lg) var(--space-xl);border-top:3px solid var(--primary);color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-2xl);max-width:1100px;margin:0 auto var(--space-2xl)}
.footer-brand h3{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:var(--space-sm)}
.footer-brand p{color:rgba(255,255,255,0.65);font-size:0.87rem;line-height:1.75;max-width:340px;margin-bottom:var(--space-md)}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.8);font-size:0.9rem;transition:all var(--transition-fast);text-decoration:none}
.footer-social a:hover{background:var(--primary);color:#fff;transform:translateY(-3px)}
.footer-col h4{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.45);margin-bottom:var(--space-md)}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:0.87rem;transition:color var(--transition-fast)}
.footer-col ul li a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:var(--space-lg);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm);max-width:1100px;margin:0 auto}
.footer-bottom p{color:rgba(255,255,255,0.45);font-size:0.82rem;margin:0}
.footer-bottom a{color:rgba(255,255,255,0.6);text-decoration:none;font-size:0.82rem}
.footer-bottom a:hover{color:#fff}
.footer-rss{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.5);font-size:0.78rem}
.footer-rss i{color:#f59e0b}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:var(--space-xl)}.footer-bottom{flex-direction:column;text-align:center}}

.back-to-top{
    position:fixed;
    bottom:32px;
    right:32px;
    width:52px;
    height:52px;
    background:var(--primary-gradient);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow:0 4px 20px rgba(0,102,204,0.45);
    z-index:1001;
    border:none;
    outline:none;
}

.back-to-top i{
    color:#fff;
    font-size:1.1rem;
    transition:transform 0.2s ease;
}

.back-to-top:hover{
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 8px 28px rgba(0,102,204,0.6);
}

.back-to-top:hover i{
    transform:translateY(-2px);
}

.back-to-top.visible{
    opacity:1 !important;
    visibility:visible !important;
    animation:fadeInUp 0.4s ease;
}

/* 2-column publication grid */
.pub-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-md);
    margin-bottom:var(--space-sm);
}
@media(max-width:768px){
    .pub-grid{grid-template-columns:1fr;}
}

.back-to-top:hover{
    transform:translateY(-5px) scale(1.05);
    box-shadow:0 8px 30px rgba(0,102,204,0.6);
}

.back-to-top i{
    color:var(--text-inverse);
    font-size:1.4rem;
}

@keyframes pulseButton {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(0,102,204,0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 30px rgba(0,102,204,0.6);
    }
}

.animate-on-scroll{opacity:0;transform:translateY(30px);transition:all 0.6s ease}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}

.lab-highlight{background:linear-gradient(135deg,rgba(0,168,107,0.1) 0%,rgba(0,102,204,0.1) 100%);border:2px solid var(--accent);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;position:relative;overflow:hidden}
[data-theme="dark"] .lab-highlight{background:linear-gradient(135deg,rgba(52,211,153,0.1) 0%,rgba(96,165,250,0.1) 100%)}
.lab-highlight::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--primary))}
.lab-highlight .lab-logo{width:80px;height:80px;margin:0 auto var(--space-lg);background:var(--accent);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center}
.lab-highlight .lab-logo i{font-size:2rem;color:var(--text-inverse)}
.lab-highlight h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-sm)}
.lab-highlight h4{color:var(--accent);font-size:1.1rem;margin-bottom:var(--space-md)}
.lab-highlight p{color:var(--text-secondary);max-width:600px;margin:0 auto var(--space-lg)}

.callout{background:var(--primary-gradient);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;color:var(--text-inverse);position:relative;overflow:hidden}
.callout h3{font-family:var(--font-display);font-size:1.75rem;font-weight:700;margin-bottom:var(--space-md)}
.callout p{font-size:1.1rem;opacity:0.95;max-width:700px;margin:0 auto var(--space-lg)}
.callout .btn{background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,0.3)}
.callout .btn:hover{background:rgba(255,255,255,0.3)}

@media(max-width:768px){
.section{padding:var(--space-2xl) var(--space-md)}
.hero{padding:var(--space-2xl) var(--space-md)}
.hero-image{width:150px;height:150px}
.stats-row{gap:var(--space-md)}
.stat-item{min-width:100px;padding:var(--space-sm) var(--space-md)}
.stat-number{font-size:1.5rem}
.conference-card{flex-direction:column;text-align:center}
.theme-toggle{bottom:90px;right:20px;width:48px;height:48px}
.back-to-top{
    bottom:20px;
    right:20px;
    width:64px;
    height:64px;
    box-shadow:0 8px 30px rgba(0,102,204,0.6);
    z-index:1001;
}
.back-to-top i{
    font-size:1.6rem;
}
.back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
}
}

@media print{.navbar,.theme-toggle,.back-to-top,.scroll-progress,.loading{display:none!important}.hero{min-height:auto;padding:var(--space-lg)}body{background:white;color:black}.card,.publication-card{box-shadow:none;border:1px solid #ddd}}

a:focus,button:focus,.nav-link:focus,.social-link:focus{outline:2px solid var(--primary);outline-offset:2px}

/* =========================================
   TEACHING SECTION — Experience + Courses
   ========================================= */
.teaching-experience{display:flex;flex-direction:column;gap:var(--space-sm);max-width:860px;margin:0 auto}
.exp-card{display:flex;align-items:flex-start;gap:var(--space-md);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);transition:box-shadow var(--transition-fast)}
.exp-card:hover{box-shadow:var(--shadow-md)}
.exp-badge{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 10px;border-radius:var(--radius-full);white-space:nowrap;margin-top:3px;flex-shrink:0}
.exp-badge.current{background:rgba(0,168,107,0.12);color:var(--accent)}
.exp-badge.current i{font-size:0.5rem;margin-right:3px;vertical-align:middle}
.exp-badge.past{background:var(--bg-tertiary);color:var(--text-muted)}
.exp-body h4{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:3px}
.exp-org{font-size:0.88rem;color:var(--text-secondary);margin-bottom:3px}
.exp-org a{color:var(--primary)}
.exp-date{font-size:0.82rem;color:var(--text-muted)}

.courses-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);max-width:860px;margin:0 auto}
@media(max-width:640px){.courses-grid{grid-template-columns:1fr}}
.course-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);transition:box-shadow var(--transition-fast)}
.course-card:hover{box-shadow:var(--shadow-md)}
.course-card.course-active{border-color:var(--primary);border-width:2px}
.course-semester{font-size:0.82rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:var(--space-sm)}
.course-active-badge{background:var(--primary);color:#fff;font-size:0.68rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:0.3px}
.course-row{display:flex;align-items:baseline;gap:var(--space-sm);padding:5px 0;border-bottom:1px solid var(--border-color)}
.course-row:last-child{border-bottom:none}
.course-code{font-size:0.8rem;font-weight:700;color:var(--primary);min-width:48px;flex-shrink:0}
.course-name{font-size:0.9rem;color:var(--text-primary);flex:1}
.course-level{font-size:0.75rem;color:var(--text-muted);white-space:nowrap}

/* =============================================
   PUBLICATIONS — Compact card grid
   ============================================= */
.pub-filter-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:var(--space-lg);flex-wrap:wrap}
.pub-tab{padding:6px 18px;border:1.5px solid var(--border-color);border-radius:var(--radius-full);background:none;font-size:0.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all 0.2s}
.pub-tab.active,.pub-tab:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pub-compact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
@media(max-width:900px){.pub-compact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pub-compact-grid{grid-template-columns:1fr}}
.pub-compact-card{display:flex;align-items:flex-start;gap:10px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-md);text-decoration:none;color:inherit;transition:all 0.2s;position:relative}
.pub-compact-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-2px)}
.pub-compact-year{font-size:0.7rem;font-weight:800;color:var(--text-muted);writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1px;padding-top:2px;flex-shrink:0;opacity:0.5}
.pub-compact-body{flex:1;min-width:0}
.pub-compact-venue{margin-bottom:6px}
.pub-venue-badge{font-size:0.7rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-secondary)}
.pub-compact-body h4{font-size:0.88rem;font-weight:600;color:var(--text-primary);line-height:1.4;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pub-compact-body p{font-size:0.78rem;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pub-compact-arrow{font-size:0.75rem;color:var(--text-muted);flex-shrink:0;margin-top:4px;opacity:0;transition:opacity 0.2s}
.pub-compact-card:hover .pub-compact-arrow{opacity:1;color:var(--primary)}
.pub-hidden{display:none!important}

/* =============================================
   CONFERENCES — Tile grid
   ============================================= */
.conf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
@media(max-width:900px){.conf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.conf-grid{grid-template-columns:1fr}}
.conf-tile{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:all 0.2s}
.conf-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.conf-tile-header{padding:var(--space-md);display:flex;justify-content:space-between;align-items:center}
.conf-tile-type{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.15);padding:2px 8px;border-radius:var(--radius-full)}
.conf-tile-date{font-size:0.78rem;font-weight:700;color:rgba(255,255,255,0.9)}
.conf-tile-body{padding:var(--space-md)}
.conf-tile-body h4{font-size:0.92rem;font-weight:700;color:var(--text-primary);margin-bottom:5px;line-height:1.3}
.conf-tile-body p{font-size:0.82rem;color:var(--text-secondary);line-height:1.4;margin-bottom:8px}
.conf-tile-loc{font-size:0.76rem;color:var(--text-muted)}
.conf-tile-loc i{margin-right:4px}

/* =============================================
   ACTIVE COURSES — Big featured cards
   ============================================= */
.active-courses-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-xl)}
@media(max-width:640px){.active-courses-row{grid-template-columns:1fr}}
.active-course-card{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:var(--radius-xl);padding:var(--space-xl);color:#fff;display:flex;gap:var(--space-lg);align-items:flex-start;box-shadow:0 8px 32px rgba(0,102,204,0.3);transition:transform 0.2s}
.active-course-card:hover{transform:translateY(-4px)}
.active-course-icon{font-size:2rem;opacity:0.9;flex-shrink:0;margin-top:4px}
.active-course-badge{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;background:rgba(255,255,255,0.2);color:#fff;padding:3px 10px;border-radius:var(--radius-full);display:inline-block;margin-bottom:8px}
.active-course-content h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:4px}
.active-course-code{font-size:0.82rem;color:rgba(255,255,255,0.75);margin-bottom:8px}
.active-course-desc{font-size:0.85rem;color:rgba(255,255,255,0.85);line-height:1.5}
.courses-prev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);max-width:860px;margin:0 auto}
@media(max-width:640px){.courses-prev-grid{grid-template-columns:1fr}}

/* =========================================
   IMAGE OPTIMIZATION & PERFORMANCE
   ========================================= */

/* Prevent layout shift during image load */
img {
    height: auto;
    display: block;
}

/* Fade in effect for lazy loaded images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="eager"] {
    opacity: 1;
}

/* Add aspect ratio to prevent CLS */
.news-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero image optimization */
.hero-image {
    position: relative;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Error state styling for failed images */
img.image-error {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

img.image-error::before {
    content: '🖼️';
    font-size: 3rem;
    opacity: 0.3;
}

/* Blur-up effect for progressive loading (optional) */
img[data-src] {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
}

img[data-src].loaded {
    filter: blur(0);
}

/* WebP/AVIF feature detection classes */
.no-webp .webp-only { display: none; }
.no-avif .avif-only { display: none; }

/* Responsive image container */
.responsive-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.responsive-image img,
.responsive-image picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Skeleton loader for images while loading */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 0%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* =========================================
   PWA STYLES
   ========================================= */

/* PWA Update Notification */
.pwa-update-notification {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    transition: bottom 0.3s ease;
    max-width: 400px;
    width: 90%;
}

.pwa-update-notification.show {
    bottom: var(--space-xl);
}

.pwa-update-content p {
    margin-bottom: var(--space-md);
    font-weight: 600;
    color: var(--text-primary);
}

.pwa-update-content button {
    margin-right: var(--space-sm);
}

/* PWA Install Button */
#pwa-install-btn {
    display: none;
    position: fixed;
    bottom: 180px;
    right: 30px;
    z-index: 1000;
}

/* PWA Mode Adjustments */
.pwa-mode .navbar {
    padding-top: env(safe-area-inset-top);
}

.pwa-mode body {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ==========================================
   ACCESSIBILITY - SKIP LINK
   ========================================== */
.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    background: var(--primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    border-radius: var(--radius-md);
    font-weight: 600;
    transform: translateY(-200px);
    opacity: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    pointer-events: none;
}

.skip-link:focus {
    transform: translateY(0);
    opacity: 1;
    outline: 2px solid white;
    outline-offset: 2px;
    pointer-events: auto;
}

/* ==========================================
   LANGUAGE SWITCHER (i18n) — Navbar inline
   ========================================== */
.language-switcher {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: var(--space-sm);
    z-index: 1001;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-inverse);
}
.navbar.scrolled .lang-toggle {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.lang-toggle:hover {
    background: rgba(255,255,255,0.15);
}
.navbar.scrolled .lang-toggle:hover {
    background: var(--bg-tertiary);
}

.lang-toggle i {
    font-size: 0.9rem;
    opacity: 0.85;
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 150px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
}

.lang-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.lang-option:hover {
    background: var(--bg-secondary);
}

.lang-option.active {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

@media (max-width: 768px) {
    .language-switcher {
        margin-right: 4px;
    }

    .lang-toggle {
        padding: 5px 8px;
        font-size: 0.8rem;
    }

    .current-lang {
        display: none;
    }
}

/* ==========================================
   MODERN CSS FEATURES
   ========================================== */

/* Scroll Snap */
.news-slider {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.news-slide {
    scroll-snap-align: start;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Smooth Scrolling */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-primary: #000;
        --bg-primary: #fff;
    }
}

/* Dark Mode Preference — sync ALL variables with [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #60a5fa;
        --primary-light: #93c5fd;
        --primary-dark: #3b82f6;
        --primary-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        --accent: #34d399;
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --bg-card: #1e293b;
        --bg-hero: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --text-inverse: #0f172a;
        --border-color: #334155;
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
    }
}

/* Scroll-driven Animations */
@supports (animation-timeline: view()) {
    .animate-on-scroll {
        animation: fadeInUp linear;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* View Transitions API */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}

/* Container Queries Support */
@container (min-width: 700px) {
    .news-card {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--space-md);
    }
}

/* ==========================================
   QUICK ENHANCEMENTS STYLES
   ========================================== */

/* News Update Timestamps */
.news-update-time {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.8rem;
    opacity: 0.7;
    font-weight: 400;
}

/* Enhanced Scroll to Top with Progress Ring */
.back-to-top {
    position: relative;
    overflow: visible;
}

.scroll-progress-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: var(--radius-full);
    background: conic-gradient(
        var(--primary) calc(var(--scroll-percent, 0) * 1%),
        transparent calc(var(--scroll-percent, 0) * 1%)
    );
    transition: all 0.1s ease;
    pointer-events: none;
}

.back-to-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    z-index: -1;
}

/* Copy to Clipboard for Emails */
.email-with-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.copy-email-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
    opacity: 0.7;
}

.copy-email-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.copy-email-btn.copied {
    background: var(--accent);
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10001;
    transform: translateY(100px);
    opacity: 0;
    transition: all var(--transition-normal);
    border-left: 4px solid var(--primary);
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

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

.toast.toast-success i {
    color: var(--accent);
}

.toast.toast-error {
    border-left-color: #ff4444;
}

.toast.toast-error i {
    color: #ff4444;
}

.toast i {
    font-size: 1.2rem;
}

/* Loading Spinner for External Links */
.link-spinner {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.85rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Toast */
@media (max-width: 768px) {
    .toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .email-with-copy {
        flex-wrap: wrap;
    }
}

/* =============================================
   REVAMP — Research Spotlight, Publications,
   Academic Services, Student Grids
   ============================================= */

/* Research Spotlight — Featured Project Card */
.research-spotlight {
    position: relative;
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(0,168,107,0.05) 0%, rgba(0,102,204,0.05) 100%);
    border: 1px solid rgba(0,168,107,0.25);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
    overflow: hidden;
}
.research-spotlight::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(0,168,107,0.08), transparent 70%);
    pointer-events: none;
}
.spotlight-badge {
    position: absolute;
    top: var(--space-md); right: var(--space-md);
    background: linear-gradient(135deg, var(--accent), #007a4d);
    color: #fff;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    padding: 4px 14px; border-radius: var(--radius-full);
    display: flex; align-items: center; gap: 5px;
}
.spotlight-icon {
    flex-shrink: 0;
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--accent) 0%, #007a4d 100%);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.75rem;
    box-shadow: 0 6px 20px rgba(0,168,107,0.35);
}
.spotlight-content h3 {
    font-size: 1.2rem; font-weight: 700;
    color: var(--text-primary); margin-bottom: var(--space-sm);
}
.spotlight-content p {
    color: var(--text-secondary); font-size: 0.93rem;
    line-height: 1.78; margin-bottom: var(--space-md); max-width: 680px;
}
.spotlight-tags {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-md);
}
.spotlight-tags span {
    background: rgba(0,168,107,0.1); color: var(--accent);
    border: 1px solid rgba(0,168,107,0.2);
    padding: 3px 12px; border-radius: var(--radius-full);
    font-size: 0.78rem; font-weight: 500;
    display: flex; align-items: center; gap: 5px;
}
@media (max-width: 640px) {
    .research-spotlight { flex-direction: column; }
    .spotlight-badge { position: static; align-self: flex-start; margin-bottom: var(--space-sm); }
}

/* Publication Citation Stats boxes */
.pub-citation-stats {
    display: flex; gap: var(--space-md);
    flex-wrap: wrap; margin-bottom: var(--space-xl); justify-content: center;
}
.pub-stat-box {
    flex: 1; min-width: 110px; max-width: 175px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); padding: var(--space-lg) var(--space-md);
    text-align: center; transition: all var(--transition-normal);
}
.pub-stat-box:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pub-stat-box a { text-decoration: none; color: inherit; display: block; }
.pub-stat-num { font-size: 1.8rem; font-weight: 800; color: var(--primary); line-height: 1; }
.pub-stat-lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px; }

/* Highly Cited / High-Impact Section */
.highly-cited-section {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
}
.highly-cited-section > h3 {
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: var(--space-lg);
    display: flex; align-items: center; gap: var(--space-sm);
}
.hc-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.hc-item {
    display: flex; align-items: center; gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card); border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    text-decoration: none; color: inherit;
}
.hc-item:hover {
    border-color: var(--primary); box-shadow: var(--shadow-md);
    transform: translateX(5px); color: inherit;
}
.hc-if-badge {
    flex-shrink: 0;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; border-radius: var(--radius-md);
    padding: 8px 12px; text-align: center; min-width: 70px;
}
.hc-if-badge span { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.hc-if-badge small { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.9; }
.hc-body h4 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; line-height: 1.45; }
.hc-body p { font-size: 0.8rem; color: var(--text-muted); }
@media (max-width: 580px) {
    .hc-item { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}

/* Academic Service Stats */
.service-stats-row {
    display: flex; gap: var(--space-lg); flex-wrap: wrap;
    margin-bottom: var(--space-xl); justify-content: center;
}
.service-stat-card {
    flex: 1; min-width: 130px; max-width: 190px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); padding: var(--space-lg);
    text-align: center; transition: all var(--transition-normal);
}
.service-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-stat-card.highlight { border-color: var(--accent); background: rgba(0,168,107,0.04); }
.service-stat-card.highlight .svc-stat-num { color: var(--accent); }
.svc-stat-num { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.svc-stat-lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px; }
.svc-stat-icon { font-size: 1.5rem; color: var(--primary); margin-bottom: var(--space-sm); }
.service-stat-card.highlight .svc-stat-icon { color: var(--accent); }

/* Student flex grid — centers lone cards automatically */
.student-grid-flex {
    display: flex; flex-wrap: wrap;
    gap: var(--space-lg); justify-content: center;
}
.student-grid-flex .student-card {
    flex: 0 0 calc(33.333% - var(--space-lg));
    min-width: 225px; max-width: 340px;
}
@media (max-width: 900px) {
    .student-grid-flex .student-card { flex: 0 0 calc(50% - var(--space-md)); }
}
@media (max-width: 560px) {
    .student-grid-flex .student-card { flex: 0 0 100%; max-width: 100%; }
}

/* btn-sm helper */
.btn-sm { padding: 6px 16px !important; font-size: 0.84rem !important; }

/* ==========================================
   PRESS / IN THE MEDIA
   ========================================== */
.press-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}
.press-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all var(--transition-normal);
    position: relative;
}
.press-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--primary);
}
.press-logo-wrap {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
}
.press-body { flex: 1; }
.press-outlet {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); margin-bottom: 4px;
}
.press-headline {
    font-size: 0.93rem; font-weight: 600;
    color: var(--text-primary); line-height: 1.45;
    margin-bottom: var(--space-xs);
}
.press-date {
    font-size: 0.78rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 5px;
}
.press-icon {
    font-size: 0.8rem; color: var(--text-muted);
    flex-shrink: 0; margin-top: 2px;
}
@media (max-width: 640px) {
    .press-strip { grid-template-columns: 1fr; }
}