/* Assessment Studio — native Kandeur visual language. */

.topbar__right{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
}

.topbar__tools{
  display:flex;
  align-items:center;
  gap:22px;
  white-space:nowrap;
}

.topbar__tools button{
  position:relative;
  padding:8px 0;
  border:0;
  background:transparent;
  color:var(--muted);
  font:800 0.84rem/1 var(--sans);
}

.topbar__tools button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  height:2px;
  border-radius:999px;
  background:var(--teal);
  opacity:0;
  transform:scaleX(0.5);
  transition:opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.topbar__tools button:hover,
.topbar__tools button.is-active{
  color:var(--ink);
}

.topbar__tools button:hover::after,
.topbar__tools button.is-active::after{
  opacity:1;
  transform:scaleX(1);
}

.studio-button:active,
.studio-text-button:active{
  transform:translateY(1px);
}

.studio-page,
.project-page,
.exam-shell{
  --studio-accent:var(--teal);
  --studio-accent-soft:var(--teal-soft);
  --studio-accent-border:#d4c4ef;
  color:var(--ink);
  font-family:var(--sans);
  animation:studio-in 0.42s var(--ease) both;
}

.studio-page{
  display:grid;
  gap:22px;
}

.studio-page--narrow{
  width:min(100%, 1120px);
  margin:0 auto;
}

.studio-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1.18fr) minmax(250px, 0.42fr);
  gap:34px;
  align-items:end;
  padding:38px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.86);
  box-shadow:var(--shadow-sm);
}

.studio-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-90px;
  bottom:-130px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(102,48,201,0.12), rgba(102,48,201,0) 70%);
  pointer-events:none;
}

.studio-hero__copy{
  max-width:780px;
}

.studio-kicker{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  margin:0 0 14px;
  padding:0 12px;
  border:1px solid rgba(102,48,201,0.1);
  border-radius:999px;
  background:var(--studio-accent-soft);
  color:var(--studio-accent);
  font:800 0.78rem/1 var(--sans);
  letter-spacing:0;
  text-transform:none;
}

.studio-hero h1,
.project-top h1,
.exam-ticket h1,
.exam-result h1{
  margin:0;
  color:var(--ink);
  font:650 clamp(2.25rem, 4vw, 3.85rem)/1.02 var(--serif);
  letter-spacing:0;
  text-wrap:balance;
}

.studio-hero h1{
  max-width:17ch;
}

.studio-hero p{
  max-width:680px;
  margin:18px 0 0;
  color:var(--ink-soft);
  font-size:1.06rem;
  line-height:1.65;
}

.studio-hero__actions{
  display:flex;
  justify-content:flex-end;
  padding-bottom:4px;
}

.studio-button{
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:800 0.88rem/1 var(--sans);
  box-shadow:none;
  transition:transform 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.studio-button:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-sm);
}

.studio-button--primary{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
  box-shadow:0 10px 24px rgba(29,19,51,0.15);
}

.studio-button--primary:hover{
  border-color:var(--studio-accent);
  background:var(--studio-accent);
}

.studio-button--quiet{
  background:rgba(255,255,255,0.86);
}

.studio-button--danger{
  border-color:#e3c78f;
  background:#fff8e8;
  color:#80520e;
}

.studio-button--large{
  min-height:52px;
  padding:0 24px;
}

.studio-text-button{
  width:max-content;
  padding:5px 0;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  color:var(--studio-accent);
  font:800 0.82rem/1.25 var(--sans);
}

.studio-text-button--danger{
  color:#9a6214;
}

.studio-meta{
  color:var(--muted);
  font:700 0.78rem/1 var(--sans);
}

.studio-section{
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.86);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.studio-section__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.studio-section__head h2,
.brief-block h2,
.history-sheet h2,
.export-sheet h2,
.mock-readiness h2,
.mock-empty-grid h2{
  margin:0;
  color:var(--ink);
  font:650 clamp(1.5rem, 2.5vw, 2.15rem)/1.08 var(--serif);
  letter-spacing:0;
  text-wrap:balance;
}

.studio-principles{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  padding:18px;
  border:1px solid #ddd2ed;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, rgba(226,242,242,0.96), rgba(239,248,246,0.92));
  box-shadow:var(--shadow-sm);
}

.studio-principles > div{
  min-height:154px;
  padding:20px;
  border:1px solid rgba(174,197,191,0.68);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.74);
}

.studio-principles span,
.setup-sheet__number{
  color:var(--studio-accent);
  font:800 0.76rem/1 var(--sans);
}

.studio-principles strong{
  display:block;
  margin:26px 0 7px;
  color:var(--ink);
  font-size:1rem;
}

.studio-principles p{
  margin:0;
  color:var(--ink-soft);
  font-size:0.88rem;
  line-height:1.5;
}

.project-list{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
}

.project-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:20px;
  align-items:center;
  min-height:92px;
  padding:18px 20px;
  border-top:1px solid var(--line);
}

.project-row:first-child{
  border-top:0;
}

.project-row:hover{
  background:var(--surface-soft);
}

.project-row__main{
  display:grid;
  gap:4px;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
}

.project-row__main strong{
  color:var(--ink);
  font:650 1.18rem/1.2 var(--serif);
  transition:color 0.22s var(--ease);
}

.project-row__main:hover strong{
  color:var(--studio-accent);
}

.project-row__main > span:last-child,
.project-row__subject,
.project-row__side{
  color:var(--muted);
  font-size:0.8rem;
}

.project-row__subject{
  color:var(--studio-accent);
  font-weight:800;
}

.project-row__side{
  display:grid;
  justify-items:end;
  gap:8px;
}

.studio-empty{
  display:grid;
  justify-items:start;
  gap:10px;
  padding:42px 8px 34px;
}

.studio-empty--compact{
  padding:22px;
}

.studio-empty__mark{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid var(--studio-accent-border);
  border-radius:18px;
  background:var(--studio-accent-soft);
  color:var(--studio-accent);
  font:800 0.72rem/1 var(--sans);
}

.studio-empty h2{
  margin:10px 0 0;
  color:var(--ink);
  font:650 1.55rem/1.1 var(--serif);
}

.studio-empty p{
  max-width:570px;
  margin:0 0 10px;
  color:var(--ink-soft);
}

.studio-back{
  width:max-content;
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:800 0.82rem/1 var(--sans);
  box-shadow:var(--shadow-sm);
}

.studio-back::before{
  content:"←";
  margin-right:7px;
}

.studio-alert{
  display:grid;
  grid-template-columns:170px minmax(0, 1fr);
  gap:18px;
  padding:16px 19px;
  border:1px solid #b9dccd;
  border-radius:var(--radius-md);
  background:#edf8f2;
  color:#175c3d;
  font-size:0.86rem;
}

.studio-alert--error{
  border-color:#e4bdb6;
  background:#fff5f3;
  color:#8e3128;
}

.studio-alert--warn{
  border-color:#e8cf9d;
  background:#fff8e8;
  color:#74501a;
}

.setup-sheet{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.88);
  box-shadow:var(--shadow-sm);
}

.setup-sheet__number{
  display:flex;
  justify-content:center;
  padding:38px 20px;
  border-right:1px solid var(--line);
  background:var(--studio-accent-soft);
}

.setup-sheet__body{
  padding:34px;
}

.studio-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.studio-field{
  display:grid;
  gap:8px;
  color:var(--ink);
  font-size:0.84rem;
  font-weight:800;
}

.studio-field--wide{
  grid-column:1 / -1;
}

.studio-field span small{
  margin-left:5px;
  color:var(--muted);
  font-weight:600;
}

.studio-field input,
.studio-field select,
.studio-textarea{
  width:100%;
  min-height:50px;
  padding:12px 15px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:#fff;
  color:var(--ink);
  font:600 0.96rem/1.45 var(--sans);
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.studio-field input:focus,
.studio-field select:focus,
.studio-textarea:focus,
.studio-field--editor textarea:focus{
  outline:0;
  border-color:var(--studio-accent);
  box-shadow:0 0 0 5px rgba(102,48,201,0.14);
}

.studio-textarea--source{
  min-height:220px;
  resize:vertical;
}

.sba-dropzone{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:34px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--studio-accent-soft), rgba(248,251,250,0.9));
  text-align:center;
  cursor:pointer;
  transition:transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.sba-dropzone:hover{
  transform:translateY(-1px);
  border-color:var(--studio-accent);
  box-shadow:var(--shadow-sm);
}

.sba-dropzone input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.sba-dropzone__mark{
  display:grid;
  place-items:center;
  width:50px;
  height:58px;
  margin-bottom:6px;
  border:1px solid var(--studio-accent-border);
  border-radius:16px;
  background:#fff;
  color:var(--studio-accent);
  font:800 0.7rem/1 var(--sans);
  box-shadow:0 10px 24px rgba(102,48,201,0.09);
}

.sba-dropzone > span:last-child{
  color:var(--muted);
  font-size:0.8rem;
}

.studio-divider{
  display:flex;
  align-items:center;
  gap:15px;
  margin:24px 0;
  color:var(--muted);
  font:800 0.74rem/1 var(--sans);
}

.studio-divider::before,
.studio-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}

.setup-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.project-top{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:30px;
  align-items:end;
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.86);
  box-shadow:var(--shadow-sm);
}

.project-top h1{
  max-width:900px;
  font-size:clamp(2rem, 3.5vw, 3.25rem);
}

.project-top .studio-kicker{
  margin-top:20px;
}

.project-top__status{
  display:grid;
  justify-items:end;
  gap:7px;
  color:var(--muted);
  font-size:0.78rem;
}

.project-top__status strong{
  color:var(--ink);
  font-weight:800;
}

.project-tabs{
  width:max-content;
  max-width:100%;
  display:flex;
  gap:5px;
  margin:14px 0 0;
  padding:5px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(248,251,250,0.92);
}

.project-tabs button{
  min-height:42px;
  padding:0 17px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font:800 0.84rem/1 var(--sans);
  white-space:nowrap;
}

.project-tabs button:hover{
  background:#fff;
  color:var(--ink);
}

.project-tabs button.is-active{
  background:var(--ink);
  color:#fff;
  box-shadow:0 10px 24px rgba(29,19,51,0.15);
}

.project-body{
  padding:22px 0 0;
}

.brief-grid{
  display:grid;
  grid-template-columns:minmax(260px, 0.66fr) minmax(0, 1.55fr);
  gap:22px;
  align-items:start;
}

.brief-lead{
  position:sticky;
  top:114px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(231,246,247,0.92), rgba(255,255,255,0.94));
  color:var(--ink-soft);
  box-shadow:var(--shadow-sm);
}

.brief-lead h2{
  margin:0;
  color:var(--ink);
  font:650 2rem/1.05 var(--serif);
}

.brief-lead p{
  color:var(--ink-soft);
  line-height:1.65;
}

.brief-lead dl{
  margin:22px 0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,0.74);
}

.brief-lead dl div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  font-size:0.8rem;
}

.brief-lead dl div:first-child{
  border-top:0;
}

.brief-lead dt{
  color:var(--muted);
}

.brief-lead dd{
  margin:0;
  color:var(--ink);
  font-weight:800;
  text-align:right;
}

.brief-main{
  display:grid;
  gap:18px;
}

.brief-block{
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.88);
  box-shadow:var(--shadow-sm);
}

.brief-block h3{
  margin:0 0 17px;
  color:var(--ink);
  font:650 1.22rem/1.15 var(--serif);
}

.criteria-list{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
}

.criterion-row{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) 90px;
  gap:16px;
  padding:18px;
  border-top:1px solid var(--line);
}

.criterion-row:first-child{
  border-top:0;
}

.criterion-row > span{
  color:var(--studio-accent);
  font:800 0.72rem/1.5 var(--sans);
}

.criterion-row strong{
  display:block;
  color:var(--ink);
}

.criterion-row p{
  margin:5px 0;
  color:var(--ink-soft);
  font-size:0.88rem;
}

.criterion-row small{
  color:var(--muted);
}

.criterion-row > b{
  text-align:right;
  color:var(--ink-soft);
  font-size:0.76rem;
}

.brief-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.brief-block--questions{
  background:linear-gradient(180deg, var(--studio-accent-soft), rgba(255,255,255,0.94));
}

.studio-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.studio-list li{
  position:relative;
  padding-left:18px;
  color:var(--ink-soft);
  font-size:0.9rem;
  line-height:1.5;
}

.studio-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.58em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--studio-accent);
}

.studio-muted{
  margin:0;
  color:var(--muted);
  font-size:0.87rem;
}

.draft-studio{
  display:grid;
  grid-template-columns:238px minmax(430px, 1fr) minmax(280px, 0.72fr);
  min-height:680px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.draft-nav,
.draft-feedback{
  background:var(--surface-soft);
}

.draft-nav{
  padding:22px;
  border-right:1px solid var(--line);
}

.draft-nav__head{
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:18px;
}

.draft-nav__head strong{
  color:var(--ink-soft);
  font-size:0.76rem;
}

.draft-nav__list{
  display:grid;
  gap:7px;
  margin-bottom:17px;
}

.draft-nav__list button{
  display:grid;
  grid-template-columns:24px minmax(0, 1fr);
  gap:8px;
  padding:13px 11px;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
  color:var(--ink-soft);
  text-align:left;
}

.draft-nav__list button:hover{
  border-color:var(--line);
  background:#fff;
}

.draft-nav__list button.is-active{
  border-color:var(--studio-accent-border);
  background:var(--studio-accent-soft);
  color:var(--ink);
}

.draft-nav__list button > span{
  color:var(--studio-accent);
  font:800 0.7rem/1.5 var(--sans);
}

.draft-nav__list button strong{
  display:block;
  font-size:0.82rem;
  line-height:1.25;
}

.draft-nav__list button small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:0.69rem;
}

.draft-editor{
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  padding:28px;
  background:#fff;
}

.draft-editor__head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:20px;
  align-items:end;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.draft-editor__head > div{
  display:flex;
  gap:10px;
  padding-bottom:10px;
  color:var(--muted);
  font-size:0.74rem;
  font-weight:700;
}

.draft-editor__head > div span{
  padding:6px 10px;
  border-radius:999px;
  background:var(--surface-soft);
}

.studio-field--editor{
  min-height:400px;
  margin-top:20px;
}

.studio-field--editor textarea{
  width:100%;
  height:100%;
  min-height:400px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#faf8fe;
  color:var(--ink);
  font:500 1.02rem/1.75 var(--sans);
  resize:vertical;
}

.draft-purpose{
  display:grid;
  grid-template-columns:76px minmax(0, 1fr);
  gap:16px;
  margin-top:16px;
  padding:14px 16px;
  border-radius:18px;
  background:var(--studio-accent-soft);
  color:var(--ink-soft);
  font-size:0.8rem;
}

.draft-purpose strong{
  color:var(--studio-accent);
}

.draft-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.draft-actions > span{
  max-width:330px;
  color:var(--muted);
  font-size:0.75rem;
}

.draft-feedback{
  padding:22px;
  border-left:1px solid var(--line);
  overflow:auto;
}

.draft-feedback__section{
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}

.draft-criterion{
  display:grid;
  gap:4px;
  margin-top:8px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  font-size:0.8rem;
}

.draft-criterion span{
  color:var(--ink-soft);
  line-height:1.4;
}

.feedback-empty{
  padding:20px 0;
  color:var(--ink-soft);
}

.feedback-empty p{
  font-size:0.82rem;
}

.teacher-note{
  padding:18px;
  border:1px solid var(--studio-accent-border);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--studio-accent-soft), #fff);
  color:var(--ink);
}

.teacher-note__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:0.7rem;
}

.teacher-note__head strong{
  color:var(--studio-accent);
}

.teacher-note p{
  margin:15px 0 0;
  color:var(--ink-soft);
  font-size:0.84rem;
  line-height:1.55;
}

.feedback-group{
  padding-top:18px;
}

.feedback-group > strong{
  display:block;
  margin-bottom:9px;
  color:var(--ink);
  font-size:0.8rem;
}

.feedback-group--priority > strong{
  color:#80520e;
}

.criterion-check{
  margin-top:10px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.criterion-check__status{
  color:var(--studio-accent);
  font:800 0.68rem/1 var(--sans);
}

.criterion-check p{
  margin:6px 0;
  font-size:0.8rem;
}

.criterion-check small{
  color:var(--muted);
}

.history-sheet{
  padding:30px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.88);
  box-shadow:var(--shadow-sm);
}

.history-list{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}

.history-entry{
  display:grid;
  grid-template-columns:76px minmax(0, 1fr);
  border-top:1px solid var(--line);
  background:#fff;
}

.history-entry:first-child{
  border-top:0;
}

.history-entry__rail{
  padding:24px;
  border-right:1px solid var(--line);
  background:var(--studio-accent-soft);
}

.history-entry__rail span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid var(--studio-accent-border);
  border-radius:50%;
  background:#fff;
  color:var(--studio-accent);
  font:800 0.68rem/1 var(--sans);
}

.history-entry__body{
  padding:23px;
}

.history-entry__body > div:first-child{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--ink-soft);
  font-size:0.8rem;
}

.history-entry__body > strong{
  display:block;
  margin-top:12px;
  color:var(--studio-accent);
  font-size:0.72rem;
}

.history-entry__body > p{
  color:var(--ink-soft);
}

.history-entry details{
  margin-top:14px;
}

.history-entry summary{
  color:var(--ink);
  font-weight:800;
  font-size:0.78rem;
  cursor:pointer;
}

.history-entry__content{
  margin-top:12px;
  padding:18px;
  border-radius:18px;
  background:var(--surface-soft);
  white-space:pre-wrap;
  font-size:0.84rem;
  line-height:1.6;
}

.export-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 0.66fr);
  gap:22px;
}

.export-sheet{
  padding:34px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.88);
  box-shadow:var(--shadow-sm);
}

.export-sheet > p{
  max-width:680px;
  color:var(--ink-soft);
  line-height:1.65;
}

.export-summary{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:24px 0;
}

.export-summary > div{
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface-soft);
}

.export-summary strong{
  display:block;
  color:var(--ink);
  font:800 1.5rem/1 var(--sans);
  font-variant-numeric:tabular-nums;
}

.export-summary span{
  color:var(--muted);
  font-size:0.74rem;
}

.studio-check{
  display:grid;
  grid-template-columns:20px minmax(0, 1fr);
  gap:12px;
  margin:22px 0;
  padding:17px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-soft);
  cursor:pointer;
}

.studio-check input{
  margin-top:3px;
  accent-color:var(--studio-accent);
}

.studio-check strong,
.studio-check small{
  display:block;
}

.studio-check small{
  margin-top:3px;
  color:var(--muted);
}

.export-note{
  font-size:0.76rem;
}

.export-preview{
  display:grid;
  place-items:start center;
  padding:32px;
  border:1px solid #ddd2ed;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, #e9e0f8, #f4effc);
  box-shadow:var(--shadow-sm);
}

.paper-preview{
  width:min(100%, 390px);
  min-height:520px;
  padding:48px 36px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 24px 60px rgba(29,19,51,0.15);
}

.paper-preview > span{
  color:var(--studio-accent);
  font:800 0.72rem/1 var(--sans);
}

.paper-preview h3{
  margin:48px 0 15px;
  color:var(--ink);
  font:650 2rem/1.05 var(--serif);
}

.paper-preview p{
  color:var(--ink-soft);
}

.paper-preview div{
  height:1px;
  margin:52px 0 24px;
  background:var(--line);
}

.paper-preview > strong{
  display:block;
  margin:12px 0;
  color:var(--ink);
  font-size:0.8rem;
}

.mock-readiness{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:34px;
  align-items:center;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.88);
  box-shadow:var(--shadow-sm);
}

.mock-readiness__dial{
  display:grid;
  align-content:space-between;
  min-height:170px;
  padding:24px;
  border:1px solid var(--studio-accent-border);
  border-radius:var(--radius-lg);
  background:var(--studio-accent-soft);
  color:var(--ink);
}

.mock-readiness__dial span{
  color:var(--studio-accent);
  font:800 0.72rem/1 var(--sans);
}

.mock-readiness__dial strong{
  font:650 1.35rem/1.1 var(--serif);
}

.mock-readiness__copy p{
  max-width:700px;
  color:var(--ink-soft);
}

.mock-list{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
}

.mock-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:20px;
  align-items:center;
  padding:20px;
  border-top:1px solid var(--line);
}

.mock-row:first-child{
  border-top:0;
}

.mock-row > div{
  display:grid;
  gap:5px;
}

.mock-row span{
  color:var(--studio-accent);
  font-size:0.74rem;
  font-weight:800;
}

.mock-row strong{
  font:650 1.15rem/1.2 var(--serif);
}

.mock-row small{
  color:var(--muted);
}

.mock-empty-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(280px, 0.65fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.88);
  box-shadow:var(--shadow-sm);
}

.mock-empty-main,
.mock-contract{
  padding:32px;
}

.mock-empty-main{
  min-height:270px;
  border-right:1px solid var(--line);
}

.mock-empty-main p{
  max-width:670px;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.6;
}

.mock-empty-main code{
  border-radius:8px;
  background:var(--studio-accent-soft);
  color:var(--studio-accent);
}

.mock-contract{
  background:var(--surface-soft);
}

.mock-contract ol{
  display:grid;
  gap:13px;
  margin:22px 0 0;
  padding-left:20px;
  color:var(--ink-soft);
  font-size:0.87rem;
}

.exam-condition-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.72);
}

.exam-condition-strip > div{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
}

.exam-condition-strip span{
  color:var(--studio-accent);
  font-size:0.72rem;
  font-weight:800;
}

.exam-condition-strip strong{
  display:block;
  margin:17px 0 7px;
}

.exam-condition-strip p{
  margin:0;
  color:var(--ink-soft);
  font-size:0.8rem;
}

.exam-ticket{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(300px, 0.7fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.9);
  box-shadow:var(--shadow-sm);
}

.exam-ticket__main{
  padding:42px;
}

.exam-ticket h1{
  font-size:clamp(2.25rem, 4vw, 3.75rem);
}

.exam-ticket__main > p{
  max-width:680px;
  color:var(--ink-soft);
  font-size:1.05rem;
}

.exam-ticket dl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:32px 0 0;
}

.exam-ticket dl div{
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-soft);
}

.exam-ticket dt{
  color:var(--muted);
  font-size:0.72rem;
}

.exam-ticket dd{
  margin:2px 0 0;
  color:var(--ink);
  font-weight:800;
}

.exam-ticket aside{
  display:grid;
  align-content:start;
  gap:20px;
  padding:32px;
  border-left:1px solid var(--line);
  background:var(--studio-accent-soft);
  color:var(--ink);
}

.exam-ticket aside > span{
  color:var(--studio-accent);
  font-size:0.74rem;
  font-weight:800;
}

.exam-ticket aside .studio-list li{
  color:var(--ink-soft);
}

.exam-shell{
  width:min(100%, 1500px);
  margin:0 auto;
}

.exam-bar{
  position:sticky;
  top:10px;
  z-index:40;
  display:grid;
  grid-template-columns:minmax(230px, 1fr) minmax(260px, 0.7fr) 180px;
  gap:28px;
  align-items:center;
  min-height:82px;
  margin-bottom:14px;
  padding:15px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.94);
  color:var(--ink);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(18px);
}

.exam-bar > div:first-child{
  display:grid;
}

.exam-bar > div:first-child span,
.exam-bar__progress > span{
  color:var(--muted);
  font-size:0.72rem;
}

.exam-bar__progress > div{
  height:6px;
  margin-top:8px;
  overflow:hidden;
  border-radius:999px;
  background:#e6def3;
}

.exam-bar__progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--studio-accent);
}

.exam-timer{
  display:grid;
  justify-items:end;
  padding:10px 14px;
  border-radius:18px;
  background:var(--ink);
  color:#fff;
}

.exam-timer span{
  color:#d8ccf8;
  font-size:0.66rem;
}

.exam-timer strong{
  font:600 1.2rem/1 var(--mono);
}

.exam-timer.is-low{
  background:#80520e;
}

.exam-workspace{
  display:grid;
  grid-template-columns:210px minmax(480px, 1fr) 210px;
  min-height:calc(100dvh - 180px);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.exam-map,
.exam-submit{
  padding:24px;
  background:var(--surface-soft);
}

.exam-map{
  border-right:1px solid var(--line);
}

.exam-map > div:nth-child(2){
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:7px;
}

.exam-map button{
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:800 0.76rem/1 var(--sans);
}

.exam-map button.is-current{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

.exam-map button.is-answered{
  box-shadow:inset 0 -4px 0 var(--ok);
}

.exam-map button.is-flagged{
  box-shadow:inset 0 4px 0 var(--gold);
}

.exam-map__legend{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin-top:24px;
  color:var(--muted);
  font-size:0.7rem;
}

.exam-map__legend span{
  display:flex;
  gap:7px;
}

.exam-map__legend i{
  width:12px;
  height:12px;
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:inset 0 -3px 0 var(--ok);
}

.exam-map__legend span:last-child i{
  box-shadow:inset 0 3px 0 var(--gold);
}

.exam-paper{
  padding:44px 50px;
}

.exam-paper__meta{
  display:flex;
  justify-content:space-between;
  padding-bottom:17px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:0.76rem;
  font-weight:700;
}

.exam-paper h1{
  max-width:850px;
  margin:36px 0 30px;
  color:var(--ink);
  font:650 1.65rem/1.4 var(--serif);
}

.exam-source{
  margin-top:24px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-soft);
  white-space:pre-wrap;
}

.exam-asset img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius-md);
}

.exam-options{
  display:grid;
  gap:10px;
}

.exam-options button{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  padding:13px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  transition:transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.exam-options button:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
}

.exam-options button.is-selected{
  border-color:var(--studio-accent);
  background:var(--studio-accent-soft);
}

.exam-options button span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-weight:800;
}

.exam-options button strong{
  font-weight:700;
}

.exam-response{
  display:grid;
  gap:8px;
  font-size:0.82rem;
  font-weight:800;
}

.exam-response textarea{
  min-height:260px;
  padding:18px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:#faf8fe;
  color:var(--ink);
  font:500 0.98rem/1.6 var(--sans);
  resize:vertical;
}

.exam-paper__actions{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.exam-paper__actions > div{
  display:flex;
  gap:8px;
}

.exam-submit{
  border-left:1px solid var(--line);
}

.exam-submit p{
  color:var(--ink-soft);
  font-size:0.82rem;
}

.exam-submit > strong{
  display:block;
  margin:24px 0;
  color:#80520e;
}

.exam-submit .studio-button{
  width:100%;
}

.exam-result{
  padding:42px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.9);
  box-shadow:var(--shadow-sm);
}

.exam-result h1{
  max-width:850px;
  font-size:clamp(2rem, 3.5vw, 3.35rem);
}

.exam-result__score{
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  gap:28px;
  align-items:center;
  margin:32px 0;
  padding:24px;
  border:1px solid var(--studio-accent-border);
  border-radius:var(--radius-lg);
  background:var(--studio-accent-soft);
  color:var(--ink);
}

.exam-result__score strong{
  color:var(--studio-accent);
  font:800 3rem/1 var(--sans);
}

.exam-result__score span{
  color:var(--ink-soft);
}

@keyframes studio-in{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .studio-page,
  .project-page{
    animation:none;
  }

  .studio-button{
    transition:none;
  }
}

@media (max-width:1180px){
  .studio-principles,
  .exam-condition-strip{
    grid-template-columns:1fr 1fr;
  }

  .draft-studio{
    grid-template-columns:205px minmax(390px, 1fr);
  }

  .draft-feedback{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    border-top:1px solid var(--line);
    border-left:0;
  }

  .exam-workspace{
    grid-template-columns:180px minmax(420px, 1fr);
  }

  .exam-submit{
    grid-column:1 / -1;
    border-top:1px solid var(--line);
    border-left:0;
  }

  .exam-submit .studio-button{
    width:auto;
  }

  .exam-bar{
    grid-template-columns:1fr auto;
  }

  .exam-bar__progress{
    display:none;
  }
}

@media (max-width:900px){
  .topbar__right{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px 20px;
  }

  .topbar__tools{
    gap:20px;
  }

  .studio-hero,
  .brief-grid,
  .export-layout,
  .mock-empty-grid,
  .exam-ticket{
    grid-template-columns:1fr;
  }

  .studio-hero{
    gap:24px;
  }

  .studio-hero__actions{
    justify-content:flex-start;
  }

  .brief-lead{
    position:static;
  }

  .mock-empty-main{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .draft-studio{
    grid-template-columns:1fr;
  }

  .draft-nav{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .draft-feedback{
    display:block;
    grid-column:auto;
  }

  .exam-ticket aside{
    border-top:1px solid var(--line);
    border-left:0;
  }

  .exam-workspace{
    grid-template-columns:1fr;
  }

  .exam-map{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .exam-map > div:nth-child(2){
    grid-template-columns:repeat(8, 1fr);
  }

  .exam-paper{
    padding:32px 24px;
  }
}

@media (max-width:680px){
  .topbar__right{
    display:block;
  }

  .topbar__tools{
    width:100%;
    justify-content:space-between;
    gap:12px;
  }

  .topbar__right .topbar__summary{
    display:none;
  }

  .studio-hero,
  .studio-section,
  .setup-sheet__body,
  .brief-block,
  .export-sheet,
  .history-sheet,
  .exam-ticket__main,
  .exam-result{
    padding:22px;
  }

  .studio-hero,
  .studio-section,
  .setup-sheet,
  .project-top,
  .history-sheet,
  .export-sheet,
  .export-preview,
  .mock-readiness,
  .mock-empty-grid,
  .exam-condition-strip,
  .exam-ticket,
  .exam-result{
    border-radius:var(--radius-lg);
  }

  .studio-hero h1{
    font-size:2.35rem;
  }

  .studio-principles,
  .exam-condition-strip,
  .studio-form-grid,
  .brief-columns,
  .project-row,
  .setup-actions,
  .project-top,
  .draft-editor__head,
  .draft-actions,
  .studio-alert,
  .mock-readiness,
  .exam-result__score{
    grid-template-columns:1fr;
  }

  .studio-principles,
  .exam-condition-strip{
    padding:10px;
  }

  .project-row__side,
  .project-top__status{
    justify-items:start;
  }

  .project-tabs{
    width:100%;
  }

  .setup-sheet{
    grid-template-columns:1fr;
  }

  .setup-sheet__number{
    justify-content:flex-start;
    padding:18px 22px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .setup-actions,
  .draft-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .criterion-row{
    grid-template-columns:26px minmax(0, 1fr);
  }

  .criterion-row > b{
    grid-column:2;
    text-align:left;
  }

  .export-summary{
    grid-template-columns:1fr;
  }

  .mock-readiness__dial{
    min-height:120px;
  }

  .exam-map > div:nth-child(2){
    grid-template-columns:repeat(5, 1fr);
  }

  .exam-bar{
    grid-template-columns:1fr;
    top:0;
    padding:14px 18px;
  }

  .exam-timer{
    justify-items:start;
  }

  .exam-paper__actions{
    align-items:stretch;
    flex-direction:column;
  }

  .exam-paper__actions > div{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

/* Past-paper library — editorial archive, native to Kandeur. */
.mock-library-page .studio-hero::before{
  content:"CXC / ARCHIVE";
  position:absolute;
  right:30px;
  top:22px;
  color:rgba(102,48,201,0.065);
  font:650 clamp(3.8rem, 8vw, 7.2rem)/1 var(--serif);
  letter-spacing:-0.07em;
  pointer-events:none;
}

.mock-level-tabs{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.86);
  box-shadow:var(--shadow-sm);
}

.mock-level-tabs button{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  gap:7px 13px;
  min-height:116px;
  padding:24px;
  border:0;
  border-left:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-align:left;
  transition:background 0.22s var(--ease), color 0.22s var(--ease);
}

.mock-level-tabs button:first-child{
  border-left:0;
}

.mock-level-tabs button::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:17px;
  left:22px;
  height:3px;
  border-radius:999px;
  background:var(--studio-accent);
  opacity:0;
  transform:scaleX(0.4);
  transition:opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.mock-level-tabs button:hover{
  background:var(--surface-soft);
}

.mock-level-tabs button.is-active{
  background:var(--ink);
  color:#fff;
}

.mock-level-tabs button.is-active::after{
  opacity:1;
  transform:scaleX(1);
}

.mock-level-tabs span{
  grid-row:1 / 3;
  padding-top:3px;
  color:var(--muted);
  font:500 0.68rem/1 var(--mono);
}

.mock-level-tabs .is-active span,
.mock-level-tabs .is-active small,
.mock-level-tabs .is-active b{
  color:rgba(255,255,255,0.64);
}

.mock-level-tabs strong{
  font:700 1.42rem/1 var(--serif);
}

.mock-level-tabs small{
  color:var(--muted);
  font-size:0.76rem;
}

.mock-level-tabs b{
  grid-column:3;
  grid-row:1 / 3;
  align-self:center;
  color:var(--studio-accent);
  font:800 0.75rem/1 var(--sans);
}

.mock-browser{
  display:grid;
  grid-template-columns:minmax(220px, 0.31fr) minmax(0, 1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.mock-subjects{
  min-width:0;
  padding:26px 18px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-soft), #fff);
}

.mock-browser__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 18px;
  color:var(--muted);
  font:800 0.7rem/1 var(--sans);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.mock-browser__label b{
  display:grid;
  width:25px;
  height:25px;
  place-items:center;
  border-radius:50%;
  background:var(--studio-accent-soft);
  color:var(--studio-accent);
  font-size:0.68rem;
}

.mock-subjects__list{
  display:grid;
  gap:4px;
}

.mock-subjects__list button{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:center;
  width:100%;
  min-height:50px;
  padding:10px 12px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--ink-soft);
  text-align:left;
  transition:background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}

.mock-subjects__list button:hover{
  background:#fff;
  color:var(--ink);
  transform:translateX(2px);
}

.mock-subjects__list button.is-active{
  background:var(--ink);
  color:#fff;
  box-shadow:0 8px 20px rgba(29,19,51,0.13);
}

.mock-subjects__list span{
  overflow:hidden;
  font-size:0.85rem;
  font-weight:700;
  line-height:1.2;
  text-overflow:ellipsis;
}

.mock-subjects__list b{
  color:var(--muted);
  font:700 0.68rem/1 var(--mono);
}

.mock-subjects__list .is-active b{
  color:rgba(255,255,255,0.58);
}

.mock-papers{
  min-width:0;
  padding:30px;
}

.mock-papers__head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(230px, 0.45fr);
  gap:24px;
  align-items:end;
  padding:2px 2px 26px;
  border-bottom:1px solid var(--line);
}

.mock-papers__head .studio-kicker{
  margin-bottom:10px;
}

.mock-papers__head h2{
  margin:0;
  font:650 clamp(1.8rem, 3vw, 2.55rem)/1.05 var(--serif);
  letter-spacing:-0.025em;
}

.mock-search{
  position:relative;
  display:grid;
  gap:6px;
}

.mock-search span,
.mock-reader__tools label span{
  color:var(--muted);
  font-size:0.7rem;
  font-weight:800;
}

.mock-search input,
.mock-reader__tools input{
  width:100%;
  height:44px;
  padding:0 42px 0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--ink);
  font-size:0.84rem;
}

.mock-search i{
  position:absolute;
  right:17px;
  bottom:14px;
  width:12px;
  height:12px;
  border:2px solid var(--muted);
  border-radius:50%;
}

.mock-search i::after{
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  right:-5px;
  bottom:-2px;
  background:var(--muted);
  transform:rotate(45deg);
}

.mock-paper-list{
  display:grid;
}

.mock-paper-row{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  min-height:92px;
  padding:18px 2px;
  border-bottom:1px solid var(--line);
}

.mock-paper-row:last-child{
  border-bottom:0;
}

.mock-paper-row__number{
  align-self:start;
  padding-top:4px;
  color:var(--muted);
  font:500 0.68rem/1 var(--mono);
}

.mock-paper-row__copy{
  min-width:0;
}

.mock-paper-row h3{
  margin:0;
  color:var(--ink);
  font:650 1.06rem/1.25 var(--serif);
}

.mock-paper-row__copy > div{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:8px;
  color:var(--muted);
  font-size:0.72rem;
  font-weight:700;
}

.mock-paper-row__copy i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--line-strong);
}

.mock-paper-row__open{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 4px 0 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:0.76rem;
  font-weight:800;
  transition:border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.mock-paper-row__open i{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font:400 0.9rem/1 var(--sans);
}

.mock-paper-row__open:hover{
  transform:translateY(-1px);
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

.mock-paper-row__open:hover i{
  background:#fff;
  color:var(--ink);
}

.mock-no-results{
  display:grid;
  justify-items:start;
  min-height:280px;
  align-content:center;
  padding:32px;
}

.mock-no-results strong{
  font:650 1.65rem/1.1 var(--serif);
}

.mock-no-results p{
  color:var(--muted);
}

.mock-reader{
  --reader-width:1120px;
  display:grid;
  gap:22px;
  animation:studio-in 0.42s var(--ease) both;
}

.mock-reader__bar{
  position:sticky;
  z-index:12;
  top:12px;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:22px;
  align-items:center;
  min-height:72px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,0.94);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(18px);
}

.mock-reader__bar .studio-back{
  margin:0;
  white-space:nowrap;
}

.mock-reader__identity{
  display:grid;
  min-width:0;
  text-align:center;
}

.mock-reader__identity span{
  color:var(--studio-accent);
  font-size:0.66rem;
  font-weight:800;
}

.mock-reader__identity strong{
  overflow:hidden;
  color:var(--ink);
  font:650 0.92rem/1.25 var(--serif);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mock-reader__masthead{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:42px;
  align-items:end;
  width:min(100%, var(--reader-width));
  margin:0 auto;
  padding:42px 46px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.mock-reader__masthead h1{
  max-width:760px;
  margin:0;
  font:650 clamp(2rem, 4vw, 3.45rem)/1.03 var(--serif);
  letter-spacing:-0.035em;
  text-wrap:balance;
}

.mock-reader__masthead p{
  margin:16px 0 0;
  color:var(--muted);
  font-weight:700;
}

.mock-reader__masthead dl{
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:22px;
  margin:0;
}

.mock-reader__masthead dl div{
  min-width:70px;
}

.mock-reader__masthead dt{
  color:var(--muted);
  font-size:0.66rem;
  font-weight:800;
  text-transform:uppercase;
}

.mock-reader__masthead dd{
  margin:5px 0 0;
  font:650 1.02rem/1 var(--serif);
}

.mock-reader__tools{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  width:min(100%, var(--reader-width));
  margin:0 auto;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.88);
}

.mock-reader__tools form{
  display:flex;
  align-items:end;
  gap:8px;
}

.mock-reader__tools label{
  display:grid;
  gap:5px;
  width:min(340px, 38vw);
}

.mock-reader__tools > span,
.mock-reader__matches{
  padding-bottom:10px;
  color:var(--muted);
  font-size:0.7rem;
  font-weight:700;
}

.mock-document{
  display:grid;
  gap:24px;
  width:min(100%, var(--reader-width));
  margin:0 auto;
}

.mock-document,
.mock-document *{
  -webkit-user-select:none;
  user-select:none;
}

.mock-document__page{
  position:relative;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:620px;
  overflow:hidden;
  padding:68px clamp(28px, 6vw, 74px) 74px;
  border:1px solid #ddd5e9;
  border-radius:5px;
  background:#fff;
  box-shadow:0 18px 46px rgba(29,19,51,0.09);
}

.mock-document__page-number{
  position:absolute;
  top:22px;
  right:28px;
  color:#968ca5;
  font:500 0.63rem/1 var(--mono);
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.mock-document__page--title{
  padding-top:58px;
  padding-bottom:82px;
}

.mock-document__page--title .mock-document__page-number{
  visibility:hidden;
}

.mock-document__page--title .mock-paper-content{
  width:min(100%, 780px);
  margin-right:auto;
  margin-left:auto;
}

.mock-document__page:not(.mock-document__page--title) .mock-paper-content{
  width:min(88%, 900px);
  margin-right:auto;
  margin-left:auto;
}

.mock-document__page--title .mock-paper-line--empty{
  min-height:1.34em;
  line-height:1.34;
}

.mock-cover-test-code{
  margin-bottom:0.55em;
  font-size:0.88em;
  font-weight:650;
  text-align:right;
}

.mock-cover-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:2em;
  margin-bottom:1.35em;
  font-size:0.88em;
  font-weight:650;
}

.mock-cover-meta span:last-child{
  text-align:right;
}

.mock-paper-instructions{
  display:grid;
  gap:1.05em;
  width:100%;
  margin:1.35em auto 2.6em;
  text-align:left;
}

.mock-paper-instruction{
  display:grid;
  grid-template-columns:2.1em minmax(0, 1fr);
  gap:0.72em;
  align-items:start;
}

.mock-paper-instruction > span{
  padding-top:0.04em;
  color:#241d31;
  font-variant-numeric:tabular-nums;
  font-weight:650;
  text-align:right;
}

.mock-paper-instruction p{
  margin:0;
  line-height:1.58;
  white-space:normal;
}

.mock-paper-instruction p + p{
  margin-top:0.72em;
}

.mock-paper-content{
  max-width:100%;
  margin:0;
  color:#241d31;
  font:500 1rem/1.62 var(--serif);
  overflow-wrap:break-word;
}

.mock-paper-line{
  min-height:1.62em;
  white-space:pre-wrap;
}

.mock-paper-content u{
  text-decoration-line:underline;
  text-decoration-thickness:.075em;
  text-underline-offset:.16em;
  text-decoration-skip-ink:auto;
}

.mock-paper-line--empty{
  min-height:0.92em;
  line-height:0.92;
}

.mock-paper-line--official-heading{
  color:#17111f;
  font-weight:650;
}

.mock-paper-line--center{
  padding-right:4%;
  padding-left:4%;
  text-align:center;
  white-space:normal;
}

.mock-paper-line--heading{
  color:#17111f;
  font-weight:650;
}

.mock-paper-line--h1{
  font-size:1.45em;
}

.mock-paper-line--h2{
  font-size:1.28em;
}

.mock-paper-line--h3,
.mock-paper-line--h4{
  font-size:1.12em;
}

.mock-paper-line--exam-heading{
  margin-bottom:0.72em;
  letter-spacing:0.005em;
}

.mock-paper-line--exam-heading.mock-paper-line--h1{
  font-size:1.34em;
}

.mock-paper-line--exam-heading.mock-paper-line--h2{
  font-size:1.18em;
}

.mock-paper-line--instruction{
  margin:0.35em 0 1.2em;
  text-align:center;
}

.mock-paper-question{
  display:grid;
  grid-template-columns:2.5em minmax(0, 1fr);
  gap:0.65em;
  margin:0.55em 0;
  line-height:1.58;
}

.mock-paper-question--part{
  margin-left:2.5em;
}

.mock-paper-question__number{
  color:#17111f;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.mock-paper-marks{
  margin:0.8em 0 0.65em auto;
  color:#17111f;
  font-weight:750;
  text-align:right;
}

.mock-paper-line--reminder{
  margin:1.1em auto 0.65em;
  text-align:center;
  white-space:normal;
}

.mock-paper-content em{
  font-style:italic;
}

.mock-paper-line--planning-label{
  margin:1.15em 0 0.75em;
  text-align:center;
}

.mock-paper-planning-space{
  min-height:clamp(190px, 25vw, 330px);
  margin:0 auto;
  border:1.5px solid #6c6474;
  background:linear-gradient(180deg, #fff, #fefefe);
}

.mock-paper-line--figure{
  margin:0.5em 0;
  color:#5f556c;
  font-size:0.92em;
  font-style:italic;
}

.mock-paper-content strong{
  color:var(--ink);
  font-weight:750;
}

.mock-paper-content code{
  padding:0.12em 0.35em;
  border-radius:6px;
  background:var(--surface-soft);
  color:var(--studio-accent);
  font:500 0.9em/1.4 var(--mono);
}

.mock-paper-table-wrap{
  max-width:100%;
  margin:1.25em 0;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
}

.mock-paper-table-wrap table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-family:var(--serif);
  font-size:0.88rem;
}

.mock-paper-table-wrap th,
.mock-paper-table-wrap td{
  padding:11px 13px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.mock-paper-table-wrap th:last-child,
.mock-paper-table-wrap td:last-child{
  border-right:0;
}

.mock-paper-table-wrap tr:last-child td{
  border-bottom:0;
}

.mock-paper-table-wrap th{
  background:#faf9f6;
  color:var(--ink);
  font-weight:650;
}

.mock-paper-content mjx-container{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}

.mock-paper-content mjx-container[display="true"]{
  margin:0.8em 0 !important;
}

.mock-document mark{
  padding:1px 2px;
  border-radius:3px;
  background:#f9dd74;
  color:#241d31;
}

@media (max-width:1000px){
  .mock-level-tabs{
    grid-template-columns:1fr 1fr;
  }

  .mock-level-tabs button:nth-child(3){
    border-left:0;
    border-top:1px solid var(--line);
  }

  .mock-level-tabs button:nth-child(4){
    border-top:1px solid var(--line);
  }

  .mock-browser{
    grid-template-columns:190px minmax(0, 1fr);
  }

  .mock-reader__identity{
    display:none;
  }

  .mock-reader__bar{
    grid-template-columns:minmax(0, 1fr) auto;
  }
}

@media (max-width:760px){
  .mock-library-page .studio-hero::before{
    display:none;
  }

  .mock-browser{
    grid-template-columns:1fr;
  }

  .mock-subjects{
    padding:18px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .mock-subjects__list{
    display:flex;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:thin;
  }

  .mock-subjects__list button{
    flex:0 0 auto;
    width:auto;
    max-width:240px;
  }

  .mock-papers__head{
    grid-template-columns:1fr;
  }

  .mock-reader__masthead{
    grid-template-columns:1fr;
    padding:30px 26px;
  }

  .mock-reader__tools{
    display:grid;
  }

  .mock-reader__tools form{
    flex-wrap:wrap;
  }

  .mock-reader__tools label{
    width:100%;
  }

  .mock-reader__tools > span{
    display:none;
  }
}

@media (max-width:560px){
  .mock-level-tabs{
    border-radius:var(--radius-lg);
  }

  .mock-level-tabs button{
    min-height:96px;
    padding:17px;
  }

  .mock-level-tabs small{
    display:none;
  }

  .mock-browser{
    border-radius:var(--radius-lg);
  }

  .mock-papers{
    padding:22px 18px;
  }

  .mock-paper-row{
    grid-template-columns:26px minmax(0, 1fr);
    gap:12px;
  }

  .mock-paper-row__open{
    grid-column:2;
    width:max-content;
  }

  .mock-reader__bar{
    position:static;
    grid-template-columns:1fr;
    border-radius:var(--radius-lg);
  }

  .mock-reader__masthead h1{
    font-size:2rem;
  }

  .mock-reader__masthead dl{
    gap:12px;
  }

  .mock-document__page{
    min-height:420px;
    padding:56px 20px 46px;
  }

  .mock-paper-content{
    font-size:0.9rem;
    line-height:1.65;
  }

  .mock-document__page:not(.mock-document__page--title) .mock-paper-content{
    width:100%;
  }

  .mock-paper-question--part{
    margin-left:0.8em;
  }

  .mock-paper-planning-space{
    min-height:180px;
  }
}

@media print{
  body[data-view="mocks"] .topbar,
  body[data-view="mocks"] .mock-reader__bar,
  body[data-view="mocks"] .mock-reader__masthead,
  body[data-view="mocks"] .mock-reader__tools,
  body[data-view="mocks"] #flashcardNavigatorRoot,
  body[data-view="mocks"] #aiTutorRoot{
    display:none !important;
  }

  body[data-view="mocks"],
  body[data-view="mocks"] .shell,
  body[data-view="mocks"] #app,
  body[data-view="mocks"] .mock-document{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    background:#fff;
  }

  body[data-view="mocks"] .mock-document{
    gap:0;
  }

  body[data-view="mocks"] .mock-document__page{
    min-height:0;
    padding:0;
    border:0;
    box-shadow:none;
    break-after:page;
  }

  body[data-view="mocks"] .mock-document__page-number{
    display:none;
  }
}