/* ============================================================
   Pikachu 靶场实战 · 页面组件样式（2026-10-01）
   暗色主题，与 roadmap style.css 配色统一
   ============================================================ */

.pk-nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.pk-chip { font-size: 13px; color: var(--cyan); border: 1px solid var(--border-hi); padding: 7px 16px; border-radius: 18px; text-decoration: none; }
.pk-chip:hover { text-decoration: none; border-color: var(--cyan); }
.pk-chip.dim { color: var(--text3); border-color: var(--border); }

.pk-content { line-height: 1.9; }
.pk-content p { margin: 0 0 14px; }

.pk-h3 { font-size: 17px; color: var(--text); margin: 34px 0 14px; padding-left: 12px; border-left: 3px solid var(--cyan); }
.pk-h3n { display: inline-block; font-size: 12px; color: #04120a; background: linear-gradient(135deg, #00c853, #00b8d4); border-radius: 6px; padding: 2px 10px; margin-right: 10px; vertical-align: 2px; font-weight: 700; }

.pk-intro { background: rgba(0, 212, 255, .05); border: 1px solid var(--border-hi); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--text2); margin-bottom: 18px; line-height: 1.9; }
.pk-intro strong { color: var(--text); }

.pk-info { background: rgba(255, 255, 255, .03); border: 1px dashed var(--border-hi); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: 13px; }
.pk-info-r { padding: 3px 0; color: var(--text2); }
.pk-info-r strong { color: var(--text); }
.pk-info code, .pk-p code, .pk-ul code, .pk-ol code, .pk-help code, .pk-def code, .pk-story code, .pk-quiz code, .pk-shot code { background: rgba(0, 212, 255, .08); color: #7cffcb; padding: 1px 6px; border-radius: 5px; font-size: 12.5px; word-break: break-all; }

.pk-story { background: rgba(255, 215, 64, .06); border: 1px solid rgba(255, 215, 64, .35); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--text2); margin: 0 0 16px; line-height: 1.9; }
.pk-story strong { color: #ffe082; }
.pk-tag { display: block; font-size: 12px; font-weight: 700; color: #ffe082; margin-bottom: 6px; letter-spacing: .5px; }

.pk-step-t { font-size: 14.5px; font-weight: 700; color: var(--text); margin: 18px 0 10px; }
.pk-ol { margin: 0 0 16px; padding-left: 22px; color: var(--text2); font-size: 14px; }
.pk-ol li { margin-bottom: 8px; }
.pk-ol li strong { color: var(--text); }
.pk-ul { margin: 0 0 16px; padding-left: 20px; color: var(--text2); font-size: 14px; }
.pk-ul li { margin-bottom: 6px; }

.pk-shot { border: 1px dashed var(--border-hi); border-radius: 10px; padding: 10px 16px; font-size: 12.5px; color: var(--text3); margin: 0 0 16px; background: rgba(255, 255, 255, .02); }

.pk-help { background: rgba(255, 92, 122, .05); border: 1px solid rgba(255, 92, 122, .3); border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; }
.pk-help-t { font-size: 13px; font-weight: 700; color: #ff8fa3; margin-bottom: 8px; }
.pk-help ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text2); line-height: 1.9; }
.pk-help li { margin-bottom: 6px; }
.pk-help strong { color: var(--text); }

.pk-def { background: rgba(0, 230, 118, .05); border: 1px solid rgba(0, 230, 118, .3); border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; font-size: 14px; color: var(--text2); line-height: 1.9; }
.pk-def .pk-tag { color: #7dffb8; }

.pk-quiz { border: 1px solid var(--border-hi); border-radius: 12px; padding: 12px 18px; margin: 0 0 18px; background: rgba(255, 255, 255, .02); }
.pk-quiz summary { cursor: pointer; font-size: 14px; color: var(--text); font-weight: 600; list-style: none; }
.pk-quiz summary::-webkit-details-marker { display: none; }
.pk-quiz summary::after { content: ' ▸ 点开看答案'; font-size: 12px; color: var(--text3); font-weight: 400; }
.pk-quiz[open] summary::after { content: ''; }
.pk-quiz-a { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13.5px; color: #7dffb8; line-height: 1.9; }

.pk-content pre { background: rgba(0, 0, 0, .35); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; }
.pk-content pre code { background: none; color: #9fe8c8; padding: 0; font-size: 12.5px; line-height: 1.8; display: block; white-space: pre; }

@media (max-width: 640px) {
  .pk-h3 { font-size: 16px; }
  .pk-content { font-size: 14.5px; }
}

/* ============================================================
   v2 追加（2026-10-01）：表格 / 引用 / 图片 / 总目录卡片 / 打卡表
   ============================================================ */

.pk-tablewrap { overflow-x: auto; margin: 0 0 16px; }
.pk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pk-table th, .pk-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.pk-table th { color: var(--cyan); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.pk-table td { color: var(--text2); }

.pk-quote { border-left: 3px solid var(--border-hi); margin: 0 0 16px; padding: 10px 16px; color: var(--text2); font-size: 13.5px; background: rgba(255,255,255,.02); border-radius: 0 10px 10px 0; line-height: 1.9; }
.pk-quote strong { color: var(--text); }

.pk-img { text-align: center; margin: 0 0 16px; }
.pk-img img { max-width: 100%; border-radius: 10px; background: #fff; padding: 6px; }

.pk-h2 { font-size: 19px; color: var(--text); margin: 36px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.pk-h2n { display: inline-block; font-size: 12px; color: #04120a; background: linear-gradient(135deg, #00c853, #00b8d4); border-radius: 6px; padding: 2px 10px; margin-right: 10px; vertical-align: 2px; font-weight: 700; }
.pk-h3-plain { border-left-color: rgba(255,215,64,.7); }
.pk-quiz-mod { font-size: 14.5px; font-weight: 700; color: #ffe082; margin: 22px 0 10px; }
.pk-quiz-app summary { font-size: 13.5px; }

.pk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pk-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; text-decoration: none; position: relative; transition: border-color .15s; }
.pk-card:hover { border-color: var(--border-hi); text-decoration: none; }
.pk-card-n { position: absolute; right: 18px; top: 16px; font-family: Consolas, monospace; font-size: 22px; font-weight: 800; color: rgba(0,212,255,.35); }
.pk-card-t { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; padding-right: 46px; }
.pk-card-m { font-size: 12px; color: var(--text3); margin-bottom: 8px; }
.pk-card-d { font-size: 13px; color: var(--text2); line-height: 1.8; margin-bottom: 10px; }
.pk-card-go { font-size: 12.5px; color: var(--cyan); }
@media (max-width: 640px) { .pk-grid { grid-template-columns: 1fr; } }

.ck-hero { padding: 20px 24px; }
.ck-bar-row { display: flex; align-items: center; gap: 16px; }
.ck-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.ck-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(135deg, #00c853, #00b8d4); transition: width .3s; }
.ck-num { font-family: Consolas, monospace; font-size: 18px; color: var(--text2); white-space: nowrap; }
.ck-num b { color: #7dffb8; font-size: 24px; }
.ck-sub { margin-top: 10px; font-size: 13.5px; color: var(--text2); }
.ck-mod { margin-bottom: 22px; }
.ck-mod-h { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--border-hi); margin-bottom: 6px; }
.ck-mod-h b { font-size: 15px; color: var(--text); }
.ck-mod-c { font-family: Consolas, monospace; font-size: 13px; color: var(--text3); }
.ck-mod-c em { font-style: normal; color: #7dffb8; font-weight: 700; }
.ck-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13.5px; flex-wrap: wrap; }
.ck-item .ck-box { width: 18px; height: 18px; accent-color: #00c853; flex: none; cursor: pointer; }
.ck-t { flex: 1; min-width: 200px; color: var(--text2); line-height: 1.7; }
.ck-t b { color: var(--text); font-family: Consolas, monospace; font-size: 12.5px; margin-right: 4px; }
.ck-d { color: var(--text3); font-size: 12.5px; }
.ck-item.done .ck-t { color: var(--text3); text-decoration: line-through; text-decoration-color: rgba(0,230,118,.5); }
.ck-link { font-size: 12px; color: var(--cyan); text-decoration: none; flex: none; }
.ck-tip { font-size: 12.5px; color: var(--text3); line-height: 1.9; margin-top: 18px; }