:root {
  --bg: #f8f9fa; --text-main: #212529; --text-light: #6c757d;
  --primary: #0d6efd; --primary-light: #e7f1ff; --border: #dee2e6;
  --card-bg: #ffffff; --sidebar-bg: #1e293b;
}
*{box-sizing:border-box}
body { margin:0; background:var(--bg); color:var(--text-main); font-family: "Times New Roman", "Songti SC","SimSun",serif; font-size: 16px; line-height: 1.9; -webkit-font-smoothing: antialiased; }

.topbar { position:fixed; top:0; left:0; right:0; height:64px; background:rgba(248,249,250,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 32px; z-index:40; font-family:"PingFang SC",sans-serif; }
#menuToggle { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-main); }
.brand-mini { font-weight:600; color:var(--text-main); display:none; font-size:16px; }
.view-switch { display:flex; background:#e9ecef; border-radius:8px; padding:4px; margin-left:auto; }
.view-switch button { background:none; border:none; padding:8px 20px; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer; color:var(--text-light); transition:0.2s; }
.view-switch button.active { background:#fff; color:var(--primary); box-shadow:0 1px 4px rgba(0,0,0,0.1); }

#sidebar { position:fixed; top:64px; bottom:0; left:0; width:280px; overflow-y:auto; background:var(--sidebar-bg); padding:24px 0; z-index:30; transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#sidebar .brand { padding:0 24px 24px; border-bottom:1px solid #334155; margin-bottom:20px; }
#sidebar .brand h1 { color:#f8fafc; font-size:20px; margin:0 0 8px; font-weight:600; letter-spacing:1px; }
#sidebar .brand p { color:#94a3b8; font-size:13px; margin:0; }
#toc { font-size:14px; font-family:"PingFang SC",sans-serif; }
.toc-ch { margin-bottom:24px; }
.toc-ch-title { display:block; color:#fbbf24; padding:8px 24px; font-weight:600; font-size:15px; text-decoration:none; }
.toc-sec a { display:block; color:#cbd5e1; padding:10px 24px 10px 36px; text-decoration:none; transition:0.15s; cursor:pointer; border-left:3px solid transparent; font-size:14px; margin-bottom:2px; }
.toc-sec a:hover { color:#fff; background:#334155; }
.toc-sec a.active { color:#fff; border-left-color:var(--primary); background:#334155; }

main { margin-left:280px; padding:96px 48px 120px; max-width:960px; }
.view-container { display:none; }
.view-container.active { display:block; animation: fadeIn 0.3s ease; }

.single-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; font-family:"PingFang SC",sans-serif; }
.single-nav button { background:#fff; border:1px solid var(--border); padding:10px 24px; border-radius:8px; cursor:pointer; color:var(--text-main); font-size:14px; font-weight:500; transition:0.2s; box-shadow:0 2px 6px rgba(0,0,0,0.02); }
.single-nav button:hover:not(:disabled) { background:#f8f9fa; border-color:#ced4da; transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,0.04); }
.single-nav button:disabled { opacity:0.4; cursor:not-allowed; box-shadow:none; transform:none; }
#questionProgress { font-weight:600; color:var(--text-light); font-size:15px; letter-spacing:2px; }

.card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:48px; margin-bottom:40px; box-shadow:0 4px 24px rgba(0,0,0,0.03); display:flex; flex-direction:column; gap:24px; }
.card-head { display:flex; align-items:center; gap:16px; font-family:"PingFang SC",sans-serif; }
.tag { font-size:13px; padding:4px 12px; border-radius:6px; color:#fff; font-weight:600; letter-spacing:1px; }
.tag-ex { background:#8b5cf6; }
.tag-que { background:#0ea5e9; }
.num { font-weight:700; color:var(--text-main); font-size:22px; }
.card-body { white-space:pre-wrap; word-break:break-word; color:var(--text-main); font-size:17px; line-height: 2.2; letter-spacing: 1px; }

.math-matrix { display: inline-flex; flex-direction: column; vertical-align: middle; border-left: 2px solid var(--text-main); border-right: 2px solid var(--text-main); padding: 8px 12px; margin: 4px 8px; border-radius: 4px; }
.math-matrix-row { display: flex; gap: 16px; justify-content: center; line-height: 1.5; }
.math-matrix-cell { text-align: center; min-width: 20px; letter-spacing: 0; }

.card-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:8px; font-family:"PingFang SC",sans-serif; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:0.2s; background:#f1f3f5; color:var(--text-main); }
.btn:hover { background:#e9ecef; }
.btn-knowledge { background:var(--primary-light); color:var(--primary); border-color:#cfe2ff; }
.btn-knowledge:hover { background:#cfe2ff; border-color:#9ec5fe; }

.solution-wrap { display:none; margin-top:24px; padding-top:32px; border-top:1px dashed var(--border); }
.solution-wrap.is-open { display:flex; flex-direction:column; gap:24px; animation: fadeIn 0.4s ease; }
.sol-block { display:flex; flex-direction:column; gap:12px; }
.sol-title { font-family:"PingFang SC",sans-serif; font-size:14px; font-weight:600; color:var(--text-light); display:flex; align-items:center; gap:8px; }
.sol-title::before { content:''; display:inline-block; width:4px; height:14px; border-radius:2px; }
.sol-analysis .sol-title::before { background:#adb5bd; }
.sol-answer .sol-title::before { background:var(--primary); }
.sol-text { padding:20px 24px; border-radius:8px; font-size:16px; line-height: 2; white-space:pre-wrap; letter-spacing: 1px; }
.sol-analysis .sol-text { background:#f8f9fa; color:#495057; font-style: italic; }
.sol-answer .sol-text { background:#fff; border:1px solid var(--border); border-left:4px solid var(--primary); color:var(--text-main); }
@keyframes fadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.tip { color:var(--primary); border-bottom:2px dashed var(--primary); cursor:pointer; font-weight:600; padding:0 2px; }
.tip:hover { background:var(--primary-light); }
.tip-popup { position:fixed; background:#212529; color:#fff; padding:12px 16px; border-radius:8px; font-size:14px; max-width:340px; z-index:100; pointer-events:none; opacity:1; transition:0.15s; font-family:"PingFang SC",sans-serif; box-shadow:0 10px 30px rgba(0,0,0,0.15); line-height:1.6; letter-spacing: 0; }
.tip-popup.hidden { opacity:0; pointer-events:none; }

.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); z-index:50; display:none; justify-content:center; align-items:center; opacity:0; transition:0.2s; }
.modal-overlay.show { display:flex; opacity:1; }
.modal-content { background:#fff; width:92%; max-width:680px; border-radius:16px; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 24px 48px rgba(0,0,0,0.1); transform:translateY(20px); transition:0.3s; }
.modal-overlay.show .modal-content { transform:translateY(0); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:24px 32px; border-bottom:1px solid var(--border); }
.modal-header h3 { margin:0; font-size:20px; color:var(--text-main); font-family:"PingFang SC",sans-serif; font-weight:600; }
#modalClose { background:none; border:none; font-size:32px; cursor:pointer; color:#adb5bd; line-height:1; transition:0.2s; }
#modalClose:hover { color:var(--text-main); }
.modal-body { padding:32px; overflow-y:auto; font-size:16px; line-height:2; color:var(--text-main); letter-spacing: 1px; }
.modal-body h4 { margin-top:0; margin-bottom:16px; color:var(--primary); font-size:18px; font-family:"PingFang SC",sans-serif; border-bottom:1px solid var(--border); padding-bottom:12px; }
.modal-body .th-item { margin-bottom:32px; }

@media(max-width:860px){
  #menuToggle { display:block; }
  .brand-mini { display:block; }
  #sidebar { transform:translateX(-100%); top:0; width:280px; box-shadow:10px 0 30px rgba(0,0,0,0.2); }
  #sidebar.open { transform:translateX(0); }
  #overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(2px); z-index:25; }
  #overlay.show { display:block; }
  main { margin-left:0; padding:96px 20px 100px; }
  .card { padding:32px 24px; border-radius:12px; }
  .single-nav { margin-bottom:24px; }
  .math-matrix { padding: 6px 8px; margin: 2px 4px; }
  .math-matrix-row { gap: 10px; }
}