.app-navbar { background: #1f3f8c; }
.stat-card .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card .lbl { color: #6c757d; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.table thead th { font-size: .8rem; text-transform: uppercase; color: #555; letter-spacing: .02em; }
.key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .25rem .75rem; }
.key-row { display: flex; align-items: center; gap: .35rem; padding: .15rem .35rem; border-radius: .35rem; }
.key-row:nth-child(even) { background: #f6f8fc; }
.key-row .qn { width: 2.6rem; font-weight: 600; text-align: right; }
.key-row .btn { padding: .1rem .42rem; font-size: .78rem; }
.key-row.flag-multiple { background: #fde2e1 !important; }
.key-row.flag-faint { background: #fff3cd !important; }
.key-row.changed .qn { color: #0d6efd; }
.sheet-img { width: 100%; border: 1px solid #ddd; border-radius: .35rem; background: #fff; }
.sticky-col { position: sticky; top: 1rem; }
.preview-box img { max-width: 100%; border: 1px solid #ddd; background: #fff; }
.status-accepted { color: #198754; } .status-review { color: #b8860b; } .status-failed, .status-rejected { color: #dc3545; }
.q-correct { background: #e8f6ee; } .q-wrong, .q-multiple { background: #fdecec; } .q-bonus { background: #e8f0fe; }
.step { display: flex; gap: .75rem; align-items: flex-start; }
.step .n { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #1f3f8c; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.step.done .n { background: #198754; }
.login-wrap { max-width: 420px; margin: 4vh auto; }
.impersonation-bar { background: #ffda6a; color: #3d2f00; }
.hero { background: linear-gradient(135deg, #1f3f8c 0%, #2f6bd8 100%); color: #fff; border-radius: 1rem; }
.exam-card .price { font-size: 1.4rem; font-weight: 700; color: #1f3f8c; }
.matrix th, .matrix td { text-align: center; vertical-align: middle; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
/* --- online exam (NTA style) --- */
.exam-shell { display: flex; flex-direction: column; min-height: 100vh; }
.exam-top { background: #1f3f8c; color: #fff; position: sticky; top: 0; z-index: 20; }
.exam-timer { font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 700; background: #fff; color: #1f3f8c; border-radius: .4rem; padding: .1rem .6rem; }
.exam-timer.low { background: #dc3545; color: #fff; }
.q-text { font-size: 1.05rem; white-space: pre-wrap; }
.q-img { max-width: 100%; max-height: 320px; border: 1px solid #ddd; border-radius: .35rem; }
.opt { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid #dee2e6; border-radius: .5rem; padding: .7rem .9rem; margin-bottom: .55rem; cursor: pointer; background: #fff; }
.opt:hover { border-color: #86a8e7; }
.opt.selected { border-color: #1f3f8c; background: #eaf0fc; }
.opt .lbl { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid #1f3f8c; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #1f3f8c; }
.opt.selected .lbl { background: #1f3f8c; color: #fff; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .35rem; }
.pal-btn { height: 2.4rem; border: 1px solid #bbb; background: #fff; border-radius: .35rem; font-weight: 600; font-size: .85rem; }
.pal-btn.st-nv { background: #f1f3f5; color: #555; }
.pal-btn.st-na { background: #dc3545; color: #fff; border-color: #dc3545; border-radius: .35rem .35rem 1rem 1rem; }
.pal-btn.st-a { background: #198754; color: #fff; border-color: #198754; border-radius: 1rem 1rem .35rem .35rem; }
.pal-btn.st-m { background: #6f42c1; color: #fff; border-color: #6f42c1; border-radius: 50%; }
.pal-btn.st-am { background: #6f42c1; color: #fff; border-color: #6f42c1; border-radius: 50%; box-shadow: inset 0 -6px 0 #198754; }
.pal-btn.current { outline: 3px solid #f0ad4e; }
.legend span { display: inline-flex; align-items: center; gap: .3rem; margin-right: .6rem; font-size: .78rem; }
.legend i { display: inline-block; width: 1rem; height: 1rem; border-radius: .2rem; }
.save-state { font-size: .8rem; }
@media (max-width: 991.98px) { .palette-panel { position: fixed; inset: auto 0 0 0; max-height: 60vh; overflow: auto; z-index: 30; transform: translateY(100%); transition: transform .2s; box-shadow: 0 -4px 16px rgba(0,0,0,.15); }
  .palette-panel.open { transform: translateY(0); } }
.exam-actions { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #dee2e6; z-index: 10; }

/* ---- dropdown multi-select */
.ms-dd .ms-dd-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 38px; }
.ms-dd .ms-dd-menu { max-height: 280px; overflow-y: auto; }
.ms-dd .ms-dd-item { cursor: pointer; white-space: normal; padding-top: .45rem; padding-bottom: .45rem; }
.ms-dd .ms-dd-item:active { color: inherit; background: var(--bs-tertiary-bg); }
.ms-dd .ms-dd-item input { margin: 0; flex-shrink: 0; width: 1.1em; height: 1.1em; }
@media (max-width: 576px) { .ms-dd .ms-dd-item { padding-top: .65rem; padding-bottom: .65rem; } }

/* ---- numerical keypad (online / instant exam) */
.num-display { font-size: 1.6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em;
  min-height: 3rem; border: 2px solid #adb5bd; border-radius: .5rem; padding: .35rem .75rem; background: #fff; max-width: 16rem; }
.num-display.empty { color: #adb5bd; font-size: 1rem; display: flex; align-items: center; }
.num-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; max-width: 16rem; touch-action: manipulation; }
.num-pad button { font-size: 1.25rem; padding: .55rem 0; user-select: none; }
.num-pad button.wide { grid-column: span 3; font-size: 1rem; }

/* ---- instant exam */
.inst-shell { height: calc(100vh - 56px); height: calc(100dvh - 56px); }
.inst-paper { overflow: auto; background: #6c757d; -webkit-overflow-scrolling: touch; padding: 8px 0; }
@media (min-width: 992px) {
  .inst-pane { height: 100%; }
  #paperPane { display: flex; flex-direction: column; }
  #paperPane .inst-paper { flex: 1 1 auto; min-height: 0; }
}
.inst-paper img { display: block; margin: 0 auto 10px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); max-width: none; }
.inst-answers { overflow-y: auto; height: 100%; background: #fff; }
.ans-row { display: flex; align-items: center; gap: .4rem; padding: .3rem .25rem; border-bottom: 1px solid #f1f3f5; }
.ans-row .qn { width: 2.2rem; text-align: right; font-weight: 600; font-size: .9rem; }
.ans-row.marked .qn { color: #6f42c1; }
.ans-bub { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid #6c757d; background: #fff; font-size: .85rem; font-weight: 600; padding: 0; color: #495057; }
.ans-bub.on { background: #212529; border-color: #212529; color: #fff; }
.ans-num { min-width: 6.5rem; text-align: left; font-family: ui-monospace, monospace; }
@media (max-width: 991.98px) {
  .inst-shell { height: auto; }
  .inst-answers { height: calc(100vh - 112px); height: calc(100dvh - 112px); }
  #paperPane .inst-paper { height: calc(100vh - 150px); height: calc(100dvh - 150px); }
  .inst-pane { display: none; }
  .inst-pane.active { display: block; }
}