body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; }
.hidden { display: none !important; }
.page { display: none; }
.page.active { display: block; }
.option-btn { cursor:pointer; border:2px solid #e5e7eb; border-radius:8px; padding:12px 16px; margin:8px 0; transition:all 0.2s; background:white; display:block; width:100%; text-align:left; }
.option-btn:hover { border-color:#1e3a8a; background:#eff6ff; }
.option-btn.selected { border-color:#1e3a8a; background:#dbeafe; color:#1e3a8a; font-weight:600; }
.progress-bar { transition:width 0.1s linear; }
.status-badge { display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:600; }
.badge-green { background:#dcfce7; color:#16a34a; }
.badge-orange { background:#ffedd5; color:#ea580c; }
.badge-gray { background:#f3f4f6; color:#6b7280; }
.card { background:white; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:24px; }
.phase-card { border-left:4px solid #1e3a8a; border-radius:8px; background:#f8faff; padding:16px; margin:12px 0; }
.exercise-item { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; margin:12px 0; }
.exercise-header { padding:12px 16px; cursor:pointer; background:#f9fafb; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.exercise-header:hover { background:#f0f4ff; }
.exercise-body { padding:16px; display:none; border-top:1px solid #e5e7eb; }
.exercise-body.open { display:block; }
.complete-btn { background:#1e3a8a; color:white; border:none; padding:6px 14px; border-radius:6px; cursor:pointer; font-size:13px; white-space:nowrap; flex-shrink:0; }
.complete-btn.done { background:#16a34a; cursor:default; }
.suggestion-card { border:1px solid #e5e7eb; border-radius:10px; padding:18px; margin:12px 0; }
.accept-btn { background:#1e3a8a; color:white; border:none; padding:6px 16px; border-radius:6px; cursor:pointer; margin-right:8px; }
.ignore-btn { background:#f3f4f6; color:#6b7280; border:none; padding:6px 16px; border-radius:6px; cursor:pointer; }
.accepted { background:#dcfce7; color:#16a34a; border-radius:6px; padding:4px 12px; font-weight:600; font-size:13px; }
.ignored { background:#f3f4f6; color:#9ca3af; border-radius:6px; padding:4px 12px; font-size:13px; }
.nav-btn { padding:6px 14px; border-radius:6px; cursor:pointer; font-size:14px; border:none; background:transparent; color:#4b5563; }
.nav-btn:hover { background:#f0f4ff; color:#1e3a8a; }
.nav-btn.active { background:#dbeafe; color:#1e3a8a; font-weight:600; }
.code-block { background:#1e293b; color:#e2e8f0; font-family:'Courier New',monospace; border-radius:8px; padding:14px; overflow-x:auto; font-size:12px; margin:8px 0; line-height:1.6; white-space:pre; }
.subject-card { cursor:pointer; border:2px solid #e5e7eb; border-radius:12px; padding:20px 12px; text-align:center; transition:all 0.2s; background:white; }
.subject-card:hover { border-color:#1e3a8a; background:#eff6ff; transform:translateY(-2px); box-shadow:0 4px 12px rgba(30,58,138,0.15); }
.kg-column { display:flex; flex-direction:column; gap:16px; align-items:center; }
.kg-node { border-radius:10px; padding:10px 14px; cursor:pointer; font-size:13px; font-weight:600; border:2px solid transparent; min-width:110px; text-align:center; transition:all 0.2s; position:relative; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,0.12); }
.kg-node:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.18); }
.kg-node.kg-selected { border-color:#1e3a8a !important; box-shadow:0 0 0 3px rgba(30,58,138,0.2); }
.kg-mastered { background:#dcfce7; color:#15803d; }
.kg-learning { background:#fef9c3; color:#92400e; }
.kg-unstarted { background:#f3f4f6; color:#6b7280; }
.sprint-selected { border-color:#1e3a8a !important; background:#dbeafe !important; color:#1e3a8a !important; font-weight:600 !important; }