.creators-workspace { padding-top: 42px; padding-bottom: 64px; }
.creator-heading,.creator-toolbar,.creator-section-head,.creator-row,.task-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.creator-heading { margin-bottom:28px; align-items:flex-start; }
.creator-heading h1 { margin:4px 0 10px; }
.creator-kicker { font:11px var(--font-mono); letter-spacing:.14em; color:var(--sx-yellow)!important; }
.creator-tabs { display:flex; gap:8px; border-bottom:1px solid var(--sx-line); padding-bottom:14px; margin-bottom:24px; flex-wrap:wrap; }
.creator-tabs a { text-decoration:none; padding:9px 16px; border-radius:8px; color:var(--sx-muted); }
.creator-tabs a[aria-current="page"] { background:var(--sx-yellow); color:var(--sx-bg); font-weight:800; }
.creator-panel { background:var(--sx-panel); border:1px solid var(--sx-line); border-radius:14px; padding:24px; margin-bottom:20px; }
.creator-panel h2 { font-size:1.35rem; margin:0; }
.creator-toolbar { margin:0 0 22px; flex-wrap:wrap; }
.creator-toolbar input { flex:1; min-width:180px; }
.creator-toolbar select { width:auto; max-width:100%; }
.creator-grid { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.65fr); gap:24px; align-items:start; }
.creator-roster { padding:8px; }
.creator-row { width:100%; text-align:left; border:1px solid transparent; background:transparent; color:var(--sx-text); padding:18px 14px; border-radius:9px; margin-bottom:4px; }
.creator-row:hover { background:var(--sx-panel-raised); }
.creator-row[aria-pressed="true"] { border-color:#756528; background:rgba(255,204,38,.06); }
.creator-row strong { display:block; font-size:15px; margin-bottom:7px; }
.creator-row-wrap { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.creator-row-wrap .creator-row { margin-bottom:0; flex:1; min-width:0; }
.creator-folder-btn { flex-shrink:0; white-space:nowrap; }

.creator-folder-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.creator-row small { display:block; }
.creator-progress { width:64px; height:4px; background:var(--sx-line); border-radius:8px; overflow:hidden; margin-top:8px; }
.creator-progress span { height:100%; display:block; background:var(--sx-yellow); }
.creator-badge { display:inline-block; font:10px var(--font-mono); letter-spacing:.035em; padding:5px 8px; border:1px solid var(--sx-line); border-radius:5px; color:var(--sx-muted); white-space:nowrap; }
.creator-badge[data-status="launched"],.creator-badge[data-state="sent"] { color:var(--sx-positive); border-color:#3b6248; }
.creator-badge[data-status="awaiting_launch"],.creator-badge[data-state="uncertain"] { color:var(--sx-yellow); border-color:#756528; }
.creator-section-head { margin-bottom:20px; flex-wrap:wrap; }
.creator-meta { display:flex; gap:20px; flex-wrap:wrap; font-size:12px; margin:18px 0 24px; color:var(--sx-muted); }
.creator-step { padding:16px 0; border-top:1px solid var(--sx-line); }
.creator-step-title { display:flex; align-items:center; gap:12px; }
.creator-step-number { width:27px; height:27px; border:1px solid var(--sx-line); border-radius:50%; display:grid; place-items:center; font:11px var(--font-mono); flex-shrink:0; color:var(--sx-muted); }
.creator-step-number.done { color:var(--sx-bg); background:var(--sx-positive); border-color:var(--sx-positive); }
.creator-step-title h3 { font-size:14px; letter-spacing:0; margin:0; }
.creator-step-title small { margin-left:auto; font-size:11px; }
.creator-task { padding:18px; margin:14px 0 0 39px; border:1px solid var(--sx-line); border-radius:9px; background:var(--sx-panel-raised); }
.creator-task label { display:block; font-size:12px; margin:12px 0 5px; color:var(--sx-muted); }
.creator-task .form-control,.creator-task .form-select { font-size:12px; }
.task-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.task-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.creator-note { font-size:12px; line-height:1.7; margin:12px 0 0; }
.creator-empty { padding:48px 24px; text-align:center; }
.creator-empty h2,.creator-empty h3 { font-size:20px; margin-bottom:10px; }
.creator-empty p { max-width:400px; margin:0 auto; }
.creator-policy { border-left:2px solid var(--sx-yellow); padding-left:14px; font-size:12px; margin-bottom:26px; }
.creator-history { padding:12px 0; border-top:1px solid var(--sx-line); font-size:12px; }
.creator-history span { display:block; color:var(--sx-muted); margin-top:4px; }
.creator-feedback:empty { display:none; }
.creator-feedback { margin-top:12px; font-size:12px; color:var(--sx-positive); }
.creator-feedback.error { color:var(--sx-negative); }
.creator-skeleton { height:74px; background:var(--sx-panel-raised); border-radius:9px; margin:12px 0; animation:creator-pulse 1.4s ease-in-out infinite alternate; }
@keyframes creator-pulse { to { opacity:.35; } }
.creator-access-row { padding:20px 0; border-top:1px solid var(--sx-line); }
.creator-access-checks { display:flex; flex-wrap:wrap; gap:20px; margin:15px 0; }
.creator-access-checks label { display:flex; gap:8px; align-items:center; }
.creator-table-wrap { overflow-x:auto; }
.creator-table { width:100%; font-size:12px; }
.creator-table th,.creator-table td { padding:13px 12px; border-bottom:1px solid var(--sx-line); text-align:left; white-space:nowrap; }
.creator-table th { color:var(--sx-muted); font-weight:500; }
#creatorDialog { background:var(--sx-panel); color:var(--sx-text); border:1px solid var(--sx-line); border-radius:16px; width:min(520px,calc(100% - 32px)); padding:28px; }
#creatorDialog::backdrop { background:rgba(10,12,15,.8); }
#creatorDialog h2 { font-size:24px; }
#creatorDialog label { display:block; margin:16px 0 6px; }
#creatorDialog .task-actions { justify-content:flex-end; margin-top:24px; }
.creator-signout { font-size:12px; }
@media(max-width:767px) { .creator-grid { grid-template-columns:1fr; } .creator-heading { flex-direction:column; } .creators-workspace { padding-top:28px; } .creator-panel { padding:18px; } .creator-roster { padding:6px; } .creator-task { margin-left:0; } .task-fields { grid-template-columns:1fr; gap:0; } .creator-step-title { gap:8px; } .creator-step-title small { max-width:90px; text-align:right; } }
@media(prefers-reduced-motion:reduce) { .creator-skeleton { animation:none; } }
.creator-account-notes { margin:18px 0 6px; padding:14px 16px; border:1px solid var(--sx-line); border-radius:12px; background:var(--sx-panel-soft, rgba(255,255,255,.02)); }
.creator-account-notes .creator-section-head { margin:0 0 6px; }
.creator-account-notes .creator-section-head h2 { font-size:1rem; margin:0; }
.creator-account-notes p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.9rem; }
#creatorNotes { resize:vertical; }
/* Drive buttons: compact pills with a folder icon, matching the STARX yellow accent. */
.drive-chip {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(255,204,38,.35); background:rgba(255,204,38,.07); color:var(--sx-yellow, #ffcc26);
  font:600 .7rem/1.2 var(--font-mono, monospace); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.drive-chip:hover, .drive-chip:focus-visible { background:var(--sx-yellow, #ffcc26); border-color:var(--sx-yellow, #ffcc26); color:#171717; }
.drive-chip:focus-visible { outline:2px solid var(--sx-yellow, #ffcc26); outline-offset:2px; }
.drive-chip:disabled { opacity:.55; cursor:progress; }
.drive-icon { width:13px; height:13px; flex-shrink:0; }
.drive-chip-arrow { font-size:.8em; transition:transform .15s; }
.drive-chip:hover .drive-chip-arrow { transform:translate(2px,-2px); }
.drive-chip-add { border-style:dashed; border-color:#4a4d55; background:transparent; color:var(--sx-muted, #a4a4a4); }
.drive-chip-add:hover, .drive-chip-add:focus-visible { border-style:solid; }
.drive-chip-action { padding:7px 14px; font-size:.76rem; }
.task-owner-note { display:block; margin-top:4px; color:var(--sx-muted, #a4a4a4); font-size:.75rem; }
.notes-inline {
  width:100%; display:block; resize:vertical; margin:0; padding:6px 8px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:inherit; font:inherit; font-size:.9rem; line-height:1.5; cursor:text;
  transition:border-color .15s, background .15s;
}
.notes-inline:hover { border-color:var(--sx-line, #2c2f35); }
.notes-inline:focus { outline:none; border-color:var(--sx-yellow, #ffcc26); background:rgba(0,0,0,.18); }
.notes-inline::placeholder { color:var(--sx-muted, #a4a4a4); }
.notes-status { font:500 .68rem var(--font-mono, monospace); color:var(--sx-muted, #a4a4a4); }
.notes-status.error { color:#ff6b6f; }
/* Fanvue login: saved encrypted; copy buttons for quick sign-in. */
.creator-login { margin:12px 0 6px; padding:14px 16px; border:1px solid var(--sx-line); border-radius:12px; background:var(--sx-panel-soft, rgba(255,255,255,.02)); }
.creator-login .creator-section-head { margin:0 0 8px; }
.creator-login .creator-section-head h2 { font-size:1rem; margin:0; }
.login-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); flex-wrap:wrap; }
.login-label { width:84px; flex:none; font:600 .68rem var(--font-mono, monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--sx-muted, #a4a4a4); }
.login-value { flex:1 1 180px; min-width:0; color:var(--sx-text, #f0f0f0); background:none; font-size:.86rem; overflow-wrap:anywhere; padding:0; }
.login-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding-top:6px; }
.login-form { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.login-form label { font-size:.78rem; margin-bottom:4px; }
.login-form-actions { grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:640px) { .login-form { grid-template-columns:1fr; } .login-label { width:100%; } }
/* Signed contract box (same card style as Fanvue login). */
.contract-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); flex-wrap:wrap; }
.contract-icon { flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:rgba(255,204,38,.1); color:var(--sx-yellow, #ffcc26); font:700 .62rem var(--font-mono, monospace); letter-spacing:.06em; }
.contract-info { flex:1 1 200px; min-width:0; display:flex; flex-direction:column; }
.contract-name { all:unset; cursor:pointer; color:var(--sx-text, #f0f0f0); font-size:.88rem; overflow-wrap:anywhere; }
.contract-name:hover, .contract-name:focus-visible { color:var(--sx-yellow, #ffcc26); text-decoration:underline; }
.contract-upload { margin-top:10px; cursor:pointer; }
/* Completed onboarding steps collapse to a single line (native <details>). */
.creator-step-done { padding:10px 0; }
.creator-step-done > summary { list-style:none; cursor:pointer; user-select:none; }
.creator-step-done > summary::-webkit-details-marker { display:none; }
.creator-step-done > summary h3 { color:var(--sx-muted); font-weight:500; }
.creator-step-done > summary:hover h3, .creator-step-done[open] > summary h3 { color:var(--sx-text); }
.creator-step-done > summary small { color:var(--sx-positive); }
.creator-step-caret { font-size:.7rem; color:var(--sx-muted); transition:transform .15s; }
.creator-step-done[open] .creator-step-caret { transform:rotate(180deg); }
.drive-chip-static { cursor:default; opacity:.85; }
.drive-chip-static:hover { background:inherit; border-color:inherit; color:inherit; }
/* Inline creator rename on the record heading. */
.creator-name-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.creator-name-line h2 { margin:0; }
.creator-rename-btn { border:0; background:none; padding:2px 6px; color:var(--sx-muted, #a4a4a4); font-size:1rem; line-height:1; cursor:pointer; border-radius:6px; }
.creator-rename-btn:hover, .creator-rename-btn:focus-visible { color:var(--sx-yellow, #ffcc26); }
.creator-rename-input { max-width:320px; font-size:1.1rem; font-weight:600; }
.creator-name-line .notes-status { width:100%; }
/* Record cards (notes, login, contract) stack with even gaps; the checklist starts as a clear new section. */
.creator-account-notes, .creator-login { margin:12px 0 0; }
.creator-account-notes { margin-top:20px; }
.creator-checklist-head { margin:36px 0 12px; }
.creator-checklist-head small { color:var(--sx-muted); }
.creator-head-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---- Roster layout refresh ---- */
/* Roster stays in view while working through a long creator record. */
@media (min-width:768px) {
  .creator-roster { position:sticky; top:88px; max-height:calc(100vh - 108px); overflow-y:auto; scrollbar-width:thin; }
}
/* Each roster entry is one card: name + status on top, progress, next step; folder chip on the right. */
.creator-row-wrap { border:1px solid transparent; border-radius:10px; padding-right:10px; transition:background .12s, border-color .12s; }
.creator-row-wrap:hover { background:var(--sx-panel-raised); }
.creator-row-wrap.is-selected { border-color:#756528; background:rgba(255,204,38,.06); }
.creator-row-wrap .creator-row, .creator-row-wrap .creator-row:hover, .creator-row-wrap .creator-row[aria-pressed="true"] { display:block; border:0; background:transparent; padding:14px 12px; }
.creator-row-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.creator-row-top strong { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.creator-row .creator-progress { display:block; width:100%; margin:10px 0 7px; }
.creator-row small { color:var(--sx-muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.creator-row-side { flex:none; display:flex; align-items:center; }
.creator-row-side:empty { display:none; }

/* Record header: name + status together, then a progress summary and labelled facts. */
.creator-name-line .creator-badge { margin-left:2px; }
.creator-summary { margin:4px 0 22px; }
.creator-summary-progress small { display:block; margin-top:8px; color:var(--sx-muted); font-size:12.5px; }
.creator-summary-progress small strong { color:var(--sx-text); font-weight:600; }
.creator-progress-lg { width:100%; height:6px; margin:0; }
.creator-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.creator-fact { flex:1 1 170px; background:var(--sx-panel-raised); border:1px solid var(--sx-line); border-radius:9px; padding:10px 14px; min-width:0; }
.creator-fact > span { display:block; font:10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sx-muted); margin-bottom:4px; }
.creator-fact strong { display:block; font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.creator-fact a { color:var(--sx-yellow); }
.creator-fact .creator-folder-line { margin:0; }

/* Checklist: overdue steps stand out; task cards drop their duplicate title. */
.creator-step-title small.is-overdue { color:#ff6b6f; }
.creator-step .creator-task { margin-top:12px; padding-top:6px; }
.task-actions { align-items:center; }
.task-reload { margin-left:auto; padding:0; font-size:11.5px; color:var(--sx-muted)!important; text-decoration:none; }
.task-reload:hover { color:var(--sx-yellow)!important; }
@media (max-width:767px) { .creator-row-wrap .creator-row { padding:12px 10px; } .creator-fact { flex-basis:140px; } }
/* To-do panel at the top of Creators (replaces the old Task queue tab). */
.creator-todo { margin-bottom:24px; }

/* ---- Creator record: one spacing scale (8 / 12 / 16 / 32px) ---- */
#creatorDetail .creator-section-head { margin-bottom:16px; }
#creatorDetail .creator-summary { margin:0 0 16px; }
#creatorDetail .creator-facts { margin-top:16px; }
/* Notes, Fanvue login and contract cards: same padding, heading gap and spacing between them. */
#creatorDetail .creator-account-notes, #creatorDetail .creator-login { margin:12px 0 0; padding:16px 18px; }
#creatorDetail .creator-account-notes .creator-section-head, #creatorDetail .creator-login .creator-section-head { margin:0 0 12px; }
#creatorDetail .creator-account-notes > p { margin:0; }
/* Notes text lines up with the heading; the edit border still shows on hover/focus. */
#creatorDetail .notes-inline { padding:6px 8px; margin:-6px -8px; width:calc(100% + 16px); }
#creatorDetail .login-row, #creatorDetail .contract-row { padding:8px 0; }
#creatorDetail .login-row:first-child, #creatorDetail .contract-row:first-child { padding-top:0; }
#creatorDetail .login-foot { padding-top:12px; }
#creatorDetail .login-foot .btn-link { padding:0; }
#creatorDetail .creator-contracts .creator-note { margin:0; }
#creatorDetail .contract-upload { margin-top:12px; }
/* Checklist: same row height whether a step is complete or open. */
#creatorDetail .creator-checklist-head { margin:32px 0 8px; }
#creatorDetail .creator-step, #creatorDetail .creator-step-done { padding:14px 0; }
#creatorDetail .creator-step .creator-task { margin:12px 0 0 39px; padding:16px; }
#creatorDetail .creator-task > .task-fields:first-child > div > label:first-child { margin-top:0; }
#creatorDetail .task-actions { margin-top:16px; }
@media(max-width:767px) { #creatorDetail .creator-step .creator-task { margin-left:0; } #creatorDetail .creator-account-notes, #creatorDetail .creator-login { padding:14px; } }
#creatorDetail { scroll-margin-top:96px; } /* clears the sticky top bar when scrolled into view */
#creatorDetail .login-foot .creator-note { margin:0; }
#creatorDetail .contract-upload + .creator-note { display:inline-block; vertical-align:middle; margin:12px 0 0; }
#creatorDetail .contract-upload { vertical-align:middle; }
/* Every box in the record (fact tiles, folder, notes, login, contract) sits 12px apart. */
#creatorDetail .creator-facts { gap:12px; }
#creatorDetail .creator-summary { margin-bottom:12px; }