/* ===== 智学研途 · 408 知识能力画像（知识点雷达图） =====
   只负责这一块，不改动既有 v2 面板与掌握度页的样式。
   配色沿用 css/style.css 的变量与 .zx-st-* 五档色，不另立一套。 */

.kr-panel{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.kr-panel-head{padding:14px 16px 0;background:linear-gradient(180deg,#f7faff,#fff)}
.kr-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kr-title{font-size:14px;font-weight:800;color:#1e293b;letter-spacing:.2px}
.kr-badge{font-size:10px;font-weight:700;color:var(--blue);background:var(--blue-soft);
  border:1px solid #d6e4ff;border-radius:999px;padding:2px 7px}
.kr-badge.is-warn{color:#b45309;background:#fef4e6;border-color:#f8e0bd}
.kr-sub{margin-top:6px;font-size:11px;line-height:1.7;color:#8a97aa}
.kr-tabs{display:flex;gap:6px;margin:12px 0 0;flex-wrap:wrap;padding-bottom:12px}
.kr-tab{border:1px solid var(--line);background:#fff;color:#5b6b85;border-radius:9px;
  padding:6px 11px;font-size:12px;transition:.16s;display:flex;align-items:center;gap:6px}
.kr-tab:hover{border-color:#c9d9f5;color:var(--blue)}
.kr-tab.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.kr-tab small{font-size:10px;opacity:.75}
.kr-body{padding:14px 16px 16px}

/* ---- 总览：四门课程 ---- */
.kr-courses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kr-course{border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer;
  background:#fcfdff;transition:.16s;text-align:left}
.kr-course:hover{border-color:#bcd2f6;box-shadow:0 6px 16px rgba(37,99,235,.08);transform:translateY(-1px)}
.kr-course-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.kr-course-name{font-size:12.5px;font-weight:800;color:#1e293b}
.kr-course-tag{font-size:10px;color:#7f8da3;background:#f1f5f9;border-radius:999px;padding:1px 6px}
.kr-course-tag.is-ok{color:var(--blue);background:var(--blue-soft)}
.kr-course-score{display:flex;align-items:baseline;gap:5px;margin:8px 0 2px}
.kr-course-score b{font-size:23px;line-height:1;color:#1d3b6e;font-variant-numeric:tabular-nums}
.kr-course-score b.is-na{font-size:14px;color:#a2adbd;font-weight:700}
.kr-course-score small{font-size:10px;color:#8a97aa}
.kr-course-foot{margin-top:7px;font-size:10.5px;color:#8a97aa;line-height:1.6}

/* ---- 五档分布条 ---- */
.kr-dist{display:flex;height:7px;border-radius:999px;overflow:hidden;background:#eef2f8;margin-top:8px}
.kr-dist i{display:block;height:100%}
.kr-dist i.d-insufficient{background:#cbd5e1}
.kr-dist i.d-not_mastered{background:#ef8f8f}
.kr-dist i.d-weak{background:#f2c078}
.kr-dist i.d-basic{background:#7fa9f5}
.kr-dist i.d-stable{background:#4fc3a1}
.kr-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:7px;font-size:10.5px;color:#7f8da3}
.kr-legend span{display:inline-flex;align-items:center;gap:4px}
.kr-legend em{width:7px;height:7px;border-radius:2px;display:inline-block;font-style:normal}
.kr-legend em.d-insufficient{background:#cbd5e1}
.kr-legend em.d-not_mastered{background:#ef8f8f}
.kr-legend em.d-weak{background:#f2c078}
.kr-legend em.d-basic{background:#7fa9f5}
.kr-legend em.d-stable{background:#4fc3a1}

/* ---- 图表区 ---- */
.kr-chart-wrap{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fbfdff;padding:10px 8px 4px}
.kr-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:0 8px;flex-wrap:wrap}
.kr-chart-head h5{margin:0;font-size:12.5px;color:#1e293b}
.kr-chart-head span{font-size:10.5px;color:#8a97aa}
.kr-svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.kr-svg .kr-ring{fill:none;stroke:#e3ebf7;stroke-width:1}
.kr-svg .kr-spoke{stroke:#e8eef8;stroke-width:1}
.kr-svg .kr-shape{fill:rgba(37,99,235,.14);stroke:#2563eb;stroke-width:1.8}
.kr-svg .kr-shape.is-partial{fill:rgba(37,99,235,.06);stroke-dasharray:5 4}
.kr-svg .kr-dot{fill:#2563eb;stroke:#fff;stroke-width:1.5}
.kr-svg .kr-dot.is-empty{fill:#fff;stroke:#cbd5e1;stroke-dasharray:2 2}
.kr-svg .kr-axis-label{font-size:10px;fill:#51617c;font-weight:600}
.kr-svg .kr-axis-sub{font-size:9px;fill:#9aa8bd}
.kr-svg .kr-val{font-size:9.5px;fill:#2563eb;font-weight:700}
.kr-svg .kr-grid-text{font-size:9px;fill:#b6c1d1}
.kr-svg g[data-kr-module]{cursor:pointer}
.kr-svg g[data-kr-module]:hover .kr-axis-label{fill:var(--blue)}
.kr-note{font-size:10.5px;color:#8a97aa;line-height:1.7;padding:6px 10px 8px;margin:0}

/* ---- 模块表 ---- */
.kr-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.kr-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px;min-width:560px}
.kr-table th{font-size:10.5px;color:#8a97aa;font-weight:700;text-align:left;
  padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.kr-table td{padding:9px 8px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.kr-table tr:hover td{background:#fbfdff}
.kr-mod-name{font-weight:700;color:#1e293b;cursor:pointer}
.kr-mod-name:hover{color:var(--blue)}
.kr-mod-sub{display:block;font-size:10.5px;color:#9aa8bd;margin-top:2px;font-weight:400}
.kr-num{font-variant-numeric:tabular-nums}
.kr-na{color:#a2adbd}
.kr-pill{display:inline-block;font-size:10.5px;border-radius:999px;padding:1px 7px;
  background:#f1f5f9;color:#64748b;white-space:nowrap}
.kr-pill.is-risk{background:#fdecec;color:#b91c1c}
.kr-pill.is-basic{background:var(--blue-soft);color:var(--blue)}
.kr-more{border:0;background:transparent;color:var(--blue);font-size:11px;padding:2px 0;cursor:pointer}
.kr-more:hover{text-decoration:underline}
.kr-kp-list{margin:6px 0 2px;padding:8px 10px;background:#fbfdff;border:1px dashed #e2eaf6;
  border-radius:9px;display:grid;gap:6px}
.kr-kp-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:11.5px;color:#3c4c66;text-align:left;border:0;background:transparent;padding:2px 0;cursor:pointer}
.kr-kp-item:hover{color:var(--blue)}
.kr-kp-item .kr-kp-meta{font-size:10.5px;color:#9aa8bd;white-space:nowrap}

/* ---- 未归属 / 提示块 ---- */
.kr-callout{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:11px;line-height:1.75;
  background:#f8fafc;border:1px solid #e8eef7;color:#5b6b85}
.kr-callout.is-warn{background:#fffaf1;border-color:#f6e3c2;color:#8a5a1c}
.kr-callout b{color:#334155}
.kr-callout.is-warn b{color:#8a5a1c}
.kr-empty{padding:22px 12px;text-align:center;color:#8a97aa;font-size:12px;line-height:1.8}
.kr-loading{padding:24px;text-align:center;color:#8a97aa;font-size:12px}

/* ---- 考点详情 ---- */
.kr-detail{margin-top:14px;border:1px solid #dbe7fb;border-radius:12px;background:#fbfdff;padding:13px 14px}
.kr-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kr-detail-title{font-size:13px;font-weight:800;color:#1e293b;line-height:1.6}
.kr-detail-path{font-size:10.5px;color:#9aa8bd;margin-top:3px}
.kr-close{border:1px solid var(--line);background:#fff;color:#7f8da3;border-radius:8px;
  font-size:11px;padding:3px 9px;cursor:pointer}
.kr-close:hover{color:var(--blue);border-color:#c9d9f5}
.kr-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:11px}
.kr-kv{background:#fff;border:1px solid #eaf0f9;border-radius:9px;padding:8px 10px}
.kr-kv small{display:block;font-size:10px;color:#9aa8bd;margin-bottom:3px}
.kr-kv b{font-size:13px;color:#1e293b;font-variant-numeric:tabular-nums}
.kr-sec{margin-top:12px}
.kr-sec h6{margin:0 0 6px;font-size:11.5px;color:#51617c}
.kr-sec p{margin:0;font-size:11px;line-height:1.75;color:#5b6b85}
.kr-mini-list{display:grid;gap:4px;font-size:11px;color:#5b6b85}
.kr-mini-list div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;
  border-bottom:1px dashed #eef3fa}
.kr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kr-btn{border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:9px;
  padding:6px 12px;font-size:11.5px;font-weight:700;cursor:pointer}
.kr-btn:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.kr-btn.is-ghost{background:#fff;color:var(--blue)}
.kr-btn.is-ghost:hover{background:var(--blue-soft)}
.kr-btn[disabled]{opacity:.5;cursor:not-allowed}
.kr-hist{display:grid;gap:2px;margin-top:4px}
.kr-hist-row{display:grid;grid-template-columns:96px 1fr 46px;gap:8px;align-items:center;font-size:10.5px;color:#7f8da3}
.kr-hist-bar{height:6px;border-radius:999px;background:#eef2f8;overflow:hidden}
.kr-hist-bar i{display:block;height:100%;background:linear-gradient(90deg,#93b8f8,#2563eb)}

@media(max-width:1180px){
  .kr-courses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kr-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .kr-courses{grid-template-columns:1fr}
  /* 窄屏不靠横向滚动看表，也不把 4 列挤成竖排：拆成卡片，
     每行一节，标签在左、值在右（标签来自 td 的 data-label）。 */
  .kr-table{display:block;min-width:0;margin-top:8px;font-size:11.5px}
  .kr-table thead{display:none}
  .kr-table tbody{display:block}
  .kr-table tr{display:block;padding:9px 2px;border-bottom:1px solid #eef3fa}
  .kr-table tr:hover td{background:transparent}
  .kr-table td{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:2px 0;border:0;text-align:left}
  .kr-table td::before{content:attr(data-label);flex:0 0 auto;font-size:10.5px;color:#9aa8bd}
  .kr-table td.kr-mod-cell{display:block;padding-bottom:5px}
  .kr-table td.kr-mod-cell::before,
  .kr-table td[colspan]::before{content:none}
  .kr-table td[colspan]{display:block}
  .kr-table td .kr-dist{flex:1;max-width:150px;margin-top:0}
  .kr-kp-item{font-size:11px}
}