/* css/views/ratecard.css — 视图私有样式(FU-VERSIONED-PRICE-TABLE Phase 0)。
 * 本视图专属选择器前缀 .v-ratecard;颜色/间距用 var(--*)(DESIGN.md token)。
 * §9g 三层法:白画布(24r,坐冷灰工作区)→ 灰卡 --color-card(无边框无投影,18r)
 * → 白内衬元素。对拍 usage/applications 的 canvas / sec-head。 */

/* ---- 白画布区块容器(第一层) ---- */
.v-ratecard-canvas {
  background: var(--color-surface);
  border-radius: 24px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* 区块标题行:标题居左,本区动作居右(动作长在它作用的区块上) */
.v-ratecard-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.v-ratecard-sec-head .section-title { margin-bottom: 0; }
.v-ratecard-sec-sub { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-2); }

/* ---- KPI 灰卡(第二层:无边框、无投影,靠色调差)。
 * 新鲜度是客户头号问题 → 主角卡占两份宽 + 大一档字号;窄屏回落单列。 ---- */
.v-ratecard-kpis {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (max-width: 720px) {
  .v-ratecard-kpis { grid-template-columns: 1fr; }
}
.v-ratecard-kpi {
  background: var(--color-card);
  border-radius: 18px;
  padding: var(--space-4);
}
/* 主角卡 = 本屏唯一橙色块(§9g 色彩配给制),日出渐变对拍大屏 .bs-hero,flat 无投影;
 * 其余灰卡保持陪衬,彩色即重点。 */
.v-ratecard-kpi-feat {
  background: linear-gradient(180deg, #F75E0C 0%, #F97D2B 60%, #FFA95C 100%);
}
.v-ratecard-kpi-feat .v-ratecard-kpi-val { color: var(--color-text-inverse); }
.v-ratecard-kpi-feat .v-ratecard-kpi-lbl { color: rgba(255, 255, 255, 0.92); }
.v-ratecard-kpi-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.v-ratecard-kpi-val-xl { font-size: 32px; }
.v-ratecard-kpi-lbl { margin-top: var(--space-1); font-size: 12px; color: var(--color-text-muted); }
.v-ratecard-kpi-lbl .mono { font-size: 12px; }

/* ---- 哈希灰卡:label + 复制动作(长在本卡标题行),哈希串翻白内衬(第三层) ---- */
.v-ratecard-hashcard {
  background: var(--color-card);
  border-radius: 18px;
  padding: var(--space-4);
}
.v-ratecard-hashhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.v-ratecard-hashlabel { font-size: 12px; color: var(--color-text-muted); }
/* 短指纹(前 8 位):对账时人眼比对的单位,大字等宽;全文在下随时可核可复制 */
.v-ratecard-fp {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.v-ratecard-hash {
  background: var(--color-surface);
  border-radius: 10px;
  padding: var(--space-3);
  font-size: 12px;
  color: var(--color-text-secondary);
  word-break: break-all; /* 64 位十六进制串:允许换行,不撑破布局 */
}

/* 语义说明行(代次 0 / model_count 0 属正常,不当告警) */
.v-ratecard-note {
  margin-top: var(--space-4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---- 「换卡入槽」微场景 v2:住在橙 hero 卡内部(换卡故事本体旁),
 * 分解式悬浮构图(对拍用户参考稿:无地台、层间留空隙、软落影)。 ---- */
.v-ratecard-kpi-feat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.v-ratecard-feat-text { min-width: 0; }
.v-rc-scene { width: 112px; height: auto; flex: none; }
@media (max-width: 860px) {
  .v-rc-scene { display: none; } /* 窄屏数据优先,场景让位 */
}

/* 色板 v6:透明壳读卡器(对拍用户实物)—— 磨砂半透壳 + 白描边线框 +
 * 可见内部件(PCB/芯片);SD 卡黑灰塑料 + 橙标签 */
.v-rcs-shadow { fill: rgba(122, 41, 6, 0.18); }
.v-rcs-shellside {
  fill: #FFFFFF;
  fill-opacity: 0.34;
  stroke: #FFFFFF;
  stroke-opacity: 0.9;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.v-rcs-shelltop {
  fill: #FFFFFF;
  fill-opacity: 0.46;
  stroke: #FFFFFF;
  stroke-opacity: 0.95;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.v-rcs-edge { fill: none; stroke: #FFFFFF; stroke-opacity: 0.55; stroke-width: 1; stroke-linecap: round; }
.v-rcs-pcb .f-t { fill: #33435E; }   /* PCB 主板(透过壳显形) */
.v-rcs-pcb .f-l { fill: #2A3850; }
.v-rcs-pcb .f-r { fill: #223045; }
.v-rcs-chip .f-t { fill: #8A96A8; }  /* 大芯片 */
.v-rcs-chip .f-l { fill: #75818f; }
.v-rcs-chip .f-r { fill: #626d7c; }
.v-rcs-chip2 .f-t { fill: #A6B0BF; } /* 小芯片 ×2 */
.v-rcs-chip2 .f-l { fill: #8f99a9; }
.v-rcs-chip2 .f-r { fill: #7b8595; }
.v-rcs-chipo .f-t { fill: #F97316; } /* 橙芯片(品牌微点) */
.v-rcs-chipo .f-l { fill: #E24E0A; }
.v-rcs-chipo .f-r { fill: #C2410C; }
.v-rcs-ghost { opacity: 0.35; }      /* 壳内幽灵卡:隔磨砂看的残影 */
.v-rcs-logo { fill: #F97316; }       /* 顶面橙 logo 小片 */
.v-rcs-portframe { fill: #C9D0DA; }  /* SD 卡缝金属框 */
.v-rcs-portslit { fill: #16202E; }   /* 卡缝深色内衬(SD 大缝 + microSD 小缝) */
.v-rcs-led { fill: #F97316; }
.v-rcs-cardtop { fill: #2B3648; }    /* SD 卡顶面(黑灰塑料) */
.v-rcs-card-sl { fill: #222C3D; }    /* 南缘侧裙 */
.v-rcs-card-sr { fill: #1B2433; }    /* 东缘/切角侧裙 */
.v-rcs-cardlabel { fill: #F97316; }
.v-rcs-cardchip { fill: #FFFFFF; }

/* 插卡动效 v5:沿真实物理方向水平滑入正面 SD 缝(iso 向量 +39,-19.5px),
 * 越过机身正面的部分被 clip 真实吃掉;全没入后短暂消隐重来;恒速循环;
 * reduced-motion 直达终态 = 卡插一半静止 */
.v-rcs-card { animation: v-rcs-insert 4.5s linear infinite; }
@keyframes v-rcs-insert {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { transform: translate(3.1px, -1.55px); opacity: 1; }
  78% { transform: translate(39px, -19.5px); opacity: 1; }
  80%, 100% { transform: translate(39px, -19.5px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .v-rcs-card { animation: none; transform: translate(20px, -10px); opacity: 1; }
}

/* 未配置热更新:平静信息态灰卡(第二层,非错误染色) */
.v-ratecard-info {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 18px;
  background: var(--color-card);
}
.v-ratecard-info-icon { color: var(--color-text-muted); flex: 0 0 auto; }
.v-ratecard-info-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.v-ratecard-info-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}