#cp-perf{
  --bg:#333333 --panel:#1F1813; --panel-2:#271E17; --ink:#F3EBDD; --muted:#B0A390; --faint:#7C7161;
  --line:rgba(243,235,221,.10); --dawn:#E9B8A0; --sunny:#F2C14E; --golden:#E8912D; --bluehour:#4E6E9E; --night:#26324A;
  --tiktok:#E8912D; --facebook:#5B7DA6; --youtube:#E0574B; --instagram:#C77DB0; --dl:#63C7B2; --agent:#FF4D4F; --r:16px;
  background:radial-gradient(120% 80% at 50% -10%, #241a12 0%, var(--bg) 55%);
  color:var(--ink); font-family:'Voltaire',sans-serif; line-height:1.5;
  padding:0; border-radius:var(--r); -webkit-font-smoothing:antialiased;
}
#cp-perf *{box-sizing:border-box; font-family:'Voltaire',sans-serif}
#cp-perf .wrap{max-width:100%;margin:0 auto}
#cp-perf .top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
#cp-perf .mark{font-weight:400;font-size:clamp(21px,2.9vw,30px);letter-spacing:.01em;line-height:1;margin:0}
#cp-perf .mark span{color:var(--golden)}
#cp-perf .sub{font-size:12px;color:var(--faint);letter-spacing:.18em;text-transform:uppercase;margin-top:6px}
#cp-perf .updated{font-size:12px;color:var(--muted);text-align:right;letter-spacing:.02em}
#cp-perf .updated b{color:var(--ink);font-weight:400}
#cp-perf .light{height:7px;border-radius:5px;margin:16px 0 22px;background:linear-gradient(90deg,var(--dawn),var(--sunny),var(--golden),var(--bluehour),var(--night));box-shadow:0 0 20px rgba(232,145,45,.22)}
#cp-perf .panel{background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.6vw,26px)}
#cp-perf .panel+.panel{margin-top:13px}
#cp-perf .chart-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px}
#cp-perf .chart-head h2{font-weight:400;font-size:16px;margin:0;letter-spacing:.04em;text-transform:uppercase}
#cp-perf .legend{display:flex;gap:16px;font-size:12px;color:var(--muted);letter-spacing:.02em}
#cp-perf .legend span{display:inline-flex;align-items:center;gap:6px}
#cp-perf .legend i{width:16px;height:3px;border-radius:2px;display:inline-block}
#cp-perf .legend i.dash{width:16px;height:0;border-top:2px dashed var(--agent);border-radius:0}
#cp-perf .xlabels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:6px;letter-spacing:.05em}
#cp-perf .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:13px}
#cp-perf .tile{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 14px;display:flex;flex-direction:column;gap:8px}
#cp-perf .tile.dl{background:linear-gradient(155deg,rgba(99,199,178,.10),var(--panel));border-color:rgba(99,199,178,.28)}
#cp-perf .tile .name{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:.02em}
#cp-perf .dot{width:9px;height:9px;border-radius:3px;flex:none}
#cp-perf .tile .v{font-weight:400;font-size:clamp(24px,3.8vw,32px);line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
#cp-perf .tile .meta{font-size:11px;color:var(--faint);letter-spacing:.02em}
#cp-perf .tile .meta b{color:var(--dl);font-weight:400}
#cp-perf .bar{height:5px;border-radius:4px;background:#120d0a;overflow:hidden;margin-top:2px}
#cp-perf .bar>i{display:block;height:100%;border-radius:4px}
#cp-perf .foot{margin-top:20px;font-size:11.5px;color:var(--faint);text-align:center;letter-spacing:.04em}
@media(max-width:720px){#cp-perf .tiles{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){#cp-perf *{transition:none!important}}