/* ============================================================
   Carbon Rush (碳纤赛道) 主题样式库
   核心配色：#181818 碳纤黑 / #FF3D00 赛道橙 / #00E5FF 极速蓝
   纯本地资源，无外部引用
   ============================================================ */
:root{
  --bg:#17181a;
  --panel:#212327;
  --panel2:#1a1b1e;
  --orange:#FF3D00;
  --orange2:#ff7a3a;
  --cyan:#00E5FF;
  --cyan2:#00a8c8;
  --white:#ffffff;
  --text:#eef0f2;
  --gray:#b9bec4;
  --dim:#7e848b;
  --line:rgba(255,255,255,.09);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;}
body{
  margin:0;background:#080808;
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,"Noto Sans CJK SC",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#scaler{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;}
#slide-container{
  position:relative;width:1280px;height:720px;overflow:hidden;color:var(--text);
  background:
    radial-gradient(1100px 540px at 90% -14%, rgba(255,61,0,.14), transparent 62%),
    radial-gradient(900px 560px at -10% 114%, rgba(0,229,255,.11), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.021) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(25deg,  rgba(255,255,255,.015) 0 1px, transparent 1px 7px),
    linear-gradient(180deg,#1b1c1f,#151618 55%,#101113);
}
/* ---- 赛道装饰线 ---- */
.tl{position:absolute;pointer-events:none;left:36px;right:36px;border-top:2px dashed rgba(0,229,255,.20);}
.tl-t{top:14px;}
.tl-b{bottom:14px;border-color:rgba(255,61,0,.22);}
.corner{position:absolute;width:58px;height:58px;pointer-events:none;opacity:.75;}
.corner.cor-tr{top:30px;right:30px;border-top:2px solid rgba(0,229,255,.5);border-right:2px solid rgba(0,229,255,.5);}
.corner.cor-bl{bottom:30px;left:30px;border-bottom:2px solid rgba(255,61,0,.5);border-left:2px solid rgba(255,61,0,.5);}
/* ---- 头部 ---- */
.head{position:absolute;left:58px;top:32px;right:60px;z-index:2;}
.kicker{font-size:13px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;font-weight:600;}
.title{font-size:32px;font-weight:800;color:#fff;margin-top:7px;letter-spacing:.4px;line-height:1.25;}
.sub{font-size:14px;color:#aeb4ba;margin-top:8px;line-height:1.6;}
.tbar{width:196px;height:5px;margin-top:12px;background:linear-gradient(90deg,var(--orange),var(--cyan));transform:skewX(-18deg);border-radius:2px;box-shadow:0 0 12px rgba(255,61,0,.5);}
/* ---- 主体区域 ---- */
.body{position:absolute;left:56px;right:56px;top:172px;bottom:34px;z-index:2;}
.panel{position:relative;background:linear-gradient(165deg,rgba(38,40,44,.94),rgba(22,23,25,.94));border:1px solid rgba(255,255,255,.09);border-radius:3px;overflow:hidden;}
.panel.p-o{border-left:3px solid var(--orange);}
.panel.p-c{border-left:3px solid var(--cyan);}
.panel .ph{font-size:17px;color:#fff;font-weight:700;padding:13px 18px 4px;letter-spacing:.3px;}
.panel .ph .tag{float:right;font-size:12px;color:var(--dim);font-weight:400;margin-top:3px;letter-spacing:1px;}
.panel .pbody{padding:6px 18px 18px;}
/* ---- KPI ---- */
.kpis{display:flex;gap:16px;}
.kpi{position:relative;flex:1;background:linear-gradient(150deg,#282a2e,#191a1c);border:1px solid rgba(255,255,255,.10);padding:13px 15px 12px;overflow:hidden;border-radius:2px;}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--o,#FF3D00);}
.kpi .lb{font-size:13px;color:#aab0b7;letter-spacing:.4px;}
.kpi .val{font-size:29px;font-weight:800;color:#fff;margin-top:3px;line-height:1.1;}
.kpi .val small{font-size:13px;color:var(--cyan);font-weight:600;margin-left:2px;}
.kpi .dl{font-size:12px;color:#8adbee;margin-top:4px;}
.kpi .dl.bad{color:#ff9b7d;}
.kpi .dl.good{color:#8ade9f;}
/* ---- 横向前倾切角条形 ---- */
.hbars{display:flex;flex-direction:column;gap:12px;}
.hb{display:flex;align-items:center;gap:8px;}
.hb .nm{width:92px;flex:none;text-align:right;font-size:13px;color:#cdd2d6;}
.hb .tr{position:relative;flex:1;height:20px;background:rgba(255,255,255,.055);overflow:hidden;}
.hb .fl{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--orange2));
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
  transform-origin:left center;animation:grow .9s cubic-bezier(.2,.7,.2,1) both;}
.hb.alt .fl{background:linear-gradient(90deg,var(--cyan2),var(--cyan));}
.hb.off .fl{background:linear-gradient(90deg,#6b6f75,#9aa0a6);}
.hb .vl{width:110px;flex:none;font-size:13px;color:#fff;}
.hb .vl em{font-style:normal;color:var(--cyan);font-size:11px;margin-left:3px;}
.hb .up{color:#ff9b7d;}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---- 纵向柱（切角速度感） ---- */
.vbars{display:flex;align-items:flex-end;justify-content:center;gap:26px;height:100%;}
.vcol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;}
.vcol .cname{color:#c3c8cc;font-size:13px;margin-top:8px;}
.vcol .cv{font-size:14px;color:#fff;font-weight:700;margin-bottom:5px;}
.bar{width:74px;background:linear-gradient(180deg,var(--orange2),var(--orange));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
  transform-origin:bottom center;animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
  box-shadow:0 0 14px rgba(255,61,0,.28);}
.bar.cy{background:linear-gradient(180deg,var(--cyan),var(--cyan2));box-shadow:0 0 14px rgba(0,229,255,.3);}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* ---- 图例 ---- */
.legend{display:flex;gap:18px;font-size:12px;color:#c3c8cc;}
.legend i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;}
/* ---- 文本块 ---- */
.point{font-size:15px;line-height:1.75;color:#e6e9ec;padding-left:16px;position:relative;margin-bottom:10px;}
.point::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;transform:skewX(-12deg);background:var(--orange);}
.point.pc::before{background:var(--cyan);}
.point b{color:#fff;}
.point .o{color:var(--orange);font-weight:700;}
.point .c{color:var(--cyan);font-weight:700;}
.note{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.6;}
/* ---- 标签chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-size:13px;padding:8px 14px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.35);color:#d8f9ff;border-radius:2px;}
.chip.o{background:rgba(255,61,0,.10);border-color:rgba(255,61,0,.45);color:#ffd9cc;}
/* ---- 通用文本 ---- */
.tl-glow{color:var(--cyan);text-shadow:0 0 10px rgba(0,229,255,.55);}
.o-big{color:var(--orange);font-weight:800;}
.c-big{color:var(--cyan);font-weight:800;}
.muted{color:#82888f;}
.small{font-size:12px;color:#8f959b;}
.divider{height:1px;background:rgba(255,255,255,.08);}