:root {
    --primary-red: #a31c24;
    --text-dark: #333;
    --bg-light: #f4f4f4;
    --border-gray: #ddd;
}

body { font-family: 'Segoe UI', Tahoma, sans-serif; margin: 0; background: #fff; color: var(--text-dark); }

.app-container { display: grid; grid-template-columns: 80px 1fr; min-height: 100vh; }

.sidebar { background: #fff; border-right: 1px solid var(--border-gray); padding-top: 20px; text-align: center; }
.nav-item { display: block; margin-bottom: 25px; text-decoration: none; color: #666; font-size: 11px; }
.nav-item.active { color: var(--primary-red); font-weight: bold; }

.topbar { display: flex; justify-content: space-between; padding: 15px 30px; border-bottom: 1px solid var(--border-gray); align-items: center; }
.search-bar input { width: 400px; padding: 8px 20px; border-radius: 20px; border: 1px solid #ccc; background: #f9f9f9; }

.main-content { padding-bottom: 50px; }
.course-header { padding: 40px 60px; }
.course-header h1 { font-size: 42px; margin: 0; color: #1a2b40; }

.course-content { max-width: 1000px; margin: 0 auto; }
.content-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.course-section { margin-bottom: 2px; }
.section-trigger { background: var(--primary-red); color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; cursor: pointer; }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-item { display: flex; align-items: center; padding: 12px 25px; border-bottom: 1px solid #eee; background: #fff; }
.lesson-item.gray-bg { background: #f9f9f9; }
.lesson-name { flex-grow: 1; margin-left: 15px; }

.check-icon { width: 20px; height: 20px; border: 2px solid #555; border-radius: 50%; position: relative; }
.lesson-item.done .check-icon::after { content: '✓'; position: absolute; left: 3px; top: -2px; color: #555; }
.section-trigger .check-icon.done::after { content: '✓'; position: absolute; left: 3px; top: -2px; color: #fff; }
.section-trigger .check-icon { border-color: #fff; }

.user-tools { display: flex; align-items: center; gap: 15px; }
.user-tools .icon { font-size: 18px; position: relative; }
.user-tools .icon.notify small { position: absolute; top: -8px; right: -8px; background: var(--primary-red); color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 10px; }

.quiz-section { margin-top: 20px; }
.quiz-header { background: #333; color: #fff; padding: 15px 20px; font-weight: bold; }
.quiz-item { display: flex; align-items: center; padding: 12px 25px; border-bottom: 1px solid #eee; background: #fff; }

.duration { font-size: 14px; }
.lesson-time { font-size: 14px; color: #666; }