/* Future Tech Exam System — student side */
.ftex-app{--ftex-primary:#1F6FB2;--ftex-dark:#12355B;--ftex-line:#dfe6ee;--ftex-bg:#f6f8fb;--ftex-ok:#1E7B45;--ftex-no:#c0392b;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1a1a1a;position:relative;max-width:1180px;margin:0 auto}
.ftex-app *{box-sizing:border-box}
.ftex-step{display:none}
.ftex-step.ftex-active{display:block;animation:ftexIn .25s ease}
@keyframes ftexIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ftex-panel{background:#fff;border:1px solid var(--ftex-line);border-radius:14px;padding:32px;max-width:640px;margin:0 auto;
	box-shadow:0 6px 26px rgba(18,53,91,.07)}
.ftex-brand{text-align:center;border-bottom:2px solid var(--ftex-primary);padding-bottom:14px;margin-bottom:22px}
.ftex-brand h2{margin:0;font-size:20px;color:var(--ftex-dark);letter-spacing:.3px}
.ftex-brand p{margin:4px 0 0;font-size:13px;color:#667}
.ftex-panel h3{margin:0 0 6px;font-size:18px;color:var(--ftex-dark)}
.ftex-muted{color:#667;font-size:13px;margin:0 0 18px}
.ftex-small{font-size:12px}
.ftex-opt{font-weight:400;color:#889;font-size:12px}

.ftex-field{margin-bottom:14px}
.ftex-field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:#334}
.ftex-field input,.ftex-long{width:100%;padding:11px 13px;border:1px solid var(--ftex-line);border-radius:9px;font-size:15px;
	background:#fbfcfe;transition:.15s;font-family:inherit}
.ftex-field input:focus,.ftex-long:focus{outline:none;border-color:var(--ftex-primary);background:#fff;box-shadow:0 0 0 3px rgba(31,111,178,.12)}
.ftex-field input[readonly]{background:#eef2f6;color:#667}
.ftex-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

.ftex-btn{display:inline-block;background:var(--ftex-primary);color:#fff;border:0;border-radius:9px;padding:13px 26px;
	font-size:15px;font-weight:600;cursor:pointer;transition:.15s;margin-top:6px;font-family:inherit}
.ftex-btn:hover{filter:brightness(1.08)}
.ftex-btn-ghost{background:transparent;color:#667;border:1px solid var(--ftex-line);margin-left:8px}
.ftex-btn-submit{background:var(--ftex-ok);width:100%;margin-top:16px}

.ftex-msg{margin-top:12px;font-size:14px;padding:0}
.ftex-msg-error{color:var(--ftex-no);background:#fdeeec;border:1px solid #f5c6c0;border-radius:8px;padding:10px 12px}
.ftex-msg-ok{color:var(--ftex-ok);background:#eaf6ef;border:1px solid #bde0ca;border-radius:8px;padding:10px 12px}

.ftex-examhead{text-align:center;margin-bottom:18px}
.ftex-examhead h2{margin:0;font-size:19px;color:var(--ftex-dark)}
.ftex-examhead p{margin:3px 0 0;font-size:13px;color:#667}
.ftex-rules{background:var(--ftex-bg);border:1px solid var(--ftex-line);border-radius:10px;padding:14px 18px;margin:16px 0}
.ftex-rules ul{margin:0;padding-left:18px}
.ftex-rules li{font-size:13.5px;margin:4px 0;color:#334}
.ftex-desc{font-size:13px;color:#445;margin:10px 0 0;border-top:1px dashed var(--ftex-line);padding-top:10px}
.ftex-check{display:block;font-size:13.5px;margin:12px 0 4px;color:#334}
.ftex-check input{margin-right:7px}

/* Exam screen */
.ftex-topbar{position:sticky;top:0;z-index:30;background:#fff;border:1px solid var(--ftex-line);border-radius:12px;
	padding:12px 18px;display:flex;align-items:center;gap:18px;margin-bottom:16px;box-shadow:0 3px 14px rgba(18,53,91,.08);flex-wrap:wrap}
.ftex-topinfo{flex:1;min-width:180px;line-height:1.3}
.ftex-topinfo strong{display:block;font-size:15px;color:var(--ftex-dark)}
.ftex-topinfo span{font-size:12.5px;color:#667}
.ftex-timer{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ftex-dark);
	background:var(--ftex-bg);border-radius:9px;padding:6px 16px;border:1px solid var(--ftex-line)}
.ftex-timer.warn{color:#b8860b;background:#fff8e6;border-color:#f0dca8}
.ftex-timer.danger{color:#fff;background:var(--ftex-no);border-color:var(--ftex-no);animation:ftexPulse 1s infinite}
@keyframes ftexPulse{50%{opacity:.72}}
.ftex-progress{min-width:150px;font-size:12.5px;color:#667}
.ftex-bar{height:7px;background:#e7edf4;border-radius:5px;margin-top:5px;overflow:hidden}
.ftex-bar i{display:block;height:100%;width:0;background:var(--ftex-primary);transition:width .25s}

.ftex-examwrap{display:grid;grid-template-columns:1fr 240px;gap:18px;align-items:start}
.ftex-q{background:#fff;border:1px solid var(--ftex-line);border-radius:12px;padding:20px 22px;margin-bottom:14px}
.ftex-q.ftex-flash{box-shadow:0 0 0 3px rgba(31,111,178,.3)}
.ftex-qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.ftex-qno{background:var(--ftex-primary);color:#fff;font-size:12.5px;font-weight:700;border-radius:6px;padding:3px 10px}
.ftex-qmeta{font-size:11.5px;color:#8896a6;text-transform:uppercase;letter-spacing:.4px}
.ftex-qtext{font-size:15.5px;font-weight:600;line-height:1.55;margin-bottom:14px;color:#1a1a1a}
.ftex-opts{display:grid;gap:8px}
.ftex-opt-row{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--ftex-line);border-radius:9px;
	padding:11px 14px;cursor:pointer;transition:.13s;background:#fbfcfe}
.ftex-opt-row:hover{border-color:var(--ftex-primary);background:#f4f9ff}
.ftex-opt-row input{margin-top:3px}
.ftex-opt-row:has(input:checked){border-color:var(--ftex-primary);background:#eaf3fc;box-shadow:inset 0 0 0 1px var(--ftex-primary)}
.ftex-opt-k{font-weight:700;color:var(--ftex-primary);min-width:16px}
.ftex-opt-v{font-size:14.5px;line-height:1.45}
.ftex-long{margin-top:4px;resize:vertical}
.ftex-long-sm{margin-top:10px}
.ftex-file input[type=file]{display:block;margin-bottom:6px;font-size:13.5px}
.ftex-file small{color:#889;font-size:12px}

.ftex-nav{position:sticky;top:96px;background:#fff;border:1px solid var(--ftex-line);border-radius:12px;padding:16px}
.ftex-nav h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#667}
.ftex-navgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ftex-navbtn{border:1px solid var(--ftex-line);background:#fbfcfe;border-radius:7px;padding:7px 0;font-size:12.5px;
	cursor:pointer;font-weight:600;color:#556;font-family:inherit}
.ftex-navbtn:hover{border-color:var(--ftex-primary)}
.ftex-navbtn.done{background:var(--ftex-ok);border-color:var(--ftex-ok);color:#fff}

/* Result */
.ftex-resultcard{max-width:720px}
.ftex-scorewrap{text-align:center;border-radius:12px;padding:22px;margin:6px 0 20px}
.ftex-scorewrap.ok{background:#eaf6ef;border:1px solid #bde0ca}
.ftex-scorewrap.no{background:#fdeeec;border:1px solid #f5c6c0}
.ftex-scorebig{font-size:46px;font-weight:800;line-height:1}
.ftex-scorewrap.ok .ftex-scorebig{color:var(--ftex-ok)}
.ftex-scorewrap.no .ftex-scorebig{color:var(--ftex-no)}
.ftex-scoretag{font-size:15px;font-weight:700;letter-spacing:2px;margin-top:6px;color:#445}
.ftex-restable{width:100%;border-collapse:collapse;margin-bottom:16px}
.ftex-restable td{border:1px solid var(--ftex-line);padding:9px 13px;font-size:14px}
.ftex-restable td:first-child{background:var(--ftex-bg);width:45%;color:#556}
.ftex-pending{background:#fff8e6;border:1px solid #f0dca8;border-radius:9px;padding:11px 14px;font-size:13.5px;color:#7a5c00}
.ftex-revhead{margin-top:22px}
.ftex-review{display:grid;gap:8px}
.ftex-revitem{border:1px solid var(--ftex-line);border-left-width:4px;border-radius:8px;padding:11px 14px;font-size:13.5px}
.ftex-revitem.ok{border-left-color:var(--ftex-ok)}
.ftex-revitem.no{border-left-color:var(--ftex-no)}
.ftex-revitem div{margin-top:5px;color:#556}
.ftex-revitem em{display:block;margin-top:4px;color:#778;font-size:12.5px}
.ftex-note{font-size:12.5px;color:#889;margin-top:18px;border-top:1px dashed var(--ftex-line);padding-top:12px}

/* Loader */
.ftex-loader{display:none;position:fixed;inset:0;background:rgba(255,255,255,.72);z-index:9999;align-items:center;justify-content:center}
.ftex-spin{width:44px;height:44px;border:4px solid #dbe5ef;border-top-color:var(--ftex-primary);border-radius:50%;animation:ftexSpin .8s linear infinite}
@keyframes ftexSpin{to{transform:rotate(360deg)}}

@media (max-width:900px){
	.ftex-examwrap{grid-template-columns:1fr}
	.ftex-nav{position:static;order:-1}
	.ftex-navgrid{grid-template-columns:repeat(8,1fr)}
	.ftex-grid2{grid-template-columns:1fr}
	.ftex-panel{padding:22px}
}
@media print{
	.ftex-btn,.ftex-topbar,.ftex-nav{display:none!important}
	.ftex-panel{border:0;box-shadow:none}
}

/* ---------------- v2 additions ---------------- */
.ftex-studentcard{margin-top:16px;background:#f7f9fc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px}
.ftex-studentcard:empty{display:none}
.ftex-sc-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #e2e8f0;font-size:14px}
.ftex-sc-row:last-child{border-bottom:0}
.ftex-sc-row span{color:#64748b}

.ftex-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ftex-chips span{background:#eef2f7;border-radius:20px;padding:5px 13px;font-size:13px;color:#334155}

.ftex-viol{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:8px;
	padding:6px 12px;font-size:13px;font-weight:600}

.ftex-onebynav{display:flex;align-items:center;justify-content:center;gap:14px;
	padding:18px;background:#fff;border-top:1px solid #e2e8f0;position:sticky;bottom:0;flex-wrap:wrap}
.ftex-onebynav span{font-weight:600;color:#334155}

.ftex-msg-ok{color:#15803d}

/* ---------------- Verification page ---------------- */
.ftex-verifypage .ftex-panel{max-width:900px}
.ftex-vresult{text-align:center;border-radius:14px;padding:26px 20px;margin:22px 0}
.ftex-vresult h3{margin:10px 0 6px;font-size:26px}
.ftex-vresult p{margin:0;font-size:15px}
.ftex-vok{background:#ecfdf5;border:2px solid #86efac;color:#065f46}
.ftex-vfail{background:#fef2f2;border:2px solid #fecaca;color:#991b1b}
.ftex-vicon{width:70px;height:70px;line-height:70px;border-radius:50%;margin:0 auto;
	font-size:38px;font-weight:800;color:#fff}
.ftex-vok .ftex-vicon{background:#16a34a}
.ftex-vfail .ftex-vicon{background:#dc2626}

.ftex-vtable{width:100%;border-collapse:collapse;margin-top:8px}
.ftex-vtable td{padding:11px 14px;border-bottom:1px solid #e9edf3;font-size:15px}
.ftex-vtable td:first-child{color:#64748b;width:210px}

.ftex-vsubhead{margin:28px 0 12px;font-size:19px}
.ftex-vcert{overflow:hidden;border:1px solid #e2e8f0;border-radius:10px;background:#fafbfc;padding:14px}

@media (max-width:760px){
	.ftex-vcert{overflow-x:auto}
	.ftex-vtable td:first-child{width:130px}
}