/* TridLearn V12.14 · LearningProgress V1 */
.course-progress-track i{transition:width .28s ease}

/* Lesson directory: empty circle -> pie progress -> completion check. */
.lesson-list-learning button{position:relative}
.lesson-progress-mark{
  --lesson-progress:0%;
  width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;margin-left:5px;vertical-align:middle;
  background:conic-gradient(#7657ef var(--lesson-progress),#e5e1ea 0);
  color:#fff;font-size:11px;font-weight:900;line-height:1;
  flex:0 0 18px;
}
.lesson-progress-mark::before{
  content:"";position:absolute;inset:3px;border-radius:50%;background:#fff;z-index:-1;
}
.lesson-list-learning button.has-progress:not(.completed) .lesson-progress-mark{box-shadow:0 0 0 1px rgba(118,87,239,.08)}
.lesson-list-learning button.completed .lesson-progress-mark{background:#1d9b68;color:#fff;box-shadow:none}
.lesson-list-learning button.completed .lesson-progress-mark::before{display:none}
.lesson-list-learning button.active .lesson-progress-mark{background:conic-gradient(#a99dff var(--lesson-progress),#4d4b53 0)}
.lesson-list-learning button.active .lesson-progress-mark::before{background:#18181c}
.lesson-list-learning button.active.completed .lesson-progress-mark{background:#32b57d;color:#fff}
.lesson-list-learning button.active.completed .lesson-progress-mark::before{display:none}

/* Course detail mini progress. */
.detail-action [data-learning-progress]{display:block;margin-top:5px;color:#817a72}
.detail-action .progress-mini{display:inline-flex;align-items:center;gap:7px}
.detail-action .progress-mini i{display:inline-block;width:72px;height:5px;border-radius:999px;background:#e7e3de;overflow:hidden;position:relative}
.detail-action .progress-mini i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--progress,0%);background:#7657ef;border-radius:999px}

/* 我的 TridLearn · Learning courses */
.my-learning-sections{display:grid;gap:18px;margin-top:20px}
.learning-courses-block{min-width:0}
.learning-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px}
.learning-section-head h2{margin:2px 0 4px}
.learning-section-head p{margin:0;color:#8b847d;font-size:12px;line-height:1.65}
.learning-section-kicker{display:block;color:#7566da;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.learning-course-list{display:grid;gap:12px;margin-top:16px}
.learning-course-card{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px;border:1px solid #e8e3dc;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(32,27,21,.035)}
.learning-course-card.is-completed{background:#fcfffd;border-color:#dcece4}
.learning-course-cover{width:150px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#28284b,#7962ef);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:850;text-align:center;text-decoration:none}
.learning-course-cover img{width:100%;height:100%;object-fit:cover;display:block}
.learning-course-body{min-width:0}
.learning-course-title{display:block;color:#28231f;text-decoration:none;font-size:16px;font-weight:850;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}
.learning-course-title:hover{color:#6553d8}
.learning-course-status{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:850;margin-bottom:9px}
.learning-course-status.pending{background:#f1effd;color:#6757cf}
.learning-course-status.completed{background:#e7f6ef;color:#177a51}
.learning-course-progress-line{display:flex;justify-content:space-between;gap:12px;color:#8b847d;font-size:10px;margin-bottom:5px}
.learning-course-progress-line strong{color:#514a44;font-size:11px}
.learning-course-progress{height:6px;border-radius:999px;background:#ece8e2;overflow:hidden}
.learning-course-progress i{display:block;height:100%;border-radius:999px;background:#7657ef;transition:width .25s ease}
.learning-course-card.is-completed .learning-course-progress i{background:#1d9b68}
.learning-course-last{display:flex;align-items:center;gap:10px;min-width:0;margin-top:9px;color:#706961;font-size:11px}
.learning-course-last span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learning-course-last small{margin-left:auto;color:#9a938b;white-space:nowrap;font-size:10px}
.learning-course-action{white-space:nowrap;min-width:96px;text-align:center}
.learning-course-empty{color:#8b847d;font-size:13px;line-height:1.7;margin:12px 0 2px;padding:14px 0}

@media(max-width:820px){
  .learning-course-card{grid-template-columns:112px minmax(0,1fr);gap:13px}
  .learning-course-cover{width:112px}
  .learning-course-action{grid-column:2;justify-self:start;margin-top:-2px}
}
@media(max-width:560px){
  .learning-course-card{grid-template-columns:1fr;padding:12px}
  .learning-course-cover{width:100%}
  .learning-course-action{grid-column:1;width:100%}
  .learning-course-last{display:block}
  .learning-course-last small{display:block;margin-top:4px}
}