:root {
    --bg-main: #f8fafc;
    --sidebar-bg: #ffffff;
    --primary: #2563eb;
    --primary-light: #eff6ff;
    --text-dark: #0f172a;
    --text-muted: #475569;
    --border: #e2e8f0;
    --font: 'Plus Jakarta Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-main); color: var(--text-dark); font-family: var(--font); overflow-x: hidden; }

.wrapper { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 320px; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 3rem 2rem; display: flex; flex-direction: column; gap: 3rem; position: fixed; height: 100vh; }
.profile { text-align: center; }
.avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-light); margin-bottom: 1.5rem; }
.profile h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.profile .role { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

.side-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.side-nav a { padding: 0.8rem 1.2rem; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: all 0.2s; }
.side-nav a:hover, .side-nav a.active { color: var(--primary); background: var(--primary-light); }

/* Main Content */
.content { flex: 1; padding: 4rem 5% 6rem 360px; display: flex; flex-direction: column; gap: 6rem; }
h1 { font-size: 2.8rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; color: var(--text-dark); }
.bio { font-size: 1.15rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 3rem; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; }
.stat { background: #ffffff; padding: 2rem; border: 1px solid var(--border); border-radius: 12px; }
.stat h3 { font-size: 2rem; color: var(--primary); font-weight: 700; margin-bottom: 0.5rem; }
.stat p { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }

/* Publications */
h2 { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; }
.filters { display: flex; gap: 1rem; margin-bottom: 2.5rem; }
.filter-btn { background: #ffffff; border: 1px solid var(--border); color: var(--text-muted); padding: 0.5rem 1.2rem; border-radius: 30px; cursor: pointer; font-family: inherit; font-size: 0.9rem; transition: all 0.2s; }
.filter-btn.active, .filter-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

.pub-list { display: flex; flex-direction: column; gap: 1.5rem; }
.pub-item { background: #ffffff; border: 1px solid var(--border); padding: 2rem; border-radius: 12px; position: relative; }
.pub-tag { display: inline-block; background: var(--primary-light); color: var(--primary); font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.8rem; border-radius: 4px; margin-bottom: 1rem; text-transform: uppercase; }
.pub-item h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.8rem; }
.authors { color: var(--text-dark); font-size: 0.95rem; margin-bottom: 0.4rem; }
.venue { color: var(--text-muted); font-size: 0.9rem; font-style: italic; margin-bottom: 1.2rem; }
.pub-link { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-bottom: 1px dashed var(--primary); padding-bottom: 2px; }

/* Teaching */
.course-card { background: #ffffff; border: 1px solid var(--border); padding: 2rem; border-radius: 12px; margin-bottom: 1.5rem; }
.course-card h4 { font-size: 1.15rem; color: var(--primary); margin-bottom: 0.5rem; }
.course-card p { color: var(--text-muted); line-height: 1.6; }

@media (max-width: 900px) {
    .wrapper { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; padding: 2rem; border-right: none; border-bottom: 1px solid var(--border); }
    .content { padding: 2rem; gap: 4rem; }
    .stats-grid { grid-template-columns: 1fr; }
}