/* Yukty LMS — frontend. Everything scoped under .ylms so it can live inside any theme. */

.ylms{
	--y-bg:#0b0b14;
	--y-panel:#14121f;
	--y-panel-2:#1b1830;
	--y-line:rgba(139,92,246,.18);
	--y-text:#eceaf6;
	--y-dim:#9b95b4;
	--y-violet:#8b5cf6;
	--y-violet-soft:#a78bfa;
	--y-green:#34d399;
	--y-amber:#fbbf24;

	font-family:'Inter',system-ui,sans-serif;
	color:var(--y-text);
	background:var(--y-bg);
	border-radius:20px;
	padding:28px;
	margin:24px 0;
	line-height:1.6;
}
.ylms *,.ylms *::before,.ylms *::after{box-sizing:border-box}
.ylms h1,.ylms h2,.ylms h3{font-family:'Space Grotesk',sans-serif;color:var(--y-text)}
.ylms a{text-decoration:none}

/* ---------- Shared bits ---------- */
.ylms-btn{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--y-violet);color:#fff !important;
	font:600 15px 'Inter',sans-serif;
	border:none;border-radius:999px;padding:12px 26px;cursor:pointer;
	transition:transform .15s ease, background .15s ease;
}
.ylms-btn:hover{background:var(--y-violet-soft);transform:translateY(-1px)}
.ylms-btn:focus-visible{outline:2px solid var(--y-violet-soft);outline-offset:3px}
.ylms-btn.is-done{background:var(--y-green);cursor:default;transform:none}
.ylms-btn-sm{padding:8px 18px;font-size:13px}

.ylms-badge{
	font:600 11px 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;
	padding:5px 12px;border-radius:999px;
}
.ylms-badge-free{background:rgba(52,211,153,.15);color:var(--y-green)}
.ylms-badge-loggedin{background:rgba(251,191,36,.14);color:var(--y-amber)}
.ylms-badge-paid{background:rgba(139,92,246,.18);color:var(--y-violet-soft)}

.ylms-bar{height:6px;background:var(--y-panel-2);border-radius:999px;overflow:hidden;margin-top:10px}
.ylms-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--y-violet),var(--y-violet-soft));border-radius:999px;transition:width .5s ease}

.ylms-empty,.ylms-note{color:var(--y-dim);font-size:15px}
.ylms-note{margin-top:16px}
.ylms-eyebrow{font:600 12px 'Space Grotesk',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--y-violet-soft)}

/* ---------- Course grid ---------- */
.ylms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.ylms-card{
	background:var(--y-panel);border:1px solid var(--y-line);border-radius:16px;overflow:hidden;
	display:flex;flex-direction:column;transition:transform .18s ease, border-color .18s ease;
}
.ylms-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.45)}
.ylms-card-media{
	position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#221d3d,#141126);
	background-size:cover;background-position:center;
	display:flex;align-items:center;justify-content:center;
}
.ylms-card-glyph{font-size:34px;color:rgba(167,139,250,.5)}
.ylms-card-media .ylms-badge{position:absolute;top:12px;left:12px}
.ylms-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.ylms-card-title{font-size:18px;margin:0 0 6px}
.ylms-card-excerpt{color:var(--y-dim);font-size:14px;margin:0 0 14px;flex:1}
.ylms-card-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--y-dim)}
.ylms-card-pct{color:var(--y-violet-soft);font-weight:600}

/* ---------- Course head + progress ring ---------- */
.ylms-course-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.ylms-course-headline{display:flex;align-items:center;gap:14px}

.ylms-ring{position:relative;width:110px;height:110px;flex:0 0 auto}
.ylms-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ylms-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ylms-ring-track{stroke:var(--y-panel-2)}
.ylms-ring-fill{
	stroke:var(--y-violet);
	stroke-dasharray:326.7;
	stroke-dashoffset:calc(326.7 - 326.7 * var(--pct) / 100);
	transition:stroke-dashoffset .8s ease;
}
.ylms-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ylms-ring-label strong{font-family:'Space Grotesk',sans-serif;font-size:22px}
.ylms-ring-label span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--y-dim)}

/* ---------- Certificate banner ---------- */
.ylms-cert-banner{
	display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
	background:linear-gradient(120deg,rgba(139,92,246,.16),rgba(52,211,153,.1));
	border:1px solid rgba(139,92,246,.35);border-radius:14px;padding:18px 22px;margin-bottom:24px;
}
.ylms-cert-banner strong{display:block;font-family:'Space Grotesk',sans-serif}
.ylms-cert-banner span{color:var(--y-dim);font-size:14px}

/* ---------- Lesson list ---------- */
.ylms-lessons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ylms-lesson-row{
	display:flex;align-items:center;gap:16px;
	background:var(--y-panel);border:1px solid var(--y-line);border-radius:14px;padding:14px 18px;
	transition:border-color .15s ease, background .15s ease;
}
.ylms-lesson-row:hover{border-color:rgba(139,92,246,.45);background:var(--y-panel-2)}
.ylms-lesson-row.is-locked{opacity:.65}
.ylms-lesson-state{
	flex:0 0 34px;height:34px;display:flex;align-items:center;justify-content:center;
	background:var(--y-panel-2);border-radius:50%;
	font:600 14px 'Space Grotesk',sans-serif;color:var(--y-dim);
}
.ylms-lesson-row.is-done .ylms-lesson-state{background:rgba(52,211,153,.18);color:var(--y-green)}
.ylms-lesson-link{flex:1;display:flex;justify-content:space-between;align-items:center;gap:14px;min-width:0}
.ylms-lesson-title{color:var(--y-text);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.ylms-lesson-meta{display:flex;gap:12px;font-size:12.5px;color:var(--y-dim);flex:0 0 auto}
.ylms-free-tag{color:var(--y-green);font-weight:600}

/* ---------- Player ---------- */
.ylms-player{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.45);margin-bottom:22px}
.ylms-player iframe{position:absolute;inset:0;width:100%;height:100%}

.ylms-back{display:inline-block;color:var(--y-dim);font-size:14px;margin-bottom:16px}
.ylms-back:hover{color:var(--y-violet-soft)}
.ylms-lesson-content{color:var(--y-text);margin-bottom:8px}
.ylms-lesson-content p{color:var(--y-text)}
.ylms-actions{margin:18px 0 6px}

/* ---------- Locked panel ---------- */
.ylms-locked{
	text-align:center;background:var(--y-panel);border:1px dashed rgba(139,92,246,.4);
	border-radius:18px;padding:52px 28px;
}
.ylms-locked-icon{font-size:34px;margin-bottom:10px}
.ylms-locked h3{margin:0 0 8px;font-size:20px}
.ylms-locked p{color:var(--y-dim);margin:0 0 20px}

/* ---------- Quiz ---------- */
.ylms-quiz{background:var(--y-panel);border:1px solid var(--y-line);border-radius:16px;padding:24px;margin-top:26px}
.ylms-quiz-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.ylms-quiz-title{margin:0;font-size:19px}
.ylms-quiz-passmark{font-size:12.5px;color:var(--y-dim)}
.ylms-q{border:none;margin:0 0 18px;padding:0}
.ylms-q legend{font-weight:600;margin-bottom:10px;color:var(--y-text)}
.ylms-opt{
	display:flex;align-items:center;gap:10px;
	background:var(--y-panel-2);border:1px solid transparent;border-radius:10px;
	padding:10px 14px;margin-bottom:8px;cursor:pointer;color:var(--y-text);
	transition:border-color .12s ease;
}
.ylms-opt:hover{border-color:rgba(139,92,246,.4)}
.ylms-opt input{accent-color:var(--y-violet)}
.ylms-quiz-result{border-radius:12px;padding:14px 18px;margin-bottom:16px;font-weight:600}
.ylms-quiz-result.is-pass{background:rgba(52,211,153,.14);color:var(--y-green)}
.ylms-quiz-result.is-fail{background:rgba(251,113,133,.12);color:#fb7185}

/* ---------- Prev / next ---------- */
.ylms-nav{display:flex;justify-content:space-between;gap:14px;margin-top:26px}
.ylms-nav-link{
	flex:1;max-width:48%;background:var(--y-panel);border:1px solid var(--y-line);border-radius:14px;
	padding:14px 18px;transition:border-color .15s ease;
}
.ylms-nav-link:hover{border-color:rgba(139,92,246,.45)}
.ylms-nav-link span{display:block;font-size:12px;color:var(--y-dim);margin-bottom:4px}
.ylms-nav-link strong{color:var(--y-text);font-size:14.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ylms-nav-link.is-next{text-align:right;margin-left:auto}

/* ---------- My learning ---------- */
.ylms-mylist{display:flex;flex-direction:column;gap:14px}
.ylms-myrow{
	display:flex;justify-content:space-between;align-items:center;gap:20px;
	background:var(--y-panel);border:1px solid var(--y-line);border-radius:14px;padding:16px 20px;
}
.ylms-myrow-info{flex:1;min-width:0}
.ylms-myrow-title{color:var(--y-text);font-weight:600}
.ylms-myrow-title:hover{color:var(--y-violet-soft)}
.ylms-myrow-side{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.ylms-myrow-pct{font:600 15px 'Space Grotesk',sans-serif;color:var(--y-violet-soft)}

/* ---------- Mobile ---------- */
@media (max-width:640px){
	.ylms{padding:18px;border-radius:16px}
	.ylms-lesson-link{flex-direction:column;align-items:flex-start;gap:4px}
	.ylms-nav{flex-direction:column}
	.ylms-nav-link{max-width:100%}
	.ylms-nav-link.is-next{text-align:left}
	.ylms-course-head{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
	.ylms *{transition:none !important}
}