/* Creator Studio shell (handoff 31/10). brand.css tokens only: --bg --bg2 --card --line --ink --mute --dim --green --green-d --on-green --sys --head --body --r-*.
   No purple/orange, no gradients. Desktop: left nav; mobile (<=760px): nav scrolls sideways under the header. */
body.csx{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body)}
.csx-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s4,16px);min-height:60px;padding:0 var(--s5,24px);background:var(--bg);border-bottom:1px solid var(--line);box-sizing:border-box}
.csx-brand{display:flex;align-items:center;gap:var(--s2,8px);color:var(--ink);text-decoration:none}
.csx-brand img{width:32px;height:32px;border-radius:8px;display:block}
.csx-word{font:800 20px/1 var(--head);letter-spacing:-.01em;color:var(--ink)}
.csx-word b{color:var(--green);font-weight:800}
.csx-label{font:700 14px var(--head);color:var(--mute)}
.csx-sample{font:800 11px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);background:var(--card);border-radius:var(--r-chip,999px);padding:6px 10px}
.csx-help{margin-left:auto;color:var(--mute);font:600 13px var(--body);text-decoration:none}
.csx-help:hover{color:var(--ink)}
.csx-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 60px)}
.csx-nav{display:flex;flex-direction:column;gap:var(--s1,4px);padding:var(--s4,16px);border-right:1px solid var(--line);box-sizing:border-box}
.csx-nav a{display:block;padding:10px 12px;border-radius:var(--r-btn,14px);color:var(--mute);font:600 15px/1.3 var(--body);text-decoration:none}
.csx-nav a:hover{color:var(--ink);background:var(--bg2)}
.csx-nav a.on{color:var(--ink);background:var(--card)}
.csx-main{min-width:0;padding:var(--s6,32px) var(--s6,32px) 120px;box-sizing:border-box}
.csx-main .cs-app{max-width:1100px;margin:0;padding:0}
.csx-h1{font:800 28px/1.15 var(--head);letter-spacing:-.02em;margin:0;color:var(--ink)}
.csx-sub{color:var(--mute);font:500 15px/1.5 var(--body);margin:6px 0 var(--s5,24px)}
/* Section tabs without numbers (signup): plain labels, active one green */
.csx-parts{max-width:1100px;box-sizing:border-box;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2,8px);margin:0 0 var(--s4,16px);padding:0}
.csx-parts li{padding:10px 12px;border-radius:var(--r-tag,6px);background:var(--card);color:var(--mute);font:600 13px/1.3 var(--body)}
.csx-parts li.on{background:var(--green);color:var(--on-green)}
.csx-parts li.done{color:var(--green-d)}
.csx-panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-panel,16px);padding:var(--s5,24px);max-width:1100px;box-sizing:border-box}
.csx-panel h2{font:800 20px var(--head);margin:0 0 var(--s2,8px);color:var(--ink)}
.csx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4,16px)}
.csx-grid .full{grid-column:1/-1}
.csx-field{display:block}
.csx-field>span{display:block;font:600 13px var(--body);color:var(--mute);margin-bottom:6px}
.csx-field input,.csx-field select{width:100%;box-sizing:border-box;min-height:46px;padding:11px 12px;border-radius:var(--r-btn,14px);border:1px solid var(--line);background:var(--card);color:var(--ink);font:500 15px var(--body)}
.csx-field input:focus,.csx-field select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.csx-field small{display:block;color:var(--dim);font:500 12.5px/1.4 var(--body);margin-top:5px}
.csx-field small.err{color:var(--ink);font-weight:700}
.csx-field small.err::before{content:"! ";color:var(--green)}
.csx-check{display:flex;gap:10px;align-items:flex-start;font:500 14px/1.45 var(--body);color:var(--ink);margin:var(--s3,12px) 0}
.csx-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--green)}
.csx-check a,.csx-link{color:var(--green)}
.csx-oauth{display:flex;gap:var(--s2,8px);flex-wrap:wrap}
.csx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:var(--r-btn,14px);border:0;background:var(--green);color:var(--on-green);font:800 14px var(--body);cursor:pointer;text-decoration:none}
.csx-btn:hover{background:var(--green-d)}
.csx-btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.csx-btn.ghost:hover{background:var(--bg2)}
.csx-bar{display:flex;gap:var(--s2,8px);margin-top:var(--s5,24px);flex-wrap:wrap}
.csx-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2,8px);border:0;margin:0;padding:0}
.csx-methods legend{font:600 13px var(--body);color:var(--mute);margin-bottom:6px;padding:0}
.csx-methods label{display:flex;align-items:center;justify-content:center;min-height:56px;border:1px solid var(--line);border-radius:var(--r-btn,14px);background:var(--card);color:var(--ink);font:600 15px var(--body);cursor:pointer}
.csx-methods input{position:absolute;opacity:0;pointer-events:none}
.csx-methods label:has(input:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.csx-methods input:focus-visible+span{outline:2px solid var(--green);outline-offset:4px}
.csx-note{color:var(--mute);font:500 13px/1.5 var(--body);margin:var(--s3,12px) 0 0}
.csx-msg{margin-top:var(--s3,12px);font:600 14px/1.45 var(--body);color:var(--ink)}
.csx-msg:empty{display:none}
.csx-msg.ok{color:var(--green)}
/* Dashboard balance card (creator.html) */
.csx-bal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3,12px);margin:var(--s3,12px) 0}
.csx-bal>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card,14px);padding:var(--s4,16px)}
.csx-bal small{display:block;color:var(--mute);font:600 12.5px var(--body)}
.csx-bal b{display:block;font:800 26px/1.2 var(--head);color:var(--ink);margin-top:4px}
.csx-bal em{display:block;font:600 12px var(--body);font-style:normal;color:var(--dim);margin-top:4px}
.csx-bal em.ok{color:var(--green-d)}
@media (max-width:760px){
  .csx-head{padding:0 var(--s4,16px);gap:var(--s3,12px)}
  .csx-label,.csx-help{display:none}
  .csx-wrap{display:block}
  .csx-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:var(--s2,8px) var(--s4,16px);scrollbar-width:none}
  .csx-nav a{flex:none;white-space:nowrap;font-size:14px;padding:8px 12px}
  .csx-main{padding:var(--s5,24px) var(--s4,16px) 100px}
  .csx-grid,.csx-methods,.csx-bal{grid-template-columns:minmax(0,1fr)}
  .csx-parts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .csx-parts li{font-size:12px;padding:8px}
}
/* Gon 31/10: sidebar icons + one thin "Sample data" banner under the header. */
.csx-nav a{display:flex;align-items:center;gap:10px}
.csx-nav a[hidden]{display:none}
.csx-ic{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.csx-nav a.on .csx-ic{stroke:var(--green)}
.csx-sample-bar{padding:6px var(--s5,24px);border-bottom:1px solid var(--line);background:var(--bg2);color:var(--mute);font:500 12.5px/1.4 var(--body)}
.csx-sample-bar b{color:var(--ink);font-weight:700}
.csx-sample-bar[hidden]{display:none}
@media (max-width:760px){.csx-sample-bar{padding:6px var(--s4,16px)}.csx-nav a{gap:6px}.csx-ic{width:16px;height:16px}}
/* Bring your series (/creator/bring, 07/11) */
.bsx-sec{margin-top:var(--s4,16px)}
.bsx-sec[hidden]{display:none}
.bsx-code{display:flex;gap:var(--s2,8px);align-items:center;flex-wrap:wrap;margin:var(--s3,12px) 0}
.bsx-code code{font:800 20px/1.2 ui-monospace,Menlo,monospace;color:var(--green);background:var(--card);border:1px solid var(--line);border-radius:var(--r-btn,14px);padding:10px 14px;word-break:break-all}
.bsx-card{display:flex;gap:var(--s4,16px);align-items:flex-start;margin:var(--s3,12px) 0}
.bsx-card img{flex:none;width:96px;height:auto;border-radius:var(--r-card,14px);border:1px solid var(--line)}
.bsx-card b{display:block;font:800 18px/1.3 var(--head);color:var(--ink)}
.bsx-card p{margin:6px 0 0;color:var(--mute);font:500 14px/1.5 var(--body);overflow-wrap:anywhere}
.bsx-genre{display:inline-block;margin-top:4px;color:var(--green);font:700 12px var(--body)}
.bsx .csx-field+.csx-field{margin-top:var(--s3,12px)}
.bsx .csx-field small.err[hidden]{display:none}
@media (max-width:760px){.bsx-card img{width:72px}}