/* ====================================================================
   PRECISION MODERNIST — shared marketing / app-chrome utilities
   (the TCS iON exam-console + solution-review styles below are LEFT
    UNTOUCHED on purpose: they replicate the real testing engine.)
   ==================================================================== */
:root {
  --pm-primary:#4648d4; --pm-primary-600:#4648d4; --pm-primary-700:#2f2ebe;
  --pm-ink:#151c27; --pm-ink-soft:#464554; --pm-line:#e2e4f0;
}

/* Subtle entrance used by hero / cards */
@keyframes pm-rise { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:none; } }
.pm-rise { animation: pm-rise .5s cubic-bezier(.22,.61,.36,1) both; }

/* Feature / stat cards — flat, generous padding, 1px tonal border, soft glow */
.feature-card { background:#fff; border-radius:1rem; border:1px solid var(--pm-line);
  padding:1.5rem; box-shadow:0 1px 2px rgba(21,28,39,.04), 0 4px 20px rgba(70,72,212,.05);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.feature-card:hover { box-shadow:0 8px 30px rgba(70,72,212,.12); transform:translateY(-3px);
  border-color:#c7c4d7; }

/* Admin tabs — pill segmented control */
.admin-tab { padding: 0.5rem 1.1rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem;
  background: #f0f3ff; color: var(--pm-ink-soft); transition:background .15s, color .15s, box-shadow .15s; }
.admin-tab:hover { background:#e1e0ff; color:var(--pm-primary-700); }
.admin-tab-active { background: var(--pm-primary-600); color: #fff;
  box-shadow:0 6px 16px rgba(70,72,212,.28); }
.admin-tab-active:hover { background:var(--pm-primary-700); color:#fff; }

/* Toast */
.toast-item { background:var(--pm-ink); color:#fff; padding:0.7rem 1.1rem; border-radius:0.75rem;
  margin-top:0.5rem; font-size:0.85rem; font-weight:500;
  box-shadow:0 14px 40px rgba(21,28,39,.28);
  animation: slidein .2s ease; }
@keyframes slidein { from { transform: translateY(8px); opacity:0;} to {transform:none;opacity:1;} }

/* Reusable focus-glow for any input that opts in via .pm-input */
.pm-input { transition:border-color .15s, box-shadow .15s; }
.pm-input:focus { outline:none; border-color:var(--pm-primary-600);
  box-shadow:0 0 0 4px rgba(70,72,212,.12); }

/* ====================================================================
   TCS iON EXAM CONSOLE  —  pixel-faithful to the reference screenshot
   ==================================================================== */
.ion-body { font-family: Verdana, Arial, sans-serif; background:#fff; color:#1a1a1a;
  -webkit-user-select:none; user-select:none; }

/* top dark charcoal header bar */
.ion-header { background:#3c3c3c; color:#fff; height:34px; display:flex; align-items:center;
  justify-content:space-between; padding:0 8px; font-size:12px; }
.ion-header .left { display:flex; align-items:center; gap:14px; }
.ion-header .subject { font-weight:bold; font-size:13px; }
.ion-header .hbtn { display:flex; align-items:center; gap:5px; cursor:pointer; color:#fff; }
.ion-header .hbtn .dot { width:13px; height:13px; border-radius:50%; display:inline-block; }
.ion-header .right { display:flex; align-items:center; gap:10px; }
.ion-barcode { height:24px; width:60px;
  background:repeating-linear-gradient(90deg,#fff 0 1px,#3c3c3c 1px 2px,#fff 2px 4px,#3c3c3c 4px 5px); }
.ion-profile { color:#7ec8ff; }

/* group + section bars */
.ion-groupbar { background:#eef2f5; border-bottom:1px solid #cdd6dc; height:30px;
  display:flex; align-items:flex-end; padding:0 6px; gap:4px; }
.ion-group-tab { background:#0f9d9d; color:#fff; padding:3px 14px; font-size:12px;
  border-radius:4px 4px 0 0; cursor:pointer; }
.ion-group-tab.active { background:#0c7e7e; }

.ion-sectionbar { background:#fff; border-bottom:1px solid #cdd6dc; height:30px;
  display:flex; align-items:flex-end; padding:0 8px; gap:2px; }
.ion-section-tab { padding:4px 22px; font-size:12px; border:1px solid #cdd6dc;
  border-bottom:none; border-radius:5px 5px 0 0; background:#e9eef2; color:#444; cursor:pointer;
  position:relative; }
.ion-section-tab.active { background:#2a7ac0; color:#fff; border-color:#2a7ac0; }
.ion-section-tab.locked { opacity:.55; cursor:not-allowed; }
.ion-section-tab.locked::after { content:"\\1F512"; font-family:inherit; font-weight:900;
  margin-left:6px; font-size:10px; }

/* marks + timer row */
.ion-marksrow { display:flex; justify-content:space-between; align-items:center;
  padding:4px 10px; font-size:12px; background:#fafafa; border-bottom:1px solid #e3e3e3; }
.ion-marks { color:#444; }
.ion-marks b { color:#2a7ac0; }
.ion-timer { display:flex; align-items:center; gap:6px; font-weight:bold; }
.ion-timer .clock { color:#d33; }

/* main two-column layout */
.ion-main { display:flex; height:calc(100vh - 34px - 30px - 30px - 27px); }
/* non-sectional exams hide the group + section bars, so reclaim that height */
.ion-nonsectional .ion-main { height:calc(100vh - 34px - 27px); }
.ion-left { flex:1; display:flex; flex-direction:column; min-width:0; }
.ion-qarea { flex:1; overflow:auto; padding:12px; }
.ion-qbox { border:1px solid #2a7ac0; border-radius:3px; min-height:280px; }
.ion-qnum-bar { background:#2a7ac0; color:#fff; padding:5px 10px; font-size:12px; font-weight:bold;
  display:flex; justify-content:space-between; align-items:center; }
.ion-qcontent { padding:16px 18px; font-size:14px; line-height:1.6; }
.ion-qtext { margin-bottom:18px; }
.ion-qimage { margin:6px 0 18px; }
.ion-qimage img { max-width:100%; max-height:360px; border:1px solid #ddd; border-radius:4px;
  background:#fff; padding:4px; }
.ion-qtext pre { background:#f4f4f4; border:1px solid #ddd; border-radius:4px; padding:10px;
  font-family:Consolas,Monaco,monospace; font-size:13px; overflow:auto; white-space:pre; }
.ion-qtext code { font-family:Consolas,Monaco,monospace; }

/* passage split-pane */
.ion-split { display:flex; gap:14px; }
.ion-passage { flex:1; border-right:1px solid #ddd; padding-right:14px; max-height:380px; overflow:auto;
  font-size:13px; line-height:1.6; }
.ion-passage h4 { font-weight:bold; margin-bottom:8px; color:#2a7ac0; }

/* options */
.ion-option { display:flex; align-items:flex-start; gap:9px; padding:7px 4px; cursor:pointer;
  border-radius:3px; }
.ion-option:hover { background:#f3f8fc; }
.ion-option input { margin-top:3px; }

/* bottom action bar */
.ion-actions { border-top:1px solid #ccc; padding:8px 10px; display:flex; gap:8px; align-items:center;
  background:#f5f5f5; flex-wrap:wrap; }
.ion-btn { font-size:12px; padding:6px 12px; border-radius:4px; cursor:pointer; border:1px solid transparent; }
.ion-btn-light { background:#e9eef2; border-color:#b9c4cc; color:#333; }
.ion-btn-blue { background:#2a7ac0; color:#fff; }
.ion-btn-green { background:#16a34a; color:#fff; }
.ion-btn-orange { background:#ef6c1a; color:#fff; }
.ion-spacer { flex:1; }

/* right palette panel */
.ion-right { width:230px; border-left:1px solid #cdd6dc; background:#fff; display:flex; flex-direction:column; }
.ion-candidate { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px solid #eee; }
.ion-candidate img, .ion-candidate .avatar { width:38px; height:38px; border-radius:3px; background:#dfe6eb;
  display:flex; align-items:center; justify-content:center; color:#7e8a93; }
.ion-legend { padding:8px; font-size:11px; display:grid; grid-template-columns:auto 1fr; gap:5px 8px;
  align-items:center; border-bottom:1px solid #eee; }
.ion-legend .cnt { font-weight:bold; }
.legend-badge { width:26px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:bold; }

/* palette state shapes/colors */
.pal-answered { background:#16a34a; color:#fff;
  clip-path: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); }   /* green up-arrow */
.pal-not_answered { background:#e23b2e; color:#fff;
  clip-path: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); }    /* red up-arrow */
.pal-not_visited { background:#d9dde0; color:#333; border:1px solid #b9c0c6; }  /* grey square */
.pal-marked { background:#7b3fb5; color:#fff; border-radius:50%; }              /* purple circle */
.pal-answered_marked { background:#7b3fb5; color:#fff; border-radius:50%; position:relative; }
.pal-answered_marked::after { content:"\\2713"; font-family:inherit; font-weight:900;
  position:absolute; right:-3px; bottom:-3px; font-size:9px; color:#16a34a; background:#fff;
  border-radius:50%; width:12px; height:12px; display:flex; align-items:center; justify-content:center; }

.ion-section-label { background:#2a7ac0; color:#fff; padding:4px 8px; font-size:12px; font-weight:bold; }
.ion-choose { background:#e9eef2; padding:4px 8px; font-size:12px; color:#444; border-bottom:1px solid #ddd; }
.ion-palette { padding:8px; overflow:auto; flex:1; }
.ion-pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.pal-cell { height:30px; display:flex; align-items:center; justify-content:center; font-size:12px;
  cursor:pointer; position:relative; }
.pal-cell.current { outline:2px solid #1f4e79; outline-offset:1px; }
.pal-cell.current::before { content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:#ef6c1a; }

/* fullscreen warning overlay */
.ion-blind { position:fixed; inset:0; background:rgba(8,12,20,.97); z-index:9999; color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center; }
.ion-blind .box { max-width:480px; padding:30px; }
.ion-blind h2 { font-size:22px; font-weight:bold; color:#ff6b6b; margin-bottom:10px; }

/* ====================================================================
   TCS iON submit confirmation popup
   ==================================================================== */
.ion-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998;
  display:flex; align-items:center; justify-content:center; padding:16px;
  font-family:Verdana, Arial, sans-serif; animation: ionFade .12s ease; }
@keyframes ionFade { from { opacity:0; } to { opacity:1; } }
.ion-modal { background:#fff; width:100%; max-width:680px; border-radius:4px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.4); border:1px solid #1f4e79;
  animation: ionPop .14s ease; }
@keyframes ionPop { from { transform:translateY(10px) scale(.98); } to { transform:none; } }
.ion-modal-head { background:#2a7ac0; color:#fff; font-size:14px; font-weight:bold;
  padding:9px 14px; }
.ion-modal-head-warning { background:#d97706; }
.ion-modal-body { padding:14px 16px; font-size:12.5px; color:#222; }
.ion-modal-lead { margin-bottom:12px; line-height:1.5; }
.ion-modal-tablewrap { overflow:auto; border:1px solid #cdd6dc; border-radius:3px; }
.ion-summary-table { width:100%; border-collapse:collapse; font-size:11.5px; }
.ion-summary-table th { background:#eef2f5; color:#1f4e79; font-weight:bold; padding:6px 6px;
  border:1px solid #cdd6dc; text-align:center; line-height:1.25; }
.ion-summary-table td { padding:6px 6px; border:1px solid #cdd6dc; text-align:center; color:#333; }
.ion-summary-table .ion-sm-idx { width:28px; color:#888; }
.ion-summary-table .ion-sm-name { text-align:left; font-weight:bold; color:#2a7ac0; }
.ion-summary-table tbody tr:nth-child(even) td { background:#fafbfc; }
.ion-modal-note { margin-top:10px; font-size:11px; color:#777; font-style:italic; }
.ion-modal-actions { padding:10px 16px 14px; display:flex; gap:10px; justify-content:center;
  background:#f7f9fb; border-top:1px solid #e3e3e3; }
.ion-modal-actions .ion-btn { font-size:12.5px; padding:7px 18px; font-weight:bold; }

/* ====================================================================
   SOLUTION REVIEW CONSOLE
   ==================================================================== */
.sol-options { margin-top:8px; }
.sol-option { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-bottom:8px;
  border:1px solid #d8dee3; border-radius:5px; background:#fff; font-size:14px; line-height:1.5; }
.sol-opt-letter { width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:#eef2f5;
  color:#444; font-size:12px; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.sol-opt-text { flex:1; }
.sol-option.sol-correct { background:#eafaf0; border-color:#16a34a; }
.sol-option.sol-correct .sol-opt-letter { background:#16a34a; color:#fff; }
.sol-option.sol-wrong { background:#fdeceb; border-color:#e23b2e; }
.sol-option.sol-wrong .sol-opt-letter { background:#e23b2e; color:#fff; }
.sol-tag { font-size:11px; font-weight:bold; padding:2px 8px; border-radius:10px; white-space:nowrap;
  align-self:center; }
.sol-tag-correct { background:#16a34a; color:#fff; }
.sol-tag-wrong { background:#e23b2e; color:#fff; }

/* explanation block */
.sol-explain { margin-top:16px; border:1px solid #cfe3d6; border-radius:6px; overflow:hidden; }
.sol-explain-head { background:#eafaf0; color:#15803d; font-weight:bold; font-size:13px;
  padding:7px 12px; border-bottom:1px solid #cfe3d6; }
.sol-explain-body { padding:12px 14px; font-size:13.5px; line-height:1.65; color:#222; }
.sol-explain-body pre { background:#f4f4f4; border:1px solid #ddd; border-radius:4px; padding:10px;
  font-family:Consolas,Monaco,monospace; font-size:13px; overflow:auto; }

/* per-question status badge in the blue header bar */
.sol-status { font-size:11px; font-weight:bold; padding:2px 9px; border-radius:10px; }
.sol-status-correct { background:#16a34a; color:#fff; }
.sol-status-wrong { background:#e23b2e; color:#fff; }
.sol-status-skip { background:#cbd5e1; color:#334155; }

/* palette + legend colors for review mode (plain squares) */
.sol-pal-correct { background:#16a34a; color:#fff; }
.sol-pal-wrong { background:#e23b2e; color:#fff; }
.sol-pal-skipped { background:#d9dde0; color:#333; border:1px solid #b9c0c6; }
.legend-badge.sol-pal-correct, .legend-badge.sol-pal-wrong, .legend-badge.sol-pal-skipped {
  border-radius:3px; }

/* ====================================================================
   PRE-TEST "READY TO BEGIN" / INSTRUCTIONS SCREEN
   ==================================================================== */
.ion-ready { min-height:100vh; background:#eef2f5; display:flex; align-items:center;
  justify-content:center; padding:24px; font-family:Verdana, Arial, sans-serif; }
.ion-ready-card { background:#fff; width:100%; max-width:640px; border:1px solid #cdd6dc;
  border-radius:8px; box-shadow:0 14px 40px rgba(0,0,0,.12); padding:26px 30px; }
.ion-ready-logo { color:#2a7ac0; font-weight:800; font-size:18px; margin-bottom:14px; }
.ion-ready-card h1 { font-size:20px; font-weight:bold; color:#1f4e79; margin-bottom:14px;
  border-bottom:2px solid #2a7ac0; padding-bottom:8px; }
.ion-ready-list { list-style:disc; padding-left:20px; font-size:13.5px; color:#333; line-height:1.7; }
.ion-ready-list li { margin-bottom:6px; }
.ion-ready-agree { display:flex; align-items:center; gap:9px; margin:18px 0 6px; font-size:13.5px;
  color:#222; cursor:pointer; }
.ion-ready-btn { margin-top:14px; width:100%; background:#16a34a; color:#fff; font-weight:bold;
  font-size:15px; padding:12px; border-radius:6px; cursor:pointer; transition:background .15s; }
.ion-ready-btn:hover:not(:disabled) { background:#138a3e; }
.ion-ready-btn:disabled { background:#b8c2cc; cursor:not-allowed; }
.ion-ready-error { margin-top:12px; font-size:13px; color:#d33; min-height:18px; text-align:center; }
.ion-ready-error a { color:#2a7ac0; }