.jco-lms-wrap, .jco-lms-container { max-width: 1100px; margin: 0 auto; padding: 22px; }
.jco-lms-hero { padding: 18px 18px 8px; }
.jco-lms-sub { margin-top: 6px; opacity: .85; }
.jco-lms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.jco-lms-metrics { display:flex; gap: 12px; flex-wrap: wrap; padding: 0 18px 14px; }
.jco-lms-metric { background:#fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 12px 14px; box-shadow: 0 8px 20px rgba(0,0,0,.04); min-width: 220px; }
.jco-lms-metric-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.jco-lms-metric-value { font-size: 22px; font-weight: 800; margin-top: 4px; }
.jco-lms-metric-sub { font-size: 13px; opacity: .75; margin-top: 2px; }
.jco-lms-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.04); }
.jco-lms-list { list-style: none; padding: 0; margin: 0; }
.jco-lms-list-row { display:flex; justify-content: space-between; gap: 10px; align-items:flex-start; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.jco-lms-list-row:last-child { border-bottom: none; }
.jco-lms-actions { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; justify-content:flex-end; }
.jco-lms-btn { display:inline-block; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); text-decoration:none; background: #f7f7f7; color: #111; font-weight: 600; }
.jco-lms-btn:hover { filter: brightness(.98); }
.jco-lms-btn-primary { background: #111; color: #fff; border-color: #111; }
.jco-lms-muted { opacity: .75; }
.jco-lms-course-header h1 { margin: 0 0 10px; }
.jco-lms-streakline { display:flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.jco-lms-streak-badge { display:inline-flex; align-items:center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.02); font-weight: 700; font-size: 13px; }
.jco-lms-mini-progress { margin-top: 10px; max-width: 420px; }
.jco-lms-progressbar { height: 10px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.jco-lms-progressbar-fill { height: 100%; background: rgba(0,0,0,.78); }
.jco-lms-module { margin: 14px 0; padding: 12px; background: rgba(0,0,0,.02); border-radius: 14px; }
.jco-lms-lesson-row { display:flex; gap: 10px; align-items:center; padding: 8px 0; }
.jco-lms-pill { font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); }
.jco-lms-pill-done { background: rgba(0,0,0,.06); }
.jco-lms-pill-todo { background: rgba(0,0,0,.01); }
.jco-lms-pill-locked { background: rgba(0,0,0,.03); opacity: .8; }
.jco-lms-form textarea { width: 100%; border-radius: 12px; border: 1px solid rgba(0,0,0,.15); padding: 10px; }
.jco-lms-form label { font-weight: 700; display:block; margin-bottom: 6px; }
.jco-lms-form button { margin-top: 10px; }
.jco-lms-video iframe { width: 100%; min-height: 420px; border-radius: 14px; }
.jco-lms-breadcrumbs { margin-bottom: 10px; }
.jco-lms-checkin { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.06); }
.jco-lms-replies { margin-top: 10px; padding: 10px; background: rgba(0,0,0,.02); border-radius: 12px; }
.jco-lms-reply { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.jco-lms-reply:last-child { border-bottom: none; }
.jco-lms-reply-author { font-weight: 700; margin-bottom: 4px; }