.ospe-bank-page {
  --ospe-blue: #2563eb;
  --ospe-blue-soft: color-mix(in srgb, var(--ospe-blue) 10%, var(--qb-panel));
}

.ospe-setup-heading { margin-bottom: 22px; }

.ospe-dedication {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 15px 20px;
  border: 1px solid color-mix(in srgb, var(--qb-orange) 35%, var(--qb-line));
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--qb-orange) 8%, var(--qb-panel)), var(--qb-panel));
  box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}

.ospe-dedication > .material-symbols-outlined { color: var(--qb-orange); font-size: 30px; }
.ospe-dedication strong { display: block; color: var(--qb-ink); font-size: .86rem; }
.ospe-dedication p {
  margin: 2px 0 0;
  color: var(--qb-ink);
  font-family: "Cairo", sans-serif;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.55;
}

.ospe-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ospe-blue) 28%, var(--qb-line));
  border-radius: 14px;
  background: var(--ospe-blue-soft);
}

.ospe-mode-card > .material-symbols-outlined { color: var(--ospe-blue); }
.ospe-mode-card strong,.ospe-mode-card small { display: block; }
.ospe-mode-card small { margin-top: 3px; color: var(--qb-muted); line-height: 1.45; }
.ospe-answer-timing label { align-items: flex-start; margin-bottom: 9px; transition: border-color .18s ease, background .18s ease; }
.ospe-answer-timing label:has(input:checked) { border-color: var(--qb-orange); background: var(--qb-orange-soft); }
.ospe-answer-timing strong,.ospe-answer-timing small { display: block; }
.ospe-session-mode { margin-bottom: 16px; }
.ospe-browse-layout-settings[hidden],.ospe-answer-timing[hidden] { display: none; }
.ospe-settings-card > .study-primary-action { width: 100%; justify-content: center; margin-top: 18px; }
.ospe-source-caution { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; color: var(--qb-muted); font-size: .72rem; line-height: 1.5; }
.ospe-source-caution .material-symbols-outlined { flex: 0 0 auto; color: var(--qb-orange); font-size: 17px; }

.ospe-station-panel { max-width: 1080px; }
.ospe-stem {
  margin: 15px 0 18px;
  padding: 15px 17px;
  border-left: 4px solid var(--qb-orange);
  border-radius: 0 13px 13px 0;
  background: var(--qb-orange-soft);
  color: var(--qb-ink);
  font-weight: 600;
  line-height: 1.7;
}
.ospe-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 14px;
  margin: 0 0 28px;
}

.ospe-image-unavailable {
  grid-column: 1 / -1;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 24px;
  border: 1px dashed var(--qb-line);
  border-radius: 18px;
  background: var(--qb-soft);
  color: var(--qb-muted);
  text-align: left;
}
.ospe-image-unavailable > .material-symbols-outlined { color: var(--qb-orange); font-size: 30px; }
.ospe-image-unavailable strong { display: block; color: var(--qb-ink); }
.ospe-image-unavailable p { margin: 4px 0 0; font-size: .78rem; line-height: 1.55; }
.ospe-record-note {
  margin: -12px 0 20px;
  color: var(--qb-muted);
  font-size: .74rem;
  line-height: 1.55;
}

.ospe-image-button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 320px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--qb-line);
  border-radius: 18px;
  background: #08111f;
  cursor: zoom-in;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .11);
}

.ospe-image-button img {
  width: 100%;
  height: min(58vh, 560px);
  min-height: 320px;
  object-fit: contain;
  background: #08111f;
}

.ospe-image-button span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(6, 12, 24, .78);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.ospe-question-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 13px;
}

.ospe-question-heading > div { display: flex; align-items: center; gap: 10px; }
.ospe-question-heading > div > .material-symbols-outlined { color: var(--qb-orange); }
.ospe-question-heading strong,.ospe-question-heading small { display: block; }
.ospe-question-heading small { margin-top: 2px; color: var(--qb-muted); }
.ospe-question-heading > button {
  flex: 0 0 auto;
  border: 1px solid var(--qb-line);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--qb-panel);
  color: var(--qb-ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
}

.ospe-question-list { display: grid; gap: 12px; }
.ospe-prompt-card {
  overflow: hidden;
  border: 1px solid var(--qb-line);
  border-radius: 16px;
  background: var(--qb-panel);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ospe-prompt-card.is-revealed { border-color: color-mix(in srgb, var(--qb-green) 40%, var(--qb-line)); box-shadow: 0 10px 30px rgba(15, 23, 42, .05); }
.ospe-prompt-line { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 15px; }
.ospe-prompt-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--qb-soft); color: var(--qb-muted); font-size: .75rem; font-weight: 800; }
.ospe-prompt-line p { margin: 0; color: var(--qb-ink); font-weight: 650; line-height: 1.55; }
.ospe-question-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ospe-prompt-line button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--qb-line);
  border-radius: 10px;
  padding: 0 !important;
  background: var(--qb-soft);
  color: var(--qb-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}

.ospe-prompt-line button:hover { border-color: var(--qb-orange); color: var(--qb-orange); }
.ospe-question-actions .material-symbols-outlined { font-size: 20px; }
.ospe-question-actions .qb-memory-button > span:not(.material-symbols-outlined),
.ospe-question-actions .qb-memory-button > small { display: none; }
.ospe-mcq-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0 15px 15px 61px;
}

.ospe-mcq-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--qb-line);
  border-radius: 12px;
  background: var(--qb-soft);
  color: var(--qb-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.ospe-mcq-option:hover:not(:disabled) { border-color: var(--qb-orange); transform: translateY(-1px); }
.ospe-mcq-option > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--qb-panel);
  color: var(--qb-muted);
  font-size: .75rem;
  font-weight: 800;
}
.ospe-mcq-option b { font-size: .78rem; font-weight: 650; line-height: 1.45; }
.ospe-mcq-option i { font-size: 20px; }
.ospe-mcq-option.is-selected { border-color: var(--qb-orange); background: color-mix(in srgb, var(--qb-orange) 8%, var(--qb-panel)); }
.ospe-mcq-option.is-selected > span { background: var(--qb-orange); color: #fff; }
.ospe-mcq-option.is-correct { border-color: var(--qb-green); background: color-mix(in srgb, var(--qb-green) 9%, var(--qb-panel)); }
.ospe-mcq-option.is-correct > span { background: var(--qb-green); color: #fff; }
.ospe-mcq-option.is-correct i { color: var(--qb-green); }
.ospe-mcq-option.is-wrong { border-color: #dc2626; background: color-mix(in srgb, #dc2626 7%, var(--qb-panel)); }
.ospe-mcq-option.is-wrong > span { background: #dc2626; color: #fff; }
.ospe-mcq-option.is-wrong i { color: #dc2626; }
.ospe-mcq-option:disabled { cursor: default; opacity: 1; }
.ospe-mcq-result { margin: 0; padding: 0 18px 13px 61px; font-size: .74rem; font-weight: 750; }
.ospe-mcq-result.is-correct { color: var(--qb-green); }
.ospe-mcq-result.is-wrong { color: #dc2626; }
.ospe-answer {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 15px 18px 17px 61px;
  border-top: 1px solid color-mix(in srgb, var(--qb-green) 25%, var(--qb-line));
  background: color-mix(in srgb, var(--qb-green) 7%, var(--qb-panel));
}

.ospe-answer[hidden] { display: none; }
.ospe-answer > .material-symbols-outlined { flex: 0 0 auto; color: var(--qb-green); }
.ospe-answer > div { min-width: 0; width: 100%; }
.ospe-answer strong,.ospe-answer p { display: block; }
.ospe-answer strong { color: var(--qb-green); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.ospe-answer-subtopic { margin: 0 0 8px !important; color: var(--qb-ink) !important; font-size: .86rem; font-weight: 800; line-height: 1.45 !important; }
.ospe-answer p { margin: 4px 0 0; color: var(--qb-ink); line-height: 1.65; }
.ospe-answer-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ospe-answer-item;
}

.ospe-answer-list li {
  position: relative;
  min-height: 30px;
  padding: 5px 10px 5px 38px;
  border: 1px solid color-mix(in srgb, var(--qb-green) 18%, var(--qb-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--qb-green) 4%, var(--qb-panel));
  color: var(--qb-ink);
  line-height: 1.55;
  counter-increment: ospe-answer-item;
}

.ospe-answer-list li::before {
  content: counter(ospe-answer-item);
  position: absolute;
  top: 5px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--qb-green) 13%, var(--qb-panel));
  color: var(--qb-green);
  font-size: .68rem;
  font-weight: 800;
}
.ospe-answer.is-source-note { background: color-mix(in srgb, var(--qb-orange) 7%, var(--qb-panel)); }
.ospe-answer.is-source-note > .material-symbols-outlined,
.ospe-answer.is-source-note strong { color: var(--qb-orange); }

.ospe-answer-supplement { display: grid; gap: 11px; margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--qb-green) 18%, var(--qb-line)); }
.ospe-answer-supplement section > strong,
.ospe-answer-details > summary,
.ospe-editorial-review strong {
  color: var(--qb-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.ospe-answer-explanation p { margin: 5px 0 0; color: var(--qb-ink); line-height: 1.65; white-space: pre-line; }
.ospe-answer-notes ul { display: grid; gap: 7px; margin: 7px 0 0; padding-left: 19px; color: var(--qb-ink); }
.ospe-answer-notes li { padding-left: 2px; line-height: 1.55; }
.ospe-answer-details { overflow: hidden; border: 1px solid var(--qb-line); border-radius: 11px; background: var(--qb-panel); }
.ospe-answer-details > summary { padding: 10px 12px; cursor: pointer; list-style-position: inside; }
.ospe-answer-details > ul { display: grid; gap: 9px; margin: 0; padding: 0 12px 12px; list-style: none; }
.ospe-answer-details > ul li { display: grid; gap: 2px; padding-top: 9px; border-top: 1px solid var(--qb-line); }
.ospe-answer-details > ul strong { color: var(--qb-ink); font-size: .74rem; letter-spacing: 0; text-transform: none; }
.ospe-answer-details > ul span { color: var(--qb-muted); font-size: .73rem; line-height: 1.55; }
.ospe-source-transcription > p { margin: 0; padding: 0 12px 12px; color: var(--qb-muted); font-size: .72rem; line-height: 1.6; white-space: pre-line; }
.ospe-editorial-review { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--qb-orange) 32%, var(--qb-line)); border-radius: 11px; background: var(--qb-orange-soft); }
.ospe-editorial-review > .material-symbols-outlined { flex: 0 0 auto; color: var(--qb-orange); font-size: 20px; }
.ospe-editorial-review strong { color: var(--qb-orange); }
.ospe-editorial-review p { margin: 4px 0 0; color: var(--qb-ink); font-size: .73rem; line-height: 1.55; }

.ospe-private-note { margin: 20px 0 0; padding: 15px 16px; border: 1px solid var(--qb-line); border-radius: 14px; background: var(--qb-soft); }

.ospe-browser { padding: 22px 0 46px; }
.ospe-browser-header {
  position: sticky;
  z-index: 8;
  top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--qb-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--qb-panel) 93%, transparent);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .1);
  backdrop-filter: blur(14px);
}
.ospe-browser-header h1 { margin: 1px 0 0; color: var(--qb-ink); font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.ospe-browser-header p { margin: 2px 0 0; color: var(--qb-muted); font-size: .74rem; }
.ospe-browser-header .study-section-kicker { margin: 0; color: var(--qb-orange); font-size: .65rem; }
.ospe-browser-layout { display: inline-flex; gap: 6px; padding: 5px; border: 1px solid var(--qb-line); border-radius: 13px; background: var(--qb-soft); }
.ospe-browser-layout button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--qb-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}
.ospe-browser-layout button.is-active { background: var(--qb-panel); color: var(--qb-orange); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.ospe-browser-layout .material-symbols-outlined { font-size: 18px; }

.ospe-browse-gallery { display: grid; align-items: start; gap: 16px; }
.ospe-browse-gallery.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ospe-browse-gallery.is-stacked { grid-template-columns: minmax(0, 900px); justify-content: center; gap: 22px; }
.ospe-browse-card { overflow: hidden; min-width: 0; border: 1px solid var(--qb-line); border-radius: 18px; background: var(--qb-panel); box-shadow: 0 12px 32px rgba(15, 23, 42, .07); }
.ospe-browse-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--qb-line); }
.ospe-browse-card > header span { overflow: hidden; color: var(--qb-orange); font-size: .68rem; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ospe-browse-card > header strong { flex: 0 0 auto; color: var(--qb-muted); font-size: .68rem; }
.ospe-browse-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 2px; padding: 2px; background: #08111f; }
.ospe-browse-gallery.is-stacked .ospe-browse-images { grid-template-columns: 1fr; }
.ospe-browse-image { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #08111f; cursor: zoom-in; }
.ospe-browse-image img { display: block; width: 100%; height: 260px; object-fit: contain; background: #08111f; }
.ospe-browse-gallery.is-stacked .ospe-browse-image img { height: min(68vh, 680px); min-height: 360px; }
.ospe-browse-image > .material-symbols-outlined { position: absolute; right: 10px; bottom: 10px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(6,12,24,.78); color: #fff; font-size: 19px; }
.ospe-browse-stem { margin: 0; padding: 13px 14px 0; color: var(--qb-ink); font-size: .76rem; font-weight: 650; line-height: 1.55; }
.ospe-browse-prompts { display: grid; gap: 8px; margin: 0; padding: 13px 14px 14px; list-style: none; }
.ospe-browse-prompts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; color: var(--qb-ink); font-size: .75rem; line-height: 1.5; }
.ospe-browse-prompts li span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: var(--qb-soft); color: var(--qb-muted); font-size: .65rem; font-weight: 800; }
.ospe-browse-answers { border-top: 1px solid var(--qb-line); background: color-mix(in srgb, var(--qb-green) 5%, var(--qb-panel)); }
.ospe-browse-answers summary { display: flex; align-items: center; gap: 7px; padding: 12px 14px; color: var(--qb-green); font-size: .73rem; font-weight: 800; cursor: pointer; list-style: none; }
.ospe-browse-answers summary::-webkit-details-marker { display: none; }
.ospe-browse-answers summary .material-symbols-outlined { font-size: 19px; }
.ospe-browse-diagnosis { margin: 0 14px 10px; color: var(--qb-ink); font-size: .88rem; font-weight: 800; }
.ospe-browse-answers > ol { display: grid; gap: 9px; margin: 0; padding: 0 14px 15px; list-style: none; }
.ospe-browse-answers > ol > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; color: var(--qb-ink); font-size: .72rem; }
.ospe-browse-answers > ol > li > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--qb-green) 13%, var(--qb-panel)); color: var(--qb-green); font-weight: 800; }
.ospe-browse-answers strong { color: var(--qb-green); }
.ospe-browse-answers p { margin: 3px 0 0; line-height: 1.5; }
.ospe-browse-answers .ospe-answer-supplement { margin-top: 10px; padding-top: 10px; }
.ospe-browse-answers .ospe-answer-supplement strong { display: block; }

.ospe-image-modal .study-modal-card { position: relative; z-index: 1; width: min(94vw, 1080px); max-height: 92vh; padding: 18px; border: 1px solid var(--qb-line); border-radius: 20px; background: var(--qb-panel); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.ospe-image-modal .study-modal-x { position: absolute; z-index: 2; top: 26px; right: 26px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 11px; background: rgba(6,12,24,.8); color: #fff; cursor: pointer; }
.ospe-image-modal img { display: block; width: 100%; max-height: calc(92vh - 82px); object-fit: contain; border-radius: 14px; background: #08111f; }
.ospe-image-modal p { margin: 10px 44px 0 4px; color: var(--qb-muted); font-size: .78rem; }

@media (max-width: 700px) {
  .ospe-dedication { justify-content: flex-start; margin-bottom: 20px; padding: 13px 15px; }
  .ospe-image-button,.ospe-image-button img { min-height: 245px; }
  .ospe-image-button img { height: min(53vh, 470px); }
  .ospe-question-heading { align-items: flex-start; flex-direction: column; }
  .ospe-question-heading > button { width: 100%; }
  .ospe-prompt-line { grid-template-columns: 30px minmax(0,1fr); padding: 13px; }
  .ospe-prompt-number { width: 30px; height: 30px; }
  .ospe-question-actions { grid-column: 1/-1; width: 100%; justify-content: flex-end; gap: 10px; padding-top: 2px; }
  .ospe-mcq-options { grid-template-columns: 1fr; padding: 0 13px 13px; }
  .ospe-mcq-result { padding: 0 14px 12px; }
  .ospe-answer { padding: 14px; }
  .ospe-browser { padding-top: 12px; }
  .ospe-browser-header { position: static; grid-template-columns: 1fr; gap: 11px; padding: 13px; }
  .ospe-browser-header > .qb-plain-button { width: 100%; justify-content: center; }
  .ospe-browser-layout { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ospe-browser-layout button { justify-content: center; }
  .ospe-browse-gallery.is-grid,.ospe-browse-gallery.is-stacked { grid-template-columns: 1fr; }
  .ospe-browse-image img,.ospe-browse-gallery.is-stacked .ospe-browse-image img { height: min(54vh, 480px); min-height: 250px; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .ospe-browse-gallery.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}