.ocbt{--o-ink:#14121c;--o-mut:#6b6880;--o-line:#e4e2ee;--o-bg:#fff;--o-soft:#f7f6fb;
 --o-accent:#5b3df5;--o-accent-ink:#fff;--o-ok:#12855b;--o-warn:#b7791f;--o-bad:#c62828;
 --o-radius:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 color:var(--o-ink);line-height:1.5;max-width:1100px;margin:0 auto;padding:16px}
.ocbt *{box-sizing:border-box}
.ocbt-hidden{display:none !important}

.ocbt-card{background:var(--o-bg);border:1px solid var(--o-line);border-radius:var(--o-radius);
 padding:28px;max-width:620px;margin:0 auto;box-shadow:0 1px 3px rgba(20,18,28,.06)}
.ocbt-brand h2{margin:0 0 4px;font-size:22px;letter-spacing:-.01em}
.ocbt-brand p{margin:0 0 22px;color:var(--o-mut);font-size:14px}

.ocbt-label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.ocbt-input{width:100%;padding:12px 14px;border:1px solid var(--o-line);border-radius:9px;
 font-size:16px;background:var(--o-bg);color:var(--o-ink);font-family:inherit}
.ocbt-input:focus{outline:2px solid var(--o-accent);outline-offset:1px;border-color:transparent}
.ocbt-hint{color:var(--o-mut);font-size:13px;margin:8px 0 16px}

.ocbt-btn{appearance:none;border:1px solid transparent;border-radius:9px;padding:12px 18px;
 font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:filter .12s,background .12s}
.ocbt-btn:disabled{opacity:.55;cursor:not-allowed}
.ocbt-btn-primary{background:var(--o-accent);color:var(--o-accent-ink);width:100%}
.ocbt-btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.ocbt-btn-ghost{background:var(--o-soft);color:var(--o-ink);border-color:var(--o-line)}
.ocbt-btn-submit{background:var(--o-ok);color:#fff;width:100%;margin-top:14px}

.ocbt-msg{margin-top:12px;font-size:14px}
.ocbt-msg-error{color:var(--o-bad)}
.ocbt-msg-ok{color:var(--o-ok)}

.ocbt-confirm-name{background:var(--o-soft);border-radius:10px;padding:18px;margin-bottom:16px}
.ocbt-eyebrow{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--o-mut)}
.ocbt-confirm-name strong{display:block;font-size:21px;margin:4px 0 2px}
.ocbt-reg,.ocbt-class{display:block;color:var(--o-mut);font-size:14px}

.ocbt-paper{display:flex;align-items:center;justify-content:space-between;gap:16px;
 border:1px solid var(--o-line);border-radius:10px;padding:16px;margin-bottom:10px}
.ocbt-paper strong{display:block;font-size:16px}
.ocbt-paper span{color:var(--o-mut);font-size:13px}
.ocbt-paper .ocbt-btn{width:auto;flex:0 0 auto}
.ocbt-paper-done{background:var(--o-soft)}

.ocbt-pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;
 font-weight:600;background:var(--o-soft);border:1px solid var(--o-line)}
.ocbt-pill-done,.ocbt-pill-open-now{background:#e7f6ef;color:var(--o-ok);border-color:#bfe6d4}
.ocbt-pill-closed{background:#fdeaea;color:var(--o-bad);border-color:#f5c6c6}

.ocbt-empty{background:var(--o-soft);border-radius:10px;padding:20px;text-align:center}
.ocbt-empty p{color:var(--o-mut);font-size:14px;margin:6px 0 14px}

/* ---------- exam ---------- */
.ocbt-exam{border:1px solid var(--o-line);border-radius:var(--o-radius);overflow:hidden;background:var(--o-bg)}
.ocbt-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
 padding:14px 20px;background:var(--o-ink);color:#fff;flex-wrap:wrap}
.ocbt-bar-left strong{display:block;font-size:16px}
.ocbt-bar-left span{font-size:13px;opacity:.75}
.ocbt-bar-right{text-align:right}
.ocbt-timer{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ocbt-timer-warn{color:#ffd166}
.ocbt-timer-danger{color:#ff6b6b;animation:ocbtpulse 1s infinite}
@keyframes ocbtpulse{50%{opacity:.45}}
.ocbt-progress-text{font-size:12px;opacity:.75}

.ocbt-body{display:grid;grid-template-columns:1fr 260px;gap:0}
.ocbt-question-pane{padding:26px;min-height:420px;display:flex;flex-direction:column}
.ocbt-qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ocbt-qnum{font-size:13px;font-weight:600;color:var(--o-mut)}
.ocbt-qtype{font-size:12px;background:var(--o-soft);border:1px solid var(--o-line);
 padding:3px 10px;border-radius:999px;color:var(--o-mut)}
.ocbt-qtext{font-size:18px;font-weight:600;margin-bottom:20px;line-height:1.45}

.ocbt-options{display:flex;flex-direction:column;gap:10px;flex:1}
.ocbt-option{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--o-line);
 border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .12s,background .12s}
.ocbt-option:hover{border-color:var(--o-accent);background:var(--o-soft)}
.ocbt-option-on{border-color:var(--o-accent);background:#f2effe;box-shadow:inset 0 0 0 1px var(--o-accent)}
.ocbt-option input{margin-top:3px;accent-color:var(--o-accent)}
.ocbt-optletter{font-weight:700;min-width:20px}
.ocbt-opttext{flex:1}
.ocbt-fill{margin-top:4px}

.ocbt-nav{display:flex;gap:10px;margin-top:22px}
.ocbt-nav .ocbt-btn{flex:1}

.ocbt-palette-pane{border-left:1px solid var(--o-line);background:var(--o-soft);padding:20px}
.ocbt-palette-pane h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;
 letter-spacing:.06em;color:var(--o-mut)}
.ocbt-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ocbt-pbtn{border:1px solid var(--o-line);background:var(--o-bg);border-radius:7px;
 padding:0;height:32px;font-size:12px;font-weight:600;cursor:pointer;color:var(--o-mut);font-family:inherit}
.ocbt-pbtn:hover{border-color:var(--o-accent)}
.ocbt-pbtn-answered{background:#e7f6ef;border-color:#bfe6d4;color:var(--o-ok)}
.ocbt-pbtn-current{background:var(--o-accent);border-color:var(--o-accent);color:#fff}
.ocbt-legend{list-style:none;padding:0;margin:14px 0 0;font-size:12px;color:var(--o-mut)}
.ocbt-legend li{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.ocbt-dot{width:11px;height:11px;border-radius:3px;display:inline-block;border:1px solid var(--o-line)}
.ocbt-dot-answered{background:#e7f6ef;border-color:#bfe6d4}
.ocbt-dot-current{background:var(--o-accent);border-color:var(--o-accent)}
.ocbt-dot-empty{background:var(--o-bg)}
.ocbt-savestate{font-size:11px;color:var(--o-mut);text-align:center;margin:8px 0 0}

/* ---------- done ---------- */
.ocbt-done{text-align:center;padding:14px 0}
.ocbt-tick{width:64px;height:64px;border-radius:50%;background:#e7f6ef;color:var(--o-ok);
 display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px}
.ocbt-score{margin:18px 0;display:flex;align-items:baseline;justify-content:center;gap:8px}
.ocbt-score-num{font-size:52px;font-weight:700;line-height:1}
.ocbt-score-of{font-size:22px;color:var(--o-mut)}
.ocbt-score-pct{font-size:16px;background:var(--o-soft);border:1px solid var(--o-line);
 padding:4px 12px;border-radius:999px;margin-left:8px}

/* ---------- tables ---------- */
.ocbt-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.ocbt-table th,.ocbt-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--o-line)}
.ocbt-table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--o-mut)}
.ocbt-resulthead{margin-top:16px}
.ocbt-resulthead strong{display:block;font-size:18px}
.ocbt-resulthead span{color:var(--o-mut);font-size:14px}

@media (max-width:820px){
 .ocbt-body{grid-template-columns:1fr}
 .ocbt-palette-pane{border-left:0;border-top:1px solid var(--o-line)}
 .ocbt-palette{grid-template-columns:repeat(10,1fr)}
 .ocbt-card{padding:20px}
 .ocbt-question-pane{padding:20px;min-height:0}
 .ocbt-nav{flex-wrap:wrap}
}