/* ==========================================================================
kk-cards.css — KKmatch「动态模组卡片」共享样式套件 (W6-01)
--------------------------------------------------------------------------
设计目标（对应用户第 2/4 项）：
① 文案简洁有重点：卡片强制「图标 + 标题 + 一句重点 + 一个可信数字」四件套；
② 展示动态效果图：卡片内置 canvas 微可视化（spark/bars/ring/radar/wave/pulse）；
③ 与 kkos.css 同一套设计令牌，dark-first，可被任何页面独立引入。
依赖：无。仅需页面已定义或由此文件兜底定义 :root 令牌。
引入：
========================================================================== */
:root{
--kcc-bg:var(--bg,#07080d);
--kcc-panel:var(--panel,rgba(15,18,28,.72));
--kcc-text:var(--text,#e7ecf3);
--kcc-soft:var(--soft,#9aa6b8);
--kcc-mute:var(--mute,#5a6678);
--kcc-line:var(--line,rgba(120,160,255,.16));
--kcc-line-2:var(--line-strong,rgba(120,160,255,.5));
--kcc-a1:var(--accent,#5b8dff);
--kcc-a2:var(--accent-2,#9d6cff);
--kcc-a3:var(--accent-3,#22d3ee);
--kcc-hot:var(--hot,#ff8a4c);
--kcc-ok:#34d399;
--kcc-warn:#fbbf24;
--kcc-radius:16px;
}
/* ---------------- 容器 ---------------- */
.kcc{display:block}
.kcc-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
gap:16px;margin:0;padding:0;list-style:none;
}
.kcc-grid.kcc-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.kcc-grid.kcc-4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.kcc-head{max-width:780px;margin:0 0 22px}
.kcc-tag{
display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--kcc-a3);margin-bottom:10px
}
.kcc-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kcc-a3);box-shadow:0 0 10px var(--kcc-a3)}
.kcc-h2{font-size:clamp(21px,3.1vw,31px);line-height:1.22;letter-spacing:-.02em;margin:0 0 9px;font-weight:800}
.kcc-sub{color:var(--kcc-soft);font-size:15px;line-height:1.62;margin:0}
/* ---------------- 卡片本体 ---------------- */
.kcc-card{
position:relative;display:flex;flex-direction:column;gap:11px;
padding:19px 19px 17px;border-radius:var(--kcc-radius);
background:linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,transparent),var(--kcc-panel);
border:1px solid var(--kcc-line);
box-shadow:0 12px 34px rgba(0,0,0,.30);
overflow:hidden;
transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s;
will-change:transform;
}
.kcc-card::after{ /* 顶部一道光带，hover 时扫过 */
content:"";position:absolute;inset:-1px -1px auto -1px;height:1px;
background:linear-gradient(90deg,transparent,var(--kcc-a1),var(--kcc-a2),transparent);
opacity:.0;transition:opacity .3s
}
.kcc-card:hover{transform:translateY(-3px);border-color:var(--kcc-line-2);box-shadow:0 18px 46px rgba(0,0,0,.42)}
.kcc-card:hover::after{opacity:.85}
.kcc-card.is-live{border-color:rgba(34,211,238,.34)}
.kcc-top{display:flex;align-items:flex-start;gap:11px}
.kcc-ico{
flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:linear-gradient(140deg,rgba(91,141,255,.20),rgba(157,108,255,.14));
border:1px solid rgba(120,160,255,.24);color:var(--kcc-a3)
}
.kcc-ico svg{width:17px;height:17px;display:block;stroke-width:1.7;fill:none;stroke:currentColor;
stroke-linecap:round;stroke-linejoin:round}
.kcc-t{font-size:15.5px;font-weight:750;letter-spacing:-.01em;margin:2px 0 0;line-height:1.3}
.kcc-s{color:var(--kcc-soft);font-size:13.4px;line-height:1.6;margin:0}
/* 可信数字行 */
.kcc-figs{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.kcc-fig{display:flex;flex-direction:column;gap:2px;min-width:0}
.kcc-v{
font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
background:linear-gradient(92deg,var(--kcc-text),var(--kcc-a3));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.kcc-v small{font-size:12.5px;font-weight:700;margin-left:2px;-webkit-text-fill-color:var(--kcc-soft)}
.kcc-k{font-size:11.5px;color:var(--kcc-mute);letter-spacing:.02em;white-space:nowrap}
/* 徽标 */
.kcc-badges{display:flex;gap:6px;flex-wrap:wrap}
.kcc-b{
font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.01em;
border:1px solid var(--kcc-line);color:var(--kcc-soft);background:rgba(255,255,255,.02)
}
.kcc-b.ok{color:var(--kcc-ok);border-color:rgba(52,211,153,.34);background:rgba(52,211,153,.08)}
.kcc-b.pend{color:var(--kcc-warn);border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.07)}
/* canvas 微图
⚠️ 复位陷阱（已踩过）：kkos.css 里有一条**全局**规则
canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
它是为首页那张热力画布写的（kkos.css L148）。卡片里的 canvas 一旦继承
position:absolute，就会去"填满最近的定位祖先"——在 .kcc-card（position:relative）
里等于贴在卡片左上角，图形直接压在标题上；在 .kcc-hero（未定位）里则跑到视口
左上角，看起来像"没画出来"。特异性：类+元素 (0,1,1) > 单元素 (0,0,1)，压得住。 */
.kcc-card canvas,.kcc-hero canvas{position:static;inset:auto}
.kcc-viz{position:static;inset:auto;width:100%;height:58px;display:block;margin:2px 0 0;opacity:0;transition:opacity .5s .12s}
.kcc-card.is-in .kcc-viz,.kcc-hero.is-in .kcc-viz{opacity:1}
.kcc-viz.tall{height:84px}
/* 进入视口动画 */
.kcc-card{opacity:0;transform:translateY(16px)}
.kcc-card.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
.kcc-card,.kcc-viz{opacity:1!important;transform:none!important;transition:none!important}
}
/* 实时脉冲点 */
.kcc-live{
display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--kcc-soft)
}
.kcc-live i{width:6px;height:6px;border-radius:50%;background:var(--kcc-mute);display:block}
.kcc-card.is-live .kcc-live{color:var(--kcc-a3)}
.kcc-card.is-live .kcc-live i{background:var(--kcc-a3);box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:kcc-pulse 2.1s infinite}
@keyframes kcc-pulse{
0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}
70%{box-shadow:0 0 0 9px rgba(34,211,238,0)}
100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}
}
/* ---------------- 单例大卡（贯穿式模块） ---------------- */
.kcc-hero{
display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;
padding:24px;border-radius:20px;border:1px solid var(--kcc-line);
background:linear-gradient(150deg,rgba(91,141,255,.10),rgba(157,108,255,.05) 46%,transparent),var(--kcc-panel)
}
.kcc-hero>*{min-width:0} /* 防止 fr 轨道被内容的最小内容宽度顶开 */
@media(max-width:820px){.kcc-hero{grid-template-columns:1fr;gap:18px;padding:19px}}
.kcc-hero canvas{width:100%;height:190px;display:block}
.kcc-hero h3{font-size:20px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em}
.kcc-hero p{color:var(--kcc-soft);font-size:14px;line-height:1.65;margin:0 0 12px}
/* ---------------- 数据表（口径必带） ---------------- */
.kcc-tbl{width:100%;border-collapse:collapse;font-size:13.2px;margin-top:12px}
.kcc-tbl th,.kcc-tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--kcc-line)}
.kcc-tbl th{font-size:11.4px;letter-spacing:.07em;text-transform:uppercase;color:var(--kcc-mute);font-weight:800}
.kcc-tbl td{color:var(--kcc-soft)}
.kcc-tbl td.n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--kcc-text);font-weight:650}
.kcc-tbl tr:last-child td{border-bottom:0}
/* 口径脚注 */
.kcc-foot{font-size:12.2px;color:var(--kcc-mute);line-height:1.68;margin-top:14px}
.kcc-foot b{color:var(--kcc-soft)}
/* 未测量态 */
.kcc-pend{
display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;margin-top:12px;
border:1px dashed rgba(251,191,36,.34);background:rgba(251,191,36,.05);font-size:12.8px;color:#e9d9a8;line-height:1.6
}
.kcc-pend b{color:var(--kcc-warn)}
/* ==========================================================================
2026-09-15 W7 新增：嵌入式微图（kcc-embed）
--------------------------------------------------------------------------
用途：把 canvas 微图嵌进**已存在的卡片**内部（.engine / .tcard / .ev-card /
.adapt-col ...），此时不需要再叠一层边框+背景+内边距，否则会出现「卡中卡」。
为什么必须显式写 opacity/transform 的 !important：
`.kcc-card{opacity:0;transform:translateY(16px)}` 是给独立卡片做入场用的。
嵌入态如果继承它，JS 一旦没跑起来（404/被拦截），整块内容会**永久不可见**；
空白画布是可接受的降级，整块消失不是。所以嵌入态强制常显，只让画布自己淡入。
`.kcc-card:hover{transform:translateY(-3px)}` 也要压掉 —— 否则鼠标划过时
内层容器会上浮 3px，与外层卡片的 hover 位移叠加成"抖动"。
========================================================================== */
.kcc-card.kcc-embed{
position:relative;display:block;padding:0;border:0;border-radius:0;background:none;
box-shadow:none;gap:0;overflow:visible;will-change:auto;
opacity:1!important;transform:none!important;transition:none!important;
}
.kcc-card.kcc-embed::after{display:none!important}
.kcc-card.kcc-embed:hover{transform:none!important;border-color:transparent;box-shadow:none}
/* 画布上边距 16px 是给右上角「结构示意」角标留出的安全区：
bars 的柱体是从画布顶端往下画的，margin 不够时柱子会顶到角标文字上。 */
.kcc-card.kcc-embed .kcc-viz{height:58px;margin:16px 0 3px;opacity:0}
.kcc-card.kcc-embed.is-in .kcc-viz{opacity:1}
.kcc-card.kcc-embed .kcc-viz.tall{height:92px}
/* radar / ring 的半径取 min(W,H)/2 —— 放进通栏宽幅容器里会缩成中间一小团。
限宽 + 居中，保证形状读得出来（当前注入未使用 radar，保留为安全网）。 */
.kcc-card.kcc-embed[data-viz="radar"] .kcc-viz,
.kcc-card.kcc-embed[data-viz="ring"] .kcc-viz{max-width:150px;margin-left:auto;margin-right:auto}
.kcc-viz-hint{
position:absolute;top:0;right:0;font-size:9px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--kcc-soft);opacity:.44;pointer-events:none;user-select:none
}
/* 证据卡微图（带真实数据）在 内，需要独立一点的留白 */
.ev-card .kcc-card.kcc-embed .kcc-viz{height:56px}