:root{
  --paper:#F8F9FB; --ink:#021838; --signal:#1E3A8A; --mist:#EEF1F5; --line:#DEE3EA; --ink-soft:#5B6270;
  --radius-s:10px; --radius-m:16px; --radius-l:24px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
a{color:inherit; text-decoration:none;}
.p-wrap{max-width:880px; margin:0 auto; padding:0 24px;}
.p-header{background:#fff; border-bottom:1px solid var(--line);}
.p-header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px;}
.p-logo img{height:34px; width:auto; display:block;}
.p-user{display:flex; align-items:center; gap:14px; font-size:14px; color:var(--ink-soft); min-width:0;}
.p-user .p-who{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px;}
.p-btn{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:100px; padding:9px 18px; cursor:pointer;
}
.p-btn:hover{border-color:var(--ink);}
.p-main{padding-top:40px; padding-bottom:64px;}
.p-badge{
  display:inline-block; font-size:13px; font-weight:600; color:var(--signal);
  background:#E9EEF9; border-radius:100px; padding:5px 12px; margin-bottom:14px;
}
.p-title{font-size:clamp(26px,4vw,36px); font-weight:700; letter-spacing:-0.02em; line-height:1.15; margin:0 0 8px;}
.p-sub{font-size:16px; color:var(--ink-soft); margin:0 0 32px; max-width:560px;}
.p-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:28px; margin-bottom:20px;}
.p-card h2{font-size:18px; font-weight:700; margin:0 0 16px; letter-spacing:-0.01em;}
.p-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px 28px; margin:0;}
.p-facts dt{font-size:13px; font-weight:600; color:var(--ink-soft); margin:0 0 4px;}
.p-facts dd{font-size:16px; font-weight:500; margin:0; overflow-wrap:anywhere;}
.p-empty{text-align:center; padding:36px 12px; color:var(--ink-soft);}
.p-empty strong{display:block; font-size:17px; color:var(--ink); margin-bottom:6px;}
.p-test{border:1px solid var(--line); border-radius:var(--radius-m); padding:18px 20px; margin-bottom:12px;}
.p-test:last-child{margin-bottom:0;}
.p-test-title{font-size:17px; font-weight:600; margin:0 0 6px;}
.p-test-meta{font-size:14px; color:var(--ink-soft); margin:0;}
.p-note{font-size:14px; color:var(--ink-soft); margin:14px 0 0;}
.p-error{background:#FCEEEE; border:1px solid #F2C6C6; color:#8A1C1C; border-radius:var(--radius-m); padding:16px 18px; font-size:15px;}
.p-loading{color:var(--ink-soft); padding:40px 0; text-align:center;}
[hidden]{display:none !important;}
@media (max-width:560px){
  .p-wrap{padding:0 18px;}
  .p-card{padding:22px;}
  .p-user .p-who{max-width:120px;}
}

/* ---- names in the accent color, tables, chips, forms (Step 3) ---- */
.p-name{color:var(--signal);}
.p-user .p-who{color:var(--signal); font-weight:600;}
.p-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); background:#fff;}
.p-table{width:100%; border-collapse:collapse; font-size:15px;}
.p-table th{
  text-align:left; font-size:13px; font-weight:600; color:var(--ink-soft); background:#F4F6FA;
  padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.p-table td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle;}
.p-table tbody tr:last-child td{border-bottom:none;}
.p-table tbody tr:hover td{background:#FAFBFE;}
.p-table .p-strong{font-weight:600; color:var(--ink);}
.p-table .p-muted{color:var(--ink-soft);}
.p-chip{display:inline-block; font-size:13px; font-weight:600; padding:4px 11px; border-radius:100px; white-space:nowrap;}
.p-chip.live{background:#E3F4EA; color:#17653A;}
.p-chip.soon{background:#E9EEF9; color:var(--signal);}
.p-chip.wait{background:#FDF1DC; color:#8A5A00;}
.p-chip.done{background:#EEF1F5; color:var(--ink-soft);}
.p-btn-primary{background:var(--signal); color:#fff; border-color:var(--signal);}
.p-btn-primary:hover{background:#15295E; border-color:#15295E;}
.p-btn-quiet{font-size:13px; padding:6px 14px; color:#8A1C1C; border-color:#F2C6C6;}
.p-btn-quiet:hover{border-color:#8A1C1C;}
.p-input, .p-textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px;
}
.p-textarea{min-height:92px; resize:vertical;}
.p-input:focus, .p-textarea:focus{outline:none; border-color:var(--signal);}
.p-field{margin-bottom:14px;}
.p-field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.p-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.p-callout{background:#F4F6FA; border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px; font-size:14px; color:var(--ink-soft); margin:14px 0 20px;}
.p-msg{font-size:14px; margin:12px 0 0; min-height:20px; color:var(--signal); font-weight:600;}
.p-msg.bad{color:#8A1C1C;}
.p-build{text-align:center; font-size:12px; color:#9AA3B2; margin-top:36px;}

/* ---- test builder (Step 4) ---- */
.p-wide{max-width:1000px;}
.p-back{display:inline-block; font-size:14px; font-weight:600; color:var(--signal); margin-bottom:6px;}
.p-back:hover{text-decoration:underline;}
.p-seg{display:inline-flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; background:#fff;}
.p-seg label{margin:0; padding:9px 18px; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; border-right:1px solid var(--line);}
.p-seg label:last-child{border-right:none;}
.p-seg input{position:absolute; opacity:0; pointer-events:none;}
.p-seg label.on{background:var(--signal); color:#fff;}
.p-check{display:flex; align-items:center; gap:10px; font-size:15px; margin:6px 0 2px; cursor:pointer;}
.p-check input{width:18px; height:18px; accent-color:var(--signal);}
.p-grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
.p-hint{font-size:13px; color:var(--ink-soft); margin:6px 0 0;}
.p-locked{opacity:.75;}
.q-card{border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:12px; background:#fff;}
.q-card.open{border-color:#B8C4E6; box-shadow:0 6px 18px -10px rgba(30,58,138,.35);}
.q-head{display:flex; align-items:center; gap:12px; padding:14px 16px; flex-wrap:wrap;}
.q-num{font-weight:700; color:var(--signal); min-width:34px;}
.q-type{font-size:12.5px; font-weight:600; color:var(--ink-soft); background:#F1F3F8; border-radius:100px; padding:4px 10px; white-space:nowrap;}
.q-snippet{flex:1; min-width:140px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.q-marks{font-size:13px; color:var(--ink-soft); white-space:nowrap;}
.q-body{padding:4px 16px 18px; border-top:1px solid var(--line);}
.q-body .p-field{margin-top:14px;}
.q-options{margin-top:6px;}
.q-option{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.q-option .p-input{flex:1;}
.q-letter{width:22px; text-align:center; font-weight:700; color:var(--ink-soft);}
.q-option input[type=radio], .q-option input[type=checkbox]{width:18px; height:18px; accent-color:var(--signal);}
.q-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);}
.q-image img{max-width:100%; max-height:240px; border:1px solid var(--line); border-radius:var(--radius-s); display:block; margin-bottom:8px;}
.q-note{background:#F4F6FA; border-radius:var(--radius-s); padding:10px 14px; font-size:14px; color:var(--ink-soft); margin-top:14px;}
.p-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
.p-toolbar select{max-width:260px;}
.p-modal{position:fixed; inset:0; background:rgba(2,24,56,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;}
.p-modal[hidden]{display:none;}
.p-modal-card{background:#fff; border-radius:var(--radius-l); max-width:820px; width:100%; max-height:88vh; overflow:auto; padding:26px;}
.p-modal-card h2{margin:0 0 6px;}
.p-sticky{position:sticky; bottom:0; background:rgba(248,249,251,.96); border-top:1px solid var(--line); padding:12px 0; margin-top:8px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
@media (max-width:640px){ .p-grid2{grid-template-columns:1fr;} .q-snippet{flex-basis:100%; order:5;} }

.p-btn-sm{font-size:13px; padding:6px 14px;}
a.p-btn{text-decoration:none;}

/* ---- rich text, students, exam (Step 5) ---- */
.ta-left{text-align:left;} .ta-center{text-align:center;} .ta-right{text-align:right;} .ta-justify{text-align:justify;}
.rt-content img{max-width:100%; height:auto; vertical-align:middle;}
.rt-content p, .rt-content div{margin:0 0 .6em;}
.rt-content ul, .rt-content ol{margin:0 0 .6em; padding-left:1.4em;}
.rt-bar{display:flex; gap:4px; flex-wrap:wrap; padding:6px; border:1px solid var(--line); border-bottom:none; border-radius:var(--radius-s) var(--radius-s) 0 0; background:#F4F6FA;}
.rt-bar button{min-width:34px; height:32px; border:1px solid transparent; background:transparent; border-radius:8px; font-family:inherit; font-size:14px; cursor:pointer; color:var(--ink);}
.rt-bar button:hover{background:#fff; border-color:var(--line);}
.rt-bar .rt-sep{width:1px; background:var(--line); margin:4px 4px;}
.rt-editor{min-height:110px; padding:12px 14px; border:1px solid var(--line); border-radius:0 0 var(--radius-s) var(--radius-s); background:#fff; font-size:15px; line-height:1.55; outline:none;}
.rt-editor:focus{border-color:var(--signal);}
.rt-editor[contenteditable=false]{background:#F8F9FB;}
.p-linkbox{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.p-linkbox input{flex:1; min-width:220px;}
.p-chip.bad{background:#FCEEEE; color:#8A1C1C;}
.x-bar{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line);}
.x-bar-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; flex-wrap:wrap;}
.x-timer{font-variant-numeric:tabular-nums; font-weight:700; font-size:20px; color:var(--signal);}
.x-timer.warn{color:#B45309;} .x-timer.crit{color:#B3261E;}
.x-q{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:20px; margin-bottom:16px;}
.x-qhead{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
.x-opt{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-s); margin-bottom:8px; cursor:pointer;}
.x-opt:hover{border-color:#B8C4E6;}
.x-opt input{margin-top:3px; width:18px; height:18px; accent-color:var(--signal);}
.x-save{font-size:13px; color:var(--ink-soft);}

/* ---- one question at a time + consent (Step 6) ---- */
.x-layout{display:grid; grid-template-columns:210px 1fr; gap:20px; align-items:start;}
.x-nav{position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:14px;}
.x-nav h3{margin:0 0 10px; font-size:13px; color:var(--ink-soft); font-weight:600;}
.x-nav-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.x-nav button{height:40px; border:1px solid var(--line); background:#fff; border-radius:10px; font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer;}
.x-nav button.answered{background:var(--signal); border-color:var(--signal); color:#fff;}
.x-nav button.current{outline:3px solid #B8C4E6; outline-offset:1px; border-color:var(--signal);}
.x-legend{font-size:12.5px; color:var(--ink-soft); margin:12px 0 0; line-height:1.6;}
.x-step{display:flex; justify-content:space-between; gap:12px; margin-top:18px;}
.x-consent{background:#F4F6FA; border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 18px; margin-top:18px;}
.x-consent ul{margin:8px 0 12px; padding-left:20px; color:var(--ink-soft); font-size:14.5px; line-height:1.6;}
.x-flash{animation:xflash 0.7s ease-in-out 3;}
@keyframes xflash{0%,100%{background:#fff;} 50%{background:#FDE7B8;}}
.x-banner{background:#FDF1DC; border:1px solid #F0D7A0; color:#6B4300; border-radius:var(--radius-m); padding:12px 16px; margin:0 0 14px; font-size:14.5px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (max-width:820px){
  .x-layout{grid-template-columns:1fr;}
  .x-nav{position:static; padding:10px; overflow-x:auto;}
  .x-nav h3, .x-legend{display:none;}
  .x-nav-grid{display:flex; gap:8px;}
  .x-nav button{min-width:42px;}
}
th.sortable{cursor:pointer; user-select:none;}
th.sortable:hover{color:var(--ink);}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px 18px;}
.stat-grid dt{font-size:12.5px; color:var(--ink-soft); font-weight:600; margin:0;}
.stat-grid dd{font-size:18px; font-weight:700; margin:2px 0 0; color:var(--ink);}
.snap-grid{display:flex; flex-wrap:wrap; gap:10px;}
.snap-grid figure{margin:0; font-size:12px; color:var(--ink-soft);}
.snap-grid img{width:160px; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block;}
.usage-bar{height:10px; background:#EEF1F5; border-radius:99px; overflow:hidden; margin:6px 0 8px;}
.usage-bar > div{height:100%; background:var(--signal); border-radius:99px;}
.usage-bar.warn > div{background:#D98A00;} .usage-bar.full > div{background:#B3261E;}
.tier{border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px; margin-bottom:10px; display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap;}
.tier strong{display:block;} .tier span{color:var(--ink-soft); font-size:14px;}

/* release choices on the test page */
.rel-boxes{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:12px;}
.rel-boxes[hidden]{display:none;}
.rel-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m,12px); padding:14px; display:flex; flex-direction:column; gap:8px;}
.rel-box span{font-size:14px; color:var(--ink-soft); flex:1; line-height:1.45;}
.rel-box button{align-self:flex-start;}

/* ---- equations, add-question footer, text size (step 11) ---- */
.rt-math{display:inline; font-size:1em;}
#qBox .rt-content{overflow-x:auto;}
.x-sublist{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.rt-editor .rt-math{cursor:pointer; padding:0 3px; border-radius:6px; background:#EEF2FB; user-select:all;}
.rt-editor .rt-math:hover{background:#DDE6FA;}
.q-add-bottom{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
.q-add-bottom select{max-width:260px;}
.eq-overlay{position:fixed; inset:0; background:rgba(2,24,56,.5); display:flex; align-items:center; justify-content:center; padding:16px; z-index:200;}
.eq-card{background:#fff; border-radius:var(--radius-l); width:100%; max-width:720px; max-height:92vh; overflow:auto; padding:22px;}
.eq-card h2{margin:0 0 4px; font-size:20px;}
.eq-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 8px;}
.eq-tabs button{border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 14px; font-family:inherit; font-size:14px; cursor:pointer; color:var(--ink);}
.eq-tabs button[aria-pressed=true]{background:var(--signal); border-color:var(--signal); color:#fff;}
.eq-keys{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; margin-bottom:12px;}
.eq-keys button{min-height:44px; border:1px solid var(--line); background:#F8F9FB; border-radius:10px; cursor:pointer; font-family:inherit; font-size:15px; color:var(--ink); padding:4px;}
.eq-keys button:hover{background:#fff; border-color:var(--signal);}
.eq-src{width:100%; min-height:72px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-s); resize:vertical; box-sizing:border-box;}
.eq-src:focus{border-color:var(--signal); outline:none;}
.eq-prev{min-height:64px; display:flex; align-items:center; justify-content:center; padding:12px; margin:10px 0; border:1px dashed var(--line); border-radius:var(--radius-s); background:#fff; font-size:22px; overflow-x:auto;}
.eq-err{color:#B3261E; font-size:13px; min-height:18px; margin:0 0 8px;}
.eq-help{font-size:13px; color:var(--muted,#5b6783); margin:0 0 10px;}
.q-option .eq-btn{flex:none;}
.q-opt-prev{font-size:15px; margin:-2px 0 8px 66px; color:var(--ink);}
.x-zoom{display:flex; gap:4px; align-items:center;}
.x-zoom button{min-width:38px;}
.x-lightbox{position:fixed; inset:0; background:rgba(2,24,56,.88); z-index:300; overflow:auto; padding:16px; cursor:zoom-out; text-align:center;}
.x-lightbox img{width:max(100%,900px); max-width:none; height:auto; background:#fff; border-radius:8px;}
#qBox .x-q{font-size:calc(16px * var(--zs,1));}
#qBox .x-q .p-input, #qBox .x-q .p-textarea, #qBox .x-q .x-opt{font-size:inherit;}
#qBox .x-q .rt-content img{cursor:zoom-in;}

/* ---- step 12: the four-step test workflow ---- */
.wf{margin:18px 0 26px;}
.wf ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden;}
.wf li{position:relative; border-right:1px solid var(--line);}
.wf li:last-child{border-right:none;}
.wf button{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; height:100%; padding:14px 16px; cursor:pointer; font-family:inherit;}
.wf button:hover:not(:disabled){background:#FAFBFE;}
.wf button:focus-visible{outline:3px solid #B8C4E6; outline-offset:-3px;}
.wf button:disabled{cursor:not-allowed; opacity:.55;}
.wf-n{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:var(--ink-soft); background:var(--mist); border:2px solid transparent;}
.wf-t{display:flex; flex-direction:column; min-width:0; line-height:1.25;}
.wf-t strong{font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wf-t small{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}
.wf li.on{background:#F3F6FD;}
.wf li.on::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--signal);}
.wf li.on .wf-n{background:var(--signal); color:#fff;}
.wf li.done .wf-n{background:#E3F4EA; color:#17653A; font-size:0;}
.wf li.done .wf-n::before{content:"\2713"; font-size:16px;}
.wf li.live .wf-t small{color:#17653A; font-weight:600;}
.wf li.live:not(.on) .wf-n{border-color:#3BB273;}
.wf-head{margin:0 0 18px;}
.wf-kicker{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--signal);}
.wf-head h2{font-size:24px; letter-spacing:-0.01em; margin:4px 0 6px;}
.wf-head p{margin:0; color:var(--ink-soft); max-width:680px;}
.wf-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 10px;}
.q-save-row{display:flex; flex-direction:column; align-items:center; gap:6px; margin:18px 0 4px; padding-top:16px; border-top:1px dashed var(--line);}
.q-save-btn{min-width:200px; padding:12px 28px; font-size:15px;}
.q-expl-prev{font-size:15px; margin:8px 0 0; padding:8px 12px; background:#F8F9FB; border-radius:var(--radius-s); white-space:pre-wrap;}
.wf-checks{list-style:none; margin:0; padding:0;}
.wf-checks li{position:relative; padding:8px 0 8px 30px; font-size:15px; border-bottom:1px solid var(--mist);}
.wf-checks li:last-child{border-bottom:none;}
.wf-checks li::before{position:absolute; left:0; top:8px; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.wf-checks li.ok::before{content:"\2713"; background:#E3F4EA; color:#17653A;}
.wf-checks li.warn::before{content:"!"; background:#FDF1DC; color:#8A5A00;}
.wf-checks li.bad::before{content:"\00D7"; background:#FCEEEE; color:#8A1C1C; font-size:15px;}
.wf-checks li.bad{color:#8A1C1C; font-weight:600;}
.wf-thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;}
.wf-thumb{all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 14px; cursor:pointer; min-height:178px; font-family:inherit; transition:border-color .15s, box-shadow .15s, transform .15s;}
.wf-thumb:hover, .wf-thumb:focus-visible{border-color:#B8C4E6; box-shadow:0 8px 20px -12px rgba(30,58,138,.45); transform:translateY(-1px);}
.wf-thumb:focus-visible{outline:3px solid #B8C4E6;}
.wf-thumb.bad{border-color:#F2C6C6; background:#FFFBFB;}
.wf-thumb-head{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft);}
.wf-thumb-head strong{color:var(--signal); font-size:15px;}
.wf-thumb-type{font-size:12px; font-weight:600; color:var(--ink-soft); background:#F1F3F8; border-radius:100px; padding:2px 9px; align-self:flex-start;}
.wf-thumb-body{flex:1; font-size:13px; line-height:1.45; color:var(--ink); max-height:84px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(#000 60%, transparent); mask-image:linear-gradient(#000 60%, transparent);}
.wf-thumb-body img{max-height:60px; width:auto;}
.wf-thumb-foot{display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); border-top:1px solid var(--mist); padding-top:6px;}
.wf-thumb.bad .wf-thumb-foot > span:first-child{color:#8A1C1C; font-weight:600;}
.wf-tag{font-size:11.5px; font-weight:600; color:var(--signal); background:#E9EEF9; border-radius:100px; padding:2px 8px;}
.wf-opt.right{border-color:#9FD8B5; background:#F3FBF6;}
.wf-key{margin-top:12px; padding:10px 12px; background:#F3FBF6; border:1px solid #9FD8B5; border-radius:var(--radius-s);}
.wf-expl{margin-top:4px; padding:14px 16px; background:#F4F6FA; border-radius:var(--radius-m); font-size:15px;}
.wf-pubbar{position:sticky; bottom:0; z-index:30; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px -12px 0; padding:14px 16px; background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:var(--radius-l) var(--radius-l) 0 0; box-shadow:0 -10px 28px -18px rgba(2,24,56,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.wf-pubtext{flex:1; min-width:220px; display:flex; flex-direction:column; font-size:14px; color:var(--ink-soft);}
.wf-pubtext strong{font-size:16px; color:var(--ink);}
.wf-pubbtn{padding:13px 26px; font-size:15.5px;}
.wf-pubbtn:disabled{opacity:.45; cursor:not-allowed;}
@media (max-width:760px){
  .wf ol{grid-template-columns:1fr 1fr;}
  .wf li:nth-child(2){border-right:none;}
  .wf li:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .wf button{padding:12px;}
  .wf-pubbar{margin:16px -6px 0;}
  .wf-pubbtn{width:100%;}
}
.p-btn:disabled{opacity:.45; cursor:not-allowed;}
.p-hint.bad-text{color:#8A1C1C;}
.rt-editor.rt-small{min-height:70px;}
/* v12.4: released questions on the student's result page */
.rv-q{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:18px 20px; margin:0 0 14px;}
.rv-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; font-size:14px; color:var(--ink-soft);}
.rv-head strong{color:var(--signal); font-size:15px;}
.rv-text{font-size:16px; margin:0 0 12px;}
.rv-opt{display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-s); margin:0 0 6px; font-size:15px;}
.rv-opt.right{border-color:#9FD8B5; background:#F3FBF6;}
.rv-opt.wrongpick{border-color:#F2C6C6; background:#FFF7F7;}
.rv-opt .tag{margin-left:auto; font-size:12.5px; font-weight:600; white-space:nowrap;}
.rv-opt.right .tag{color:#17653A;} .rv-opt.wrongpick .tag{color:#8A1C1C;}
.rv-ans{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:15px; margin:4px 0 0;}
.rv-ans dt{color:var(--ink-soft); font-weight:600;} .rv-ans dd{margin:0; white-space:pre-wrap;}
/* v12.4: test maker top menu and profile photos */
.p-user-maker{gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.p-nav{display:flex; gap:4px; margin-right:6px;}
.p-nav a{padding:8px 12px; border-radius:100px; font-size:14px; font-weight:600; color:var(--ink-soft); white-space:nowrap;}
.p-nav a:hover{background:var(--mist); color:var(--ink);}
.p-nav a.on{background:#E9EEF9; color:var(--signal);}
.p-me{display:flex; align-items:center; gap:8px; min-width:0;}
.p-me:hover .p-who{text-decoration:underline;}
.p-av{display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; flex:none; background:#E9EEF9; color:var(--signal); font-weight:700; letter-spacing:.02em;}
.p-av img{width:100%; height:100%; object-fit:cover; display:block;}
.av-edit{display:flex; align-items:center; gap:16px; margin:0 0 18px; flex-wrap:wrap;}
@media (max-width:900px){
  .p-header-row{flex-wrap:wrap;}
  .p-user-maker{width:100%; justify-content:space-between;}
  .p-nav{order:5; width:100%; overflow-x:auto; margin:4px 0 0;}
  .p-me .p-who{max-width:140px;}
}