@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --radius: 12px;
}

/* ---------- Dark theme (default) ---------- */
html[data-theme="dark"]{
  --bg: #102B52;
  --bg-grid: rgba(127,184,232,0.16);
  --bg-glow: #16386B;
  --panel: #1B3E72;
  --panel-hi: #21497F;
  --border: #4C7CA8;
  --cyan: #7FB8E8;
  --text: #F3F7FC;
  --text-dim: #B9CBE0;
  --amber: #F2A93B;
  --good: #4CBB8A;
  --good-soft: rgba(76,187,138,0.16);
  --bad: #F16A5B;
  --bad-soft: rgba(241,106,91,0.16);
  --input-bg: rgba(0,0,0,0.18);
}

/* ---------- Light theme ---------- */
html[data-theme="light"]{
  --bg: #EAF1F9;
  --bg-grid: rgba(27,62,114,0.10);
  --bg-glow: #DCE9F7;
  --panel: #FFFFFF;
  --panel-hi: #F3F8FD;
  --border: #B9CBE0;
  --cyan: #3E6EA5;
  --text: #102B52;
  --text-dim: #4C6789;
  --amber: #C97E12;
  --good: #1F8A5F;
  --good-soft: rgba(31,138,95,0.10);
  --bad: #C7402E;
  --bad-soft: rgba(199,64,46,0.10);
  --input-bg: #F3F8FD;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0/34px 34px,
    radial-gradient(ellipse at 20% -10%, var(--bg-glow) 0%, var(--bg) 55%);
  background-color: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  min-height: 100vh;
  padding: 22px 16px 90px;
  transition: background-color .2s ease, color .2s ease;
}

.wrap{ max-width: 820px; margin: 0 auto; }
::selection{ background: var(--amber); color: var(--bg); }

a{ color: var(--cyan); }

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-badge{ width: 34px; height:34px; flex-shrink:0; }
.brand-name{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing:.08em;
  color: var(--text-dim);
}
.brand-name b{ color: var(--text); display:block; font-size: 14px; letter-spacing:0; }

.topbar-actions{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.icon-btn{
  width: 38px; height:38px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size: 16px;
  padding:0;
}
.icon-btn:hover{ border-color: var(--amber); }
.user-chip{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 8px 12px;
  display:flex; align-items:center; gap:8px;
  background: var(--panel);
}
.user-chip .role-tag{
  font-size: 9.5px;
  letter-spacing:.08em;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 4px;
  padding: 1px 5px;
}
.text-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  background:none; border:none; cursor:pointer; padding: 4px;
}
.text-btn:hover{ color: var(--amber); }

/* ---------- Header (sets screen) ---------- */
.hdr{ margin-bottom: 22px; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing:.16em; text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 8px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--amber); display:inline-block; }
h1{ font-size: 25px; margin: 0 0 6px; font-weight: 800; letter-spacing: -0.01em; }
.hdr-sub{ font-size: 13.5px; color: var(--text-dim); max-width: 500px; line-height:1.55; margin:0; }

.coverage-note{
  font-size: 12.5px; color: var(--text-dim);
  border-left: 3px solid var(--amber);
  background: var(--good-soft);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  margin-bottom: 22px; line-height:1.55;
}

/* ---------- Auth screen ---------- */
.auth-shell{
  max-width: 380px;
  margin: 8vh auto 0;
  padding: 30px 28px 26px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.auth-shell .brand-badge{ width: 56px; height:56px; margin: 0 auto 14px; }
.auth-shell h1{ font-size: 20px; margin-bottom: 4px; }
.auth-shell .hdr-sub{ margin: 0 auto 22px; }
.field{ text-align:left; margin-bottom: 14px; }
.field label{
  display:block; font-family:'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.field input{
  width:100%; padding: 11px 12px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--input-bg);
  color: var(--text); font-family:'IBM Plex Sans', sans-serif; font-size: 14.5px;
}
.field input:focus{ outline: 2px solid var(--amber); outline-offset: 1px; }
.auth-submit{ width: 100%; margin-top: 6px; }
.auth-error{
  font-size: 12.5px; color: var(--bad); background: var(--bad-soft);
  border-radius: 7px; padding: 9px 11px; margin-bottom: 14px; text-align:left; display:none;
}
.auth-error.show{ display:block; }
.auth-switch{ font-size: 12.5px; color: var(--text-dim); margin-top: 18px; }
.auth-switch button{
  background:none; border:none; color: var(--cyan); cursor:pointer;
  font-family: inherit; font-size: inherit; font-weight:600; padding:0;
}

/* ---------- Set grid ---------- */
.set-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 580px){ .set-grid{ grid-template-columns: 1fr; } }

.set-card{
  background: linear-gradient(180deg, var(--panel), var(--panel-hi));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  text-align: left; cursor: pointer; position: relative;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  color: var(--text); font-family: inherit; width:100%;
}
.set-card:hover{ border-color: var(--amber); transform: translateY(-2px); box-shadow: 0 8px 0 -4px rgba(242,169,59,0.35); }
.set-card:focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }
.set-card .node-row{ display:flex; gap:5px; margin-bottom: 12px; flex-wrap:wrap; }
.node-dot{ width: 9px; height:9px; border-radius: 2px; background: var(--border); }
.set-tag{ font-family:'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing:.1em; color: var(--amber); text-transform: uppercase; }
.set-name{ font-size: 18px; font-weight: 700; margin: 6px 0 8px; }
.set-meta{ font-family:'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--text-dim); display:flex; gap:14px; flex-wrap:wrap; }
.set-best{ font-family:'IBM Plex Mono', monospace; font-size: 11px; color: var(--good); margin-top:8px; }

/* ---------- Progress rail ---------- */
.progress-rail{
  display:flex; flex-wrap:wrap; align-items:center; gap: 4px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 18px;
}
.node{
  width: 20px; height:20px; border-radius: 5px; border: 1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size: 9px; color: var(--text-dim);
  flex-shrink:0; background: var(--panel);
}
.node.current{ border-color: var(--amber); color: var(--amber); }
.node.good{ background: var(--good); border-color: var(--good); color: #fff; font-weight:700; }
.node.bad{ background: var(--bad); border-color: var(--bad); color: #fff; font-weight:700; }
.rail-connector{ width:5px; height:1px; background: var(--border); flex-shrink:0; }

/* ---------- Question card ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-dim);
  cursor:pointer; margin-bottom: 14px; background:none; border:none; padding:0;
}
.back-link:hover{ color: var(--amber); }

.qcard{
  background: linear-gradient(180deg, var(--panel), var(--panel-hi));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 20px; margin-bottom: 16px;
}
.qnum{
  font-family:'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--cyan);
  margin-bottom: 10px; display:flex; justify-content:space-between; letter-spacing:.04em; flex-wrap:wrap; gap:6px;
}
.qnum .choose-tag{ color: var(--amber); }
.qtext{ font-size: 17px; font-weight: 600; line-height: 1.5; margin: 0 0 20px; color: var(--text); }

.option{
  display:flex; align-items:flex-start; gap: 13px; padding: 12px 14px; border-radius: 9px;
  border: 1.5px solid var(--border); margin-bottom: 9px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease; background: var(--input-bg);
}
.option:hover{ border-color: var(--amber); }
.option:last-child{ margin-bottom:0; }
.marker{
  width: 24px; height: 24px; min-width:24px; border-radius: 6px; border: 1.5px solid var(--border);
  position: relative; margin-top: 1px; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size: 11px; font-weight:700; color: var(--text-dim); flex-shrink:0;
  background: var(--panel);
}
.option.selected .marker{ border-color: var(--amber); background: var(--amber); color: #1a1200; }
.option-text{ font-size: 14.5px; line-height:1.5; padding-top:2px; color: var(--text); }
.option.locked{ cursor: default; }
.option.reveal-correct{ border-color: var(--good); background: var(--good-soft); }
.option.reveal-correct .marker{ border-color: var(--good); background: var(--good); color: #fff; }
.option.reveal-correct .marker::after{ content:"✓"; }
.option.reveal-wrong{ border-color: var(--bad); background: var(--bad-soft); }
.option.reveal-wrong .marker{ border-color: var(--bad); background: var(--bad); color: #fff; }
.option.reveal-wrong .marker::after{ content:"✕"; }

/* ---------- Buttons ---------- */
.btn-row{ display:flex; justify-content: space-between; align-items:center; gap: 12px; flex-wrap: wrap; }
button{ font-family: 'IBM Plex Sans', sans-serif; }
.primary-btn{
  font-weight: 700; font-size: 14px; border-radius: 9px; padding: 12px 22px; cursor: pointer;
  border: 1.5px solid var(--amber); background: var(--amber); color: #1a1200;
  transition: transform .1s ease, opacity .1s ease;
}
.primary-btn:hover{ transform: translateY(-1px); }
.primary-btn:disabled{ opacity: .35; cursor: not-allowed; transform:none; }
.ghost-btn{
  font-weight: 700; font-size: 14px; border-radius: 9px; padding: 12px 22px; cursor: pointer;
  background: transparent; color: var(--text); border: 1.5px solid var(--border);
}
.ghost-btn:hover{ border-color: var(--amber); }
.score-note{ font-family:'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-dim); }

/* ---------- Results ---------- */
.report{
  background: linear-gradient(180deg, var(--panel), var(--panel-hi));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 24px 24px; margin-bottom: 20px;
}
.report-top{ margin-bottom: 20px; }
.verdict{
  font-family:'IBM Plex Mono', monospace; font-size: 13px; letter-spacing:.14em;
  padding: 8px 16px; border-radius: 999px; font-weight:700; display:inline-block;
}
.verdict.pass{ background: var(--good-soft); color: var(--good); border: 1px solid var(--good); }
.verdict.fail{ background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad); }

.score-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 6px; }
@media (max-width: 560px){ .score-grid{ grid-template-columns: 1fr 1fr; } }
.score-tile{ border: 1px solid var(--border); border-radius: 9px; padding: 13px 14px; background: var(--input-bg); }
.score-tile .label{ font-family:'IBM Plex Mono', monospace; font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin-bottom: 6px; }
.score-tile .value{ font-size: 22px; font-weight: 800; color: var(--text); }
.score-tile .value.accent{ color: var(--amber); }

.scale-bar{ margin-top: 18px; height: 10px; border-radius: 6px; background: var(--input-bg); position: relative; overflow: hidden; }
.scale-fill{ height:100%; background: linear-gradient(90deg, var(--bad), var(--amber), var(--good)); }
.scale-marks{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-dim); margin-top: 6px; }
.pass-mark-note{ font-family:'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-dim); margin-top: 10px; line-height:1.5; }

.review-item{
  background: linear-gradient(180deg, var(--panel), var(--panel-hi));
  border: 1px solid var(--border); border-radius: 11px; padding: 16px 18px; margin-bottom: 11px;
}
.review-item .qtext{ font-size: 14.5px; margin-bottom: 10px; font-weight:600; }
.review-line{ font-size: 13px; display:flex; gap:8px; align-items:flex-start; margin-bottom: 5px; line-height:1.5; }
.review-line b{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; min-width: 64px; padding-top:1px; letter-spacing:.05em; }
.review-line.correct b, .review-line.correct span{ color: var(--good); }
.review-line.wrong b, .review-line.wrong span{ color: var(--bad); }

/* ---------- Admin panel ---------- */
.admin-tabs{ display:flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-tab{
  font-family:'IBM Plex Mono', monospace; font-size: 12px; letter-spacing:.04em;
  padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--panel); color: var(--text-dim); cursor:pointer;
}
.admin-tab.active{ border-color: var(--amber); color: var(--amber); background: var(--input-bg); }

.stat-strip{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-pill{
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px;
  background: var(--panel); font-family:'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-dim);
}
.stat-pill b{ color: var(--text); font-size: 15px; display:block; margin-top:2px; }
.stat-pill.warn b{ color: var(--amber); }
.stat-pill.good b{ color: var(--good); }

.admin-table-wrap{ overflow-x:auto; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; }
table.admin-table{ width:100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
table.admin-table th, table.admin-table td{ padding: 11px 14px; text-align:left; border-bottom: 1px solid var(--border); }
table.admin-table th{ font-family:'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); background: var(--input-bg); }
table.admin-table tr:last-child td{ border-bottom:none; }
.role-pill{ font-family:'IBM Plex Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 5px; letter-spacing:.05em; }
.role-pill.admin{ background: var(--amber); color:#1a1200; }
.role-pill.user{ background: var(--input-bg); color: var(--text-dim); border: 1px solid var(--border); }

.review-card{
  background: linear-gradient(180deg, var(--panel), var(--panel-hi));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 20px; margin-bottom: 16px;
}
.review-card .qnum{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; flex-wrap:wrap; gap:8px; }
.suggestion-tag{
  font-family:'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--amber);
  border: 1px solid var(--amber); border-radius: 5px; padding: 2px 8px;
}
.no-suggestion-tag{
  font-family:'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px;
}
.edit-textarea{
  width:100%; min-height: 64px; padding: 10px 12px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--input-bg); color: var(--text);
  font-family:'IBM Plex Sans', sans-serif; font-size: 14.5px; line-height:1.5;
  margin-bottom: 14px; resize: vertical;
}
.edit-option-row{ display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.edit-option-row .marker-static{
  width: 24px; height:24px; min-width:24px; border-radius:6px; border: 1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--text-dim); flex-shrink:0;
}
.edit-option-row input{
  flex:1; padding: 9px 11px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--input-bg); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; font-size: 13.5px;
}
.pick-answer-row{ display:flex; gap: 8px; flex-wrap:wrap; margin: 16px 0; }
.pick-btn{
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size: 13px;
  width: 40px; height:40px; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--input-bg); color: var(--text); cursor:pointer;
}
.pick-btn.active{ border-color: var(--amber); background: var(--amber); color:#1a1200; }
.review-actions{ display:flex; justify-content: space-between; gap: 10px; flex-wrap:wrap; align-items:center; }
.edit-toggle{
  font-family:'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--cyan);
  background:none; border:none; cursor:pointer; padding:0; margin-bottom: 14px;
}
.review-pager{ display:flex; justify-content:space-between; align-items:center; margin-top: 6px; font-family:'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-dim); }
.empty-state{
  text-align:center; padding: 50px 20px; color: var(--text-dim); font-family:'IBM Plex Mono', monospace; font-size: 13px;
  border: 1.5px dashed var(--border); border-radius: var(--radius);
}

.hidden{ display:none !important; }

@media (max-width: 480px){
  h1{ font-size: 21px; }
  .qtext{ font-size: 15.5px; }
  .auth-shell{ margin-top: 4vh; padding: 24px 18px 22px; }
}

@media (prefers-reduced-motion: reduce){ *{ transition: none !important; } }