:root { --app-navy:#14285a; --app-blue:#29419c; --app-muted:#667085; --app-line:#d9dfeb; --app-success:#18794e; --app-danger:#b42318; }
[hidden] { display:none !important; }
body { color:#172033; min-height:100vh; }
.site-header { min-height:215px; padding:42px max(5vw,28px); color:#fff; background:linear-gradient(115deg,#0f2457,#2947a5); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; }
.brand-mark { width:84px; height:84px; border:1px solid rgba(255,255,255,.45); border-radius:50%; display:grid; place-items:center; font:800 16px Georgia,serif; letter-spacing:.08em; box-shadow:inset 0 0 0 7px rgba(255,255,255,.08); }
.eyebrow,.kicker { margin:0 0 4px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; }
.eyebrow { color:#dbe3ff; }
.site-header h1 { margin:0; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-.035em; font-weight:800; }
.lede { margin:10px 0 0; color:#e8edff; max-width:760px; font-size:16px; }
.header-badge { padding:12px 15px; border:1px solid rgba(255,255,255,.28); border-radius:12px; background:rgba(255,255,255,.08); display:grid; text-align:right; }
.header-badge span { color:#dbe3ff; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.header-badge strong { font-size:14px; }
.wizard-shell { margin-top:-30px; padding-bottom:52px; }
.workflow { display:grid; gap:20px; }
.wizard-progress { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; margin-bottom:38px; }
.wizard-progress-item { display:flex; align-items:center; gap:8px; min-width:0; padding:10px 12px; border:1px solid var(--app-line); border-radius:12px; background:#fff; color:var(--app-muted); box-shadow:0 .125rem .25rem rgba(0,0,0,.045); }
.wizard-progress-item span { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:50%; background:#eef1f8; color:var(--app-blue); font-weight:800; }
.wizard-progress-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.wizard-progress-item.active { border-color:var(--app-blue); box-shadow:0 0 0 3px rgba(41,65,156,.12); color:var(--app-blue); }
.wizard-progress-item.active span,.wizard-progress-item.complete span { color:#fff; background:var(--app-blue); }
.wizard-progress-item.complete { color:#344054; background:#f8faff; }
.wizard-progress-item.complete { cursor:pointer; }
.wizard-progress-item.complete:hover { border-color:#7890df; box-shadow:0 .25rem .75rem rgba(41,65,156,.12); }
.wizard-progress-item.locked { cursor:not-allowed; opacity:.62; }
.wizard-actions { position:sticky; bottom:12px; z-index:8; margin-top:20px; padding:13px 16px; border:1px solid var(--app-line); border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 .75rem 2rem rgba(20,40,90,.14); display:flex; align-items:center; justify-content:space-between; gap:12px; backdrop-filter:blur(8px); }
.wizard-actions span { color:var(--app-muted); font-size:13px; font-weight:700; }
.panel-heading { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.panel-heading h2 { margin:0; font-size:21px; font-weight:750; line-height:1.2; }
.heading-action,.lesson-actions { margin-left:auto; }
.lesson-actions { display:flex; flex-wrap:wrap; gap:8px; }
.kicker { color:var(--app-blue); }
.step-number { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--app-blue); border-radius:10px; font-weight:800; }
.section-note { color:var(--app-muted); margin:-4px 0 18px; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:7px; }
.field-wide { grid-column:span 2; }
.field-full { grid-column:1/-1; }
.field>span,.field-label { color:#344054; font-size:13px; font-weight:700; }
.form-control:focus,.form-select:focus { border-color:#7890df; box-shadow:0 0 0 .25rem rgba(41,65,156,.14); }
.invalid { border-color:#dc3545 !important; }
.source-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.source-card { display:flex; align-items:flex-start; gap:12px; min-height:118px; padding:20px; border:2px solid var(--app-line); border-radius:16px; background:#fff; cursor:pointer; transition:border-color .18s,box-shadow .18s,background .18s; }
.source-card:hover,.source-card:has(input:checked) { border-color:var(--app-blue); background:#f6f8ff; box-shadow:0 .5rem 1.5rem rgba(41,65,156,.1); }
.source-card input { margin-top:4px; }
.source-card span { display:grid; gap:7px; }
.source-card strong { color:var(--app-blue); font-size:17px; }
.source-card small { color:var(--app-muted); line-height:1.5; }
.drop-zone { margin-top:18px; padding:28px; border:2px dashed #9faed5; border-radius:14px; background:#f8faff; display:grid; place-items:center; gap:5px; text-align:center; cursor:pointer; }
.drop-zone.dragging { border-color:var(--app-blue); background:#edf1ff; }
.upload-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--app-blue); color:#fff; font-size:23px; }
.drop-zone small,.status-line { color:var(--app-muted); }
.status-line { margin-top:10px; font-size:13px; }
.status-line.success { color:var(--app-success); }
.status-line.error { color:var(--app-danger); }
.question-editor { margin:18px 0; padding:18px; border:1px solid #b9c4e5; border-radius:14px; background:#f8faff; }
.editor-heading,.question-list-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.editor-heading { margin-bottom:16px; }
.editor-heading h3,.question-list-heading h3 { margin:0; font-size:18px; font-weight:750; }
.question-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.question-form-grid textarea { min-height:78px; }
.editor-actions { display:flex; justify-content:flex-end; margin-top:16px; }
.question-list-heading { margin:22px 0 10px; }
.question-list-heading span { color:var(--app-muted); font-size:13px; }
.question-list { display:grid; gap:10px; }
.question-card { border:1px solid var(--app-line); border-radius:12px; padding:14px; background:#fff; }
.question-card.has-errors { border-color:#e9a8a1; background:#fffafa; }
.question-card-main { display:grid; grid-template-columns:54px minmax(140px,.7fr) minmax(260px,2fr) minmax(130px,.8fr); gap:12px; align-items:start; }
.question-number { color:var(--app-blue); font-weight:800; }
.question-meta { color:var(--app-muted); font-size:12px; }
.question-text { font-weight:700; overflow-wrap:anywhere; }
.question-objective { margin:8px 0 0 66px; color:#475467; font-size:13px; white-space:pre-line; }
.question-details { margin:8px 0 0 66px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; color:#475467; font-size:12px; }
.question-actions { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0 66px; }
.question-errors { margin:10px 0 0 66px; color:var(--app-danger); font-size:12px; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; margin-top:18px; }
.pagination span { margin:0 5px; color:var(--app-muted); font-size:13px; }
.lesson-configs { display:grid; gap:14px; }
.lesson-card { border:1px solid var(--app-line); border-radius:14px; overflow:hidden; background:#fff; }
.lesson-card-header { padding:13px 16px; background:#f8f9fd; border-bottom:1px solid var(--app-line); display:flex; justify-content:space-between; gap:14px; align-items:center; }
.lesson-title { display:flex; align-items:center; gap:10px; min-width:0; font-weight:750; }
.lesson-title b { color:var(--app-blue); }
.lesson-stats { display:flex; flex-wrap:wrap; gap:8px; color:var(--app-muted); font-size:12px; }
.lesson-stats span { background:#fff; border:1px solid var(--app-line); border-radius:999px; padding:3px 8px; }
.lesson-card-body { padding:16px; display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:18px; align-items:start; }
.lesson-card-body textarea { min-height:108px; resize:vertical; }
.lesson-footer { display:flex; justify-content:flex-end; padding:0 16px 14px; }
.empty-state { padding:28px; border:1px dashed #bcc6db; border-radius:12px; color:var(--app-muted); background:#fafbfe; text-align:center; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.metric-grid>div { padding:14px; border:1px solid var(--app-line); border-radius:12px; background:#f8f9fd; display:grid; gap:3px; }
.metric-grid span { color:var(--app-muted); font-size:12px; }
.metric-grid strong { color:var(--app-blue); font-size:22px; }
.validation-panel h3 { margin:22px 0 10px; font-size:15px; }
.domain-list { display:grid; gap:8px; }
.domain-row { display:grid; grid-template-columns:120px 1fr 30px; gap:10px; align-items:center; font-size:13px; }
.domain-bar { height:7px; border-radius:999px; background:#e8ecf5; overflow:hidden; }
.domain-bar i { display:block; height:100%; background:var(--app-blue); border-radius:inherit; }
.validation-summary { margin-top:18px; padding:12px 14px; border-radius:10px; font-weight:700; }
.validation-summary.waiting { color:#72520a; background:#fff8e8; }
.validation-summary.fail { color:var(--app-danger); background:#fff0ee; }
.validation-summary.pass { color:var(--app-success); background:#eaf7f0; }
.validation-messages { margin:12px 0 0; color:var(--app-danger); }
.preview-heading { align-items:flex-start; }
.preview-note { margin-left:auto; max-width:370px; color:var(--app-muted); font-size:12px; text-align:right; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.preview-content { min-height:300px; }
.document-preview { max-width:850px; margin:auto; padding:36px 46px; border:1px solid #d6d9df; background:#fff; box-shadow:0 .5rem 1.5rem rgba(20,40,90,.08); font-family:Arial,sans-serif; }
.institution { text-align:center; }
.institution h3 { margin:0; color:#29419c; font:700 28px Georgia,serif; }
.institution p { margin:2px 0; }
.institution .subject { margin-top:16px; font-weight:800; }
.institution .term { color:#29419c; font-size:19px; font-weight:800; }
.directions { margin:22px 0; }
.preview-question { margin:15px 0; }
.preview-question>strong { display:block; margin-bottom:2px; }
.preview-choice { margin-left:28px; }
.key-preview { margin-top:25px; }
.key-entry { margin:4px 0; }
.tos-wrap { overflow:auto; border:1px solid var(--app-line); border-radius:12px; }
.tos-preview { width:100%; min-width:1100px; border-collapse:collapse; background:#fff; font-size:12px; }
.tos-preview caption { caption-side:top; padding:14px; color:var(--app-blue); font-weight:800; }
.tos-preview th,.tos-preview td { border:1px solid #5f6470; padding:8px; vertical-align:middle; }
.tos-preview th { color:#fff; background:var(--app-blue); text-align:center; }
.tos-preview td:first-child,.tos-preview td:nth-child(2) { text-align:left; }
.tos-preview tfoot td { font-weight:800; }
.action-bar { margin-top:20px; padding:18px 20px; border-radius:16px; background:#fff; box-shadow:0 .5rem 1.5rem rgba(20,40,90,.1); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.action-buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.swal-error-list { margin:0; padding-left:22px; text-align:left; color:#475467; }
@media (max-width:900px) {
  .site-header { grid-template-columns:auto 1fr; }
  .header-badge { display:none; }
  .form-grid,.metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .question-card-main { grid-template-columns:48px 1fr; }
  .question-text { grid-column:2; }
  .question-objective,.question-details,.question-actions,.question-errors { margin-left:60px; }
  .wizard-progress { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .site-header { padding:34px 20px 54px; grid-template-columns:64px 1fr; gap:16px; }
  .brand-mark { width:64px; height:64px; font-size:13px; }
  .site-header h1 { font-size:29px; }
  .lede { font-size:14px; }
  .wizard-shell { margin-top:-24px; padding-inline:12px; }
  .wizard-progress { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:24px; }
  .wizard-progress-item { min-height:48px; padding:7px; gap:6px; }
  .wizard-progress-item small { font-size:9px; white-space:normal; line-height:1.15; }
  .wizard-progress-item span { flex-basis:25px; height:25px; }
  .wizard-actions { position:static; }
  .source-options,.form-grid,.metric-grid,.question-form-grid,.lesson-card-body { grid-template-columns:1fr; }
  .field-wide { grid-column:auto; }
  .panel-heading,.lesson-card-header,.action-bar { align-items:flex-start; flex-direction:column; }
  .heading-action,.lesson-actions,.preview-note { margin-left:47px; text-align:left; }
  .question-card-main { grid-template-columns:1fr; }
  .question-text { grid-column:auto; }
  .question-objective,.question-details,.question-actions,.question-errors { margin-left:0; }
  .question-details { grid-template-columns:1fr; }
  .action-buttons { justify-content:stretch; width:100%; }
  .action-buttons .btn { width:100%; }
  .document-preview { padding:24px 18px; }
}