:root {
  --bg: #1a1a1b;
  --bg-panel: #282829;
  --bg-elev: #323233;
  --border: #3f3f42;
  --text: #e8e8e8;
  --text-dim: #a3a3a8;
  --accent: #ffa116;
  --green: #2cbb5d;
  --red: #ef4743;
  --blue: #4a90e2;
  --yellow: #f5c518;
  --mono: "SF Mono", "Consolas", "Menlo", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
  height: 52px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo { font-size: 18px; font-weight: 700; cursor: pointer; color: var(--accent); white-space: nowrap; }
.logo-mark { font-family: var(--mono); font-weight: 700; }
.topnav a { color: var(--text-dim); text-decoration: none; font-size: 14px; padding: 8px 2px; }
.topnav a.active, .topnav a:hover { color: var(--text); }
.topbar-right { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.topbar-right b { color: var(--green); }

/* ---------- Problem list ---------- */
#list-view { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
.page-title { font-size: 24px; margin-bottom: 20px; }
.problem-table { width: 100%; border-collapse: collapse; background: var(--bg-panel); border-radius: 10px; overflow: hidden; }
.problem-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.problem-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.problem-table tr:last-child td { border-bottom: none; }
.problem-table tbody tr { cursor: pointer; }
.problem-table tbody tr:hover { background: var(--bg-elev); }
.check { color: var(--green); font-weight: 700; font-size: 15px; }
.diff { font-size: 13px; font-weight: 600; }
.diff.easy { color: var(--green); }
.diff.medium { color: var(--accent); }
.diff.hard { color: var(--red); }
.topic-chip {
  display: inline-block; background: var(--bg-elev); color: var(--text-dim);
  border-radius: 20px; padding: 2px 10px; font-size: 12px; margin: 2px 4px 2px 0;
}

/* ---------- PDF resources ---------- */
#pdf-view { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
.pdf-intro { color: var(--text-dim); font-size: 14px; margin: -10px 0 24px; line-height: 1.6; }
.pdf-group { margin-bottom: 28px; }
.pdf-group-title {
  font-size: 14px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); margin-bottom: 12px;
}
.pdf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.pdf-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; text-decoration: none; color: var(--text);
  transition: border-color .12s ease, transform .12s ease;
}
.pdf-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pdf-card-top { display: flex; align-items: center; justify-content: space-between; }
.pdf-icon { font-size: 22px; }
.pdf-size { font-size: 11px; color: var(--text-dim); background: var(--bg-elev); border-radius: 10px; padding: 2px 8px; }
.pdf-label { font-size: 14px; font-weight: 600; line-height: 1.4; }
.pdf-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

/* ---------- Problem detail layout ---------- */
#problem-view { height: calc(100vh - 52px); display: flex; flex-direction: column; }
.problem-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.back-link { color: var(--text-dim); text-decoration: none; font-size: 13px; white-space: nowrap; }
.back-link:hover { color: var(--text); }
#ph-number { color: var(--text-dim); font-weight: 600; }
#ph-title { font-size: 16px; font-weight: 600; }
#ph-topics { color: var(--text-dim); font-size: 12px; margin-left: auto; }

.problem-layout { flex: 1; display: flex; min-height: 0; }

/* ---------- Description panel ---------- */
.desc-panel {
  width: 44%; min-width: 420px; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--bg-panel);
}
.tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-panel); }
.tabs .tab {
  padding: 11px 18px; font-size: 13px; color: var(--text-dim); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs .tab:hover { color: var(--text); }
.tabs .tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-content { flex: 1; overflow-y: auto; padding: 20px 24px; font-size: 14px; line-height: 1.65; }

.tab-content h3 { margin: 18px 0 8px; font-size: 15px; }
.tab-content p { margin: 8px 0; }
.tab-content ul { margin: 8px 0 8px 22px; }
.tab-content li { margin: 4px 0; }
.tab-content code { background: var(--bg-elev); border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-size: 12.5px; color: #d7a3f5; }
.tab-content pre {
  background: #1c1c1e; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; margin: 10px 0;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: #d4d4d4;
}
.schema-table { border-collapse: collapse; margin: 10px 0; font-size: 13px; font-family: var(--mono); }
.schema-table th, .schema-table td { border: 1px solid var(--border); padding: 5px 12px; text-align: left; }
.schema-table th { background: var(--bg-elev); }

.hint-box {
  background: var(--bg-elev); border-left: 3px solid var(--yellow);
  padding: 14px 16px; border-radius: 0 8px 8px 0;
}

.sub-item {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 13px;
  display: flex; align-items: center; gap: 12px;
}
.sub-verdict { font-weight: 700; }
.sub-verdict.ac { color: var(--green); }
.sub-verdict.wa { color: var(--red); }
.sub-meta { color: var(--text-dim); margin-left: auto; }

/* ---------- Live preview ---------- */
.preview-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg-elev); font-size: 12px; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
#preview-frame { width: 100%; height: calc(100% - 37px); border: none; background: #fafafa; }

/* ---------- Editor panel ---------- */
.editor-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.editor-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.toolbar-spacer { flex: 1; }
.lang-select {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font-size: 13px; outline: none; cursor: pointer;
}
.btn {
  border: none; border-radius: 6px; padding: 7px 18px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: filter .12s;
}
.btn:hover { filter: brightness(1.15); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-run { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); }
.btn-submit { background: var(--green); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-small { padding: 4px 10px; font-size: 12px; }

#editor { flex: 1; min-height: 0; }
#editor .CodeMirror { height: 100%; font-size: 13.5px; font-family: var(--mono); }

/* ---------- Results ---------- */
#results, #quiz-results {
  border-top: 1px solid var(--border); background: var(--bg-panel);
  max-height: 45%; overflow-y: auto; padding: 0;
}
#results:empty, #quiz-results:empty { display: none; }
.results-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px;
}
.verdict { font-size: 15px; font-weight: 700; }
.verdict.ac { color: var(--green); }
.verdict.wa { color: var(--red); }
.verdict.ce, .verdict.rte, .verdict.tle { color: var(--red); }
.verdict.pending { color: var(--yellow); }
.error-pre {
  background: #1c1c1e; color: #ff8f8f; padding: 12px 16px; margin: 0;
  font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-x: auto;
}
.test-case {
  padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.test-case.hidden-case { color: var(--text-dim); }
.test-head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tc-badge { font-size: 11px; border-radius: 4px; padding: 2px 8px; font-weight: 700; }
.tc-badge.pass { background: rgba(44,187,93,.15); color: var(--green); }
.tc-badge.fail { background: rgba(239,71,67,.15); color: var(--red); }
.tc-badge.hidden-tag { background: var(--bg-elev); color: var(--text-dim); }
.tc-io { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.tc-io .io-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 4px; }
.tc-io pre {
  background: #1c1c1e; border-radius: 6px; padding: 8px 10px;
  font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word;
  color: #d4d4d4;
}
.tc-io pre.wrong { color: #ff9f9f; }
.sql-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 16px; }
.sql-tables h4 { font-size: 12px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.sql-tables pre {
  background: #1c1c1e; border-radius: 6px; padding: 10px 12px; font-family: var(--mono);
  font-size: 11.5px; line-height: 1.5; white-space: pre; overflow-x: auto;
}

/* ---------------- MCQ quiz mode ---------------- */
.quiz-panel { overflow: hidden; }
.quiz-scroll {
  flex: 1; overflow-y: auto; padding: 0 0 24px;
}
.quiz-progress { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.quiz-timer {
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; margin-left: 12px;
}
.quiz-timer.low { color: var(--red); border-color: var(--red); animation: mockPulse 1s infinite; }
.quiz-question {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.quiz-q-head { margin-bottom: 6px; }
.quiz-q-num {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim);
}
.quiz-q-text { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
.quiz-q-text code, .quiz-opt-text code {
  font-family: var(--mono); font-size: 12.5px; background: var(--bg-elev);
  padding: 1px 5px; border-radius: 4px;
}
.quiz-q-text pre, .quiz-opt-text pre {
  background: #1c1c1e; color: #d4d4d4; border-radius: 6px; padding: 8px 10px;
  font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word;
  margin: 6px 0;
}
.quiz-opts { display: flex; flex-direction: column; gap: 6px; }
.quiz-option {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px;
  transition: border-color .12s ease, background .12s ease;
}
.quiz-option:hover { border-color: #4a4d52; }
.quiz-option.picked { border-color: var(--green); background: rgba(44,187,93,.07); }
.quiz-option input { margin-top: 3px; accent-color: var(--green); }
.quiz-letter {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--bg-elev); color: var(--text-dim);
}
.quiz-option.picked .quiz-letter { background: var(--green); color: #06130a; }
.quiz-opt-text { font-size: 13px; line-height: 1.5; min-width: 0; }
.quiz-review { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.quiz-review-row { display: flex; flex-direction: column; gap: 2px; }
.quiz-review-text { font-size: 13px; font-family: var(--mono); white-space: pre-wrap; word-break: break-word; }
.quiz-review-text.wrong { color: #ff9f9f; }

/* Section header row inside the problem list (Pseudocode view) */
tr.list-section-row td.list-section {
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

/* ========== AUTH MODAL & USER MENU ========== */

/* Login/Register Modal */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  z-index: 100;
}
.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.modal-content h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--text);
}

/* Form */
.form-group {
  margin-bottom: 14px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  text-transform: capitalize;
}
.form-group input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .12s ease;
}
.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,161,22,.1);
}

.form-error {
  background: rgba(239,71,67,.1);
  border: 1px solid rgba(239,71,67,.3);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: #ff9f9f;
  margin-bottom: 14px;
}

.btn-primary {
  width: 100%;
  padding: 10px 16px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
  margin-bottom: 14px;
}
.btn-primary:hover { background: #ffb84d; }
.btn-primary:active { background: #ff9500; }

.auth-toggle {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}
.auth-toggle a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
  cursor: pointer;
}
.auth-toggle a:hover { text-decoration: underline; }

/* User Menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 12px;
}
#user-name {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}


/* ---------------- Quiz submission review ---------------- */
.btn-review { background: var(--blue); color: #fff; }

.quiz-scorecard { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.score-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.score-tile {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.score-tile b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.score-tile span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.score-tile.ok b { color: var(--green); }
.score-tile.bad b { color: var(--red); }
.score-tile.skip b { color: var(--text-dim); }

#review-view { padding: 24px; max-width: 1280px; margin: 0 auto; }
.review-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.review-head h2 { font-size: 20px; font-weight: 700; }
.review-score { display: flex; align-items: baseline; gap: 10px; margin-left: auto; }
.review-score-line { font-size: 13px; color: var(--text-dim); }

.review-body { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.review-side {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; position: sticky; top: 68px; max-height: calc(100vh - 92px); overflow-y: auto;
}
.review-side-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); font-weight: 700; margin-bottom: 10px;
}
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 6px; }
.rnum {
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev);
  color: var(--text-dim); font-size: 12px; font-weight: 700; padding: 6px 0;
  cursor: pointer; text-align: center; transition: filter .12s, transform .12s;
}
.rnum:hover { filter: brightness(1.3); transform: translateY(-1px); }
.rnum.ok { background: rgba(44,187,93,.16); border-color: rgba(44,187,93,.5); color: var(--green); }
.rnum.bad { background: rgba(239,71,67,.16); border-color: rgba(239,71,67,.5); color: var(--red); }
.rnum.skip { background: var(--bg-elev); border-color: var(--border); color: var(--text-dim); }
.review-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
  font-size: 11px; color: var(--text-dim);
}
.review-legend .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px;
}
.review-legend .dot.ok { background: var(--green); }
.review-legend .dot.bad { background: var(--red); }
.review-legend .dot.skip { background: var(--border); }
.review-focus { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.focus-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
  padding: 5px 0; color: var(--text);
}
.focus-row b { color: var(--red); white-space: nowrap; font-size: 12px; }

.review-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.chip {
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #1a1a1b; }

.rq {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; overflow: hidden;
}
.rq.filtered { display: none; }
.rq[data-state="bad"] { border-left: 3px solid var(--red); }
.rq[data-state="ok"] { border-left: 3px solid var(--green); }
.rq[data-state="skip"] { border-left: 3px solid var(--border); }
.rq.flash { box-shadow: 0 0 0 2px var(--accent); }
.rq-head {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); padding: 12px 14px; cursor: pointer;
  font: inherit;
}
.rq-head:hover { background: var(--bg-elev); }
.rq-head .rnum { flex: 0 0 30px; cursor: pointer; pointer-events: none; }
.rq-q { flex: 1; font-size: 13.5px; line-height: 1.5; min-width: 0; }
.rq-q pre { background: #1c1c1e; border-radius: 6px; padding: 8px 10px; font-family: var(--mono);
  font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 6px 0; }
.rq-q code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-elev); padding: 1px 5px; border-radius: 4px; }
.rq-topic {
  flex: 0 0 auto; font-size: 11px; color: var(--text-dim); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.rq-flag {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 8px;
}
.rq-flag.ok { background: rgba(44,187,93,.15); color: var(--green); }
.rq-flag.bad { background: rgba(239,71,67,.15); color: var(--red); }
.rq-flag.skip { background: var(--bg-elev); color: var(--text-dim); }
.rq.collapsed .rq-body { display: none; }
.rq-body { padding: 0 14px 14px 56px; display: flex; flex-direction: column; gap: 6px; }
.ropt {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
}
.ropt.right { border-color: var(--green); background: rgba(44,187,93,.08); }
.ropt.right .quiz-letter { background: var(--green); color: #06130a; }
.ropt.wrong { border-color: var(--red); background: rgba(239,71,67,.08); }
.ropt.wrong .quiz-letter { background: var(--red); color: #fff; }
.ropt-text { flex: 1; line-height: 1.45; min-width: 0; }
.opt-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.opt-tag.right { color: var(--green); }
.opt-tag.wrong { color: var(--red); }
.why {
  margin-top: 6px; background: var(--bg-elev); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 10px 14px;
}
.why.muted { border-left-color: var(--border); }
.why-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); font-weight: 700;
}
.why.muted .why-label { color: var(--text-dim); }
.why-text { font-size: 13px; line-height: 1.6; margin-top: 4px; color: var(--text); }
.why.muted .why-text { color: var(--text-dim); font-style: italic; }

@media (max-width: 900px) {
  .review-body { grid-template-columns: 1fr; }
  .review-side { position: static; max-height: none; }
  .rq-body { padding-left: 14px; }
  .score-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- Practice Sets ---------------- */
#practice-view, #attempts-view { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }
.pset-group { margin-bottom: 30px; }
.pset-group-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); font-weight: 700; margin-bottom: 12px;
}
.pset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pset-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; cursor: pointer; transition: border-color .12s ease, transform .12s ease;
}
.pset-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pset-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pset-count { font-size: 11px; color: var(--text-dim); background: var(--bg-elev); border-radius: 10px; padding: 2px 8px; }
.pset-best { font-size: 11px; font-weight: 700; color: var(--green); }
.pset-new { font-size: 11px; color: var(--text-dim); }
.pset-title { font-size: 14.5px; font-weight: 600; line-height: 1.45; margin-bottom: 6px; }
.pset-meta { font-size: 12px; color: var(--text-dim); }

.attempt-row {
  display: grid; grid-template-columns: 110px 1fr auto 70px; align-items: center; gap: 14px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .12s ease;
}
.attempt-row:hover { border-color: var(--accent); }
.attempt-n { font-weight: 700; font-size: 14px; }
.attempt-when { font-size: 12.5px; color: var(--text-dim); }
.attempt-score { font-size: 14px; font-weight: 700; }
.attempt-score.good { color: var(--green); }
.attempt-score.mid { color: var(--accent); }
.attempt-score.low { color: var(--red); }
.attempt-go { font-size: 12px; color: var(--text-dim); text-align: right; }

/* Correct answers de-emphasise to grey so attention goes to what needs work;
   wrong answers stay loud. */
.rnum.ok {
  background: var(--bg-elev); border-color: var(--border); color: var(--text-dim);
}
.rq[data-state="ok"] { border-left-color: var(--border); opacity: .78; }
.rq[data-state="ok"]:hover { opacity: 1; }
.rq-flag.ok { background: var(--bg-elev); color: var(--text-dim); }
.rq[data-state="skip"] { border-left-color: var(--yellow); }
.rnum.skip {
  background: rgba(245,197,24,.14); border-color: rgba(245,197,24,.45); color: var(--yellow);
}
.rq-flag.skip { background: rgba(245,197,24,.15); color: var(--yellow); }
.review-legend .dot.ok { background: var(--border); }
.review-legend .dot.skip { background: var(--yellow); }

/* ---------------- Mock Test ---------------- */
#mock-view, #mock-summary-view { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
.mock-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 16px;
}
.mock-card-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.mock-card-desc { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 14px; }
.mock-card-parts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mock-part-chip {
  font-size: 11.5px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; color: var(--text-dim);
}
.mock-history-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 8px; cursor: pointer;
}
.mock-history-row:hover { border-color: var(--accent); }
.mock-history-when { font-size: 12.5px; color: var(--text-dim); }
.mock-history-score { font-weight: 700; font-size: 13.5px; }

.mock-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-panel); border-top: 1px solid var(--border);
  padding: 10px 20px; box-shadow: 0 -4px 16px rgba(0,0,0,.25);
}
.mock-bar-label { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mock-bar-parts { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.mock-part-btn {
  font-size: 12px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text-dim); cursor: pointer;
}
.mock-part-btn.active { background: var(--accent); border-color: var(--accent); color: #1a1a1b; font-weight: 700; }
.mock-part-btn.done-pass { border-color: var(--green); color: var(--green); }
.mock-part-btn.done-fail { border-color: var(--red); color: var(--red); }
.mock-bar-timer {
  font-family: var(--mono); font-size: 18px; font-weight: 700; min-width: 72px; text-align: center;
}
.mock-bar-timer.low { color: var(--red); animation: mockPulse 1s infinite; }
@keyframes mockPulse { 50% { opacity: .4; } }

.mock-summary-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 26px; }
.mock-summary-tile {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
}
.mock-summary-tile.pass { border-color: var(--green); }
.mock-summary-tile.fail { border-color: var(--red); }
.mock-summary-tile.skip { border-color: var(--border); }
.mock-summary-part-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 6px; }
.mock-summary-part-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.mock-summary-part-status { font-size: 13px; font-weight: 700; }
.mock-summary-part-status.pass { color: var(--green); }
.mock-summary-part-status.fail { color: var(--red); }
.mock-summary-part-status.skip { color: var(--text-dim); }