/* ============================================================
   政治刷题页（复用 assets/style.css 的主题变量与按钮）
   ============================================================ */

body{overflow:auto}
#app{display:block;height:auto;min-height:100vh;overflow:visible}

.pol-top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:12px 22px;border-bottom:1px solid var(--line);
  background:var(--panel);
}
.pol-back{font-size:12.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.pol-back:hover{color:var(--accent)}
.pol-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.pol-logo{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,184,77,.25),rgba(255,123,114,.2));
  border:1px solid rgba(255,184,77,.35);font-size:19px;
}
.pol-title{font-size:16px;font-weight:700;line-height:1.3}
.pol-sub{font-size:11px;color:var(--muted)}

.pol-acc-btn{
  border:1px solid var(--line-2);background:transparent;color:var(--text-2);
  padding:7px 12px;border-radius:9px;font-size:12.5px;cursor:pointer;
  font-family:inherit;white-space:nowrap;
}
.pol-acc-btn:hover{border-color:var(--accent);color:var(--accent)}

.pol-main{max-width:860px;margin:0 auto;padding:26px 20px 80px}
.pol-panel{animation:polIn .18s ease}
@keyframes polIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 顶部横幅：正确率第一（只在政治 / 单词两页出现） */
.champ{
  max-width:860px;margin:12px auto 0;padding:9px 16px;
  border:1px solid rgba(255,184,77,.35);border-radius:12px;
  background:linear-gradient(135deg,rgba(255,184,77,.14),rgba(61,220,151,.08));
  font-size:12.5px;color:var(--text-2);line-height:1.6;
  display:flex;align-items:center;gap:8px;
}
.champ[hidden]{display:none}
.champ b{color:var(--text)}
.champ:before{content:""}
@media (max-width:640px){ .champ{font-size:12px;padding:8px 12px;margin:10px 12px 0} }

.pol-hero h1{font-size:25px;margin:4px 0 10px;letter-spacing:.5px}
.pol-hero p{font-size:13.5px;color:var(--text-2);line-height:1.8;margin:0;max-width:680px}
.pol-hero b{color:var(--amber)}

.pol-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 4px}
.pol-stat{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:3px;
}
.pol-stat span{font-size:11px;color:var(--muted)}
.pol-stat b{font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums}

.pol-subject{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.pol-chip-btn{
  border:1px solid var(--line);background:transparent;color:var(--text-2);
  padding:6px 13px;border-radius:20px;font-size:12.5px;cursor:pointer;font-family:inherit;
}
.pol-chip-btn:hover{border-color:var(--accent);color:var(--accent)}
.pol-chip-btn.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600}

.pol-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.pol-actions.center{justify-content:center}
.pol-tip{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:18px}

/* 答题 */
.pol-quiz-head{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.pol-chip{
  font-size:11px;color:var(--amber);border:1px solid rgba(255,184,77,.4);
  background:rgba(255,184,77,.1);border-radius:5px;padding:1px 7px;
}
.pol-progress-text{font-variant-numeric:tabular-nums}
.pol-diff{font-size:10.5px;border-radius:5px;padding:1px 6px;line-height:1.7;border:1px solid var(--line)}
.pol-diff.d1{color:var(--teal);border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.1)}
.pol-diff.d2{color:var(--amber);border-color:rgba(255,184,77,.4);background:rgba(255,184,77,.1)}
.pol-diff.d3{color:var(--red);border-color:rgba(255,123,114,.4);background:rgba(255,123,114,.1)}
.pol-type{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px;line-height:1.7}
.pol-diff-count{font-size:11.5px;color:var(--muted);margin:8px 0 0}
.pol-link{border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit}
.pol-link:hover{color:var(--red)}
.pol-bar{margin:10px 0 20px}

.pol-question{font-size:19px;line-height:1.7;margin:0 0 18px;font-weight:650}
.pol-options{display:flex;flex-direction:column;gap:10px}
.pol-opt{
  display:flex;gap:11px;align-items:flex-start;text-align:left;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--text);font-size:14px;line-height:1.6;
  cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s;
}
.pol-opt:hover:not(:disabled){border-color:var(--accent)}
.pol-opt:disabled{cursor:default}
.pol-opt .key{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  background:var(--panel-3);display:grid;place-items:center;
  font-size:11px;color:var(--text-2);margin-top:1px;
}
.pol-opt.correct{border-color:rgba(61,220,151,.65);background:rgba(61,220,151,.1)}
.pol-opt.correct .key{background:var(--teal);color:#04121f}
.pol-opt.wrong{border-color:rgba(255,123,114,.65);background:rgba(255,123,114,.1)}
.pol-opt.wrong .key{background:var(--red);color:#1a0605}
.pol-opt.dim{opacity:.5}
.pol-opt.picked{border-color:var(--accent);background:var(--accent-dim)}
.pol-submit{margin-top:14px;min-width:140px}

.pol-feedback{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.pol-verdict{font-weight:700;font-size:13.5px;margin-bottom:6px}
.pol-verdict.ok{color:var(--teal)}
.pol-verdict.no{color:var(--red)}
.pol-explain{font-size:13.5px;color:var(--text-2);line-height:1.85;margin:0 0 6px}
.pol-ref{font-size:11.5px;color:var(--muted);margin:0 0 12px}

/* 结果 */
.pol-result-card{
  text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:38px 24px;
}
.pol-result-emoji{font-size:46px;line-height:1}
.pol-result-card h2{font-size:20px;margin:8px 0 10px}
.pol-result-line{font-size:14px;color:var(--text-2);margin:0 0 6px}
.pol-result-line b{color:var(--text);font-size:16px}

/* 正确率榜 */
.pol-modal{
  position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
}
.pol-modal.open{display:flex}
.pol-modal-card{
  width:100%;max-width:540px;max-height:84vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;
}
.pol-modal-head{display:flex;align-items:center;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.pol-modal-head h3{margin:0;font-size:15px;flex:1}
.pol-modal-close{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px}
.pol-modal-close:hover{background:var(--panel-2);color:var(--text)}

.pol-rank-head,.pol-rank-row{
  display:grid;grid-template-columns:36px 1fr 54px 54px 64px;
  gap:6px;align-items:center;font-size:12px;
}
.pol-rank-head{padding:10px 16px 6px;color:var(--muted);font-size:11px;letter-spacing:.3px}
.pol-rank-list{overflow-y:auto;padding:0 14px 10px}
.pol-rank-row{padding:8px;border-radius:8px;border:1px solid transparent}
.pol-rank-row + .pol-rank-row{margin-top:2px}
.pol-rank-row.self{background:rgba(90,169,255,.14);border-color:rgba(90,169,255,.4)}
.pol-rank-row .rk{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.pol-rank-row.top1 .rk{color:#ffb020;font-weight:700}
.pol-rank-row.top2 .rk{color:#b9c4d0;font-weight:700}
.pol-rank-row.top3 .rk{color:#d08a5a;font-weight:700}
.pol-rank-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pol-rank-row .me{color:var(--accent);font-size:11px;margin-left:3px}
.pol-rank-row .t,.pol-rank-row .c,.pol-rank-row .pc{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2)}
.pol-rank-row .pc{color:var(--text);font-weight:600}
.pol-rank-empty{text-align:center;color:var(--muted);font-size:13px;padding:30px 0}
.pol-modal-foot{
  display:flex;justify-content:space-between;gap:10px;padding:9px 16px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted);
}
.pol-modal-foot a{color:var(--accent);text-decoration:none;cursor:pointer}

@media (max-width:640px){
  .pol-top{padding:10px 13px;gap:8px;flex-wrap:wrap}
  .pol-back{font-size:11.5px}
  .pol-title{font-size:14px}
  .pol-sub{display:none}
  .pol-main{padding:18px 13px 70px}
  .pol-hero h1{font-size:21px}
  .pol-stats{grid-template-columns:1fr 1fr}
  .pol-question{font-size:16.5px}
  .pol-opt{font-size:13.5px;padding:12px 13px}
  .pol-rank-head,.pol-rank-row{grid-template-columns:30px 1fr 44px 44px 54px;font-size:11px}
  .pol-top .top-tools{margin-left:auto}
  .pol-acc-btn{font-size:0;padding:7px 10px}
  .pol-acc-btn::before{content:"🎯";font-size:15px}
}