/* Creator Studio: My series / Earnings / Analytics (handoff 31/10). brand.css tokens only, no gradients.
   Amber/red are status colours only (HANDOFF: "Amber/red appear only as status colours"). */
.cpx-note{max-width:1100px;box-sizing:border-box;margin:0 0 var(--s4,16px);padding:10px 14px;border-radius:var(--r-btn,14px);border:1px solid var(--line);background:var(--card);color:var(--mute);font:600 13px/1.4 var(--body)}
.cpx-note b{color:var(--ink)}
.cpx-stack{display:grid;gap:var(--s4,16px);max-width:1100px}
.cpx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4,16px)}
.cpx-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4,16px)}
.cpx-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3,12px)}
.cpx-kpi>div{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-panel,16px);padding:var(--s4,16px)}
.cpx-kpi small{display:block;color:var(--mute);font:600 12.5px var(--body)}
.cpx-kpi b{display:block;font:800 26px/1.2 var(--head);color:var(--ink);margin-top:4px}
.cpx-kpi em{display:block;font:600 12px var(--body);font-style:normal;color:var(--dim);margin-top:4px}
.cpx-kpi em.ok{color:var(--green)}
.cpx-tw{overflow-x:auto;margin:0 calc(-1 * var(--s2,8px))}
.cpx-t{width:100%;border-collapse:collapse;font:500 14px/1.4 var(--body);color:var(--ink)}
.cpx-t th{text-align:left;color:var(--mute);font:600 13px var(--body);padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.cpx-t td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.cpx-t td.n,.cpx-t th.n{text-align:right;font-variant-numeric:tabular-nums}
.cpx-t tfoot td{color:var(--mute);font-weight:700}
.cpx-ser{display:flex;align-items:center;gap:12px;min-width:200px}
.cpx-cov{flex:none;width:44px;height:58px;border-radius:8px;background:var(--card);border:1px solid var(--line);position:relative}
.cpx-cov::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.cpx-ser b{display:block;font:700 14.5px var(--body)}
.cpx-ser small{display:block;color:var(--dim);font:500 12.5px var(--body)}
.cpx-badge{display:inline-block;padding:3px 9px;border-radius:var(--r-chip,999px);font:700 12px/1.3 var(--body);white-space:nowrap;background:var(--card);color:var(--mute);border:1px solid var(--line)}
.cpx-badge.ok{color:var(--green);border-color:var(--green-d)}
.cpx-badge.warn{color:#f5b301;border-color:#6b5310}
.cpx-badge.bad{color:#ff6b6b;border-color:#6b2424}
.cpx-row-on td{background:var(--card)}
.cpx-drag{cursor:grab;user-select:none;color:var(--mute);padding-right:6px;font-size:16px}
.cpx-t tr.dragging{opacity:.45}
.cpx-t tr.over td{box-shadow:inset 0 2px 0 var(--green)}
.cpx-hint{color:var(--dim);font:500 12.5px/1.4 var(--body);margin:var(--s2,8px) 0 0}
.cpx-bars{display:flex;align-items:flex-end;gap:4px;height:180px;margin-top:var(--s3,12px)}
.cpx-bars i{flex:1 1 0;min-width:3px;background:var(--green);border-radius:3px 3px 0 0;display:block}
.cpx-axis{display:flex;justify-content:space-between;color:var(--dim);font:500 11.5px var(--body);margin-top:6px}
.cpx-meter{display:grid;gap:10px;margin-top:var(--s3,12px)}
.cpx-meter div{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font:500 13.5px var(--body);color:var(--ink)}
.cpx-meter span.v{color:var(--mute);font-variant-numeric:tabular-nums}
.cpx-meter s{grid-column:1/-1;display:block;height:8px;border-radius:999px;background:var(--card);text-decoration:none;overflow:hidden}
.cpx-meter s i{display:block;height:100%;background:var(--green);border-radius:999px}
.cpx-prog{height:8px;border-radius:999px;background:var(--card);overflow:hidden;margin-top:var(--s4,16px)}
.cpx-prog i{display:block;height:100%;background:var(--green)}
.cpx-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2,8px)}
.cpx-panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cpx-empty{color:var(--dim);font:500 14px var(--body);padding:var(--s3,12px) 0}
@media (max-width:760px){
  .cpx-two,.cpx-three{grid-template-columns:minmax(0,1fr)}
  .cpx-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpx-kpi b{font-size:21px}
  .cpx-bars{height:130px;gap:2px}
  .cpx-t{font-size:13px}
  .cpx-hide-m{display:none}
}
.cpx-stack>*,.cpx-two>*,.cpx-three>*,.cpx-kpi>*{min-width:0}
@media (max-width:760px){.csx-main{max-width:100vw;overflow-x:hidden}.cpx-t .csx-btn{min-height:38px;padding:0 12px}.cpx-ser{min-width:0}.cpx-cov{width:34px;height:46px}}