:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #eef3f8;
  --text: #172033;
  --muted: #667085;
  --primary: #155eef;
  --primary-dark: #0b4bd4;
  --success: #067647;
  --success-bg: #ecfdf3;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --warning: #b54708;
  --border: #d9e1ec;
  --shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
button, select, input { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 4vw, 54px);
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--primary);
  color: #fff;
}
.brand small { display: block; color: var(--muted); font-weight: 600; margin-top: 2px; }
.top-actions { display: flex; gap: 10px; }

.main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 64px; }
.hero {
  display: grid;
  grid-template-columns: 1.45fr .8fr;
  gap: 26px;
  align-items: stretch;
  margin-bottom: 30px;
}
.hero-card, .panel, .code-card, .question-card, .result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card { padding: clamp(28px, 5vw, 58px); background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%); }
.eyebrow { color: var(--primary); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; margin: 12px 0 18px; }
h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { margin: 0; }
p { color: var(--muted); line-height: 1.65; }
.hero-side { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-stat { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
.hero-stat:last-child { border-bottom: 0; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 32px 0 16px; }
.section-head p { margin: 0; }
.code-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.code-card { padding: 22px; transition: transform .2s ease, border-color .2s ease; }
.code-card:hover { transform: translateY(-3px); border-color: #9db8f7; }
.code-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface-soft); border-radius: 14px; font-size: 1.35rem; }
.code-card p { min-height: 52px; }

.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 17px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary { color: #fff; background: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { color: var(--text); background: var(--surface-soft); border: 1px solid var(--border); }
.btn-ghost { color: var(--primary); background: transparent; }
.btn-danger { color: var(--danger); background: var(--danger-bg); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.full { width: 100%; }

.panel { padding: clamp(22px, 4vw, 36px); }
.setup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }
.field { display: grid; gap: 9px; }
.field label { font-weight: 800; }
.field select, .field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.segment-btn { padding: 14px 10px; border: 1px solid var(--border); background: #fff; border-radius: 12px; font-weight: 800; }
.segment-btn.active { color: var(--primary); background: #eef4ff; border-color: #9db8f7; }
.setup-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }

.quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
.quiz-main { min-width: 0; }
.quiz-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--muted); font-weight: 700; }
.progress { height: 10px; background: #dfe7f1; border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.progress > div { height: 100%; background: var(--primary); transition: width .25s ease; }
.question-card { padding: clamp(22px, 4vw, 36px); }
.question-text { font-size: clamp(1.2rem, 2.5vw, 1.65rem); line-height: 1.45; margin: 12px 0 24px; }
.answers { display: grid; gap: 12px; }
.answer {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  color: var(--text);
}
.answer:hover { border-color: #9db8f7; }
.answer.selected { border-color: var(--primary); background: #eef4ff; }
.answer.correct { border-color: var(--success); background: var(--success-bg); }
.answer.incorrect { border-color: var(--danger); background: var(--danger-bg); }
.answer-letter { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-soft); font-weight: 900; }
.feedback { margin-top: 18px; padding: 17px; border-radius: 13px; border: 1px solid var(--border); }
.feedback.success { background: var(--success-bg); border-color: #a6f4c5; }
.feedback.error { background: var(--danger-bg); border-color: #fecdca; }
.quiz-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }

.navigator { padding: 18px; position: sticky; top: 96px; align-self: start; }
.nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 18px; }
.nav-number { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--border); background: #fff; font-weight: 800; }
.nav-number.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.nav-number.answered:not(.active) { background: var(--success-bg); border-color: #75e0a7; }
.nav-number.flagged { box-shadow: inset 0 -4px 0 #f79009; }

.score-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
.score-card { text-align: center; padding: 30px; }
.score-ring { width: 160px; height: 160px; margin: 18px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary) var(--score), #e7edf5 0); position: relative; }
.score-ring::after { content: ""; position: absolute; inset: 14px; background: #fff; border-radius: 50%; }
.score-ring strong { position: relative; z-index: 1; font-size: 2rem; }
.results-list { display: grid; gap: 14px; }
.result-card { padding: 20px; box-shadow: none; }
.result-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.badge { display: inline-flex; border-radius: 999px; padding: 6px 10px; font-size: .78rem; font-weight: 900; }
.badge-success { color: var(--success); background: var(--success-bg); }
.badge-danger { color: var(--danger); background: var(--danger-bg); }
.reference { margin-top: 14px; padding: 12px; background: var(--surface-soft); border-radius: 10px; font-weight: 700; }

.notice { padding: 14px 16px; border-radius: 12px; background: #fffaeb; color: #7a2e0e; border: 1px solid #fedf89; }
.empty { text-align: center; padding: 48px 24px; }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .hero, .quiz-layout, .score-wrap { grid-template-columns: 1fr; }
  .code-grid { grid-template-columns: repeat(2, 1fr); }
  .navigator { position: static; }
}
@media (max-width: 620px) {
  .topbar { padding: 14px 16px; }
  .brand small { display: none; }
  .main { width: min(100% - 22px, 1180px); padding-top: 20px; }
  .code-grid, .setup-grid { grid-template-columns: 1fr; }
  .segmented { grid-template-columns: 1fr; }
  .setup-actions, .quiz-actions { flex-direction: column; }
  .setup-actions .btn, .quiz-actions .btn { width: 100%; }
  .code-card p { min-height: auto; }
}

.page-title{font-size:clamp(2rem,4vw,3.2rem);margin:.35rem 0 .75rem}.success-note{background:#ecfdf3;color:#067647;border-color:#abefc6}.auth-wrap{max-width:560px;margin:42px auto;padding:34px}.form-stack{display:grid;gap:16px;margin:24px 0}.form-stack+.btn{margin-bottom:10px}.admin-shell{display:grid;grid-template-columns:245px minmax(0,1fr);gap:24px;align-items:start}.admin-sidebar{position:sticky;top:96px;min-height:calc(100vh - 130px);background:#101828;color:#fff;border-radius:18px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}.admin-sidebar .eyebrow{color:#84adff}.admin-sidebar nav{display:grid;gap:7px;margin:28px 0}.admin-nav{border:0;background:transparent;color:#d0d5dd;text-align:left;padding:12px 14px;border-radius:10px;font-weight:700}.admin-nav:hover,.admin-nav.active{background:#1d2939;color:#fff}.admin-user{display:grid;gap:10px;font-size:.82rem;word-break:break-word}.admin-content{min-width:0}.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}.metric-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow)}.metric-card span{display:block;color:var(--muted);font-weight:700}.metric-card strong{display:block;font-size:2rem;margin-top:8px}.admin-panel{padding:24px}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.workflow span{background:var(--surface-soft);padding:16px;border-radius:12px;font-weight:800}.filter-bar{padding:14px;display:grid;grid-template-columns:1fr 180px 190px;gap:10px;margin-bottom:16px}.question-list{display:grid;gap:12px}.manager-question{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;justify-content:space-between;gap:18px;align-items:center}.manager-main{min-width:0}.manager-main h3{margin:8px 0}.manager-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem}.manager-actions{display:flex;gap:8px;flex-shrink:0}.status-draft{background:#f2f4f7;color:#344054}.status-ready-for-human-review{background:#fff4e5;color:#b54708}.status-approved{background:#ecfdf3;color:#067647}.status-retired{background:#fef3f2;color:#b42318}.question-form{padding:24px;display:grid;gap:16px}.question-form textarea{resize:vertical}.answer-edit{background:var(--surface-soft);padding:12px;border-radius:12px}.review-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));margin-top:24px}.upload-zone{border:2px dashed #b2c3df;border-radius:16px;padding:38px;text-align:center;background:#f8faff}.upload-zone input{display:block;margin:18px auto}.import-panel{padding:24px}.manager-question p{margin:0}.admin-sidebar .btn-ghost{color:#fff}.admin-sidebar .btn-ghost:hover{background:#1d2939}
@media(max-width:1000px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{position:static;min-height:auto}.admin-sidebar nav{grid-template-columns:repeat(5,1fr);margin:15px 0}.admin-user{grid-template-columns:1fr auto;align-items:center}.metric-grid{grid-template-columns:repeat(2,1fr)}.workflow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.admin-sidebar nav{grid-template-columns:1fr 1fr}.metric-grid,.workflow{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr}.manager-question{align-items:flex-start;flex-direction:column}.manager-actions{width:100%}.manager-actions .btn{flex:1}.auth-wrap{margin:10px auto;padding:22px}}

.site-footer{display:flex;justify-content:center;align-items:center;gap:14px;padding:22px 24px 30px;color:var(--muted);font-size:.82rem}.footer-admin-link{border:0;background:transparent;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer;padding:4px}.footer-admin-link:hover{color:var(--primary)}
.question-form h2{margin:28px 0 14px}.form-two-col,.teaching-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.teaching-block{background:#f5f8fd;border:1px solid #dbe4f0;border-radius:12px;padding:14px}.teaching-block h4{margin:0 0 6px;font-size:.95rem}.teaching-block p{margin:0}.answer-rationale{background:#f7f9fc;border-left:4px solid #2d68f0;padding:10px 12px;border-radius:6px}@media(max-width:760px){.form-two-col,.teaching-grid{grid-template-columns:1fr}}

.btn-danger{background:#b42318;color:#fff;border:1px solid #b42318}.btn-danger:hover{background:#912018}.danger-panel{border:1px solid #f0b4ae;background:#fff8f7}.danger-panel h2{color:#8f1d14}

/* Review decision controls */
.review-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:14px 16px}.review-toolbar>div:first-child{display:flex;flex-direction:column;gap:3px}.toolbar-note{font-size:.82rem;color:var(--muted)}.bulk-actions{display:flex;gap:8px;flex-wrap:wrap}.btn-reject{background:#fff;color:#b42318;border:1px solid #d92d20}.btn-reject:hover{background:#fff1f0}.question-select{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap}.question-select input{width:17px;height:17px}.question-rejected{border-color:#f0b4ae;background:#fffafa}.status-rejected{background:#fee4e2;color:#b42318}@media(max-width:820px){.review-toolbar{align-items:flex-start;flex-direction:column}.manager-question{align-items:flex-start}.question-select{position:absolute}.manager-main{padding-top:28px}.bulk-actions{width:100%}.bulk-actions .btn{flex:1}}
/* Access, pricing, study-cycle, and demo upgrade */
.demo-banner{display:flex;gap:16px;align-items:center;justify-content:center;padding:10px 20px;background:#fff3cd;border-bottom:1px solid #e3c35b;color:#5d4700}.demo-banner span{flex:0 1 auto}.demo-banner .btn{padding:7px 12px}.hero-buttons,.footer-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.muted{color:var(--muted)}.pricing-intro{text-align:center;margin-bottom:22px}.pricing-grid,.package-grid,.stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.price-card,.stage-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px}.price-card.featured{border:2px solid var(--primary)}.price{font-size:2.5rem;font-weight:900;margin:12px 0}.price-card ul,.purchase-card ul{padding-left:20px;line-height:1.8}.package-title{display:flex;align-items:center;gap:18px;margin-top:18px}.package-title .code-icon{margin:0}.stage-card>span{font-size:.78rem;font-weight:800;text-transform:uppercase;color:var(--primary)}.stage-card.complete{background:#f1fff7;border-color:#a6dfbd}.attempt-strip{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.attempt-strip>div{min-width:110px;background:#f5f7fb;border:1px solid var(--border);border-radius:14px;padding:12px}.attempt-strip span{display:block;color:var(--muted);font-size:.8rem}.attempt-strip strong{font-size:1.4rem}.exam-timer{margin-right:12px;color:#9a3412}.teaching-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.teaching-grid>div{background:rgba(255,255,255,.65);border-radius:12px;padding:12px}.topic-results{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:22px}.topic-row{display:grid;grid-template-columns:minmax(130px,1fr) 2fr minmax(90px,auto);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.topic-row:last-child{border-bottom:0}.topic-bar{height:10px;border-radius:10px;background:#e8edf5;overflow:hidden}.topic-bar i{display:block;height:100%;background:var(--primary);border-radius:10px}.cycle-list{display:grid;gap:12px}.cycle-list article{display:flex;justify-content:space-between;align-items:center;padding:16px;border:1px solid var(--border);border-radius:14px}.cycle-list span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}.report-hero{text-align:center}.repurchase{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px}
@media(max-width:900px){.pricing-grid,.package-grid,.stage-grid{grid-template-columns:1fr}.teaching-grid{grid-template-columns:1fr}.repurchase{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.demo-banner{align-items:flex-start;flex-direction:column}.topic-row{grid-template-columns:1fr}.topic-row strong{text-align:left}.package-title{align-items:flex-start}.topbar{gap:10px}.top-actions{flex-wrap:wrap;justify-content:flex-end}}

/* 2026-07 unlimited-access pricing and alignment update */
.topbar{position:relative}
.topbar>.brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.topbar>.top-actions{margin-left:auto}
.admin-brand-block{text-align:center;width:100%}
.admin-sidebar>div:first-child{text-align:center}
.access-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){
  .topbar>.brand{position:static;transform:none;text-align:left}
  .access-stage-grid{grid-template-columns:1fr}
}


/* 2026-07 sidebar title spacing and quick approval update */
.admin-sidebar > div:first-child,
.admin-brand-block {
  width: 100%;
  text-align: center;
}
.admin-sidebar h2,
.admin-brand-block h2 {
  max-width: 100%;
  margin: 8px auto 0;
  font-size: 1.65rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
}
@media (max-width: 1000px) {
  .admin-sidebar h2,
  .admin-brand-block h2 { font-size: 1.55rem; }
}