/* ═══════════════════════════════════════════
   PYQ Bank — Frontend Styles
═══════════════════════════════════════════ */
:root {
  --pyq-pri:    #4F46E5;
  --pyq-pri-lt: #EEF2FF;
  --pyq-green:  #10B981;
  --pyq-green-lt:#ECFDF5;
  --pyq-amber:  #F59E0B;
  --pyq-red:    #EF4444;
  --pyq-border: #E5E7EB;
  --pyq-bg:     #F8F9FF;
  --pyq-text:   #111827;
  --pyq-muted:  #6B7280;
  --pyq-radius: 14px;
  --pyq-sidebar:260px;
}

/* ─── WRAP ─── */
.pyq-wrap { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--pyq-text); }
.pyq-wrap * { box-sizing: border-box; }

/* ─── TOPBAR ─── */
.pyq-topbar {
  background: linear-gradient(135deg,#3730A3,#4F46E5);
  border-radius: var(--pyq-radius); padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.pyq-search-box { flex: 1; position: relative; min-width: 200px; }
.pyq-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; }
.pyq-search-box input { width: 100%; padding: 10px 14px 10px 36px; border-radius: 25px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.15); color: #fff; font-size: .88rem; outline: none; font-family: inherit; transition: .2s; }
.pyq-search-box input:focus { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.22); }
.pyq-search-box input::placeholder { color: rgba(255,255,255,.6); }
.pyq-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pyq-total-count { background: #F59E0B; color: #1F2937; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.pyq-sort-select { padding: 8px 28px 8px 12px; border-radius: 9px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.15); color: #fff; font-size: .8rem; font-family: inherit; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8 10.5L3 5.5h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
.pyq-sort-select option { background: #1e1e2e; color: #fff; }

/* ─── BODY LAYOUT ─── */
.pyq-body { display: flex; gap: 1.2rem; align-items: flex-start; }

/* ─── SIDEBAR ─── */
.pyq-sidebar { width: var(--pyq-sidebar); flex-shrink: 0; background: #fff; border: 2px solid var(--pyq-border); border-radius: var(--pyq-radius); padding: 1rem; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.pyq-filter-label { font-size: .68rem; font-weight: 800; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: .4rem; display: block; }
.pyq-filter-section { margin-bottom: .9rem; }
.pyq-filter-select-main {
  width: 100%;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1.5px solid var(--pyq-border);
  background: #fff;
  color: var(--pyq-text);
  font-size: .82rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: auto;
  -webkit-appearance: auto;
}
.pyq-filter-select-main:hover { border-color: #C7D2FE; }
.pyq-filter-select-main:focus { border-color: var(--pyq-pri); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.pyq-clear-filters { width: 100%; padding: 8px; border-radius: 9px; border: 2px solid var(--pyq-border); background: transparent; color: var(--pyq-muted); font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: .12s; margin-top: .5rem; }
.pyq-clear-filters:hover { border-color: var(--pyq-red); color: var(--pyq-red); background: #FEF2F2; }

/* ─── MAIN ─── */
.pyq-main { flex: 1; min-width: 0; }

/* ─── LOADING ─── */
.pyq-loading { text-align: center; padding: 3rem; color: var(--pyq-muted); font-size: .9rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pyq-spinner { width: 20px; height: 20px; border: 3px solid var(--pyq-border); border-top-color: var(--pyq-pri); border-radius: 50%; animation: pyq-spin .7s linear infinite; }
@keyframes pyq-spin { to { transform: rotate(360deg); } }

/* ─── QUESTION CARD ─── */
.pyq-q-card { background: #fff; border: 2px solid var(--pyq-border); border-radius: var(--pyq-radius); margin-bottom: 12px; transition: .18s; overflow: hidden; }
.pyq-q-card:hover { border-color: #C7D2FE; box-shadow: 0 4px 20px rgba(79,70,229,.1); transform: translateY(-1px); }
.pyq-q-top { padding: 1rem 1.1rem .9rem; display: flex; gap: 10px; align-items: flex-start; }
.pyq-q-num { width: 36px; height: 36px; border-radius: 9px; background: var(--pyq-pri-lt); border: 2px solid #C7D2FE; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: var(--pyq-pri); flex-shrink: 0; }
.pyq-q-body { flex: 1; min-width: 0; }
.pyq-q-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .5rem; }

/* Pills */
.pyq-pill { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; }
.pyq-pill-cls  { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
.pyq-pill-sub  { background: #F5F3FF; color: #5B21B6; border: 1px solid #DDD6FE; }
.pyq-pill-ch   { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.pyq-pill-yr   { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }
.pyq-pill-mk   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; font-family: monospace; }
.pyq-pill-type-mcq    { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.pyq-pill-type-short  { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.pyq-pill-type-long   { background: #FFF1F2; color: #9F1239; border: 1px solid #FECDD3; }
.pyq-pill-type-assert { background: #F5F3FF; color: #5B21B6; border: 1px solid #DDD6FE; }
.pyq-pill-type-case   { background: #FFFBEB; color: #78350F; border: 1px solid #FDE68A; }
.pyq-pill-type-fill   { background: #F0FDF4; color: #14532D; border: 1px solid #BBF7D0; }
.pyq-pill-easy { background: #D1FAE5; color: #065F46; }
.pyq-pill-medium { background: #FEF3C7; color: #92400E; }
.pyq-pill-hard { background: #FEE2E2; color: #991B1B; }

.pyq-q-text { font-size: .9rem; font-weight: 500; line-height: 1.7; color: var(--pyq-text); margin-bottom: .4rem; }
.pyq-q-img { max-height: 280px; width: auto; border-radius: 9px; border: 2px solid var(--pyq-border); margin: .5rem 0; display: block; object-fit: contain; background: var(--pyq-bg); }

/* MCQ Options */
.pyq-options { display: flex; flex-direction: column; gap: 5px; margin: .6rem 0; }
.pyq-option { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--pyq-bg); border: 1.5px solid var(--pyq-border); font-size: .85rem; }
.pyq-option.correct { background: var(--pyq-green-lt); border-color: #A7F3D0; color: #065F46; font-weight: 600; }
.pyq-opt-lbl { width: 22px; height: 22px; border-radius: 5px; background: var(--pyq-border); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; flex-shrink: 0; }
.pyq-option.correct .pyq-opt-lbl { background: var(--pyq-green); color: #fff; }
.pyq-opt-content { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pyq-opt-img { max-width: 100%; max-height: 130px; border-radius: 6px; border: 1px solid #E5E7EB; object-fit: contain; background: #F9FAFB; display: block; }

/* Action bar */
.pyq-q-actions { display: flex; align-items: center; gap: 8px; padding: .7rem 1.1rem; border-top: 1.5px solid #F3F4F6; background: #FAFBFF; flex-wrap: wrap; }
.pyq-btn-sol { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 9px; border: 2px solid var(--pyq-pri); background: var(--pyq-pri-lt); color: var(--pyq-pri); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: .15s; }
.pyq-btn-sol:hover, .pyq-btn-sol.open { background: var(--pyq-pri); color: #fff; }
.pyq-btn-share { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 9px; border: 2px solid var(--pyq-border); background: #fff; color: var(--pyq-muted); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .15s; }
.pyq-btn-share:hover { border-color: var(--pyq-amber); color: var(--pyq-amber); background: #FFFBEB; }
.pyq-q-board { margin-left: auto; font-size: 11px; font-weight: 700; color: #9CA3AF; }

/* Solution Panel */
.pyq-solution-panel { display: none; padding: 1rem 1.1rem; background: linear-gradient(135deg,#F0FDF4,#ECFDF5); border-top: 2px solid #A7F3D0; }
.pyq-solution-panel.open { display: block; }
.pyq-sol-header { display: flex; align-items: center; gap: 8px; margin-bottom: .7rem; }
.pyq-sol-label { font-size: .75rem; font-weight: 800; color: var(--pyq-green); text-transform: uppercase; letter-spacing: .8px; background: #fff; padding: 3px 10px; border-radius: 7px; border: 1.5px solid #A7F3D0; }
.pyq-sol-marks { font-size: 11px; font-weight: 700; color: var(--pyq-green); background: #fff; padding: 3px 10px; border-radius: 7px; border: 1.5px solid #A7F3D0; }
.pyq-sol-text { font-size: .88rem; line-height: 1.8; color: #1F2937; white-space: pre-wrap; }
.pyq-sol-img { margin-top: .7rem; border-radius: 10px; border: 2px solid #A7F3D0; max-height: 350px; object-fit: contain; display: block; }

/* ─── EMPTY STATE ─── */
.pyq-empty-state { text-align: center; padding: 4rem 2rem; color: var(--pyq-muted); }
.pyq-empty-icon { font-size: 3rem; margin-bottom: .7rem; }
.pyq-empty-state h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.pyq-empty-state p { font-size: .85rem; }

/* ─── PAGINATION ─── */
.pyq-pagination { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 1.5rem 0; flex-wrap: wrap; }
.pyq-pg-btn { width: 36px; height: 36px; border-radius: 9px; border: 2px solid var(--pyq-border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--pyq-muted); cursor: pointer; transition: .12s; font-family: inherit; }
.pyq-pg-btn:hover, .pyq-pg-btn.active { background: var(--pyq-pri); border-color: var(--pyq-pri); color: #fff; }
.pyq-pg-btn:disabled { opacity: .4; cursor: default; }
.pyq-pg-dots { padding: 0 4px; color: #9CA3AF; font-size: 14px; }

/* ─── MOBILE ─── */
.pyq-mobile-filter-btn { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--pyq-pri); color: #fff; border: none; border-radius: 50px; padding: 11px 22px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(79,70,229,.4); font-family: inherit; z-index: 99; }

/* ─── VOTE BAR ─── */
.pyq-vote-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pyq-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 9px;
  border: 2px solid var(--pyq-border);
  background: #fff;
  color: var(--pyq-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
  line-height: 1;
}
.pyq-like-btn:hover,
.pyq-like-btn.voted {
  border-color: var(--pyq-green);
  color: var(--pyq-green);
  background: var(--pyq-green-lt);
}
.pyq-dislike-btn:hover,
.pyq-dislike-btn.voted {
  border-color: var(--pyq-red);
  color: var(--pyq-red);
  background: #FEF2F2;
}
.pyq-vote-count {
  font-size: 11px;
  font-weight: 800;
  min-width: 14px;
  text-align: center;
}

/* ─── STAR RATING BAR ─── */
.pyq-rating-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 1.1rem 8px;
  border-top: 1px solid #F3F4F6;
  background: #FAFBFF;
  flex-wrap: wrap;
}
.pyq-rating-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pyq-muted);
  white-space: nowrap;
  letter-spacing: .02em;
  font-family: inherit;
}
.pyq-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.pyq-star {
  font-size: 22px;
  line-height: 1;
  color: #CBD5E1;
  cursor: pointer;
  transition: color .1s, transform .1s;
  user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",Arial,sans-serif;
  font-style: normal;
}
.pyq-star.active {
  color: #F59E0B;
}
.pyq-star.hover {
  color: #FCD34D;
  transform: scale(1.2);
}
.pyq-star:not(.active):hover {
  color: #FCD34D;
  transform: scale(1.2);
}
.pyq-rating-info {
  font-size: 11px;
  color: var(--pyq-muted);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 2px;
  font-family: inherit;
}

/* ─── MOBILE SIDEBAR CLOSE BUTTON ─── */
.pyq-mobile-close-btn {
  display: none;
  width: 100%;
  margin-top: .8rem;
  padding: 11px;
  border-radius: 9px;
  border: 2px solid var(--pyq-red);
  background: #FEF2F2;
  color: var(--pyq-red);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.pyq-mobile-close-btn:hover { background: var(--pyq-red); color: #fff; }

/* ─── SINGLE QUESTION PAGE ─── */
.pyq-single-wrap { max-width: 780px; margin: 2rem auto; padding: 0 1rem; }
.pyq-single-breadcrumb { font-size: .82rem; color: var(--pyq-muted); margin-bottom: 1.2rem; }
.pyq-single-breadcrumb a { color: var(--pyq-pri); font-weight: 600; }
.pyq-single-card { background: #fff; border: 2px solid var(--pyq-border); border-radius: var(--pyq-radius); overflow: hidden; }
.pyq-single-meta { display: flex; flex-wrap: wrap; gap: 5px; padding: 1rem 1.2rem; border-bottom: 2px solid var(--pyq-border); background: var(--pyq-bg); }
.pyq-single-question { padding: 1.5rem 1.2rem 1rem; }
.pyq-single-question h1 { font-size: 1.1rem; font-weight: 600; line-height: 1.7; color: var(--pyq-text); }
.pyq-single-img { max-height: 300px; width: auto; border-radius: 9px; border: 2px solid var(--pyq-border); margin: .7rem 1.2rem; display: block; object-fit: contain; }
.pyq-single-options { padding: .5rem 1.2rem 1rem; display: flex; flex-direction: column; gap: 6px; }
.pyq-single-option { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: var(--pyq-bg); border: 1.5px solid var(--pyq-border); font-size: .88rem; }
.pyq-single-option.correct { background: var(--pyq-green-lt); border-color: #A7F3D0; }
.pyq-opt-lbl { width: 24px; height: 24px; border-radius: 6px; background: var(--pyq-border); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; flex-shrink: 0; }
.pyq-single-option.correct .pyq-opt-lbl { background: var(--pyq-green); color: #fff; }
.pyq-correct-badge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--pyq-green); }
.pyq-single-solution { padding: 1.2rem; background: linear-gradient(135deg,#F0FDF4,#ECFDF5); border-top: 2px solid #A7F3D0; }
.pyq-sol-header { font-size: .8rem; font-weight: 800; color: var(--pyq-green); text-transform: uppercase; letter-spacing: .8px; margin-bottom: .7rem; }
.pyq-sol-body { font-size: .9rem; line-height: 1.8; color: #1F2937; }
.pyq-single-footer { display: flex; align-items: center; gap: 10px; padding: 1rem 1.2rem; border-top: 2px solid var(--pyq-border); flex-wrap: wrap; }
.pyq-btn-share, .pyq-btn-nav { padding: 9px 18px; border-radius: 10px; font-size: .85rem; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none; transition: .15s; border: 2px solid var(--pyq-border); background: #fff; color: var(--pyq-muted); display: inline-flex; align-items: center; gap: 6px; }
.pyq-btn-share:hover { border-color: var(--pyq-amber); color: var(--pyq-amber); background: #FFFBEB; }
.pyq-btn-nav { margin-left: auto; border-color: var(--pyq-pri); color: var(--pyq-pri); background: var(--pyq-pri-lt); }
.pyq-btn-nav:hover { background: var(--pyq-pri); color: #fff; }

@media (max-width: 768px) {
  .pyq-body { flex-direction: column; }
  .pyq-sidebar { display: none; width: 100%; position: fixed; top: 0; left: 0; bottom: 0; z-index: 199; border-radius: 0; max-height: 100vh; overflow-y: auto; padding-bottom: 1.5rem; }
  .pyq-sidebar.open { display: block; }
  .pyq-mobile-filter-btn { display: flex; }
  .pyq-mobile-close-btn { display: block; }
  .pyq-topbar { border-radius: 10px; }
}

/* ─── INTERACTIVE MCQ ─── */
.pyq-option[onclick] {
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
}
.pyq-option[onclick]:hover {
  background: #EEF2FF;
  border-color: var(--pyq-pri);
  transform: translateX(4px);
}
.pyq-opt-correct {
  background: #D1FAE5 !important;
  border-color: #34D399 !important;
  color: #065F46 !important;
  font-weight: 600;
}
.pyq-opt-correct .pyq-opt-lbl { background: #059669 !important; color: #fff !important; }
.pyq-opt-wrong {
  background: #FEE2E2 !important;
  border-color: #F87171 !important;
  color: #991B1B !important;
}
.pyq-opt-wrong .pyq-opt-lbl { background: #DC2626 !important; color: #fff !important; }
.pyq-opt-reveal {
  background: #D1FAE5 !important;
  border-color: #34D399 !important;
  opacity: .85;
}
.pyq-opt-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.pyq-opt-badge-correct { background: #059669; color: #fff; }
.pyq-opt-badge-wrong   { background: #DC2626; color: #fff; }
.pyq-attempt-hint {
  font-size: 12px;
  color: var(--pyq-muted);
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: .01em;
}
.pyq-result-msg {
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.pyq-result-correct { background: #D1FAE5; color: #065F46; border: 1.5px solid #6EE7B7; }
.pyq-result-wrong   { background: #FEE2E2; color: #991B1B; border: 1.5px solid #FCA5A5; }
.pyq-try-again-btn {
  display: block;
  margin: 10px auto 0;
  padding: 7px 20px;
  border-radius: 9px;
  border: 2px solid var(--pyq-border);
  background: #fff;
  color: var(--pyq-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.pyq-try-again-btn:hover { border-color: var(--pyq-pri); color: var(--pyq-pri); background: var(--pyq-pri-lt); }

/* ═══════════════════════════════════════════
   LISTING PAGE — question link + view button
═══════════════════════════════════════════ */
.pyq-q-link { display:block; text-decoration:none; color:inherit; }
.pyq-q-link:hover .pyq-q-text { color:var(--pyq-pri,#4F46E5); }
.pyq-q-link:hover { text-decoration:none; }

.pyq-btn-view-answer {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px;
  background:var(--pyq-pri,#4F46E5); color:#fff !important;
  font-size:13px; font-weight:700; border-radius:10px;
  text-decoration:none !important;
  box-shadow:0 2px 8px rgba(79,70,229,.25);
  transition:background .15s,transform .15s,box-shadow .15s;
  white-space:nowrap;
}
.pyq-btn-view-answer:hover {
  background:#4338CA; transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(79,70,229,.35);
  text-decoration:none !important;
}

.pyq-wrong-nudge {
  display:inline-flex; align-items:center;
  font-size:13px; font-weight:700; color:#D97706;
  background:#FEF3C7; border:1.5px solid #F59E0B;
  border-radius:8px; padding:6px 14px; margin-right:8px;
  text-decoration:none; transition:background .15s;
}
.pyq-wrong-nudge:hover { background:#FDE68A; color:#B45309; text-decoration:none; }

/* ═══════════════════════════════════════════
   SINGLE QUESTION PAGE
═══════════════════════════════════════════ */
.pyq-single-wrap { max-width:860px; margin:0 auto; padding:20px 16px 60px; }

.pyq-single-breadcrumb {
  font-size:13px; color:var(--pyq-muted,#6B7280);
  margin-bottom:18px;
}
.pyq-single-breadcrumb a { color:var(--pyq-pri,#4F46E5); text-decoration:none; }
.pyq-single-breadcrumb a:hover { text-decoration:underline; }

.pyq-single-card {
  background:#fff; border:1.5px solid var(--pyq-border,#E5E7EB);
  border-radius:16px; padding:28px 28px 20px; margin-bottom:36px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
@media(max-width:600px){ .pyq-single-card { padding:18px 14px; } }

.pyq-single-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }

.pyq-single-question h1 {
  font-size:20px; font-weight:700; line-height:1.5;
  color:var(--pyq-text,#111827); margin:0 0 18px;
}

.pyq-single-img { max-width:100%; border-radius:10px; margin:10px 0; border:1px solid var(--pyq-border,#E5E7EB); }

/* MCQ options on single page */
.pyq-single-options { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }

.pyq-single-option {
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--pyq-border,#E5E7EB);
  border-radius:10px; padding:11px 14px;
  cursor:pointer; transition:background .15s,border-color .15s;
  position:relative;
}
.pyq-opt-pre-reveal:hover { background:var(--pyq-pri-lt,#EEF2FF); border-color:var(--pyq-pri,#4F46E5); }

.pyq-opt-lbl {
  min-width:30px; height:30px; line-height:30px; text-align:center;
  background:var(--pyq-pri-lt,#EEF2FF); color:var(--pyq-pri,#4F46E5);
  border-radius:50%; font-weight:700; font-size:13px; flex-shrink:0;
}
.pyq-opt-content { flex:1; font-size:14.5px; color:var(--pyq-text,#111827); }
.pyq-opt-badge-sq {
  font-size:12px; font-weight:700; padding:3px 10px;
  border-radius:20px; white-space:nowrap; min-width:60px; text-align:center;
}

.pyq-single-option.sq-opt-correct { background:#D1FAE5 !important; border-color:#6EE7B7 !important; cursor:default; }
.pyq-single-option.sq-opt-correct .pyq-opt-badge-sq { background:#059669; color:#fff; }
.pyq-single-option.sq-opt-wrong   { background:#FEE2E2 !important; border-color:#FCA5A5 !important; cursor:default; }
.pyq-single-option.sq-opt-wrong   .pyq-opt-badge-sq { background:#DC2626; color:#fff; }

.pyq-sq-attempt-hint { font-size:12.5px; color:var(--pyq-muted,#6B7280); margin:6px 0 0; text-align:center; }

/* Reveal button */
.pyq-sq-reveal-wrap { text-align:center; margin:20px 0; }
.pyq-sq-reveal-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 32px;
  background:linear-gradient(135deg,#4F46E5,#7C3AED);
  color:#fff; font-size:15px; font-weight:700;
  border:none; border-radius:12px; cursor:pointer;
  font-family:inherit;
  box-shadow:0 4px 16px rgba(79,70,229,.35);
  transition:transform .15s,box-shadow .15s;
}
.pyq-sq-reveal-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 20px rgba(79,70,229,.45); }
.pyq-sq-reveal-btn:disabled { background:#10B981; box-shadow:none; cursor:default; transform:none; }
@media(max-width:600px){ .pyq-sq-reveal-btn { width:100%; justify-content:center; } }

/* Correct answer label */
.pyq-sq-correct-ans {
  background:#D1FAE5; border:1.5px solid #6EE7B7;
  border-radius:10px; padding:10px 16px;
  font-size:14px; font-weight:600; color:#065F46; margin-bottom:14px;
}

/* Solution panel */
.pyq-answer-hidden  { display:none !important; }

@keyframes pyq-reveal {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.pyq-reveal-anim { display:block !important; animation:pyq-reveal .3s ease; }

.pyq-single-solution {
  background:#F9FAFB; border:1.5px solid #E5E7EB;
  border-radius:12px; padding:20px 20px; margin-top:6px;
}
.pyq-sol-header { font-size:15px; font-weight:800; color:var(--pyq-text,#111827); margin-bottom:12px; }
.pyq-sol-body   { font-size:14.5px; color:var(--pyq-text,#111827); line-height:1.7; }

/* Share button */
.pyq-btn-share {
  padding:8px 16px; border-radius:10px; font-size:13px; font-weight:700;
  border:1.5px solid var(--pyq-border,#E5E7EB); background:#fff;
  color:var(--pyq-text,#111827); cursor:pointer; font-family:inherit;
  text-decoration:none; transition:border-color .15s,color .15s;
}
.pyq-btn-share:hover { border-color:var(--pyq-pri,#4F46E5); color:var(--pyq-pri,#4F46E5); }
.pyq-btn-nav {
  display:inline-block; padding:8px 18px; border-radius:10px;
  font-size:13px; font-weight:700; text-decoration:none;
  transition:background .15s,border-color .15s;
}

/* Related questions */
.pyq-related-section { margin:0 0 40px; }
.pyq-related-title {
  font-size:19px; font-weight:800; color:var(--pyq-text,#111827);
  margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--pyq-border,#E5E7EB);
}
.pyq-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }

.pyq-related-card {
  display:block; background:#fff; border:1.5px solid var(--pyq-border,#E5E7EB);
  border-radius:12px; padding:14px 16px; text-decoration:none; color:inherit;
  transition:box-shadow .18s,border-color .18s,transform .18s;
}
.pyq-related-card:hover {
  border-color:var(--pyq-pri,#4F46E5);
  box-shadow:0 4px 14px rgba(79,70,229,.12);
  transform:translateY(-2px); text-decoration:none; color:inherit;
}
.pyq-related-card-meta { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.pyq-related-card-text { font-size:13px; color:var(--pyq-text,#111827); margin:0; line-height:1.5; }

.pyq-related-loading { display:flex; align-items:center; gap:10px; color:var(--pyq-muted,#6B7280); font-size:14px; }
.pyq-spinner-sm {
  display:inline-block; width:18px; height:18px;
  border:3px solid #E5E7EB; border-top-color:var(--pyq-pri,#4F46E5);
  border-radius:50%; animation:pyq-spin .7s linear infinite;
}
.pyq-related-empty { color:var(--pyq-muted,#6B7280); font-size:14px; }
@media(max-width:600px){ .pyq-related-grid { grid-template-columns:1fr; } }

/* ── Single page: star rating LEFT · like/dislike RIGHT ── */
.pyq-sq-interactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--pyq-border, #E5E7EB);
  border-bottom: 1px solid var(--pyq-border, #E5E7EB);
}
@media(max-width:500px){
  .pyq-sq-interactions { justify-content: center; gap: 10px; }
}

/* ── Footer navigation ── */
.pyq-single-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--pyq-border, #E5E7EB);
}
.pyq-nav-group { display: flex; gap: 8px; }
.pyq-btn-prev {
  background: #fff; color: var(--pyq-pri, #4F46E5) !important;
  border: 1.5px solid var(--pyq-pri, #4F46E5);
}
.pyq-btn-prev:hover { background: var(--pyq-pri-lt, #EEF2FF); text-decoration:none; }
.pyq-btn-next {
  background: var(--pyq-pri, #4F46E5); color: #fff !important;
  border: 1.5px solid var(--pyq-pri, #4F46E5);
}
.pyq-btn-next:hover { background: #4338CA; border-color: #4338CA; text-decoration:none; }

/* Disabled nav button (no related prev/next exists) */
.pyq-btn-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Back to Bank — styled as a button */
.pyq-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #EF4444;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid #EF4444;
  border-radius: 10px;
  text-decoration: none !important;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.pyq-btn-back:hover {
  background: #2563EB;
  border-color: #2563EB;
  text-decoration: none !important;
}