/* ============================================================
   VoltLab 电赛电源 AI 闯关教练 — 样式表
   设计语言：Z.ai 风格 · 黑白灰极简 · 无彩色
   ============================================================ */

:root {
  --bg: #F7F7F8;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-2: #71717A;
  --ink-3: #A1A1AA;
  --line: #E4E4E7;
  --line-2: #F4F4F5;
  --black: #000000;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --transition: 0.15s ease;
  --transition-slow: 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent !important; }
a, button, input, select, textarea, [data-page], [data-quest-id], [data-tab], .nav-links a, .phase-card, .quest-row, .quiz-option, .diag-option, .symptom-item, .badge-chip, .btn-black, .btn-outline, [data-action] { -webkit-tap-highlight-color: transparent !important; outline: none; -webkit-touch-callout: none; }
a, button, [data-page], [data-quest-id], [data-tab], .nav-links a, .phase-card, .quest-row, .quiz-option, .diag-option, .symptom-item, .badge-chip, .btn-black, .btn-outline, [data-action] { touch-action: manipulation; user-select: none; }
input, select, textarea { touch-action: auto; user-select: auto; }
a:active, button:active, [data-page]:active, [data-quest-id]:active, [data-tab]:active, [data-action]:active, .nav-links a:active, .phase-card:active, .quest-row:active { -webkit-tap-highlight-color: transparent !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Nav ===== */
nav {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 12px 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 16px; height: 16px; color: white; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  font-size: 13px; color: var(--ink-2); text-decoration: none; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-sm); transition: var(--transition);
  cursor: pointer;
}
.nav-links a:hover { background: var(--line-2); color: var(--ink); }
.nav-links a.active { background: var(--line-2); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-level { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cloud-sync-indicator {
  font-size: 11px; font-weight: 500; padding: 3px 8px;
  border-radius: 10px; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 4px;
}
.cloud-sync-indicator::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
}
.cloud-syncing { background: #eff6ff; color: #2563eb; }
.cloud-syncing::before { background: #2563eb; animation: pulse 1s infinite; }
.cloud-synced { background: #f0fdf4; color: #16a34a; }
.cloud-synced::before { background: #16a34a; }
.cloud-offline { background: var(--bg); color: var(--ink-3); }
.cloud-offline::before { background: var(--ink-3); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.btn-login {
  font-size: 13px; font-weight: 500; color: white;
  background: var(--black); padding: 7px 16px; border-radius: var(--radius-xs);
  border: none; cursor: pointer; transition: var(--transition);
}
.btn-login:hover { opacity: 0.85; }
.btn-share {
  background: none; border: none; cursor: pointer;
  color: var(--ink-2); padding: 6px; border-radius: var(--radius-xs);
  display: flex; align-items: center; transition: var(--transition);
}
.btn-share:hover { background: var(--line-2); color: var(--ink); }
.btn-share svg { width: 18px; height: 18px; }

/* ===== Hero ===== */
.hero {
  max-width: 800px; margin: 0 auto; padding: 80px 32px 64px;
  text-align: center;
}
.hero h1 {
  font-size: 36px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.25; margin-bottom: 16px;
}
.hero p {
  font-size: 15px; color: var(--ink-2); line-height: 1.7;
  max-width: 480px; margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 10px; justify-content: center; }
.btn-black {
  font-size: 14px; font-weight: 500; color: white;
  background: var(--black); padding: 11px 24px; border-radius: var(--radius-sm);
  border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.btn-black:hover { opacity: 0.85; }
.btn-outline {
  font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--card); padding: 11px 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); cursor: pointer; transition: var(--transition);
}
.btn-outline:hover { border-color: var(--ink-3); }
.btn-black:active, .btn-outline:active { opacity: 0.7; transform: scale(0.97); } .nav-links a:active, .quest-row:active, .phase-card:active, .quiz-option:active, .diag-option:active { opacity: 0.7; }
.hero-illust { max-width: 680px; margin: 48px auto 0; }

/* ===== Section ===== */
.section { max-width: 1080px; margin: 0 auto; padding: 0 32px 64px; }
.section-head { margin-bottom: 24px; }
.section-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.section-sub { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* ===== Page System ===== */
.page { display: none; }
.page.active { display: block; animation: pageSlideIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Back Link ===== */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  margin-bottom: 20px; transition: var(--transition);
}
.back-link:hover { color: var(--ink); }
.back-link svg { transition: var(--transition); }
.back-link:hover svg { transform: translateX(-2px); }

/* ===== Card ===== */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-pad { padding: 24px; }
.card-label { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-bottom: 16px; }

/* ===== Dashboard ===== */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.level-card { display: flex; align-items: center; gap: 16px; }
.level-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: white; flex-shrink: 0;
}
.level-info .lt { font-size: 15px; font-weight: 600; }
.level-info .ls { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.xp-bar { height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 14px; }
.xp-fill { height: 100%; background: var(--ink); border-radius: 2px; transition: width 0.5s ease; }
.xp-text { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 6px; }

.countdown-card { text-align: center; }
.cd-big { font-size: 44px; font-weight: 300; color: var(--ink); line-height: 1; }
.cd-big .cu { font-size: 16px; color: var(--ink-2); font-weight: 400; }
.cd-sub { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.cd-dots { display: flex; gap: 3px; justify-content: center; margin-top: 14px; }
.cd-dots div { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: var(--transition); }
.cd-dots div.on { background: var(--ink); }
.cd-dots div.now { background: var(--ink); transform: scale(1.4); }

.stats-card { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; }
.stat-row .sl { font-size: 13px; color: var(--ink-2); }
.stat-row .sv { font-size: 18px; font-weight: 600; }

.dash-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.task-list { display: flex; flex-direction: column; gap: 14px; }
.task-item { display: flex; align-items: center; gap: 12px; }
.task-check {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.task-check.done { background: var(--ink); border-color: var(--ink); }
.task-check.done svg { width: 10px; height: 10px; color: white; }
.task-check.active { border-color: var(--ink); }
.task-check.active::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.task-info { flex: 1; }
.task-info .tt { font-size: 13px; font-weight: 500; }
.task-info .ts { font-size: 11px; color: var(--ink-3); }
.task-pts { font-size: 12px; font-weight: 600; color: var(--ink-2); }

.radar-wrap { display: flex; justify-content: center; padding: 4px 0; }

.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--line);
  transition: var(--transition);
}
.badge-chip.unlocked { background: var(--card); color: var(--ink); }
.badge-chip.locked { background: var(--bg); color: var(--ink-3); border-color: var(--line-2); }
.badge-chip svg { width: 13px; height: 13px; }

/* ===== Training Map ===== */
.map-card { padding: 40px 32px; }
.map-svg { width: 100%; height: auto; }

.phase-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px;
}
.phase-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
  transition: var(--transition); cursor: pointer;
}
.phase-card:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.phase-card.current { border-color: var(--ink); border-width: 2px; }
.phase-card.locked { opacity: 0.5; cursor: not-allowed; }
.phase-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.phase-num { font-size: 11px; color: var(--ink-3); letter-spacing: 2px; font-weight: 600; }
.phase-status { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 12px; }
.phase-status.done { background: var(--ink); color: white; }
.phase-status.current { background: var(--line-2); color: var(--ink); }
.phase-status.locked { background: var(--bg); color: var(--ink-3); }
.phase-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.phase-desc { font-size: 12px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.5; }
.phase-progress { display: flex; align-items: center; gap: 8px; }
.phase-progress-bar { flex: 1; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.phase-progress-fill { height: 100%; background: var(--ink); border-radius: 2px; transition: width 0.5s ease; }
.phase-progress-text { font-size: 11px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }

.quest-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.quest-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid transparent;
  transition: var(--transition); cursor: pointer;
}
.quest-row:hover { border-color: var(--line); background: var(--card); }
.quest-row.completed { opacity: 0.6; }
.quest-row.locked { opacity: 0.4; cursor: not-allowed; }
.quest-row.current { border-color: var(--ink); background: var(--card); }
.quest-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  border: 1.5px solid var(--line); background: var(--card);
}
.quest-dot.done { background: var(--ink); border-color: var(--ink); color: white; }
.quest-dot.current { border-color: var(--ink); border-width: 2px; }
.quest-dot.locked { border-style: dashed; }
.quest-row-info { flex: 1; }
.quest-row-info .qt { font-size: 13px; font-weight: 500; }
.quest-row-info .qd { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.quest-row-stars { display: flex; gap: 2px; }
.quest-row-stars svg { width: 12px; height: 12px; color: var(--ink-3); }
.quest-row-stars svg.filled { color: var(--ink); }
.quest-difficulty { display: flex; gap: 2px; }
.quest-difficulty span { width: 4px; height: 12px; border-radius: 1px; background: var(--line); }
.quest-difficulty span.on { background: var(--ink); }

/* ===== Quest Detail ===== */
.quest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quest-left { padding: 28px; }
.quest-right { padding: 28px; background: var(--bg); }
.quest-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--ink-2);
  background: var(--line-2); padding: 5px 12px; border-radius: 16px;
  margin-bottom: 16px;
}
.quest-title { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.quest-desc { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-bottom: 24px; }
.spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec-box { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; border: 1px solid var(--line); }
.spec-box .sl { font-size: 11px; color: var(--ink-3); }
.spec-box .sv { font-size: 18px; font-weight: 600; margin-top: 2px; }
.spec-box .sv .su { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.schematic { margin-top: 20px; }

/* Theory section */
.theory-section { margin-top: 24px; }
.theory-block { margin-bottom: 20px; }
.theory-block-title {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;
}
.theory-list { display: flex; flex-direction: column; gap: 8px; }
.theory-item {
  font-size: 13px; color: var(--ink); line-height: 1.7;
  padding-left: 16px; position: relative;
}
.theory-item::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3);
}
.formula-list { display: flex; flex-direction: column; gap: 6px; }
.formula-item {
  font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12px;
  background: var(--ink); color: #D4D4D8; padding: 8px 12px;
  border-radius: var(--radius-xs); line-height: 1.6;
}

/* Coach section */
.coach-title { font-size: 13px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.coach-title svg { width: 16px; height: 16px; }
.coach-bubble {
  background: var(--card); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 10px;
  font-size: 14px; line-height: 1.7; color: var(--ink);
  border: 1px solid var(--line);
}
.coach-bubble .hint { color: var(--ink-2); font-size: 13px; }
.coach-formula {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  background: var(--ink); color: #D4D4D8; padding: 14px 18px;
  border-radius: var(--radius-sm); margin: 10px 0; line-height: 1.8;
}
.coach-formula .var { color: #A1A1AA; }
.coach-formula .result { color: #FFFFFF; font-weight: 500; }

/* Quiz section */
.quiz-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.quiz-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.quiz-list { display: flex; flex-direction: column; gap: 20px; }
.quiz-item { }
.quiz-question { font-size: 14px; font-weight: 500; margin-bottom: 12px; line-height: 1.6; }
.quiz-question .qnum { color: var(--ink-3); font-weight: 400; margin-right: 6px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
  font-size: 13px; cursor: pointer; transition: var(--transition);
}
.quiz-option:hover { border-color: var(--ink-3); background: var(--bg); }
.quiz-option.selected { border-color: var(--ink); background: var(--line-2); }
.quiz-option.correct { border-color: #16a34a; background: #f0fdf4; color: #166534; }
.quiz-option.correct .quiz-option-letter { background: #16a34a; color: white; }
.quiz-option.wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.quiz-option.wrong .quiz-option-letter { background: #dc2626; color: white; }
.quiz-option { position: relative; }
.option-mark { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.mark-correct { color: #16a34a; }
.mark-wrong { color: #dc2626; }
.quiz-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; margin-top: 8px;
}
.badge-correct { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.badge-wrong { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.quiz-option-letter {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  background: var(--line-2); color: var(--ink-2);
}
.quiz-option.selected .quiz-option-letter { background: var(--ink); color: white; }
.quiz-explanation {
  margin-top: 10px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg); border-left: 3px solid var(--ink-3);
  font-size: 13px; color: var(--ink-2); line-height: 1.7;
  display: none;
}
.quiz-explanation.show { display: block; animation: fadeIn 0.3s ease; }
.quiz-explanation-label {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.quiz-explanation-text { color: var(--ink-2); }
.quiz-result {
  margin-top: 20px; padding: 20px; border-radius: var(--radius);
  background: var(--ink); color: white; text-align: center;
}
.quiz-result .qr-score { font-size: 32px; font-weight: 700; }
.quiz-result .qr-score .qr-pct { font-size: 16px; font-weight: 400; opacity: 0.7; }
.quiz-result .qr-msg { font-size: 13px; opacity: 0.7; margin-top: 4px; }
.quiz-actions { margin-top: 16px; display: flex; gap: 10px; }

/* ===== Designer ===== */
.designer-card { padding: 28px; }
.designer-inputs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.input-group input, .input-group select {
  font-size: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: inherit; transition: var(--transition);
}
.input-group input:focus, .input-group select:focus {
  outline: none; border-color: var(--ink);
}
.input-group .input-suffix { font-size: 11px; color: var(--ink-3); }
.checkbox-group { display: flex; align-items: center; gap: 8px; }
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.checkbox-group label { font-size: 13px; cursor: pointer; }

.designer-actions { display: flex; gap: 10px; margin-bottom: 24px; }

.topo-box {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px; border: 1px solid var(--line);
}
.topo-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.topo-icon svg { width: 22px; height: 22px; color: white; }
.topo-text .tn { font-size: 16px; font-weight: 600; }
.topo-text .td { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.topo-conf { margin-left: auto; text-align: right; }
.topo-conf .cv { font-size: 24px; font-weight: 700; }
.topo-conf .cl { font-size: 11px; color: var(--ink-3); }
.param-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.param-box { background: var(--bg); border-radius: var(--radius-sm); padding: 18px; text-align: center; border: 1px solid var(--line); }
.param-box .pl { font-size: 11px; color: var(--ink-3); }
.param-box .pv { font-size: 22px; font-weight: 600; margin-top: 4px; }
.param-box .pv .pu { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.risk-box {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px; margin-top: 16px;
}
.risk-box svg { width: 16px; height: 16px; color: var(--ink-2); flex-shrink: 0; margin-top: 2px; }
.risk-box span { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.detail-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-col h4 { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; font-weight: 500; }
.detail-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.detail-col li { font-size: 12px; color: var(--ink); line-height: 1.5; padding-left: 14px; position: relative; }
.detail-col li::before { content: '\00B7'; position: absolute; left: 4px; color: var(--ink-3); }

/* ===== Debug ===== */
.debug-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 12px; }
.debug-left { padding: 28px; background: var(--ink); border-color: var(--ink); }
.debug-left .card-label { color: rgba(255,255,255,0.4); }
.debug-phenom { font-size: 22px; font-weight: 600; color: white; margin-bottom: 20px; }
.scope-wrap { background: #000; border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; }
.debug-meta { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.6; }

.symptom-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.symptom-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8); font-size: 13px; cursor: pointer;
  transition: var(--transition);
}
.symptom-item:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: white; }
.symptom-item.active { background: white; color: var(--ink); border-color: white; }
.symptom-item svg { width: 14px; height: 14px; flex-shrink: 0; }

.debug-right { padding: 28px; }
.diag-list { display: flex; flex-direction: column; gap: 16px; }
.diag-item { display: flex; gap: 14px; animation: fadeIn 0.3s ease; }
.diag-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
.diag-avatar.ai { background: var(--ink); color: white; }
.diag-avatar.user { background: var(--line-2); color: var(--ink-2); }
.diag-avatar.result { background: var(--ink); color: white; }
.diag-body { flex: 1; padding-top: 4px; }
.diag-body .dr { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.diag-body .dc { font-size: 14px; color: var(--ink); margin-top: 4px; line-height: 1.6; }
.diag-body.result .dc { font-weight: 500; }

.diag-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.diag-option {
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
  font-size: 13px; cursor: pointer; transition: var(--transition);
  text-align: left;
}
.diag-option:hover { border-color: var(--ink); background: var(--line-2); }

.diag-result-box {
  background: var(--bg); border-radius: var(--radius); padding: 20px;
  margin-top: 8px; border: 1px solid var(--line);
}
.diag-result-box .diag-result-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.diag-result-box .diag-result-text { font-size: 14px; color: var(--ink); line-height: 1.7; margin-bottom: 14px; }
.diag-fix-list { display: flex; flex-direction: column; gap: 8px; }
.diag-fix-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.diag-fix-item .fix-num {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink); color: white; font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

.debug-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center; color: var(--ink-3);
}
.debug-empty svg { width: 40px; height: 40px; margin-bottom: 16px; opacity: 0.4; }
.debug-empty p { font-size: 13px; }

/* ===== Growth ===== */
.growth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.growth-card { padding: 28px; }
.growth-list { display: flex; flex-direction: column; gap: 18px; }
.growth-item { display: flex; flex-direction: column; gap: 8px; }
.growth-top { display: flex; justify-content: space-between; align-items: baseline; }
.growth-top .gn { font-size: 14px; font-weight: 500; }
.growth-top .gp { font-size: 14px; font-weight: 600; }
.growth-track { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.growth-fill { height: 100%; border-radius: 3px; background: var(--ink); transition: width 0.5s ease; }

.ach-list { display: flex; flex-direction: column; gap: 12px; }
.ach-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.ach-item:last-child { border-bottom: none; }
.ach-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ach-icon.unlocked { background: var(--ink); }
.ach-icon.unlocked svg { color: white; }
.ach-icon.locked { background: var(--line-2); }
.ach-icon.locked svg { color: var(--ink-3); }
.ach-icon svg { width: 18px; height: 18px; }
.ach-info { flex: 1; }
.ach-info .an { font-size: 14px; font-weight: 500; }
.ach-info .ad { font-size: 12px; color: var(--ink-3); }
.ach-date { font-size: 12px; color: var(--ink-3); }

/* History list */
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
}
.history-item .hi-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.history-item .hi-icon svg { width: 14px; height: 14px; color: var(--ink-2); }
.history-item .hi-info { flex: 1; }
.history-item .hi-title { font-size: 13px; font-weight: 500; }
.history-item .hi-sub { font-size: 11px; color: var(--ink-3); }
.history-item .hi-xp { font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* ===== Leaderboard ===== */
.leaderboard-refresh-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--ink-3); transition: var(--transition); border-radius: 4px;
}
.leaderboard-refresh-btn:hover { color: var(--ink); background: var(--bg); }
.leaderboard-placeholder, .leaderboard-loading {
  text-align: center; padding: 32px 16px; font-size: 13px; color: var(--ink-3);
}
.leaderboard-empty {
  text-align: center; padding: 28px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.leaderboard-empty-icon { color: var(--ink-3); opacity: 0.4; }
.leaderboard-empty-text { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.leaderboard-empty-hint { font-size: 12px; color: var(--ink-3); }
.leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
.leaderboard-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  transition: var(--transition); border: 1px solid transparent;
}
.leaderboard-row:hover { background: var(--bg); }
.leaderboard-row.is-me { background: #eff6ff; border-color: #bfdbfe; }
.lb-rank {
  width: 28px; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--ink-3); flex-shrink: 0;
}
.medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700;
  color: white;
}
.medal-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.medal-silver { background: linear-gradient(135deg, #e5e7eb, #9ca3af); }
.medal-bronze { background: linear-gradient(135deg, #d97706, #92400e); }
.lb-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.rank-gold .lb-avatar { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rank-silver .lb-avatar { background: linear-gradient(135deg, #e5e7eb, #6b7280); }
.rank-bronze .lb-avatar { background: linear-gradient(135deg, #d97706, #92400e); }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lb-me-tag {
  font-size: 10px; font-weight: 600; color: #2563eb;
  background: #dbeafe; padding: 1px 6px; border-radius: 8px;
}
.lb-stats { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.lb-xp { font-size: 13px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.leaderboard-toggle-area {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.lb-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13px; color: var(--ink-2);
}
.lb-toggle input { display: none; }
.lb-toggle-slider {
  width: 36px; height: 20px; border-radius: 10px; background: var(--line);
  position: relative; transition: var(--transition); flex-shrink: 0;
}
.lb-toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: white;
  transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.lb-toggle input:checked + .lb-toggle-slider { background: var(--ink); }
.lb-toggle input:checked + .lb-toggle-slider::after { transform: translateX(16px); }
.lb-toggle-label { user-select: none; }

/* ===== Leaderboard Page ===== */
.leaderboard-page-card { padding: 28px; }
.leaderboard-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.leaderboard-page-title {
  font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.leaderboard-page-title svg { width: 18px; height: 18px; }

/* ===== Footer ===== */
footer { text-align: center; padding: 40px 32px; border-top: 1px solid var(--line); }
footer .footer-content { display: flex; flex-direction: column; gap: 4px; align-items: center; }
footer .footer-brand { font-size: 13px; color: var(--ink-2); font-weight: 500; }
footer .footer-author { font-size: 12px; color: var(--ink-3); }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--ink); color: white; padding: 14px 24px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  z-index: 9999; opacity: 0; transition: var(--transition-slow);
  pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 16px; height: 16px; }
.toast.error { background: #DC2626; }

/* ===== Utility ===== */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }

/* ===== Schematic Section ===== */
.schematic-section { margin-top: 24px; }
.schematic-title {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.schematic-title svg { width: 14px; height: 14px; }
.schematic-wrap {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.schematic-wrap svg { max-width: 100%; height: auto; }

/* ===== Feynman Section ===== */
.feynman-section { margin-top: 28px; }
.feynman-title {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.feynman-title svg { width: 14px; height: 14px; }
.feynman-step {
  display: flex; gap: 14px; margin-bottom: 12px;
  background: var(--bg); border-radius: var(--radius-sm);
  padding: 14px 18px; border: 1px solid var(--line);
}
.feynman-step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--card); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.feynman-step-task { background: var(--ink); border-color: var(--ink); }
.feynman-step-task .feynman-step-num { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: white; }
.feynman-step-task .feynman-step-label { color: rgba(255,255,255,0.5); }
.feynman-step-task .feynman-text { color: white; }
.feynman-step-body { flex: 1; min-width: 0; }
.feynman-label {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 8px;
}
.feynman-progress {
  font-size: 11px; font-weight: 500; color: var(--ink-2);
  text-transform: none; letter-spacing: 0;
  background: var(--card); padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--line);
}
.feynman-text { font-size: 14px; color: var(--ink); line-height: 1.7; }
.feynman-check-list { display: flex; flex-direction: column; gap: 10px; }

/* Question Card */
.feynman-qcard {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: var(--transition);
}
.feynman-qcard.expanded { border-color: var(--ink-3); }
.feynman-qcard.understood { border-color: #16a34a; border-left: 3px solid #16a34a; }
.feynman-qcard.review { border-color: #f59e0b; border-left: 3px solid #f59e0b; }
.feynman-qcard-q {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; cursor: pointer; transition: var(--transition);
}
.feynman-qcard-q:hover { background: var(--bg); }
.feynman-qcard-icon {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.feynman-qcard.understood .feynman-qcard-icon { background: #f0fdf4; color: #16a34a; }
.feynman-qcard.review .feynman-qcard-icon { background: #fffbeb; color: #f59e0b; }
.feynman-qcard-text { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.6; }
.feynman-qcard-arrow { flex-shrink: 0; color: var(--ink-3); margin-top: 4px; transition: transform 0.2s ease; }
.feynman-qcard-a {
  display: none; padding: 0 14px 14px 48px;
  animation: fadeIn 0.25s ease;
}
.feynman-qcard-a.show { display: block; }
.feynman-qcard-a-label {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.feynman-qcard-a-text {
  font-size: 13px; color: var(--ink-2); line-height: 1.7;
  padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm);
  border-left: 3px solid var(--ink-3);
}
.feynman-qcard-actions { display: flex; gap: 8px; margin-top: 10px; }
.feynman-feedback-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  border-radius: 16px; cursor: pointer; transition: var(--transition);
  font-family: inherit; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2);
}
.feynman-feedback-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.feynman-understood:hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.feynman-review:hover { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }
.feynman-qcard.understood .feynman-understood { background: #16a34a; color: white; border-color: #16a34a; }
.feynman-qcard.review .feynman-review { background: #f59e0b; color: white; border-color: #f59e0b; }

/* ===== Engagement Section ===== */
.engage-section { margin-top: 28px; }
.engage-title {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.engage-title svg { width: 14px; height: 14px; }
.engage-card {
  display: flex; gap: 14px; padding: 14px 18px;
  background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--line); margin-bottom: 10px;
}
.engage-card.engage-warn { border-color: var(--ink); border-width: 1.5px; }
.engage-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.engage-icon svg { width: 16px; height: 16px; color: var(--ink-2); }
.engage-card.engage-warn .engage-icon { background: var(--ink); border-color: var(--ink); }
.engage-card.engage-warn .engage-icon svg { color: white; }
.engage-body { flex: 1; }
.engage-label { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.engage-text { font-size: 13px; color: var(--ink); line-height: 1.6; }

/* ===== Quest Detail — Tab Layout ===== */
.quest-detail { display: flex; flex-direction: column; gap: 16px; }
.quest-header { padding: 28px; }
.quest-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--line);
  overflow-x: auto;
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  padding: 0 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.quest-tabs::-webkit-scrollbar { display: none; }
.quest-tab {
  padding: 12px 24px; font-size: 14px; font-weight: 500;
  color: var(--ink-3); background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.25s ease; white-space: nowrap;
  font-family: inherit; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.quest-tab:hover { color: var(--ink-2); }
.quest-tab:active { color: var(--ink); }
.quest-tab.active {
  color: var(--ink); border-bottom-color: var(--ink); font-weight: 600;
  border-bottom-width: 2.5px;
}
.quest-tab-panel { display: none; }
.quest-tab-panel.active { display: block; animation: tabFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Quiz Guidance ===== */
.quiz-guidance { margin-top: 20px; }
.guidance-card {
  display: flex; gap: 16px; padding: 20px 24px;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.guidance-pass { background: var(--ink); color: white; border-color: var(--ink); }
.guidance-fail { background: var(--bg); border-color: var(--line); }
.guidance-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.guidance-pass .guidance-icon { background: rgba(255,255,255,0.15); }
.guidance-fail .guidance-icon { background: var(--card); border: 1px solid var(--line); }
.guidance-body { flex: 1; }
.guidance-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.guidance-text { font-size: 13px; opacity: 0.8; line-height: 1.6; margin-bottom: 12px; }
.guidance-next {
  padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 14px;
}
.guidance-pass .guidance-next { background: rgba(255,255,255,0.1); }
.guidance-fail .guidance-next { background: var(--card); border: 1px solid var(--line); }
.guidance-next-label { font-size: 11px; font-weight: 600; opacity: 0.6; margin-bottom: 4px; }
.guidance-next-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.guidance-next-desc { font-size: 12px; opacity: 0.7; line-height: 1.5; }
.guidance-suggest { margin-bottom: 14px; }
.guidance-suggest-item {
  font-size: 13px; line-height: 1.8; opacity: 0.85;
}
.guidance-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.guidance-actions .btn-black, .guidance-actions .btn-outline {
  padding: 8px 20px; font-size: 13px;
}
.guidance-pass .btn-black { background: white; color: var(--ink); }
.guidance-pass .btn-outline { border-color: rgba(255,255,255,0.3); color: white; }
.guidance-pass .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* ===== Login Modal ===== */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: overlayFade 0.2s ease;
}
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--card); border-radius: var(--radius);
  width: 380px; max-width: 90vw; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: modalSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalSlide {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 16px; font-weight: 600; }
.modal-close {
  background: none; border: none; cursor: pointer; color: var(--ink-3);
  padding: 4px; border-radius: 6px; transition: var(--transition);
  display: flex; align-items: center;
}
.modal-close:hover { background: var(--line-2); color: var(--ink); }
.modal-body { padding: 24px; }
.login-tabs {
  display: flex; gap: 0; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.login-tab {
  padding: 8px 16px; font-size: 14px; font-weight: 500;
  color: var(--ink-3); background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: var(--transition); font-family: inherit;
}
.login-tab:hover { color: var(--ink-2); }
.login-tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.login-field { margin-bottom: 16px; }
.login-field label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--ink-2); margin-bottom: 6px;
}
.login-field input {
  width: 100%; padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font-family: inherit;
  transition: var(--transition);
}
.login-field input:focus {
  outline: none; border-color: var(--ink);
}
.login-error {
  font-size: 12px; color: #DC2626; margin-bottom: 12px; min-height: 16px;
}
.login-submit {
  width: 100%; padding: 12px; font-size: 14px; justify-content: center;
  margin-top: 4px;
}
.login-hint {
  font-size: 12px; color: var(--ink-3); margin-top: 14px;
  text-align: center; line-height: 1.5;
}
.login-forgot {
  font-size: 12px; color: var(--ink-3); margin-top: 8px;
  text-align: center; cursor: pointer; transition: var(--transition);
}
.login-forgot:hover { color: var(--ink); text-decoration: underline; }
.login-security { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.security-label { font-size: 12px; display: block; margin-bottom: 8px; }
.security-hint { color: var(--ink-3); font-weight: 400; }
.security-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.security-select { width: 100%; font-size: 13px; padding: 8px 10px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: #FFFFFF; color: #1A1A1A; font-family: inherit; }
.security-answer { width: 100%; font-size: 13px; padding: 8px 10px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: #FFFFFF; font-family: inherit; color: #1A1A1A; -webkit-text-fill-color: #1A1A1A; }

/* ===== Nav User ===== */
.nav-user {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 8px; border-radius: var(--radius-sm); transition: var(--transition);
}
.nav-user:hover { background: var(--line-2); }
.nav-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.nav-user-name { font-size: 13px; font-weight: 500; color: var(--ink); }

/* ===== User Menu Dropdown ===== */
.user-menu {
  position: fixed; top: 60px; right: 32px; z-index: 200;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); width: 260px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  animation: menuSlide 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.user-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.user-menu-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
.user-menu-name { font-size: 14px; font-weight: 600; }
.user-menu-level { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.user-menu-actions { padding: 8px; }
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; font-size: 13px;
  color: var(--ink); background: none; border: none; cursor: pointer;
  border-radius: var(--radius-sm); transition: var(--transition);
  font-family: inherit; text-align: left;
}
.user-menu-item:hover { background: var(--line-2); }
.user-menu-danger { color: #DC2626; }
.user-menu-danger:hover { background: #FEF2F2; }

/* ===== Confirm Modal ===== */
.confirm-icon {
  display: flex; justify-content: center; margin-bottom: 16px;
}
.confirm-message {
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  text-align: center; margin-bottom: 20px;
}
.confirm-actions {
  display: flex; gap: 12px; justify-content: center;
}
.confirm-actions button { flex: 1; justify-content: center; padding: 10px; font-size: 14px; }

/* ===== Tour ===== */
.tour-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.45); z-index: 3000;
  display: flex; align-items: flex-end; justify-content: center;
  animation: overlayFade 0.3s ease;
}
.tour-card {
  background: var(--card); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; padding: 32px 28px 24px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
  animation: tourSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  pointer-events: auto !important;
}
@keyframes tourSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.tour-step {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  letter-spacing: 1px; margin-bottom: 8px;
}
.tour-title {
  font-size: 18px; font-weight: 600; margin-bottom: 10px;
  line-height: 1.4;
}
.tour-desc {
  font-size: 15px; color: var(--ink-2); line-height: 1.7;
  margin-bottom: 8px;
}
.tour-desc b { color: var(--ink); font-weight: 600; }
.tour-indicator {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.tour-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); transition: var(--transition);
}
.tour-dot.active { background: var(--ink); width: 20px; border-radius: 3px; }
.tour-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px;
}
.tour-skip {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--ink-3); font-family: inherit;
  padding: 8px 12px; border-radius: 8px; transition: var(--transition);
}
.tour-skip:hover { background: var(--line-2); color: var(--ink-2); }
.tour-next {
  padding: 10px 28px; font-size: 14px;
}
.tour-target-highlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.8), 0 0 0 8px rgba(0,0,0,0.15);
  z-index: 3001;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: highlightPulse 2s ease-in-out infinite;
}
@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.8), 0 0 0 8px rgba(0,0,0,0.15); }
  50% { box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 0 0 12px rgba(0,0,0,0.1); }
}
.tour-center-card {
  background: var(--card);
  border-radius: 20px;
  padding: 40px 32px;
  max-width: 400px;
  width: 88vw;
  text-align: center;
  animation: modalSlide 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.2);
  pointer-events: auto !important;
}

/* ===== Onboarding (old, preserved for fallback) ===== */
.onboard-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  animation: overlayFade 0.3s ease;
}
.onboard-card {
  background: var(--card); border-radius: 20px;
  width: 400px; max-width: 88vw; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.2);
  animation: modalSlide 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 40px 36px 28px;
}
.onboard-step { text-align: center; }
.onboard-illust {
  width: 80px; height: 80px; border-radius: 20px;
  background: var(--line-2); margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.onboard-illust svg { width: 40px; height: 40px; }
.onboard-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.onboard-desc { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.onboard-desc b { color: var(--ink); font-weight: 600; }
.onboard-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
  nav { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; padding: 6px 10px; font-size: 12px; }
  .nav-right { gap: 8px; }
  .hero { padding: 40px 16px 28px; }
  .hero h1 { font-size: 28px; }
  .section { padding: 0 14px 40px; }
  .dash-grid, .dash-row2 { grid-template-columns: 1fr; }
  .quest-grid { grid-template-columns: 1fr; }
  .debug-grid { grid-template-columns: 1fr; gap: 10px; }
  .growth-grid { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: 1fr; }
  .designer-inputs { grid-template-columns: 1fr 1fr; }
  .param-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .quest-header { padding: 18px 14px; }
  .quest-left, .quest-right { padding: 18px 14px; }
  .quest-tab { padding: 10px 14px; font-size: 13px; }
  .quest-title { font-size: 17px; }
  .quest-desc { font-size: 12px; }
  .schematic-wrap svg { max-width: 100%; height: auto; }
  .feynman-card { padding: 12px 14px; }
  .engage-card { padding: 12px 14px; gap: 10px; }
  .guidance-card { padding: 16px; gap: 12px; }
  .guidance-actions { flex-direction: column; }
  .guidance-actions button { width: 100%; }
  .debug-left { padding: 20px 16px; }
  .debug-right { padding: 20px 16px; }
  .user-menu { right: 14px; width: 240px; }
  .modal-card { width: 92vw; }
}
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.7; }
  .designer-inputs { grid-template-columns: 1fr; }
  .param-grid { grid-template-columns: 1fr 1fr; }
  .spec-row { grid-template-columns: 1fr 1fr; }
  .hero { padding: 28px 14px 20px; }
  .hero h1 { font-size: 24px; line-height: 1.35; letter-spacing: -0.02em; }
  .hero p { font-size: 15px; }
  .hero-illust { margin: 28px -14px 0; max-width: calc(100% + 28px); overflow: hidden; }
  .section { padding: 0 16px 28px; }
  .section-title { font-size: 20px; font-weight: 600; }
  .section-sub { font-size: 14px; }
  .quest-tabs { gap: 0; overflow-x: auto; }
  .quest-tab { padding: 14px 16px; }
  .quest-title { font-size: 20px; }
  .quest-desc { line-height: 1.8; }
  .spec-box { padding: 12px 14px; }
  .spec-box .sv { font-size: 18px; }
  .coach-bubble { padding: 14px 16px; }
  .quiz-option { padding: 12px 16px; }
  .quiz-option-letter { width: 26px; height: 26px; font-size: 12px; }
  .feynman-step { padding: 14px 16px; gap: 12px; }
  .feynman-qcard-a { padding-left: 14px; }
  .nav-level { display: none; }
  .cloud-sync-indicator { display: none; }
  .nav-user-name { display: none; }
  .logo { font-size: 16px; }
  .logo-mark { width: 28px; height: 28px; }
  .guidance-title { font-size: 18px; }
  .guidance-next-title { font-size: 17px; }
  .map-svg { width: 100%; }
  .badge-row { flex-wrap: wrap; }
  .badge-chip { font-size: 13px; padding: 6px 10px; }
  .diag-option { font-size: 14px; padding: 12px 14px; }
  .diag-avatar { width: 28px; height: 28px; font-size: 10px; }
  .diag-item { gap: 12px; }
  .diag-result-box { padding: 14px; }
  .diag-fix-item { font-size: 14px; padding: 10px 12px; }
  .symptom-item { padding: 14px 16px; font-size: 14px; }
  .debug-phenom { font-size: 20px; }
  .scope-wrap { padding: 12px; }
  .card { padding: 18px 16px; }
  .btn-black, .btn-outline { font-size: 14px; padding: 14px 20px; }
  .toast { bottom: 20px; padding: 16px 22px; max-width: 92vw; }
  .user-menu { right: 10px; left: 10px; width: auto; }
  .user-menu-item { padding: 14px 16px; }
  footer { padding: 28px 16px; }
  footer .footer-brand { font-size: 14px; }
  footer .footer-author { font-size: 13px; }
  .tour-overlay { align-items: flex-end; }
  .tour-card { padding: 18px 16px 16px; max-width: 100%; border-radius: 14px 14px 0 0; }
  .tour-card .tour-title { font-size: 16px; margin-bottom: 4px; }
  .tour-card .tour-desc { font-size: 13px; line-height: 1.5; margin-bottom: 2px; }
  .tour-card .tour-actions { margin-top: 10px; }
  .tour-card .tour-skip { font-size: 13px; padding: 6px 10px; }
  .tour-indicator { gap: 5px; }
  .tour-dot { width: 5px; height: 5px; }
  .tour-dot.active { width: 16px; }
  .tour-target-highlight { border-radius: 8px; box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 0 0 6px rgba(0,0,0,0.12); }
  .tour-center-card { padding: 28px 20px; max-width: 86vw; }
  .tour-center-card .tour-title { font-size: 18px; }
  .tour-center-card .tour-desc { font-size: 14px; }
  .onboard-card { padding: 28px 20px 24px; }
  .card-label { font-size: 13px; }
  .stat-row .sv { font-size: 22px; }
  .task-info .ts { font-size: 13px; }
  .growth-top .gn { font-size: 16px; }
  .phase-name { font-size: 18px; }
  .phase-desc { font-size: 14px; }
  .quest-row-info .qd { font-size: 13px; }
  .back-link { font-size: 14px; }
  .modal-overlay { align-items: flex-start; padding-top: 5vh; }
  .modal-card { max-height: 85vh; overflow-y: auto; }
}