/* gate-shared.css — shared styles for all question bank pages */

/* ── Filter bar container ── */
.filter-bar {
  display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.5rem;
  align-items:center; padding:1rem 1.2rem;
  background:var(--surface); border:1px solid rgba(255,255,255,0.12); border-radius:12px;
}
.filter-group { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }

.filter-label {
  font-family:var(--mono); font-size:0.65rem; font-weight:800;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:0.28rem 0.7rem; border-radius:6px; margin-right:0.15rem; white-space:nowrap;
  border:1.5px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.08);
}
.filter-label.lbl-topic { color:#00e5ff; background:rgba(0,229,255,0.15); border-color:rgba(0,229,255,0.4); }
.filter-label.lbl-marks { color:#fbbf24; background:rgba(251,191,36,0.15); border-color:rgba(251,191,36,0.4); }
.filter-label.lbl-diff  { color:#c4b5fd; background:rgba(196,181,253,0.15); border-color:rgba(196,181,253,0.4); }

.filter-sep { width:1px; height:26px; background:rgba(255,255,255,0.18); margin:0 0.35rem; flex-shrink:0; }

/* ── Filter buttons — always visible ── */
.filter-btn {
  font-family:var(--mono); font-size:0.68rem; font-weight:700;
  padding:0.35rem 0.9rem; border-radius:7px;
  border:1.5px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.88);
  cursor:pointer; transition:all 0.14s; white-space:nowrap;
}
.filter-btn:hover { border-color:rgba(255,255,255,0.6); color:#fff; background:rgba(255,255,255,0.14); }

/* Active — base (works even without group class) */
.filter-btn.active {
  background:rgba(255,255,255,0.2); border-color:#fff; color:#fff;
  font-weight:800; box-shadow:0 0 0 2px rgba(255,255,255,0.2);
}
/* Active — group colours */
.filter-btn.active.topic-btn { background:rgba(0,229,255,0.2); border-color:#00e5ff; color:#00e5ff; box-shadow:0 0 0 2px rgba(0,229,255,0.2); }
.filter-btn.active.marks-btn { background:rgba(251,191,36,0.2); border-color:#fbbf24; color:#fbbf24; box-shadow:0 0 0 2px rgba(251,191,36,0.2); }
.filter-btn.active.diff-btn  { background:rgba(196,181,253,0.2); border-color:#c4b5fd; color:#c4b5fd; box-shadow:0 0 0 2px rgba(196,181,253,0.2); }

/* Light mode */
:root:not([data-theme="dark"]) .filter-bar { background:#fff; border-color:rgba(0,0,0,0.1); }
:root:not([data-theme="dark"]) .filter-sep { background:rgba(0,0,0,0.12); }
:root:not([data-theme="dark"]) .filter-label { color:rgba(0,0,0,0.6); background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.18); }
:root:not([data-theme="dark"]) .filter-label.lbl-topic { color:#0369a1; background:rgba(3,105,161,0.1); border-color:rgba(3,105,161,0.35); }
:root:not([data-theme="dark"]) .filter-label.lbl-marks { color:#92400e; background:rgba(146,64,14,0.1); border-color:rgba(146,64,14,0.35); }
:root:not([data-theme="dark"]) .filter-label.lbl-diff  { color:#5b21b6; background:rgba(91,33,182,0.1); border-color:rgba(91,33,182,0.35); }
:root:not([data-theme="dark"]) .filter-btn { border-color:rgba(0,0,0,0.28); background:rgba(0,0,0,0.05); color:rgba(0,0,0,0.78); }
:root:not([data-theme="dark"]) .filter-btn:hover { border-color:rgba(0,0,0,0.5); color:#000; background:rgba(0,0,0,0.09); }
:root:not([data-theme="dark"]) .filter-btn.active { background:rgba(0,0,0,0.12); border-color:#1d1d1f; color:#1d1d1f; font-weight:800; box-shadow:0 0 0 2px rgba(0,0,0,0.12); }
:root:not([data-theme="dark"]) .filter-btn.active.topic-btn { background:rgba(3,105,161,0.14); border-color:#0369a1; color:#0369a1; box-shadow:0 0 0 2px rgba(3,105,161,0.2); }
:root:not([data-theme="dark"]) .filter-btn.active.marks-btn { background:rgba(146,64,14,0.12); border-color:#92400e; color:#92400e; box-shadow:0 0 0 2px rgba(146,64,14,0.2); }
:root:not([data-theme="dark"]) .filter-btn.active.diff-btn  { background:rgba(91,33,182,0.12); border-color:#5b21b6; color:#5b21b6; box-shadow:0 0 0 2px rgba(91,33,182,0.2); }

/* ── Stats bar ── */
.stats-bar { display:flex; flex-wrap:wrap; margin-bottom:1.5rem; background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:12px; overflow:hidden; }
.stat-item { font-family:var(--mono); font-size:0.6rem; color:var(--muted); padding:0.8rem 1.25rem; flex:1; min-width:80px; text-align:center; border-right:1px solid rgba(255,255,255,0.06); }
.stat-item:last-child { border-right:none; }
.stat-item strong { color:var(--text); font-size:1.05rem; display:block; margin-bottom:0.15rem; font-weight:800; }
:root:not([data-theme="dark"]) .stats-bar { background:#fff; border-color:rgba(0,0,0,0.08); }
:root:not([data-theme="dark"]) .stat-item { border-color:rgba(0,0,0,0.06); }

/* ── Question card ── */
.q-card { background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:13px; padding:1.3rem 1.5rem 1.3rem 1.75rem; margin-bottom:1rem; position:relative; overflow:hidden; transition:border-color 0.15s,box-shadow 0.15s; }
.q-card:hover { border-color:rgba(255,255,255,0.22); box-shadow:0 2px 16px rgba(0,0,0,0.15); }
.q-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--qcolor,var(--accent)); border-radius:4px 0 0 4px; }
.q-card.solved { border-color:rgba(52,211,153,0.3); }
.q-card.solved::before { background:#34d399; }
:root:not([data-theme="dark"]) .q-card { background:#fff; border-color:rgba(0,0,0,0.1); }

/* ── Question header ── */
.q-header { display:flex; align-items:center; gap:0.55rem; margin-bottom:0.9rem; flex-wrap:wrap; }
.q-num { font-family:var(--mono); font-size:0.7rem; font-weight:800; color:var(--qcolor,var(--accent)); background:rgba(0,229,255,0.1); border:1.5px solid rgba(0,229,255,0.35); border-radius:6px; padding:0.18rem 0.6rem; white-space:nowrap; min-width:2.4rem; text-align:center; }

/* ── Badges ── */
.q-badge { font-family:var(--mono); font-size:0.62rem; font-weight:800; padding:0.22rem 0.65rem; border-radius:6px; border:1.5px solid; white-space:nowrap; letter-spacing:0.03em; }
.q-badge.gate   { color:#16a34a; border-color:rgba(22,163,74,0.6);   background:rgba(22,163,74,0.12); }
.q-badge.isro   { color:#0ea5e9; border-color:rgba(14,165,233,0.6);  background:rgba(14,165,233,0.12); }
.q-badge.drdo   { color:#a78bfa; border-color:rgba(167,139,250,0.6); background:rgba(167,139,250,0.12); }
.q-badge.psu    { color:#fbbf24; border-color:rgba(251,191,36,0.6);  background:rgba(251,191,36,0.12); }
.q-badge.ies    { color:#f472b6; border-color:rgba(244,114,182,0.6); background:rgba(244,114,182,0.12); }
.q-badge.marks1 { color:#fbbf24; border-color:rgba(251,191,36,0.55); background:rgba(251,191,36,0.1); }
.q-badge.marks2 { color:#fb923c; border-color:rgba(251,146,60,0.55); background:rgba(251,146,60,0.1); }
.q-badge.topic  { color:rgba(255,255,255,0.75); border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.08); }
.q-badge.easy   { color:#34d399; border-color:rgba(52,211,153,0.6);  background:rgba(52,211,153,0.1); }
.q-badge.medium { color:#fbbf24; border-color:rgba(251,191,36,0.6);  background:rgba(251,191,36,0.1); }
.q-badge.hard   { color:#f87171; border-color:rgba(248,113,113,0.6); background:rgba(248,113,113,0.1); }
.q-badge.year   { color:rgba(255,255,255,0.5); border-color:rgba(255,255,255,0.15); background:transparent; font-size:0.58rem; }
:root:not([data-theme="dark"]) .q-badge.topic { color:rgba(0,0,0,0.6); border-color:rgba(0,0,0,0.2); background:rgba(0,0,0,0.05); }
:root:not([data-theme="dark"]) .q-badge.year  { color:rgba(0,0,0,0.4); border-color:rgba(0,0,0,0.1); }

/* ── Question text ── */
.q-text { font-size:0.9rem; color:var(--text); line-height:1.8; margin-bottom:1.1rem; }

/* ── Answer Options ── */
.q-options { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:1.1rem; }
@media(max-width:620px){ .q-options{ grid-template-columns:1fr; } }

.q-opt { display:flex; align-items:flex-start; gap:0.65rem; padding:0.7rem 1rem; border-radius:9px; border:1.5px solid rgba(255,255,255,0.28); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.82); cursor:pointer; transition:all 0.14s; font-family:var(--mono); font-size:0.78rem; line-height:1.6; }
.q-opt:hover { border-color:rgba(255,255,255,0.55); color:#fff; background:rgba(255,255,255,0.1); }
.q-opt.selected { border-color:#f59e0b!important; color:#fff!important; background:rgba(245,158,11,0.22)!important; box-shadow:0 0 0 2px rgba(245,158,11,0.35); font-weight:700; }
.q-opt.selected .q-opt-label { color:#f59e0b; }
.q-opt.correct { border-color:#34d399!important; color:#34d399!important; background:rgba(52,211,153,0.18)!important; box-shadow:0 0 0 2px rgba(52,211,153,0.3)!important; font-weight:700; }
.q-opt.wrong   { border-color:#f87171!important; color:#f87171!important; background:rgba(248,113,113,0.18)!important; box-shadow:0 0 0 2px rgba(248,113,113,0.3)!important; font-weight:700; }
.q-opt-label { font-weight:900; flex-shrink:0; font-size:0.78rem; color:var(--qcolor,var(--accent)); min-width:1.1rem; }

:root:not([data-theme="dark"]) .q-opt { border-color:rgba(0,0,0,0.2); background:#f5f5f7; color:rgba(0,0,0,0.75); }
:root:not([data-theme="dark"]) .q-opt:hover { border-color:rgba(0,0,0,0.4); color:#000; background:#ebebed; }
:root:not([data-theme="dark"]) .q-opt.selected { border-color:#d97706!important; color:#92400e!important; background:rgba(217,119,6,0.12)!important; box-shadow:0 0 0 2px rgba(217,119,6,0.25)!important; }
:root:not([data-theme="dark"]) .q-opt.selected .q-opt-label { color:#d97706; }
:root:not([data-theme="dark"]) .q-opt.correct { border-color:#059669!important; color:#065f46!important; background:rgba(5,150,105,0.12)!important; }
:root:not([data-theme="dark"]) .q-opt.wrong   { border-color:#dc2626!important; color:#991b1b!important; background:rgba(220,38,38,0.1)!important; }

/* ── Action row ── */
.q-actions { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.btn-solve { font-family:var(--mono); font-size:0.7rem; font-weight:800; padding:0.45rem 1.2rem; border-radius:8px; border:1.5px solid var(--qcolor,var(--accent)); background:rgba(0,229,255,0.07); color:var(--qcolor,var(--accent)); cursor:pointer; transition:all 0.15s; }
.btn-solve:hover { background:rgba(0,229,255,0.16); transform:translateY(-1px); }
.btn-solve.shown { background:rgba(0,229,255,0.13); }
.q-check-hint { font-family:var(--mono); font-size:0.62rem; color:rgba(255,255,255,0.38); }
:root:not([data-theme="dark"]) .q-check-hint { color:rgba(0,0,0,0.38); }

/* ── Solution panel ── */
.q-solution { display:none; margin-top:1.1rem; padding:1.1rem 1.25rem; background:rgba(52,211,153,0.05); border:1px solid rgba(52,211,153,0.25); border-radius:10px; }
.q-solution.visible { display:block; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;} }
.sol-answer { font-family:var(--mono); font-size:0.75rem; font-weight:800; color:#34d399; margin-bottom:0.75rem; padding:0.4rem 0.75rem; background:rgba(52,211,153,0.1); border-radius:6px; display:inline-block; }
.sol-steps { font-family:var(--mono); font-size:0.72rem; color:var(--muted); line-height:1.95; }
.sol-steps strong { color:var(--text); }
.sol-steps .step { display:block; margin-bottom:0.35rem; }
.sol-steps .formula-block { display:block; background:rgba(0,0,0,0.28); border-radius:7px; padding:0.55rem 0.85rem; margin:0.45rem 0; color:#00e5ff; font-size:0.76rem; border-left:3px solid rgba(0,229,255,0.4); }
.sol-steps .key-point { display:block; background:rgba(52,211,153,0.07); border-left:3px solid #34d399; padding:0.45rem 0.7rem; margin:0.5rem 0; border-radius:0 6px 6px 0; color:var(--text); font-size:0.71rem; }
:root:not([data-theme="dark"]) .sol-steps .formula-block { background:rgba(0,0,0,0.04); color:#0369a1; border-left-color:rgba(3,105,161,0.4); }

/* ── Progress bar ── */
.progress-bar { height:5px; background:rgba(255,255,255,0.08); border-radius:3px; margin-bottom:1.5rem; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--qcolor,var(--accent)),#34d399); border-radius:3px; transition:width 0.4s ease; }
:root:not([data-theme="dark"]) .progress-bar { background:rgba(0,0,0,0.08); }

/* ── No results ── */
.no-results { text-align:center; padding:3.5rem 1rem; font-family:var(--mono); font-size:0.8rem; color:var(--muted); }
.no-results::before { content:'🔍'; display:block; font-size:2rem; margin-bottom:0.75rem; }