/* === Exam Skin (non-destructive) === */
:root {
  --exam-brand:#2563eb;
  --exam-brand-2:#60a5fa;
  --exam-bg:#f7f9fc;
  --exam-card:#ffffff;
  --exam-border:#e5e7eb;
  --exam-text:#0f172a;
  --exam-muted:#6b7280;
}

body.exam-skin { background: var(--exam-bg); }

/* Layout */
.exam-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 960px) {
  .exam-shell { grid-template-columns: 1fr; }
}

.exam-aside {
  position: sticky;
  top: 12px;
  background: var(--exam-card);
  border: 1px solid var(--exam-border);
  border-radius: 16px;
  padding: 6px 6px; /* reduced padding for smaller height */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.exam-aside .back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  text-decoration:none;
  color: var(--exam-muted);
  margin-bottom:12px;
}

.exam-aside h2 {
  margin: 6px 0 2px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--exam-text);
}
.exam-aside .subtitle {
  font-size: 13px;
  color: var(--exam-muted);
  margin-bottom: 8px;
}

/* Circular timer */
.timer-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 8px 0 12px;
}
.timer-ring svg { transform: rotate(-90deg); width:100%; height:100%; }
.timer-ring .time-text {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  color: var(--exam-text);
}

/* Question card look */
#quiz-container .exam-qcard {
  background: var(--exam-card);
  border: 1px solid var(--exam-border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

#quiz-container .exam-qcard h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

#quiz-container .exam-option {
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--exam-border);
  margin: 8px 0;
}

#quiz-container .exam-option input[type="radio"] {
  transform: scale(1.1);
}

/* Pager actions */
.exam-pager {
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  margin: 8px 2px 18px;
}
.exam-btn {
  border: 1px solid var(--exam-border);
  background:#fff;
  padding: 10px 14px;
  border-radius: 10px;
  cursor:pointer;
  font-weight:600;
}
.exam-btn.primary {
  border-color: transparent;
  background: var(--exam-brand);
  color:#fff;
}
.exam-btn.primary:disabled,
.exam-btn:disabled { opacity:.5; cursor:not-allowed; }

/* Hide the original top timer bar (we replicate it in the aside) */
#timer-bar { display: none !important; }


/* Hide duplicated native title/back in content area; keep duration select */
.wrap > a.back { display: none !important; }
.timer-ring .time-text { text-align: center; font-size: 20px; line-height: 1; }

/* Header with title + small timer ring */
.exam-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 8px 0 12px;
}
.exam-header #title{
  margin:0;
  font-size: clamp(20px, 3.5vw, 28px);
  line-height:1.15;
}
.timer-ring.small{ width:64px; height:64px; min-width:64px; min-height:64px; }
 }
}
/* Don't duplicate info in the sidebar */
.exam-aside h2, .exam-aside .subtitle { display:none !important; }

/* Make time text fit inside the small ring */
.timer-ring.small .time-text{ font-size:clamp(13px, 3.6vw, 16px); font-weight:700; line-height:1; }

/* Sticky aside top bar: Back (left) + ring (right) */
.exam-aside .aside-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.exam-aside .back-link{ margin:0; }

/* Top bar: Back • Controls • Timer */
.exam-aside .aside-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.exam-aside .top-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
}
.exam-aside .top-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.exam-aside .ctrl-btn{
  border:1px solid var(--exam-border);
  background:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition: background .2s;
}
.exam-aside .ctrl-btn:hover{ background:#f3f4f6; }
.exam-aside .ctrl-btn.primary{ background: var(--exam-brand); color:#fff; border-color: transparent; }

/* Dark mode theming for exam skin */
[data-theme="dark"]{
  --exam-bg:#0b1220;
  --exam-card:#0f172a;
  --exam-border:#1f2a44;
  --exam-text:#e5e7eb;
  --exam-muted:#9ca3af;
}
/* Apply colors to key elements in dark mode */
[data-theme="dark"] body.exam-skin{ background: var(--exam-bg); color: var(--exam-text); }
[data-theme="dark"] .exam-aside,
[data-theme="dark"] #quiz-container .exam-qcard,
[data-theme="dark"] #quiz-container .exam-option{
  background: var(--exam-card);
  color: var(--exam-text);
  border-color: var(--exam-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
[data-theme="dark"] #quiz-container .exam-option label{ color: var(--exam-text); }