/* --- Reset & Global Styles --- */
:root {
    --primary-color: #5a67d8;
    --secondary-color: #667eea;
    --accent-color: #48bb78;
    --background-color: #f7fafc;
    --surface-color: #ffffff;
    --text-primary: #2d3748;
    --text-secondary: #718096;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-primary);
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* --- Header & Footer --- */
header { background-color: var(--surface-color); border-bottom: 1px solid var(--border-color); padding: 1rem 0; }
header .container { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; }
.logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }

footer { text-align: center; padding: 2rem 0; margin-top: 3rem; font-size: 0.9rem; color: var(--text-secondary); }

/* --- Typography --- */
h1, h2, h3 { font-weight: 600; line-height: 1.3; }
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }

/* --- Components --- */
.btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: all 0.2s ease-in-out; border: none;
}
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--secondary-color); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background-color: var(--border-color); color: var(--text-primary); }
.btn-secondary:hover { background-color: #cbd5e0; }

.form-card { background: var(--surface-color); padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow-md); margin-top: 2rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; }
.form-group.full-width { grid-column: 1 / -1; }
label { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); }
input, textarea, select {
    padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem;
    font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1); }

.loading-indicator { text-align: center; padding: 2rem; }
.loading-indicator.hidden { display: none; }
.spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Course Page Specific --- */
.course-page header { margin-bottom: 2rem; }
.course-content h2 { color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1.5rem; }

.module { background: var(--surface-color); border-radius: 1rem; padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm); }
.module-header h2 { margin-bottom: 0.5rem; border: none; }
.module-meta { display: flex; gap: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1rem; }

.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 0.5rem; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-caption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }

.explanation-form { margin-top: 1.5rem; }
.explanation-form textarea { width: 100%; min-height: 150px; margin-bottom: 1rem; }

.ai-feedback { margin-top: 1.5rem; padding: 1.5rem; background-color: #edf2f7; border-left: 4px solid var(--accent-color); border-radius: 0.5rem; }
.ai-feedback h5 { font-weight: 600; margin-bottom: 0.5rem; }

/* --- Responsive Design --- */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    .container { padding: 1rem; }
    .form-card, .module { padding: 1.5rem; }
    .module-meta { flex-direction: column; gap: 0.5rem; }
}