/* Top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--teal); color:#fff; flex-wrap:wrap; gap:12px;
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-mark{ font-family:'Source Serif 4', serif; font-weight:700; font-size:1.05rem; }
.brand-sub{ font-size:0.78rem; opacity:0.8; }
.topbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.link-btn{
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.3); color:#fff;
  padding:7px 13px; border-radius:20px; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.timer-wrap{ display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; background:rgba(255,255,255,0.14); padding:6px 14px; border-radius:3px; }
.timer-wrap.warn{ background:var(--coral); }
.timer-label{ font-size:0.72rem; opacity:0.85; }
.timer-val{ font-size:1.05rem; font-weight:600; }

/* Views */
.view{ display:none; flex:1; min-height:0; }
.view.active{ display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; }

/* Split (test view) */
.split{ flex:1; display:flex; min-height:0; }
@media (max-width:860px){ .split{ flex-direction:column; } }
.pane{ overflow-y:auto; padding:22px 26px 60px; }
.passage-pane{ flex:1.15; border-right:1px solid var(--line); background:var(--paper); }
.qa-pane{ flex:1; background:var(--paper-2); display:flex; flex-direction:column; }
@media (max-width:860px){
  .passage-pane{ border-right:none; border-bottom:1px solid var(--line); max-height:44vh; }
  .qa-pane{ max-height:48vh; }
}
.pane-heading{ font-family:'Source Serif 4', serif; font-size:1.4rem; font-weight:700; margin:0 0 4px; line-height:1.25; }
.pane-eyebrow{ font-size:0.75rem; color:var(--ink-soft); margin:0 0 14px; }
.passage-body p{ font-family:'Source Serif 4', serif; font-size:1.02rem; line-height:1.72; margin:0 0 1.15em; }

.navbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 22px; background:var(--white); border-top:1px solid var(--line); flex-wrap:wrap; }
.progress-text{ font-size:0.82rem; color:var(--ink-soft); }
.actions{ display:flex; gap:10px; }

.score-panel{ display:none; background:var(--white); border:1px solid var(--line); border-radius:4px; padding:18px 20px; margin-bottom:18px; }
.score-panel.show{ display:block; }
.score-big{ font-family:'Source Serif 4', serif; font-size:2rem; font-weight:700; color:var(--teal); }
.score-sub{ color:var(--ink-soft); font-size:0.85rem; }