/* Future Tech LMS — student portal */
.ftlms{
	--p:var(--ftlms-primary,#B0143C);
	--ink:#1f2933; --mut:#64748b; --line:#e3e8ef; --bg:#f6f8fb;
	max-width:1040px; margin:0 auto; padding:0 16px 48px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	color:var(--ink); line-height:1.55;
}
.ftlms *{box-sizing:border-box}
.ftlms a{color:var(--p)}

/* ---------------- header ---------------- */
.ftlms-top{display:flex;justify-content:space-between;align-items:center;gap:16px;
	padding:18px 0 16px;border-bottom:2px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.ftlms-brand strong{display:block;font-size:19px;color:var(--p);letter-spacing:.2px}
.ftlms-brand span{display:block;font-size:12px;color:var(--mut);letter-spacing:2px;text-transform:uppercase}
.ftlms-user{display:flex;align-items:center;gap:14px}
.ftlms-user span{font-size:14px;font-weight:600;text-align:right;line-height:1.3}
.ftlms-user small{display:block;font-weight:400;color:var(--mut);font-size:12px}
.ftlms-logout{font-size:13px;color:var(--mut);text-decoration:none;border:1px solid var(--line);
	padding:6px 13px;border-radius:7px}
.ftlms-logout:hover{border-color:var(--p);color:var(--p)}

/* ---------------- buttons ---------------- */
.ftlms-btn{display:inline-block;background:var(--p);color:#fff!important;border:0;cursor:pointer;
	padding:11px 22px;border-radius:9px;font-size:15px;font-weight:600;text-decoration:none;
	font-family:inherit;transition:.15s}
.ftlms-btn:hover{opacity:.9;color:#fff}
.ftlms-btn:disabled{opacity:.5;cursor:not-allowed}
.ftlms-btn-sm{padding:7px 16px;font-size:13.5px}
.ftlms-btn-lg{padding:14px 32px;font-size:16px}
.ftlms-btn-ghost{background:transparent;color:var(--p)!important;border:1.5px solid var(--line)}
.ftlms-btn-ghost:hover{border-color:var(--p)}

.ftlms-muted{color:var(--mut)}
.ftlms-small{font-size:13px;color:var(--mut)}
.ftlms-back{display:inline-block;margin-bottom:14px;font-size:14px;text-decoration:none;color:var(--mut)}
.ftlms-back:hover{color:var(--p)}

/* ---------------- login ---------------- */
.ftlms-loginwrap{display:flex;justify-content:center;padding:20px 0 60px}
.ftlms-loginbox{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);
	border-radius:14px;padding:30px 26px;box-shadow:0 3px 18px rgba(16,24,40,.05)}
.ftlms-loginbox h2{margin:0 0 6px;font-size:23px}
.ftlms-loginbox p{margin:0 0 20px}
.ftlms-loginbox label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.ftlms-loginbox input[type=text],.ftlms-loginbox input[type=password]{
	width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;
	font-size:15px;font-family:inherit;margin-bottom:14px}
.ftlms-loginbox input:focus{outline:0;border-color:var(--p)}
.ftlms-loginbox .login-remember{margin-bottom:14px;font-size:14px;font-weight:400}
.ftlms-loginbox .login-remember label{display:inline;font-weight:400}
.ftlms-loginbox input[type=submit]{width:100%;background:var(--p);color:#fff;border:0;
	padding:12px;border-radius:9px;font-size:15.5px;font-weight:600;cursor:pointer;font-family:inherit}

/* ---------------- empty ---------------- */
.ftlms-empty{text-align:center;padding:48px 20px;background:#fff;border:1px solid var(--line);border-radius:14px}
.ftlms-empty h3{margin:0 0 10px;font-size:20px}
.ftlms-empty p{color:var(--mut);margin:0 0 10px}

/* ---------------- dashboard ---------------- */
.ftlms-welcome{background:#fff8ec;border-left:4px solid #F0B323;padding:13px 16px;
	border-radius:0 9px 9px 0;margin:0 0 24px;font-size:14.5px}

.ftlms-course{background:#fff;border:1px solid var(--line);border-radius:14px;
	padding:22px;margin-bottom:24px;box-shadow:0 2px 10px rgba(16,24,40,.04)}
.ftlms-chead{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.ftlms-chead h2{margin:0 0 4px;font-size:21px}
.ftlms-chead p{margin:0;font-size:13.5px;color:var(--mut)}

.ftlms-ring{width:76px;height:76px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
	background:conic-gradient(var(--p) calc(var(--pct,0)*1%),#eef2f7 0)}
.ftlms-ring span{width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;
	font-size:15px;font-weight:800;color:var(--p)}

.ftlms-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.ftlms-stats div{background:var(--bg);border-radius:10px;padding:11px 12px;text-align:center}
.ftlms-stats b{display:block;font-size:19px;color:var(--p)}
.ftlms-stats span{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}

/* ---------------- lesson list ---------------- */
.ftlms-lessons{list-style:none;margin:0;padding:0}
.ftlms-lesson{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.ftlms-num{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--bg);
	display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--mut)}
.ftlms-lesson.is-done .ftlms-num{background:#dcfce7;color:#15803d}
.ftlms-lesson.is-locked{opacity:.58}
.ftlms-linfo{flex:1;min-width:0}
.ftlms-linfo strong{display:block;font-size:15px;font-weight:600}
.ftlms-linfo small{color:var(--mut);font-size:12.5px}
.ftlms-lact{flex-shrink:0}
.ftlms-lock{font-size:12.5px;color:var(--mut);background:var(--bg);padding:6px 12px;border-radius:7px;display:inline-block}

.ftlms-pbar{height:5px;background:#eef2f7;border-radius:4px;overflow:hidden;margin-top:7px;max-width:260px}
.ftlms-pbar i{display:block;height:100%;background:var(--p);border-radius:4px;transition:width .4s}
.ftlms-pbar-lg{height:8px;max-width:none;margin:0}

/* ---------------- lesson page ---------------- */
.ftlms-ltitle{font-size:26px;margin:0 0 5px;line-height:1.25}
.ftlms-lmeta{margin:0 0 18px;font-size:13.5px;color:var(--mut)}

.ftlms-video{position:relative;background:#000;border-radius:13px;overflow:hidden;
	aspect-ratio:16/9;margin-bottom:12px}
.ftlms-video iframe,.ftlms-video video,.ftlms-video>div{
	position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ftlms-wm{position:absolute;top:12px;right:14px;z-index:5;pointer-events:none;
	background:rgba(0,0,0,.42);color:rgba(255,255,255,.82);font-size:11.5px;
	padding:4px 11px;border-radius:14px;letter-spacing:.3px}

.ftlms-vstatus{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ftlms-vstatus .ftlms-pbar{flex:1}
.ftlms-vstatus span{font-size:13px;color:var(--mut);white-space:nowrap;font-weight:600}
.ftlms-vstatus span.is-done{color:#15803d}

.ftlms-desc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:20px}
.ftlms-desc p{margin:0 0 10px}
.ftlms-desc p:last-child{margin:0}

.ftlms-files{margin-bottom:22px}
.ftlms-files h3{font-size:17px;margin:0 0 12px}
.ftlms-file{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
	border-radius:11px;padding:12px 15px;margin-bottom:9px;text-decoration:none;color:var(--ink)}
.ftlms-file:hover{border-color:var(--p)}
.ftlms-fext{background:var(--p);color:#fff;font-size:10.5px;font-weight:800;padding:5px 9px;
	border-radius:6px;letter-spacing:.4px;flex-shrink:0}
.ftlms-fname{font-weight:600;font-size:14.5px}
.ftlms-fname small{display:block;font-weight:400;color:var(--mut);font-size:12px}

/* ---------------- quiz box on lesson ---------------- */
.ftlms-quizbox{background:#fff;border:2px solid var(--line);border-radius:13px;padding:20px;margin-bottom:22px}
.ftlms-quizbox h3{margin:0 0 8px;font-size:18px}
.ftlms-quizbox p{margin:0 0 14px;font-size:14px;color:var(--mut)}
.ftlms-qresult{display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:10px;margin-bottom:14px}
.ftlms-qresult.ok{background:#ecfdf5;border:1px solid #86efac}
.ftlms-qresult.no{background:#fef2f2;border:1px solid #fecaca}
.ftlms-qresult span{font-size:24px;font-weight:800}
.ftlms-qresult.ok span,.ftlms-qresult.ok b{color:#15803d}
.ftlms-qresult.no span,.ftlms-qresult.no b{color:#b91c1c}
.ftlms-qresult em{font-size:12.5px;color:var(--mut);font-style:normal;margin-left:auto}

.ftlms-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}

/* ---------------- quiz app ---------------- */
.ftlms-qrules{margin:0 0 22px;padding-left:20px;color:var(--mut);font-size:14.5px}
.ftlms-qrules li{margin-bottom:5px}

.ftlms-qbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
	background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 18px;margin-bottom:18px;
	box-shadow:0 2px 12px rgba(16,24,40,.06)}
.ftlms-qbar span{font-size:14px;font-weight:700;color:var(--mut)}
.ftlms-qtimer{font-variant-numeric:tabular-nums;font-size:19px!important;color:var(--p)!important}
.ftlms-qtimer.is-low{color:#dc2626!important;animation:ftlmsblink 1s infinite}
@keyframes ftlmsblink{50%{opacity:.4}}

.ftlms-q{background:#fff;border:1px solid var(--line);border-radius:12px;padding:19px;margin-bottom:14px}
.ftlms-qhead{display:flex;align-items:center;gap:11px;margin-bottom:11px;font-size:12.5px}
.ftlms-qhead span{background:var(--p);color:#fff;padding:3px 11px;border-radius:14px;font-weight:700}
.ftlms-qhead em{color:var(--mut);font-style:normal}
.ftlms-qhead b{margin-left:auto;color:var(--mut);font-weight:600}
.ftlms-qtext{font-size:16px;font-weight:600;margin-bottom:14px;line-height:1.5}

.ftlms-opts{display:grid;gap:9px}
.ftlms-opt{display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--line);border-radius:10px;
	padding:12px 14px;cursor:pointer;transition:.12s}
.ftlms-opt:hover{border-color:var(--p);background:#fafbfc}
.ftlms-opt input{margin-top:3px;accent-color:var(--p);flex-shrink:0}
.ftlms-opt:has(input:checked){border-color:var(--p);background:#fff5f7}
.ftlms-ok{font-weight:800;color:var(--p);flex-shrink:0}
.ftlms-ov{flex:1}

.ftlms-long{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;
	font-size:15px;font-family:inherit;resize:vertical;line-height:1.55}
.ftlms-long:focus{outline:0;border-color:var(--p)}
.ftlms-fileq input[type=file]{display:block;margin-bottom:8px;font-size:14px}

.ftlms-qscore{display:flex;align-items:center;justify-content:center;gap:18px;padding:28px;
	border-radius:14px;margin-bottom:20px}
.ftlms-qscore.ok{background:#ecfdf5;border:2px solid #86efac}
.ftlms-qscore.no{background:#fef2f2;border:2px solid #fecaca}
.ftlms-qscore span{font-size:46px;font-weight:800}
.ftlms-qscore b{font-size:21px;letter-spacing:2px}
.ftlms-qscore.ok span,.ftlms-qscore.ok b{color:#15803d}
.ftlms-qscore.no span,.ftlms-qscore.no b{color:#b91c1c}

.ftlms-qtable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
	border-radius:11px;overflow:hidden;margin-bottom:16px}
.ftlms-qtable td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.ftlms-qtable tr:last-child td{border-bottom:0}
.ftlms-qtable td:first-child{color:var(--mut);width:55%}

.ftlms-note{background:#fff8ec;border-left:4px solid #F0B323;padding:12px 15px;
	border-radius:0 9px 9px 0;font-size:14px;margin:0 0 16px}
.ftlms-msg{margin-top:12px;font-size:14px}
.ftlms-msg.is-error{color:#b91c1c}

/* ---------------- mobile ---------------- */
@media (max-width:700px){
	.ftlms{padding:0 14px 40px}
	.ftlms-stats{grid-template-columns:repeat(2,1fr)}
	.ftlms-chead{flex-direction:row}
	.ftlms-ring{width:62px;height:62px}
	.ftlms-ring span{width:47px;height:47px;font-size:13px}
	.ftlms-ltitle{font-size:21px}
	.ftlms-lesson{flex-wrap:wrap}
	.ftlms-lact{width:100%;padding-left:46px}
	.ftlms-qscore span{font-size:36px}
	.ftlms-user span{font-size:13px}
}