/* OCS Entrance Exam — PIN sitting */
.ocs-xp{--ink:#12234d;--brand:#1b3a7a;--brand-2:#2a56ab;--accent:#d0332e;--soft:#5a6b8c;--line:#e3e9f4;--surface:#f5f7fb;
 font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);max-width:820px;margin:0 auto;padding:0 4px}
.ocs-xp *,.ocs-xp *::before,.ocs-xp *::after{box-sizing:border-box}
.ocs-xp .is-hidden{display:none !important}

.ocs-xp-card,.ocs-xp-paper{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
 box-shadow:0 10px 30px rgba(18,35,77,.07);margin:18px 0}
.ocs-xp-paper{padding:18px}

.ocs-xp-band{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;padding:22px 24px}
.ocs-xp-band h2{margin:6px 0 4px;font-size:26px;line-height:1.2;color:#fff}
.ocs-xp-band p{margin:0;opacity:.85;font-size:14px}
.ocs-xp-band-eyebrow{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 background:rgba(255,255,255,.16);padding:4px 10px;border-radius:99px}

.ocs-xp-body{padding:22px 24px 26px}
.ocs-xp-lead{margin:0 0 16px;color:var(--soft)}
.ocs-xp-label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.ocs-xp-label span{color:var(--accent)}
.ocs-xp-label .ocs-xp-soft{color:var(--soft);font-weight:400}
.ocs-xp-input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px;
 font-family:inherit;color:var(--ink);background:#fff;outline:none}
.ocs-xp-input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(42,86,171,.15)}
.ocs-xp-pin{letter-spacing:.3em;text-align:center;font-size:20px}

.ocs-xp-btn{display:block;width:100%;margin-top:18px;padding:14px 18px;border:0;border-radius:10px;cursor:pointer;
 background:var(--accent);color:#fff;font:600 15px/1 Poppins,system-ui,sans-serif;letter-spacing:.02em}
.ocs-xp-btn:hover{filter:brightness(1.06)}
.ocs-xp-btn[disabled]{opacity:.55;cursor:not-allowed}
.ocs-xp-btn-lg{padding:16px 18px;font-size:16px}
.ocs-xp-btn-ghost{background:#fff;color:var(--brand);border:1px solid var(--line);width:auto;margin:0;padding:10px 16px}
.ocs-xp-link{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--soft);
 font:500 13px Poppins,system-ui,sans-serif;cursor:pointer;text-decoration:underline}

.ocs-xp-msg{margin-top:14px;padding:0;font-size:14px;line-height:1.5}
.ocs-xp-msg.is-bad{padding:11px 13px;border-radius:9px;background:#fdecec;color:#8a1c1c;border:1px solid #f5c6c6}
.ocs-xp-msg.is-good{padding:11px 13px;border-radius:9px;background:#eef9f1;color:#14532d;border:1px solid #c9ebd3}
.ocs-xp-msg.is-info{padding:11px 13px;border-radius:9px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}

.ocs-xp-rules{margin:0;padding-left:20px;color:var(--soft);line-height:1.75;font-size:14.5px}
.ocs-xp-rules strong{color:var(--ink)}

/* paper */
.ocs-xp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
 padding-bottom:12px;border-bottom:1px solid var(--line)}
.ocs-xp-bar-who{font-weight:600;font-size:14px}
.ocs-xp-clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:20px;color:var(--brand);
 background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 12px}
.ocs-xp-clock.is-low{color:#fff;background:var(--accent);border-color:var(--accent)}

.ocs-xp-progress{height:6px;background:var(--surface);border-radius:99px;margin:12px 0 14px;overflow:hidden}
.ocs-xp-progress>div{height:100%;width:0;background:var(--brand-2);transition:width .25s ease}

.ocs-xp-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ocs-xp-dot{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--soft);
 font:600 12px Poppins,system-ui,sans-serif;cursor:pointer;padding:0}
.ocs-xp-dot.is-done{background:#e8f0ff;border-color:#b9cdf2;color:var(--brand)}
.ocs-xp-dot.is-current{background:var(--brand);border-color:var(--brand);color:#fff}

.ocs-xp-question{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.ocs-xp-subject{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);
 background:var(--surface);border-radius:99px;padding:4px 10px;margin-bottom:10px}
.ocs-xp-stem{font-size:17px;line-height:1.55;margin:0 0 14px;font-weight:500}
.ocs-xp-opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;
 border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font:400 15px/1.45 Poppins,system-ui,sans-serif;color:var(--ink)}
.ocs-xp-opt:hover{border-color:var(--brand-2);background:#f8fbff}
.ocs-xp-opt.is-picked{border-color:var(--brand);background:#eaf1ff;font-weight:500}
.ocs-xp-optkey{flex:0 0 24px;height:24px;border-radius:6px;background:var(--surface);border:1px solid var(--line);
 display:flex;align-items:center;justify-content:center;font:600 12px Poppins,system-ui,sans-serif;color:var(--brand)}
.ocs-xp-opt.is-picked .ocs-xp-optkey{background:var(--brand);border-color:var(--brand);color:#fff}

.ocs-xp-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.ocs-xp-count{font-size:13px;color:var(--soft);font-weight:600}

/* result */
.ocs-xp-score{text-align:center;padding:20px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.ocs-xp-score .ocs-xp-pct{font-size:44px;font-weight:700;line-height:1;color:var(--brand)}
.ocs-xp-score .ocs-xp-raw{margin-top:6px;color:var(--soft);font-size:14px}
.ocs-xp-score .ocs-xp-verdict{margin-top:12px;display:inline-block;padding:6px 14px;border-radius:99px;font-size:13px;font-weight:600}
.ocs-xp-score .ocs-xp-verdict.is-pass{background:#eef9f1;color:#14532d;border:1px solid #c9ebd3}
.ocs-xp-score .ocs-xp-verdict.is-below{background:#fff6e8;color:#8a5a11;border:1px solid #f3dcb6}

.ocs-xp-breakdown{margin:18px 0}
.ocs-xp-breakdown table{width:100%;border-collapse:collapse;font-size:14px}
.ocs-xp-breakdown td{padding:9px 4px;border-bottom:1px solid var(--line)}
.ocs-xp-breakdown td:last-child{text-align:right;font-weight:600}

@media (max-width:560px){
	.ocs-xp-band{padding:18px}
	.ocs-xp-body{padding:18px}
	.ocs-xp-paper{padding:14px}
	.ocs-xp-band h2{font-size:22px}
	.ocs-xp-stem{font-size:16px}
	.ocs-xp-dot{width:28px;height:28px}
}

@media print{
	body *{visibility:hidden}
	.ocs-xp-letter,.ocs-xp-letter *{visibility:visible}
	.ocs-xp-letter{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0}
}