/* ============================================================
   SAT MockTest Pro — "Answer Sheet" design system
   Paper / scantron / official-docket visual language.
   ============================================================ */

:root {
  /* --- paper & ink --- */
  --bg-dark: #F6F5F0;          /* page background (paper) */
  --bg-surface: #F6F5F0;       /* surface = paper */
  --bg-card: #FFFFFF;          /* raised card = clean sheet */
  --bg-card-hover: #FCFBF8;
  --bg-glass: rgba(255, 255, 255, 0.92);
  --border-subtle: #DEDACE;    /* rule lines */
  --border-active: #1D4E89;

  --text-main: #191B1F;        /* ink */
  --text-muted: #4B4E54;       /* soft ink */
  --text-dim: #83868C;         /* graphite */

  /* --- accents --- */
  --primary: #1D4E89;          /* precision blue (pencil ink) */
  --primary-hover: #123863;
  --primary-glow: rgba(29, 78, 137, 0.18);
  --emerald: #2F6E4E;          /* correct / green stamp */
  --amber: #9C7A1F;            /* flagged / goldenrod stamp */
  --rose: #B8302F;             /* incorrect / grading red */
  --cyan: #123863;

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, 'SF Mono', monospace;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-full: 999px;
}

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

html, body {
  min-height: 100vh;
  background-color: var(--bg-dark) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: -1px -1px;
  background-attachment: fixed;
}

h1, h2, h3, h4 { color: var(--text-main); font-weight: 700; letter-spacing: -0.01em; }
p { color: var(--text-muted); }

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  outline: none;
}

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 76px;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--text-main);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-icon {
  width: 42px; height: 42px;
  background: var(--bg-card);
  border: 2px solid var(--text-main);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-main); font-weight: 800; font-size: 17px;
  position: relative;
}
.brand-icon::after {
  content: ''; position: absolute; inset: 6px;
  border: 1px dashed var(--border-subtle); border-radius: 50%;
}
.brand-text { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-main); }
.brand-text span { color: var(--primary); }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-btn {
  padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  transition: color 0.15s ease; border: 1px solid transparent; position: relative;
}
.nav-btn:hover { color: var(--text-main); }
.nav-btn.active { color: var(--text-main); }
.nav-btn.active::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 2px; background: var(--rose);
}

.header-right { display: flex; align-items: center; gap: 16px; }
.dev-badge {
  padding: 6px 8px 6px 14px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: var(--font-mono);
  display: flex; align-items: center; gap: 8px;
}
.dev-badge select { background: var(--bg-dark); border: 1px solid var(--border-subtle); color: var(--text-main); font-weight: 700; cursor: pointer; outline: none; padding: 3px 6px; font-family: var(--font-mono); font-size: 12px; }
.dev-badge select option { background: #fff; color: var(--text-main); }

.page-container { max-width: 1280px; width: 100%; margin: 0 auto; padding: 48px 32px 90px; flex: 1; }

/* ---------------- Hero ---------------- */
.hero-section { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 52px; align-items: start; padding: 8px 0 56px; border-bottom: 2px solid var(--text-main); margin-bottom: 48px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 2px solid var(--primary-hover);
  color: var(--primary-hover); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 20px; font-family: var(--font-mono);
}
.hero-pill::before { content: '●'; color: var(--rose); font-size: 8px; }
.hero-title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.1; margin-bottom: 20px; color: var(--text-main); }
.hero-title span { color: var(--primary-hover); border-bottom: 4px solid var(--rose); padding-bottom: 2px; }
.hero-desc { font-size: 16px; line-height: 1.65; color: var(--text-muted); max-width: 540px; margin-bottom: 30px; }
.hero-actions { display: flex; align-items: center; gap: 12px; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-md);
  background: var(--text-main);
  color: #ffffff !important; font-size: 14px; font-weight: 700;
  transition: background 0.15s ease; border: none;
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-md);
  background: transparent; border: 1.5px solid var(--text-main);
  color: var(--text-main) !important; font-size: 14px; font-weight: 700; transition: all 0.15s ease;
}
.btn-secondary:hover { background: var(--text-main); color: #fff !important; }

.hero-card {
  background: var(--bg-card); border: 1.5px solid var(--text-main);
  border-radius: var(--radius-lg); padding: 30px; position: relative;
}
.hero-card::before, .hero-card::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; background: var(--bg-dark); border-radius: 50%;
}
.hero-card::before { left: -11px; } .hero-card::after { right: -11px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat-box { background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px; }
.stat-num { font-size: 27px; font-weight: 700; font-family: var(--font-mono); color: var(--text-main); letter-spacing: -0.02em; }
.stat-num.accent { color: var(--emerald); }
.stat-num.purple { color: var(--primary); }
.stat-lbl { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; padding-top: 0; }
.section-title { font-size: 25px; color: var(--text-main); letter-spacing: -0.01em; }
.section-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; }

.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.filter-pills { display: flex; align-items: center; gap: 10px; }
.filter-pill {
  padding: 8px 16px; border-radius: var(--radius-full);
  background: transparent; border: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 13px; font-weight: 600; transition: all 0.15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.filter-pill::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--text-dim); flex-shrink: 0; }
.filter-pill.active, .filter-pill:hover { border-color: var(--text-main); color: var(--text-main); background: var(--bg-card); }
.filter-pill.active::before { background: var(--text-main); border-color: var(--text-main); }

.search-input-wrapper { position: relative; min-width: 260px; }
.search-input-wrapper input {
  width: 100%; padding: 9px 16px 9px 36px; border-radius: var(--radius-full);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  color: var(--text-main); font-size: 13px; outline: none;
}
.search-input-wrapper input:focus { border-color: var(--primary); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-dim); }

/* ---------------- Catalog cards ---------------- */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.test-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 26px;
  display: flex; flex-direction: column; transition: all 0.2s ease; position: relative;
}
.test-card::before {
  content: ''; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px;
  background-image: linear-gradient(90deg, var(--border-subtle) 0 6px, transparent 6px 14px);
  background-size: 14px 1px;
}
.test-card:hover { transform: translateY(-3px); border-color: var(--text-main); box-shadow: 0 5px 0 var(--border-subtle); }
.card-tags { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); color: #fff; }
.badge-rw { background: var(--primary-hover); }
.badge-math { background: var(--emerald); }
.badge-full { background: var(--amber); }
.card-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.card-title { font-size: 19px; margin-bottom: 9px; line-height: 1.3; color: var(--text-main); }
.card-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 18px; }
.card-meta-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-bottom: 22px; }
.meta-item { display: flex; flex-direction: column; }
.meta-lbl { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.meta-val { font-size: 14px; font-weight: 700; color: var(--text-main); margin-top: 2px; font-family: var(--font-mono); }

.card-btn {
  width: 100%; padding: 12px 18px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid var(--text-main);
  color: var(--text-main); font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; justify-content: space-between; margin-top: auto; transition: all 0.15s ease;
}
.test-card:hover .card-btn { background: var(--text-main); color: #ffffff; }

/* ---------------- Proctor exam environment ---------------- */
.proctor-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-card); color: var(--text-main); }
.proctor-header { height: 64px; background: var(--bg-card); border-bottom: 2px solid var(--text-main); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.proctor-info { display: flex; align-items: center; gap: 14px; }
.proctor-title { font-weight: 700; font-size: 15px; color: var(--text-main); }
.module-badge { padding: 4px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 11.5px; font-weight: 600; font-family: var(--font-mono); }
.timer-box { display: flex; align-items: center; gap: 12px; }
.timer-clock { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: #8fd6a8; background: var(--text-main); padding: 5px 12px; border-radius: var(--radius-sm); letter-spacing: 0.04em; }
.timer-toggle { font-size: 12px; color: var(--text-dim); text-decoration: underline; cursor: pointer; }
.proctor-actions { display: flex; align-items: center; gap: 10px; }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12.5px; font-weight: 600; transition: all 0.15s ease; }
.tool-btn:hover { border-color: var(--text-main); color: var(--text-main); }
.save-indicator { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--emerald); font-weight: 700; font-family: var(--font-mono); }
.save-indicator::before { content: '●'; font-size: 8px; }

.proctor-workspace { flex: 1; display: grid; grid-template-columns: 1fr 1fr; height: calc(100vh - 128px); overflow: hidden; }
.passage-pane, .question-pane { padding: 36px 42px; overflow-y: auto; }
.passage-pane {
  background: #fff;
  border-right: 2px solid var(--text-main);
}
.question-pane {
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 38px 38px;
  background-position: -1px -1px;
}
.pane-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.pane-label { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.08em; }
.passage-content { font-size: 16px; line-height: 1.8; color: var(--text-main); }
.question-prompt { font-size: 17px; font-weight: 600; color: var(--text-main); line-height: 1.5; margin-bottom: 26px; }
.choices-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.choice-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-radius: var(--radius-md); background: var(--bg-card); border: 1.5px solid var(--border-subtle); cursor: pointer; transition: all 0.15s ease; user-select: none; }
.choice-item:hover { border-color: var(--text-main); }
.choice-item.selected { border-color: var(--primary-hover); background: rgba(29, 78, 137, 0.06); }
.choice-item.crossed-out { opacity: 0.45; text-decoration: line-through; background: var(--bg-dark); }
.choice-left { display: flex; align-items: center; gap: 14px; }
.choice-key {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card);
  border: 2px solid var(--text-dim);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--text-dim); flex-shrink: 0;
  font-family: var(--font-mono);
}
.choice-item.selected .choice-key { background: var(--primary-hover); color: #fff; border-color: var(--primary-hover); }
.choice-text { font-size: 14.5px; color: var(--text-main); }
.crossout-btn { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; color: var(--text-dim); opacity: 0; transition: opacity 0.2s; font-weight: 600; }
.choice-item:hover .crossout-btn { opacity: 1; }
.crossout-btn:hover { background: rgba(184, 48, 47, 0.1); color: var(--rose); }

.proctor-footer { height: 64px; background: var(--bg-card); border-top: 2px solid var(--text-main); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.question-nav-grid { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 46%; }
.q-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid var(--border-subtle); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; cursor: pointer; position: relative; }
.q-dot.active { border-color: var(--primary-hover); border-width: 2px; color: var(--text-main); }
.q-dot.answered { background: var(--text-main); color: #fff; border-color: var(--text-main); }
.q-dot.flagged::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); border: 1.5px solid var(--bg-card); }
.flag-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--amber); color: var(--amber); font-size: 12.5px; font-weight: 700; }
.flag-btn.active { background: var(--amber); color: #fff; }

/* ---------------- Modals ---------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(25, 27, 31, 0.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; }
.modal-card { background: var(--bg-card); border: 1.5px solid var(--text-main); border-radius: var(--radius-lg); max-width: 640px; width: 100%; padding: 32px; box-shadow: 0 12px 0 rgba(25,27,31,0.08); position: relative; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-subtle); }
.modal-close { color: var(--text-dim); font-size: 18px; cursor: pointer; }
.modal-close:hover { color: var(--rose); }

/* ---------------- Score report ---------------- */
.score-hero {
  background: var(--bg-card); border: 2px solid var(--text-main); border-radius: var(--radius-lg);
  padding: 40px; text-align: center; margin-bottom: 40px; position: relative;
}
.score-hero::before {
  content: 'OFFICIAL SCORE REPORT'; position: absolute; top: 16px; right: 22px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim);
}
.total-score-badge { font-size: 64px; font-weight: 800; font-family: var(--font-mono); color: var(--text-main); letter-spacing: -0.04em; }
.score-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }
.review-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-left-width: 4px; border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; }
.review-item.correct { border-left-color: var(--emerald); }
.review-item.incorrect { border-left-color: var(--rose); }
.rationale-image-wrap { margin-top: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-dark); }
.rationale-image-wrap img { display: block; width: 100%; height: auto; }
.rationale-image-caption { padding: 8px 14px; font-size: 11.5px; color: var(--text-dim); font-family: var(--font-mono); border-top: 1px solid var(--border-subtle); }

/* ---------------- Admin release cards ---------------- */
.release-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: 10px; }
.release-title { font-weight: 700; font-size: 14px; }
.release-actions { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }

/* Assessment catalog and real attempt history */
.assessment-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px; }
.catalog-offering-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.catalog-offering-card { min-height:100%; }
.catalog-offering-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.catalog-offering-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:50%; font-family:var(--font-mono); font-weight:800; color:var(--primary); }
.badge-muted { background:var(--bg-dark); color:var(--text-dim); border:1px solid var(--border-subtle); }
.catalog-detail-list { margin:4px 0 18px 18px; color:var(--text-dim); font-size:13px; line-height:1.7; }
.catalog-unavailable-note { margin-top:auto; padding:12px; background:var(--bg-dark); border:1px dashed var(--border-subtle); color:var(--text-dim); font-size:12px; }
.card-btn.catalog-disabled { opacity:.55; cursor:not-allowed; }
.catalog-error,.history-empty,.history-loading { padding:42px; text-align:center; border:1px dashed var(--border-subtle); background:var(--bg-card); }
.history-grid { display:grid; gap:14px; }
.history-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); }
.history-card-main { min-width:0; }
.history-card-tags { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.history-card-result { min-width:220px; display:grid; justify-items:end; gap:8px; text-align:right; }
.history-card-result strong { font-family:var(--font-mono); font-size:18px; }
@media (max-width: 820px) {
  .catalog-offering-grid { grid-template-columns:1fr; }
  .history-card { align-items:flex-start; flex-direction:column; }
  .history-card-result { width:100%; min-width:0; justify-items:start; text-align:left; }
}
/* Keep the proctor header stable while autosave status text changes. */
.save-indicator { min-width: 210px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-box { min-width: 190px; justify-content: center; }
.admin-page { max-width: 1560px; }
.admin-workspace { display:grid; grid-template-columns:1fr; gap:18px; min-width:0; }
.admin-nav {
  display:flex; align-items:center; gap:6px; overflow-x:auto; padding:6px;
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--bg-card);
  scrollbar-width:thin;
}
.admin-tab {
  flex:0 0 auto; padding:10px 14px; border:1px solid transparent; border-radius:var(--radius-md);
  color:var(--text-main); background:transparent; font-size:13px; font-weight:700; white-space:nowrap;
}
.admin-tab:hover { color:var(--primary-hover); background:#eef4fb; border-color:#c7d7ea; }
.admin-tab.active {
  color:#123863 !important; background:#dceaf8; border-color:#7ca5cf;
  box-shadow:inset 0 -3px 0 var(--primary); font-weight:800;
}
.admin-content { min-width:0; }
.admin-loading { padding:24px; color:var(--text-dim); }
.admin-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 12px;
  padding:12px 14px; border:1px solid var(--border-subtle); background:var(--bg-card); border-radius:var(--radius-lg);
}
.admin-toolbar h3 { font-size:16px; }
.admin-toolbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-count { color:var(--text-dim); font-size:12px; font-family:var(--font-mono); }
.admin-input {
  min-height:36px; max-width:260px; padding:7px 10px; border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); background:#fff; color:var(--text-main); font-size:12.5px;
}
.admin-action {
  min-height:36px; padding:8px 12px; border:1px solid #9fb1c5; border-radius:var(--radius-md);
  background:#f4f7fa; color:#123863 !important; font-size:12.5px; font-weight:750;
}
.admin-action:hover { background:#e4edf7; border-color:#527da8; }
.admin-action-primary { background:#dceaf8; border-color:#527da8; }
.admin-table-wrap {
  width:100%; max-width:100%; overflow:auto; border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); background:var(--bg-card); box-shadow:0 1px 0 rgba(25,27,31,.04);
}
.admin-table { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; table-layout:auto; }
.admin-table th,.admin-table td {
  padding:10px 12px; border-bottom:1px solid #e7e3d9; border-right:1px solid #eeeae1;
  text-align:left; vertical-align:middle; font-size:12.5px; line-height:1.35; white-space:nowrap;
  max-width:260px; overflow:hidden; text-overflow:ellipsis;
}
.admin-table th {
  position:sticky; top:0; z-index:2; background:#f1f5f9; color:#243b53;
  text-transform:uppercase; font-size:10.5px; letter-spacing:.055em; font-weight:800;
  border-bottom:2px solid #9fb1c5;
}
.admin-table tr:nth-child(even) td { background:#fbfaf7; }
.admin-table tr:hover td { background:#eef4fb; }
.admin-table th:first-child,.admin-table td:first-child { position:sticky; left:0; z-index:1; }
.admin-table th:first-child { z-index:3; }
.admin-table td:first-child { background:#fff; }
.admin-table tr:nth-child(even) td:first-child { background:#fbfaf7; }
.admin-table tr:hover td:first-child { background:#eef4fb; }
.admin-select-col { width:42px; min-width:42px; text-align:center !important; }
.admin-mono { font-family:var(--font-mono); max-width:230px !important; }
.admin-clickable-row { cursor:pointer; }
.admin-clickable-row:hover td { color:#123863; }
.admin-badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px;
  border:1px solid #b9c6d4; background:#f3f6f9; color:#29445f; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.035em;
}
.admin-badge-online,.admin-badge-published,.admin-badge-approved,.admin-badge-active,.admin-badge-high { background:#e6f4ec; border-color:#86b99a; color:#24593d; }
.admin-badge-idle,.admin-badge-qa,.admin-badge-medium { background:#fff4d6; border-color:#c7a654; color:#725815; }
.admin-badge-offline,.admin-badge-retired,.admin-badge-locked,.admin-badge-low { background:#f2f2f2; border-color:#c7c7c7; color:#555; }
.admin-badge-draft,.admin-badge-in-progress,.admin-badge-timed { background:#eaf1fb; border-color:#8eacd0; color:#244f7d; }
.admin-badge-hard,.admin-badge-failed,.admin-badge-disabled { background:#fae8e8; border-color:#d58e8d; color:#8a2928; }
.admin-badge-easy { background:#e6f4ec; border-color:#86b99a; color:#24593d; }
.admin-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.admin-metric { min-height:104px; padding:16px; border:1px solid var(--border-subtle); border-left:5px solid #9fb1c5; border-radius:var(--radius-lg); background:var(--bg-card); }
.admin-metric strong { display:block; font-size:27px; margin-top:8px; color:#123863; font-family:var(--font-mono); }
.admin-metric-online,.admin-metric-published,.admin-metric-approved { border-left-color:#438263; }
.admin-metric-idle,.admin-metric-qa,.admin-metric-warning { border-left-color:#a27c19; }
.admin-metric-offline { border-left-color:#858585; }
.admin-metric-draft { border-left-color:#527da8; }
.admin-notice,.admin-import-report {
  padding:14px 16px; border:1px solid #b8c9dc; border-left:4px solid var(--primary);
  background:#eef4fb; border-radius:var(--radius-lg); margin-bottom:14px;
}
.admin-notice p,.admin-import-report p { margin-top:4px; font-size:13px; }
.admin-profile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.admin-profile-card { padding:14px; border:1px solid var(--border-subtle); background:#fff; border-radius:var(--radius-lg); }
.admin-profile-card span { display:block; color:var(--text-dim); font-size:11px; text-transform:uppercase; }
.admin-profile-card strong { display:block; margin-top:6px; color:#123863; font-size:14px; }
.admin-subheading { margin:22px 0 10px; font-size:16px; color:#123863; }
.admin-empty { padding:34px; text-align:center; border:1px dashed var(--border-subtle); background:#fff; }
.admin-error { color:var(--rose); }
@media (max-width: 900px) {
  .admin-page { padding-left:14px; padding-right:14px; }
  .admin-toolbar { align-items:flex-start; flex-direction:column; }
  .admin-toolbar-actions { width:100%; }
  .admin-input { max-width:100%; flex:1 1 180px; }
  .admin-table th,.admin-table td { padding:9px 10px; }
}


.admin-selection-help {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid #bfd3e8;
  border-radius: 8px;
  background: #eef6ff;
  color: #173a5e;
  font-size: 13px;
}

.admin-batch-report:empty { display: none; }

.admin-batch-summary {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #aac4df;
  border-radius: 8px;
  background: #f5f9fd;
  color: #143a60;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}

.admin-batch-summary details {
  width: 100%;
}

.admin-batch-summary pre {
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  background: #fff;
  border: 1px solid #d6e0ea;
  border-radius: 6px;
  padding: 10px;
}

.admin-action-danger {
  border-color: #b7791f;
  background: #fff8e8;
  color: #744210;
}

.admin-action-danger:hover {
  background: #ffefc2;
}

.admin-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Math image-authoritative delivery */
.math-question-image img { max-height: none; object-fit: contain; }
.image-answer-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 12px;
}
.image-answer-choice {
  min-height: 70px;
  justify-content: center;
  padding: 12px;
}
.image-answer-choice .choice-left { justify-content: center; }
.image-answer-choice .choice-key { margin: 0; }
.asset-expired-message {
  padding: 20px;
  color: #7b2d26;
  background: #fff4f2;
  border: 1px solid #e5b7b0;
  font-weight: 600;
}
@media (max-width: 760px) {
  .image-answer-controls { grid-template-columns: repeat(2, minmax(80px, 1fr)); }
}

.admin-workflow-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 12px;
  padding:11px 13px;
  border:1px solid #bfd0e2;
  border-radius:var(--radius-lg);
  background:#f7fafc;
}
.admin-workflow-group {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.admin-workflow-label {
  color:#52667a;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.admin-action-submit { background:#e8f1fb; border-color:#7ba2ca; color:#173f69 !important; }
.admin-action-approve { background:#e9f6ee; border-color:#76aa89; color:#205b39 !important; }
.admin-action-publish { background:#dff2e7; border-color:#4e9469; color:#174d30 !important; }
.admin-action-retire { background:#f5eeee; border-color:#bd8d8d; color:#7d3232 !important; }
.admin-action-submit:hover { background:#d7e8f8; }
.admin-action-approve:hover,.admin-action-publish:hover { background:#d3ecdD; }
.admin-action-retire:hover { background:#eedddd; }


.catalog-custom-controls {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.catalog-custom-field {
  display:grid;
  gap:5px;
  color:#52667a;
  font-size:12px;
  font-weight:700;
}
.catalog-custom-select {
  width:100%;
  min-width:0;
}
@media (max-width:720px) {
  .catalog-custom-controls { grid-template-columns:1fr; }
}


/* Real attempt result report */
.result-title { font-size:24px; margin:12px 0; }
.practice-result-badge { min-width:260px; }
.result-caption { font-weight:700; color:#a5b4fc; }
.result-policy-note { margin-top:10px; color:#cbd5e1; font-size:13px; }
.practice-score-range { margin-top:10px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.review-item-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.review-question-number { font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--text-dim); }
.review-meta-line { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; color:var(--text-dim); font-size:12px; }
.review-meta-line span { padding:3px 7px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--bg-dark); }
.review-stem { color:var(--text-main); font-weight:600; margin-bottom:12px; white-space:pre-wrap; }
.review-question-image-wrap { max-width:900px; margin:12px 0 18px; border:1px solid var(--border-subtle); background:#fff; }
.review-question-image-wrap img { display:block; width:100%; height:auto; }
.review-answer-line { display:flex; gap:24px; flex-wrap:wrap; font-size:14px; margin-bottom:14px; }
.review-answer-label { color:var(--text-dim); }
.answer-correct { color:var(--emerald); }
.answer-incorrect { color:var(--rose); }
.review-rationale-text { padding:12px 16px; background:var(--bg-dark); border-radius:var(--radius-sm); border-left:3px solid var(--primary); }
.review-rationale-text p { font-size:13px; color:var(--text-muted); margin-top:5px; white-space:pre-wrap; }
.rationale-heading { font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.05em; }
.math-rationale-primary { margin-top:14px; padding:14px; border:1px solid var(--border-subtle); background:#fff; }
.math-rationale-primary img { display:block; width:100%; max-width:1000px; height:auto; margin-top:10px; }
.review-rationale-missing { padding:12px 16px; background:#fff8e8; border-left:3px solid #a67b12; color:#76570d; font-size:13px; }

.catalog-custom-count {
  grid-column:1 / -1;
  padding:9px 11px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-dark);
  color:var(--text-dim);
  font-size:12px;
  font-weight:700;
}

/* History detail and Math image refinements — safe additive layer */
.history-subdetail { margin-top: -8px; margin-bottom: 10px; color: var(--text-dim); }
.history-detail-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.history-detail-pill { display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:var(--bg-dark); border:1px solid var(--border-subtle); color:var(--text-dim); font-size:12px; font-weight:700; }
.question-figure-wrap { margin-top:18px; background:transparent; }
.question-figure-wrap-flat { margin-top:4px; }
.question-figure-image { display:block; max-width:100%; height:auto; }
.question-figure-image-cropped { width:100%; clip-path:inset(10px 10px 10px 10px); }
.passage-content-image-only { line-height:1.45; }
.passage-content-image-only p { margin-bottom:12px; }


/* Phase 2B autosave lifecycle states. */
.save-indicator [data-state="saving"],
.save-indicator [data-state="pending"] { font-weight: 600; }
.save-indicator [data-state="retrying"],
.save-indicator [data-state="failed"] { font-weight: 700; }
.save-indicator [data-state="closed"] { font-weight: 700; }