/* ═══════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════
   ADMIN EDIT BUTTONS (visible only to logged-in admins)
═══════════════════════════════════════════ */

/* Single question page — top edit bar */
.pyq-admin-edit-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 1.5px dashed #D97706;
  border-radius: 10px;
}
.pyq-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FEE2E2;
  color: #991B1B;
  border: 1.5px solid #FCA5A5;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 7px;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-right: auto; /* push edit btn to the right */
}
.pyq-admin-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #D97706;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .15s, transform .15s;
  box-shadow: 0 2px 4px rgba(217, 119, 6, 0.25);
}
.pyq-admin-edit-btn:hover {
  background: #B45309;
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Listing card — small edit button */
.pyq-admin-edit-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF3C7;
  color: #92400E !important;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1.5px solid #FCD34D;
  text-decoration: none !important;
  margin-left: 4px;
  transition: background .15s;
}
.pyq-admin-edit-card-btn:hover {
  background: #FCD34D;
  color: #78350F !important;
  text-decoration: none !important;
}

/* ──────────────────────────────────────────────
   KATEX / LaTeX rendering on the public frontend
   These rules let display math scroll on small screens instead of
   forcing the whole card or the page to widen, and tune inline math
   to inherit text size so it visually integrates with surrounding prose.
────────────────────────────────────────────────── */
.pyq-math .katex { font-size: 1.05em; }
.pyq-math .katex-display { margin: .9em 0; overflow-x: auto; overflow-y: hidden; }
.pyq-math .katex-display > .katex { font-size: 1.15em; }

/* Inside the listing card's question text — keep the math from making rows tall */
.pyq-q-text.pyq-math .katex-display { margin: .5em 0; }

/* Inside MCQ option lines — math should fit within the option width */
.pyq-opt-content .pyq-math .katex { font-size: 1em; }

/* Solution explanation can use slightly larger display math for readability */
.pyq-sol-body.pyq-math .katex-display > .katex { font-size: 1.2em; }

/* ──────────────────────────────────────────────
   "VERIFIED BY ___" trust badges
   Two flavors:
   1. .pyq-verified-badge       — large, prominent, on the single-question page
   2. .pyq-card-verified-badge  — compact, sits at the bottom of each listing card
────────────────────────────────────────────────── */

/* — Single-question page (under the meta pills, above the H1) — */
.pyq-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 1.5px solid #10B981;
  color: #065F46;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0 16px;
  letter-spacing: .2px;
}
.pyq-verified-badge-icon { font-size: 1rem; line-height: 1; }
.pyq-verified-badge-text strong { color: #047857; font-weight: 800; }

/* — Listing card version (slim, under the actions row) — */
.pyq-card-verified-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 14px 4px;
  padding: 6px 11px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #065F46;
}
.pyq-card-verified-icon { font-size: .95rem; line-height: 1; }
.pyq-card-verified-text strong { font-weight: 800; color: #047857; }

/* ─────────────────────────────────────────────────────
   FORMATTED TEXT — bold, italics, multi-part questions
   pyq_format_text() turns **x** → <strong>, splits "(A)..(B)..(C)"
   onto new paragraphs separated by <br><br>. These styles make sure
   bold reads as bold (even inside an h1 that's already font-weight:600)
   and that the gap between parts is visually obvious.
───────────────────────────────────────────────────── */
.pyq-single-question h1 strong,
.pyq-sol-body strong,
.pyq-q-text strong { font-weight: 800; color: #111827; }
.pyq-single-question h1 em,
.pyq-sol-body em,
.pyq-q-text em { font-style: italic; }

/* The double <br/><br/> we emit for paragraph breaks renders as a tight
   stack by default — give it a touch of vertical rhythm so multi-part
   questions and step-by-step solutions feel separated. */
.pyq-single-question h1 br + br,
.pyq-sol-body br + br { content: ""; display: block; margin-top: .5em; }

/* ══════════════════════════════════════════
   ACTIVE FILTERS BAR
══════════════════════════════════════════ */
.pyq-active-filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}

.pyq-af-label {
  font-weight: 600;
  color: #4338ca;
  white-space: nowrap;
  margin-right: 4px;
}

.pyq-af-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.pyq-af-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #4f46e5;
  color: #fff;
  border-radius: 20px;
  padding: 4px 10px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pyq-af-tag-label {
  opacity: 0.8;
  font-size: 11px;
}

.pyq-af-tag-val {
  font-weight: 600;
}

.pyq-af-tag-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 11px;
  padding: 0 0 0 4px;
  line-height: 1;
  transition: color .15s;
}
.pyq-af-tag-remove:hover { color: #fff; }

.pyq-af-clear-all {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  margin-left: auto;
}
.pyq-af-clear-all:hover { background: #dc2626; }

@media (max-width: 600px) {
  .pyq-active-filters-bar { font-size: 12px; padding: 8px 10px; }
}