/* ── A creator's profile, in one panel (views/creator-panel.js) ─────────────
   Docked beside a campaign or the roster, or over the Applications queue
   (owner, 7 Oct 2026). Its own file so app.css stops growing; every class is
   cp-* so nothing here can restyle a screen by accident. Tokens are app.css's. */

/* ── the dock ── */
.cp-main { min-width: 0; }
.cp-split.has-dock {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 34vw, 500px);
  gap: 16px; align-items: start;
}
.cp-dock {
  position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto;
  overscroll-behavior: contain; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.cp-dock[hidden] { display: none; }
/* The list keeps its width on a wide screen: the page grows instead of the list shrinking. */
main:has(.cp-split.has-dock) { max-width: 1840px; }
/* No room beside the list: the same panel slides over it. */
@media (max-width: 1100px) {
  .cp-split.has-dock { display: block; }
  .cp-dock {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%);
    max-height: none; border-radius: 0; z-index: 45;
  }
}

/* The row whose profile is open, in whichever list the tab shows. */
.pool-table tr.is-open td, #roster tr.is-open td, .pb-table tr.is-open td {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pool-table tr.is-open td:first-child, #roster tr.is-open td:first-child, .pb-table tr.is-open td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.ct-group.is-open { border-color: var(--accent); }

/* With a profile open the pool is narrower. What the profile's card already says
   (how they got here) steps aside, and a row's verbs wrap rather than scrolling
   off the edge. #pool-panel only: the Offers board shares .pool-table, and its
   third column is the fee. */
.cp-split.has-dock #pool-panel th:nth-child(3), .cp-split.has-dock #pool-panel td:nth-child(3) { display: none; }
.cp-split.has-dock #pool-panel td.r { white-space: normal; min-width: 140px; }

/* ── the panel ── */
.cp { display: flex; flex-direction: column; min-height: 100%; }
.cp.is-loading { opacity: .55; transition: opacity .15s; }
.cp-loading, .cp-error { padding: 24px 16px; margin: 0; }
.cp-error p { margin: 0 0 10px; }

.cp-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 2;
}
.cp-ib {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cp-ib:hover:not(:disabled) { background: var(--bg); border-color: var(--muted); }
.cp-ib:disabled { opacity: .35; cursor: default; }
.cp-ib:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cp-bar [data-cp-close] { border-color: transparent; font-size: 16px; }
.cp-pos { margin-left: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-spacer { flex: 1 1 auto; }
.cp-editing-h { font-weight: 600; font-size: 14px; padding-left: 4px; overflow-wrap: anywhere; }
.cp-dirty { font-size: 12px; color: var(--warn); white-space: nowrap; }

/* who */
.cp-head { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 12px; }
.cp-ava {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: #b9d2ff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
  position: relative; overflow: hidden;             /* the photo, when there is one, covers the initials */
}
.cp-ava img, .cl-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
button.cp-ava, button.cl-ava { border: 0; padding: 0; font: inherit; font-weight: 700; cursor: zoom-in; }
button.cp-ava:focus-visible, button.cl-ava:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the roster: a face beside each name */
.cl-who { display: flex; gap: 10px; align-items: center; }
.cl-who-text { min-width: 0; }
.cl-ava {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: #b9d2ff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}

/* a photo, bigger (photo-viewer.js) */
.modal.pv { width: min(300px, 100%); text-align: center; }
.modal.pv img {
  display: block; width: 200px; height: 200px; margin: 2px auto 12px; border-radius: 12px; object-fit: cover;
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}
.modal.pv p { margin: 0 0 4px; }
.modal.pv footer { justify-content: center; }
.cp-who { flex: 1 1 auto; min-width: 0; }
.cp-name { margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.cp-name:focus { outline: none; }
.cp-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cp-sub { margin: 2px 0 8px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.cp-chips .chip { font-size: 11.5px; }

/* "In this campaign" */
.cp-card {
  margin: 0 16px 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
}
.cp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cp-card-h .chip { margin: 0; font-size: 12px; font-weight: 600; }
.cp-card-h h3, .cp-sec-h h3 {
  margin: 0; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.cp-dl {
  display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 6px 14px; margin: 0; font-size: 13px;
}
.cp-dl dt { color: var(--muted); }
.cp-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cp-facts dd.tone-warn { color: var(--warn); }
.cp-facts dd.tone-bad { color: var(--bad); }
.cp-facts dd.tone-good { color: var(--good); }
.cp-facts dd.tone-muted { color: var(--muted); }
.cp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
/* The pool row's own buttons, at a size you can hit in a panel. */
.cp-acts .btn.tiny { padding: 6px 12px; font-size: 13px; }
.cp-acts .link-btn { margin-right: 0; font-size: 13px; }
.cp-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.cp-links a { text-decoration: none; }
.cp-links a:hover { text-decoration: underline; }

/* tabs */
.cp-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.cp-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 8px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cp-tab:hover { color: var(--text); }
.cp-tab.on { color: var(--text); border-bottom-color: var(--accent); }
.cp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cp-count {
  font-size: 11px; padding: 0 6px; border-radius: 999px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.cp-body { padding: 14px 16px 20px; }

/* sections */
.cp-sec + .cp-sec { margin-top: 20px; }
.cp-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cp-sec-h .link-btn { margin: 0; font-size: 12.5px; }
.cp-sec-h .cp-note { margin: 0; text-align: right; }
.cp-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cp-lead { margin: 0 0 10px; }
.cp-empty { margin: 0; }

.cp-accts { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cp-acct { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.cp-acct + .cp-acct { border-top: 1px solid var(--border); }
.cp-acct .plat { flex: 0 0 auto; width: 26px; height: 26px; margin: 0; font-size: 12px; border-radius: 7px; }
.cp-acct-id { flex: 1 1 auto; min-width: 0; }
.cp-acct-h { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.cp-acct-h .muted { font-weight: 400; }
.cp-out { flex: 0 0 auto; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.cp-out:hover { text-decoration: underline; }

.cp-tags { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 10px; margin: 0; }
.cp-tags dt { font-size: 12px; color: var(--muted); padding-top: 3px; }
.cp-tags dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-tag {
  font-size: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
}

.cp-copy {
  margin-left: 6px; padding: 1px 7px; border: 1px solid var(--border); border-radius: 6px;
  background: none; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer;
}
.cp-copy:hover { color: var(--text); border-color: var(--muted); }
.cp-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cp-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
}
.cp-row .chip { margin: 0; }
.cp-rel + .cp-rel { margin-top: 8px; }
.cp-rel .chip { margin-left: 6px; }

/* typed where it will appear: a new handle, a note */
.cp-inline {
  margin-top: 10px; padding: 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg);
}
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cp-grid .cp-wide { grid-column: 1 / -1; }
.cp-inline-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.cp-compose { margin-bottom: 14px; }
.cp-compose label { margin-bottom: 6px; }
.cp-compose textarea { width: 100%; resize: vertical; }
.cp-compose .cp-inline-acts { margin-top: 8px; }

/* Campaigns */
.cp-hist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cp-hist li + li { border-top: 1px solid var(--border); }
.cp-hist-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: var(--text); text-decoration: none; }
.cp-hist-row:hover { background: var(--bg); }
.cp-hist-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cp-hist-row.is-current { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cp-hist-main { flex: 1 1 auto; min-width: 0; }
.cp-hist-name { display: block; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.cp-hist-meta { display: block; font-size: 12px; color: var(--muted); }
.cp-hist-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cp-hist-side .chip { margin: 0; }
.cp-hist-money { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-pill {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--accent) 22%, transparent); color: #b9d2ff;
}

/* Notes */
.cp-pinned {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
}
.cp-pinned-h {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.cp-pinned-h .link-btn { margin: 0; text-transform: none; letter-spacing: 0; }
.cp-pinned p, .cp-noteitem p { margin: 0; font-size: 13px; }
.cp-noteitem { padding: 10px 0; border-top: 1px solid var(--border); }
.cp-note-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.cp-note-meta b { color: var(--text); }
.cp-note-ava {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--border);
  color: var(--text); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* ── editing, in place ── */
.cp-form { padding: 14px 16px 8px; }
.cp-form [data-cp-tags] { margin: 22px 0; }
.cp-seg { margin: 2px 0 0; padding: 0; border: 0; min-width: 0; }
.cp-seg legend { padding: 0; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.cp-seg-row { display: inline-flex; flex-wrap: wrap; }
.cp-seg label { position: relative; margin: 0; font-size: 13px; color: var(--text); }
.cp-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cp-seg span {
  display: inline-block; margin-left: -1px; padding: 6px 14px; border: 1px solid var(--border);
  font-weight: 600; cursor: pointer;
}
.cp-seg label:first-child span { margin-left: 0; border-radius: 8px 0 0 8px; }
.cp-seg label:last-child span { border-radius: 0 8px 8px 0; }
.cp-seg input:checked + span { position: relative; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cp-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.cp-kind { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.cp-kind legend { padding: 0; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.cp-kind legend .muted { font-weight: 400; }
.cp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-pill-opt { position: relative; margin: 0; }
.cp-pill-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cp-pill-opt span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--muted) 40%, var(--border)); color: var(--text);
  font-size: 12.5px; cursor: pointer;
}
.cp-pill-opt span:hover { border-color: var(--muted); }
.cp-pill-opt input:checked + span {
  background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: #d6e5ff;
}
.cp-pill-opt input:checked + span::before { content: '✓'; font-weight: 700; }
.cp-pill-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-label { margin: 0; }
.cp-label textarea { min-height: 72px; }

.cp-savebar {
  position: sticky; bottom: 0; margin-top: auto; display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface);
}

/* Over the page (the Applications queue): the drawer is the panel. */
.cp-drawer { width: min(520px, 100%); }

/* ── TikTok Shop tab (views/creator-tiktok.js; docs/prd-tiktok-creator-data.md §7.5) ──
   Two colours tell series apart, and they differ in lightness as well as hue
   (blue / orange, as the mockup): never red against green. */
.cp-body[data-tab="tiktok"] { display: flex; flex-direction: column; gap: 16px; }
.cp-body[data-tab="tiktok"] .cp-sec + .cp-sec { margin-top: 0; }
/* The account line: who, then its actions — beside it when there's room, under it when docked. */
.cp-tt-match { align-items: flex-start; padding: 12px 14px; }
.cp-tt-match .cp-tt-mt { flex: 1 1 260px; }
.cp-tt-acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-tt-acts .btn { margin: 0; white-space: nowrap; }
a.cp-tt-out { text-decoration: none; }
a.cp-tt-out:hover { color: var(--text); }
.cp-tt-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cp-tt-cats .cp-tag { font-size: 11.5px; padding: 1px 9px; white-space: nowrap; }
/* After a lookup with no exact match: TikTok's similar accounts, to open, not to pick. */
.cp-tt-similar { margin: -4px 0 0; }
.cp-tt-simlist { margin: 4px 0 6px; padding-left: 18px; }
.cp-tt-simlist li { margin: 3px 0; }
.cp-tt-simlist li span { margin-left: 6px; }
.cp-tt-mt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-tt-mt .chip { margin-right: 6px; vertical-align: 1px; }
.cp-tt-mt .cp-note { margin: 0; }
.cp-tt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-tt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.cp-tt-tile, .cp-tt-box {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.cp-tt-box { background: none; }
.cp-tt-tl { font-size: 12px; color: var(--muted); }
.cp-tt-tv { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cp-tt-tv.none { color: var(--muted); font-weight: 500; }
/* A glance tile that opens its card. */
button.cp-tt-tile {
  position: relative; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
button.cp-tt-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}
button.cp-tt-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-tt-go {
  position: absolute; top: 8px; right: 12px; font-size: 18px; line-height: 1; color: var(--muted);
  opacity: 0; transition: opacity .15s, transform .15s;
}
button.cp-tt-tile:hover .cp-tt-go, button.cp-tt-tile:focus-visible .cp-tt-go { opacity: 1; transform: translateX(2px); color: var(--accent); }
/* A share of 100, on a track a lighter step of the same blue. */
.cp-tt-meter {
  display: block; height: 6px; margin: 5px 0 3px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.cp-tt-meter span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
/* The card a tile jumped to, marked for a moment. */
.cp-tt-card { scroll-margin-top: 64px; }
.cp-tt-card:focus { outline: none; }
.cp-tt-card.is-flash { animation: cp-tt-flash 1.5s ease-out; }
@keyframes cp-tt-flash {
  0%, 35% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
  100% { border-color: var(--border); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-tt-card.is-flash { animation: none; border-color: var(--accent); }
  button.cp-tt-tile, .cp-tt-go, .cp-tt-ring path, .cp-tt-wkbars i, .cp-tt-shops tr { transition: none; }
}
.cp-tt-ts { font-size: 12px; color: var(--muted); }
.cp-tt-ts.good { color: var(--good); }
.cp-tt-dl { grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); }
.cp-tt-grid2.one { grid-template-columns: minmax(0, 1fr); }

/* A section of the tab, in its own card. The cards (.cp-tt-pair) stack while
   docked and flow into two balanced columns at full width. */
.cp-tt-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.cp-tt-card > .cp-sec-h { margin-bottom: 12px; }
.cp-tt-pair { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-tt-subh { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cp-tt-private {
  margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}
/* Figures inside a card: a label, the number, a line or two under it. */
.cp-tt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; }
.cp-tt-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-tt-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-tt-sv { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cp-tt-stat .cp-tt-ts { overflow-wrap: anywhere; }
.cp-tt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.cp-tt-spark { display: block; width: 100%; height: 48px; margin-top: 6px; overflow: visible; }
.cp-tt-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cp-tt-cols { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin-top: 6px; }
.cp-tt-cols span { flex: 1 1 0; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.cp-tt-cols span.now { background: var(--accent); }
.cp-tt-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }

.cp-tt-stack { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin: 2px 0 6px; }
/* Chart colours, by what they mean (creator-tiktok-logic.js picks the tone).
   Checked with the dataviz palette validator against the panel's dark surface
   (#171b21): c0–c3 pass every adjacent check, c0–c2 every all-pairs one; the age
   ramp a0–a5 is one hue, light to dark, each step visibly apart. A colour follows
   the thing (LIVE, a country), never its rank. */
.cp {
  --tt-c0: var(--accent); --tt-c1: #d95926; --tt-c2: #199e70; --tt-c3: #c98500; --tt-other: #6b7480;
  --tt-a0: #cde2fb; --tt-a1: #a9cbf5; --tt-a2: #7aafee; --tt-a3: #4a90e6; --tt-a4: #2a78d6; --tt-a5: #1c5cab;
}
.t-c0 { --tt: var(--tt-c0); } .t-c1 { --tt: var(--tt-c1); } .t-c2 { --tt: var(--tt-c2); } .t-c3 { --tt: var(--tt-c3); }
.t-other { --tt: var(--tt-other); }
.t-a0 { --tt: var(--tt-a0); } .t-a1 { --tt: var(--tt-a1); } .t-a2 { --tt: var(--tt-a2); }
.t-a3 { --tt: var(--tt-a3); } .t-a4 { --tt: var(--tt-a4); } .t-a5 { --tt: var(--tt-a5); }
.cp-tt-stack span, .cp-tt-legend i, .cp-tt-dlegend i { background: var(--tt, var(--tt-other)); }
.cp-tt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); }
.cp-tt-legend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-tt-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }

.cp-tt-bars {
  display: grid; grid-template-columns: minmax(60px, max-content) minmax(0, 1fr) 40px;
  gap: 6px 10px; align-items: center; margin: 6px 0; font-size: 13px;
}
.cp-tt-track { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; }
.cp-tt-track span { display: block; height: 8px; border-radius: 4px; background: var(--accent); }
.cp-tt-n { text-align: right; font-variant-numeric: tabular-nums; }
/* Donuts: age and country, side by side when there's room. */
.cp-tt-subh.first { margin-top: 0; }
.cp-tt-donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 24px; margin-top: 4px; }
.cp-tt-donut { margin: 0; min-width: 0; }
.cp-tt-dbody { display: flex; align-items: center; gap: 14px; }
.cp-tt-ring { position: relative; flex: 0 0 104px; width: 104px; height: 104px; }
.cp-tt-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cp-tt-ring path {
  fill: var(--tt, var(--tt-other)); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke;
  transition: opacity .15s;
}
.cp-tt-ringc {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.cp-tt-ringc b { font-size: 17px; font-weight: 650; line-height: 1.15; }
.cp-tt-ringc span { max-width: 58px; font-size: 11px; line-height: 1.2; color: var(--muted); overflow-wrap: anywhere; }
.cp-tt-dlegend { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.cp-tt-dlegend li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 3px 6px; border-radius: 6px;
}
.cp-tt-dlegend li:hover, .cp-tt-dlegend li.on { background: color-mix(in srgb, var(--muted) 14%, transparent); }
.cp-tt-dlegend li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cp-tt-dlegend i { width: 10px; height: 10px; border-radius: 3px; }
.cp-tt-dlegend span { overflow-wrap: anywhere; }
.cp-tt-dlegend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-tt-donut.is-hl path:not(.on) { opacity: .3; }

.cp-tt-tablebox { border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.cp-tt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-tt-table th {
  text-align: left; padding: 8px 12px; background: var(--bg); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.cp-tt-table th.r, .cp-tt-table td.r { text-align: right; white-space: nowrap; }
.cp-tt-table td { padding: 9px 12px; border-top: 1px solid var(--border); }
.cp-tt-table .cp-pill { margin-left: 4px; }

.cp-tt-ts { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Profile tab: the tier suggestion and the TikTok line under the account. */
.cp-tt-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; padding: 10px 12px;
  border-radius: 10px; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.cp-tt-banner > span { flex: 1 1 220px; }
.cp-tt-acct { margin-top: 2px; color: var(--muted); }
.cp-tt-acct .chip { margin-right: 6px; }

/* ── full width (owner, 25 Oct 2026; views/creator-panel.js toggleFull) ──
   ⤢ in the bar: the list behind hides and the profile takes the page, its
   sections in two columns where there is room. Classes only, toggled in place —
   the panel never redraws for it. Docked (Creators, a campaign) or in the drawer
   over a page (Insights, Applications): the drawer had no rules here, so ⤢ only
   swapped its icon and Escape then took two presses to close. */
.cp-split.has-dock.is-full { grid-template-columns: minmax(0, 1fr); }
.cp-split.is-full > .cp-main { display: none; }
.cp-dock.is-full {
  position: static; max-height: none; overflow: visible; box-shadow: none;
  justify-self: center; width: 100%; max-width: 1400px;
}
.cp-dock.is-full .cp-bar { top: 56px; }              /* under the app's own top bar */
/* The drawer already sits over the page: it takes the whole window, the profile
   centred at the docked panel's full width. Its bar stays at the drawer's top. */
.cp-drawer.is-full { width: 100%; }
.cp-drawer.is-full > .cp { max-width: 1400px; margin: 0 auto; }
:is(.cp-dock, .cp-drawer).is-full .cp-body[data-tab="campaigns"],
:is(.cp-dock, .cp-drawer).is-full .cp-body[data-tab="notes"] { max-width: 880px; }
@media (min-width: 900px) {
  :is(.cp-dock, .cp-drawer).is-full .cp-body[data-tab="profile"] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; align-items: start;
  }
  :is(.cp-dock, .cp-drawer).is-full .cp-body[data-tab="profile"] > .cp-sec + .cp-sec { margin-top: 0; }
  :is(.cp-dock, .cp-drawer).is-full .cp-body[data-tab="profile"] > .cp-tt-banner,
  :is(.cp-dock, .cp-drawer).is-full .cp-body[data-tab="profile"] > .cp-empty { grid-column: 1 / -1; margin-bottom: 0; }
  /* The TikTok Shop tab: the glance in one row, then its two columns side by side. */
  :is(.cp-dock, .cp-drawer).is-full .cp-body[data-tab="tiktok"] { gap: 20px; }
  :is(.cp-dock, .cp-drawer).is-full .cp-tt-glance .cp-tt-grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Columns, not a grid: a grid lines cards up in rows, and a short card beside a
     long one leaves a hole. Columns balance whichever cards this creator's data
     makes long, and keep the reading order down the left, then the right. */
  :is(.cp-dock, .cp-drawer).is-full .cp-tt-pair { display: block; columns: 2; column-gap: 20px; margin-bottom: -16px; }
  :is(.cp-dock, .cp-drawer).is-full .cp-tt-pair.one { columns: 1; }
  :is(.cp-dock, .cp-drawer).is-full .cp-tt-pair > .cp-tt-card { break-inside: avoid; margin: 0 0 16px; }
  .cp-dock.is-full .cp-tt-card { scroll-margin-top: 120px; }   /* under the app's bar and the panel's */
}
/* No room beside the list: full width is the whole window, over it. */
@media (max-width: 1100px) {
  .cp-dock.is-full {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: none;
    max-height: none; overflow-y: auto; border-radius: 0; z-index: 45;
  }
  .cp-dock.is-full .cp-bar { top: 0; }
}