/* EduPress Frontend Design System
   Primary: #6C63FF | Font: Inter + Poppins | Mobile-first
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

:root {
  --ep-primary:        #6C63FF;
  --ep-primary-dark:   #5a52d5;
  --ep-primary-light:  #ede9ff;
  --ep-success:        #38a169;
  --ep-success-light:  #e6ffed;
  --ep-danger:         #e53e3e;
  --ep-danger-light:   #fff5f5;
  --ep-warning:        #d69e2e;
  --ep-warning-light:  #fffbeb;
  --ep-blue:           #3182ce;
  --ep-blue-light:     #ebf4ff;
  --ep-grey:           #718096;
  --ep-grey-light:     #f7f8fb;
  --ep-text:           #1a1a2e;
  --ep-text-muted:     #6b7280;
  --ep-border:         #e5e7eb;
  --ep-radius:         12px;
  --ep-radius-sm:      8px;
  --ep-radius-lg:      20px;
  --ep-shadow:         0 4px 24px rgba(108,99,255,.08);
  --ep-shadow-hover:   0 8px 32px rgba(108,99,255,.18);
  --ep-font-body:      'Inter', system-ui, sans-serif;
  --ep-font-display:   'Poppins', system-ui, sans-serif;
  --ep-transition:     0.2s ease;
}

/* ── Reset ── */
.ep-catalog,
.ep-dashboard,
.ep-lesson-wrap,
.ep-exam-wrap {
  box-sizing: border-box;
  font-family: var(--ep-font-body);
  color: var(--ep-text);
  line-height: 1.6;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Typography ── */
.ep-h1, .ep-h2, .ep-h3, .ep-h4 {
  font-family: var(--ep-font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--ep-text);
}
.ep-h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.ep-h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.ep-h3 { font-size: 1.125rem; }
.ep-h4 { font-size: 1rem; }
.ep-body    { font-size: 1rem; }
.ep-body-sm { font-size: .875rem; }
.ep-text-muted { color: var(--ep-text-muted); }
.ep-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ep-text-muted); }

/* ── Buttons ── */
.ep-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .625em 1.25em;
  border-radius: var(--ep-radius-sm);
  font-family: var(--ep-font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--ep-transition), border-color var(--ep-transition), box-shadow var(--ep-transition), transform var(--ep-transition);
  white-space: nowrap;
  user-select: none;
}
.ep-btn:active { transform: scale(.97); }
.ep-btn:disabled, .ep-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.ep-btn--primary  { background: var(--ep-primary); color: #fff; }
.ep-btn--primary:hover { background: var(--ep-primary-dark); box-shadow: var(--ep-shadow-hover); }
.ep-btn--outline  { background: transparent; color: var(--ep-primary); border-color: var(--ep-primary); }
.ep-btn--outline:hover { background: var(--ep-primary-light); }
.ep-btn--ghost    { background: transparent; color: var(--ep-text-muted); border-color: var(--ep-border); }
.ep-btn--ghost:hover { background: var(--ep-grey-light); }
.ep-btn--danger   { background: #dc2626; color: #fff; border-color: #dc2626; }
.ep-btn--danger:hover { background: #b91c1c; box-shadow: 0 4px 12px rgba(220,38,38,.3); }
.ep-btn--sm  { font-size: .8125rem; padding: .45em 1em; }
.ep-btn--lg  { font-size: 1.0625rem; padding: .8em 1.75em; }

/* ── Badges ── */
.ep-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .2em .65em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
}
.ep-badge--purple { background: var(--ep-primary-light); color: var(--ep-primary); }
.ep-badge--green  { background: var(--ep-success-light); color: var(--ep-success); }
.ep-badge--red    { background: var(--ep-danger-light);  color: var(--ep-danger); }
.ep-badge--yellow { background: var(--ep-warning-light); color: var(--ep-warning); }
.ep-badge--blue   { background: var(--ep-blue-light);    color: var(--ep-blue); }
.ep-badge--grey   { background: var(--ep-grey-light);    color: var(--ep-grey); }
.ep-badge--closed {
  background: #f1f3f5;
  color: #6c757d;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
}

/* ── Inputs ── */
.ep-input, .ep-select {
  font-family: var(--ep-font-body);
  font-size: .9375rem;
  padding: .6em .875em;
  border: 1.5px solid var(--ep-border);
  border-radius: var(--ep-radius-sm);
  background: #fff;
  color: var(--ep-text);
  outline: none;
  transition: border-color var(--ep-transition), box-shadow var(--ep-transition);
  width: 100%;
}
.ep-input:focus, .ep-select:focus {
  border-color: var(--ep-primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,.15);
}

/* ── Notices ── */
.ep-notice { padding: .875em 1.25em; border-radius: var(--ep-radius-sm); font-size: .9375rem; }
.ep-notice--error { background: var(--ep-danger-light); color: var(--ep-danger); border-left: 4px solid var(--ep-danger); }
.ep-notice--info  { background: var(--ep-blue-light);   color: var(--ep-blue);   border-left: 4px solid var(--ep-blue); }

/* ── Login prompt ── */
.ep-login-prompt {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 3rem 2rem; text-align: center;
  background: var(--ep-grey-light); border-radius: var(--ep-radius-lg);
}

/* ── Empty state ── */
.ep-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 4rem 2rem; text-align: center; color: var(--ep-text-muted);
}
.ep-empty-state__icon { color: var(--ep-border); }

/* ─────────────────────── CATALOG ─────────────────────── */
.ep-catalog { padding: 1.5rem 0; }
.ep-catalog__header {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; margin-bottom: 2rem;
}
.ep-catalog__filters { display: flex; flex-wrap: wrap; gap: .75rem; }
.ep-search-wrap { display: flex; gap: 0; }
.ep-search-wrap .ep-input { border-right: none; border-radius: var(--ep-radius-sm) 0 0 var(--ep-radius-sm); }
.ep-search-wrap .ep-btn   { border-radius: 0 var(--ep-radius-sm) var(--ep-radius-sm) 0; }
.ep-select { width: auto; min-width: 160px; }

/* Course grid */
.ep-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Course card */
.ep-course-card {
  background: #fff;
  border-radius: var(--ep-radius);
  box-shadow: var(--ep-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ep-transition), transform var(--ep-transition);
}
.ep-course-card:hover { box-shadow: var(--ep-shadow-hover); transform: translateY(-2px); }
/* Closed course card: desaturated, no hover lift */
.ep-course-card--closed { opacity: .82; }
.ep-course-card--closed:hover { box-shadow: var(--ep-shadow); transform: none; }
.ep-course-card__thumb--closed { filter: grayscale(60%); }
.ep-course-card__thumb-link { display: block; aspect-ratio: 16/9; overflow: hidden; }
.ep-course-card__thumb {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.ep-course-card:hover .ep-course-card__thumb { transform: scale(1.04); }
.ep-course-card__thumb--placeholder {
  background: var(--ep-primary-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--ep-primary);
}
.ep-course-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.ep-course-card__title { font-size: 1rem; font-weight: 700; margin: 0; }
.ep-course-card__title a { color: inherit; text-decoration: none; }
.ep-course-card__title a:hover { color: var(--ep-primary); }
.ep-course-card__excerpt { color: var(--ep-text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ep-course-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.ep-meta-item { display: inline-flex; align-items: center; gap: .3em; font-size: .8125rem; color: var(--ep-text-muted); }
.ep-course-card__footer { padding: .875rem 1.25rem; border-top: 1px solid var(--ep-border); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ep-catalog__footer { margin-top: 2rem; text-align: center; }

/* ─────────────────────── DASHBOARD ─────────────────────── */
.ep-dashboard { padding: 1.5rem 0; }
.ep-dashboard__header { margin-bottom: 2rem; }

/* Tabs */
.ep-tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 2px solid var(--ep-border);
  margin-bottom: 2rem;
}
.ep-tab {
  padding: .625rem 1.125rem;
  font-family: var(--ep-font-body); font-size: .9375rem; font-weight: 600;
  color: var(--ep-text-muted);
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color var(--ep-transition), border-color var(--ep-transition);
  border-radius: var(--ep-radius-sm) var(--ep-radius-sm) 0 0;
}
.ep-tab:hover { color: var(--ep-primary); }
.ep-tab--active, .ep-tab[aria-selected="true"] {
  color: var(--ep-primary);
  border-bottom-color: var(--ep-primary);
  background: var(--ep-primary-light);
}
.ep-tab-panel { animation: ep-fade-in .2s ease; }
.ep-tab-panel[hidden] { display: none !important; }

/* Course list in dashboard */
.ep-course-list { display: flex; flex-direction: column; gap: 1rem; }
.ep-course-item {
  background: #fff; border: 1.5px solid var(--ep-border); border-radius: var(--ep-radius);
  padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  transition: border-color var(--ep-transition), box-shadow var(--ep-transition);
}
.ep-course-item:hover { border-color: var(--ep-primary); box-shadow: var(--ep-shadow); }
.ep-course-item__info { flex: 1 1 200px; }
.ep-course-item__info .ep-h3 { margin: 0 0 .375rem; }
.ep-course-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ep-course-item__progress { flex: 0 0 200px; }
.ep-progress-label { margin-bottom: .375rem; }

/* Progress bar */
.ep-progress-bar {
  height: 8px; background: var(--ep-border); border-radius: 999px; overflow: hidden;
}
.ep-progress-bar__fill {
  height: 100%; background: var(--ep-success);
  border-radius: 999px; transition: width .4s ease;
}
.ep-progress-bar__fill--warn   { background: var(--ep-warning); }
.ep-progress-bar__fill--danger { background: var(--ep-danger); }

/* Lesson list */
.ep-lesson-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.ep-lesson-item {
  background: #fff; border: 1.5px solid var(--ep-border); border-radius: var(--ep-radius);
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem;
  transition: border-color var(--ep-transition);
}
.ep-lesson-item:hover { border-color: var(--ep-primary); }
.ep-lesson-item__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; min-width: 52px; height: 52px;
  background: var(--ep-primary-light); border-radius: var(--ep-radius-sm); color: var(--ep-primary);
}
.ep-lesson-item__day   { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.ep-lesson-item__month { font-size: .6875rem; font-weight: 600; text-transform: uppercase; }
.ep-lesson-item__info  { flex: 1; }
.ep-lesson-item__info .ep-h4 { margin: 0 0 .25rem; }
.ep-lesson-item__action { flex-shrink: 0; }

/* Attendance grid */
.ep-attendance-section { margin-bottom: 2rem; }
.ep-attendance-section__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .875rem; }
.ep-attendance-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.ep-attendance-item {
  display: flex; align-items: center; gap: .375rem;
  background: var(--ep-grey-light); border-radius: var(--ep-radius-sm);
  padding: .3rem .6rem; font-size: .8125rem;
}
.ep-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ep-dot--green  { background: var(--ep-success); }
.ep-dot--red    { background: var(--ep-danger); }
.ep-dot--yellow { background: var(--ep-warning); }

/* Exam list in dashboard */
.ep-exam-group { margin-bottom: 2rem; }
.ep-exam-group .ep-h3 { margin-bottom: .875rem; }
.ep-exam-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.ep-exam-item {
  background: #fff; border: 1.5px solid var(--ep-border); border-radius: var(--ep-radius);
  padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}
.ep-exam-item__info { display: flex; flex-direction: column; gap: .25rem; }
.ep-exam-item__status { display: flex; align-items: center; gap: .5rem; }

/* ─────────────────────── LESSON PAGE ─────────────────────── */
.ep-lesson-wrap { max-width: 800px; margin: 0 auto; padding: 1.5rem 0; }
.ep-lesson-wrap .ep-h1 { margin-bottom: 1.25rem; }
.ep-lesson-content { margin-top: 1.5rem; }
.ep-lesson-content img { max-width: 100%; border-radius: var(--ep-radius); }

/* ─────────────────────── EXAM PAGE ─────────────────────── */
.ep-exam-wrap { max-width: 720px; margin: 0 auto; padding: 1.5rem 0; }
.ep-exam-header {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; margin-bottom: 2rem;
}
.ep-exam-timer-wrap { display: flex; align-items: center; gap: .5rem; }
.ep-exam-timer {
  font-family: var(--ep-font-display); font-size: 1.5rem; font-weight: 700; color: var(--ep-primary);
  background: var(--ep-primary-light); padding: .3em .75em; border-radius: var(--ep-radius-sm);
  min-width: 5ch; text-align: center;
}
.ep-exam-timer--warn   { color: var(--ep-warning); background: var(--ep-warning-light); }
.ep-exam-timer--danger { color: var(--ep-danger);  background: var(--ep-danger-light); }

.ep-exam-form { display: flex; flex-direction: column; gap: 1.5rem; }
.ep-question {
  background: #fff; border: 1.5px solid var(--ep-border); border-radius: var(--ep-radius);
  padding: 1.5rem; transition: border-color var(--ep-transition);
}
.ep-question.ep-question--answered { border-color: var(--ep-primary); }
.ep-question__text { margin: 0 0 1rem; }
.ep-question__options { display: flex; flex-direction: column; gap: .625rem; }
.ep-option {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1rem; border: 1.5px solid var(--ep-border); border-radius: var(--ep-radius-sm);
  cursor: pointer; transition: background var(--ep-transition), border-color var(--ep-transition);
}
.ep-option:hover { background: var(--ep-primary-light); border-color: var(--ep-primary); }
.ep-option input[type="radio"] { flex-shrink: 0; margin: .15rem 0 0; accent-color: var(--ep-primary); }
.ep-option:has(input:checked) { background: var(--ep-primary-light); border-color: var(--ep-primary); }
.ep-option__label { flex: 1; }

.ep-exam-footer { margin-top: 2rem; display: flex; justify-content: center; }

.ep-exam-result {
  margin-top: 2rem; padding: 2rem; background: #fff;
  border: 1.5px solid var(--ep-border); border-radius: var(--ep-radius);
  text-align: center;
}
.ep-exam-result--pass { border-color: var(--ep-success); background: var(--ep-success-light); }
.ep-exam-result--fail { border-color: var(--ep-danger);  background: var(--ep-danger-light); }
.ep-exam-result__score { font-size: 3rem; font-weight: 700; font-family: var(--ep-font-display); margin: .5rem 0; }

/* ─────────────────────── TOAST ─────────────────────── */
.ep-toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  z-index: 99999; pointer-events: none;
}
.ep-toast {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1.25rem; border-radius: var(--ep-radius-sm);
  background: var(--ep-text); color: #fff;
  font-size: .9375rem; font-weight: 500; max-width: 340px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  pointer-events: all;
  animation: ep-slide-up .25s ease forwards;
}
.ep-toast--success { background: var(--ep-success); }
.ep-toast--error   { background: var(--ep-danger); }
.ep-toast--info    { background: var(--ep-primary); }
.ep-toast.ep-toast--hide { animation: ep-slide-down .25s ease forwards; }

/* ─────────────────────── ANIMATIONS ─────────────────────── */
@keyframes ep-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ep-slide-up  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ep-slide-down{ from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } }

/* ─────────────────────── RESPONSIVE ─────────────────────── */
@media (max-width: 600px) {
  .ep-catalog__header { flex-direction: column; align-items: flex-start; }
  .ep-catalog__filters { width: 100%; }
  .ep-course-grid { grid-template-columns: 1fr; }
  .ep-exam-header { flex-direction: column; align-items: flex-start; }
  .ep-course-item { flex-direction: column; align-items: flex-start; }
  .ep-course-item__progress { width: 100%; flex: none; }
}

/* ─────────────────── LESSON RATING ─────────────────── */
.ep-rating {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  padding: .45rem .6rem;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── 5-star display (read-only or interactive) ── */
.ep-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
  user-select: none;
}
.ep-stars--interactive {
  cursor: pointer;
}
.ep-stars--interactive .ep-star {
  transition: transform .1s ease;
}
.ep-stars--interactive:hover .ep-star,
.ep-stars--interactive .ep-star:hover {
  transform: scale(1.18);
}

/* ── Star picker (interactive, 5 buttons) ─── */
/* ── Lesson rating picker ─────────────────────────────────────────────── */
.ep-rating-picker { display:flex; flex-direction:column; gap:6px; }
.ep-rating__label { font-size:.8rem; color:#6b7280; font-weight:600; }
.ep-star-row { display:inline-flex; gap:3px; }
.ep-pick-star {
    font-size:2rem; line-height:1; color:#d1d5db;
    cursor:pointer; transition:color .1s, transform .1s;
    user-select:none;
}
.ep-pick-star--on    { color:#f59e0b; }
.ep-pick-star--hover { color:#f59e0b; transform:scale(1.2); }
.ep-submit-vote {
    display:inline-block; margin-top:4px;
    padding:7px 18px; border-radius:8px;
    background:linear-gradient(135deg,#6366f1,#4f46e5);
    color:#fff; font-size:.85rem; font-weight:700;
    border:none; cursor:pointer; transition:.2s;
}
.ep-submit-vote:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 4px 12px rgba(79,70,229,.35); }
.ep-submit-vote:disabled { opacity:.55; cursor:not-allowed; }
.ep-rating__sent  { font-size:.85rem; color:#059669; font-weight:700; margin-bottom:4px; }
.ep-rating__saved { font-size:.8rem;  color:#059669; margin-left:8px; font-weight:600; }
.ep-rating__error { font-size:.8rem;  color:#dc2626; margin-left:8px; }
.ep-rating__my-vote { font-size:.8rem; color:#6b7280; margin-left:6px; }

/* ── Rating stars — small variant (catalog cards) ─────────────────────── */
.ep-stars--sm { display:inline-flex; gap:1px; vertical-align:middle; }
.ep-star--sm  { position:relative; display:inline-block; font-size:.85rem; line-height:1; width:.85rem; }
.ep-star--sm .ep-star__bg   { color:#d1d5db; display:block; }
.ep-star--sm .ep-star__fill { color:#f59e0b; position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; display:block; }

.ep-course-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.ep-course-card__rating .ep-rating__avg {
  font-size: .8rem;
  font-weight: 600;
  color: #b45309;
  line-height: 1;
}
.ep-course-card__rating .ep-rating__count {
  font-size: .75rem;
  color: #6b7280;
  line-height: 1;
}

/* ── Rating stars — medium variant (course single page) ──────────────── */
.ep-stars--md { display:inline-flex; gap:2px; vertical-align:middle; }
.ep-star--md  { position:relative; display:inline-block; font-size:1.4rem; line-height:1; width:1.4rem; }
.ep-star--md .ep-star__bg   { color:#d1d5db; display:block; }
.ep-star--md .ep-star__fill { color:#f59e0b; position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; display:block; }

.ep-course-single__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.ep-rating-score {
  font-size: .9rem;
  font-weight: 700;
  color: #b45309;
}
.ep-rating-count {
  font-size: .82rem;
  color: #6b7280;
}
.ep-rating-empty {
  font-size: .82rem;
  color: #9ca3af;
  font-style: italic;
}