/* ─── /affiliate-programme/studio/ ───────────────────────────────────────────
   Affiliate Studio, ported from the Claude Design export (Affiliate Studio v2).
   Everything is scoped under .as so the export's short class names (.btn,
   .chip, .sw, .preview ...) can't leak into the rest of the site; its .pre is
   renamed .as-pre (site.css owns .pre for code blocks).
   ─────────────────────────────────────────────────────────────────────────── */
.as { --divider: rgba(206,206,206,.5); }   /* --divider: from the legacy base, not in base.css */
.as .wrap, .page-affiliate-studio .crumbs { width: 1320px; }   /* the export's wider column; breadcrumb (feature layout) lines up with it */
/* Hero (the export's .intro) and the studio section rule */
.as .intro { padding: 40px 0 48px; }
.as .ik { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; font: 700 11px/1 var(--font-mono); letter-spacing: 1.6px; color: var(--hint); text-transform: uppercase; }
.as .ih { margin: 0 0 16px; font: 800 clamp(28px,3.6vw,48px)/1.05 var(--font-mono); color: var(--fg-primary); text-transform: uppercase; text-wrap: pretty; }
.as .ih em { font-style: normal; color: var(--brand); }
.as .is { max-width: 62ch; margin: 0; font: 400 15px/1.6 var(--font-mono); color: var(--fg-muted); text-wrap: pretty; }
.as .as-studio { padding: 48px 0; border-top: 1px dashed var(--divider-dim); }
.as .as-pitch { padding: 72px 0; border-top: 1px dashed var(--divider-dim); }
.as .ico { display:inline-block;width:16px;height:16px;flex-shrink:0;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;image-rendering:pixelated }
.as .chip { display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--brand);color:var(--brand);background:transparent;font:400 12px/1 var(--font-mono);cursor:pointer;transition:background 60ms steps(1),color 60ms steps(1) }
.as .chip:hover { background:var(--brand);color:var(--bg-base) }
.as .chip.g { border-color:var(--success);color:var(--success) }
.as .chip.g:hover { background:var(--success);color:var(--bg-base) }
.as .chips { display:flex;gap:6px;flex-wrap:wrap }
.as .chip { height:28px;padding:0 10px;font-size:11px }
.as .chip.on { background:var(--brand);color:var(--bg-base);font-weight:700 }
.as .chip.g.on { background:var(--success);color:var(--bg-base) }
.as .gal { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.as .th { display:flex;flex-direction:column;gap:6px;background:none;border:none;padding:0;cursor:pointer;text-align:left;font:400 10px/1.3 var(--font-mono);color:var(--fg-muted) }
.as .th canvas { width:100%;aspect-ratio:1;display:block;outline:1px solid transparent;outline-offset:2px }
.as .th:hover canvas { outline-color:var(--divider) }
.as .th.on canvas { outline:2px solid var(--brand) }
.as .sizes { display:flex;gap:6px;flex-wrap:wrap }
.as .preview { position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;background:var(--bg-terminal);border:1px dashed var(--brand);padding:28px }
.as .preview canvas { display:block;max-width:100% }
.as .meta { font:400 12px/1 var(--font-mono);color:var(--fg-muted);display:flex;gap:8px;flex-wrap:wrap }
.as .meta b { color:var(--fg-secondary);font-weight:400 }
.as .exb { display:flex;gap:8px;flex-wrap:wrap;align-items:center }
.as .btn { height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--font-mono);letter-spacing:.8px;border:1px solid var(--brand);color:var(--brand);background:transparent;cursor:pointer;border-radius:2px;transition:background 60ms steps(1),color 60ms steps(1) }
.as .btn:hover { background:var(--brand);color:var(--bg-base) }
.as .btn.p { background:var(--brand);color:var(--bg-base) }
.as .btn.p:hover { background:var(--brand-tint) }
.as .btn.g { border-color:var(--success);color:var(--success) }
.as .btn.g:hover { background:var(--success);color:var(--bg-base) }
.as .btn.sm { height:28px;padding:0 10px;font-size:10px }
.as .seg { display:flex;border:1px solid var(--divider-dim) }
.as .seg button { height:36px;padding:0 10px;background:none;border:none;color:var(--fg-muted);font:400 11px/1 var(--font-mono);cursor:pointer }
.as .seg button.on { background:var(--fg-secondary);color:var(--bg-base);font-weight:700 }
.as .fl { display:flex;justify-content:space-between;gap:8px;font:400 10px/1 var(--font-mono);color:var(--fg-muted);letter-spacing:1px;text-transform:uppercase }
.as .fl small { letter-spacing:0;text-transform:none;font-size:10px }
.as .fl small.over { color:var(--hint) }
.as .fld { display:flex;flex-direction:column;gap:8px }
.as .pres { display:flex;flex-direction:column;gap:6px }
.as .as-pre { display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border:1px dashed var(--divider-dim);background:none;text-align:left;cursor:pointer;font:400 12px/1.4 var(--font-mono);color:var(--fg-secondary) }
.as .as-pre:hover { border-color:var(--divider) }
.as .as-pre .r { width:12px;height:12px;border:1px solid var(--divider);margin-top:2px }
.as .as-pre.on { border:1px solid var(--brand);color:var(--fg-primary) }
.as .as-pre em { font-style:normal;color:var(--brand) }
.as textarea.in, .as input.in { width:100%;background:var(--bg-base);border:1px solid var(--divider-dim);color:var(--fg-primary);font:400 13px/1.45 var(--font-mono);padding:9px 10px;border-radius:0;resize:none;outline:none }
.as textarea.in:focus, .as input.in:focus { border-color:var(--brand) }
.as .hint { font:400 11px/1.4 var(--font-mono);color:var(--fg-subdued) }
.as .hint b { color:var(--brand);font-weight:400 }
.as .tg { display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 12px/1.3 var(--font-mono);color:var(--fg-secondary) }
.as .sw { width:32px;height:16px;border:1px solid var(--divider);position:relative;background:none;cursor:pointer;flex:none;padding:0 }
.as .sw::after { content:"";position:absolute;top:3px;left:3px;width:8px;height:8px;background:var(--divider) }
.as .sw[aria-pressed="true"] { border-color:var(--success) }
.as .up { display:flex;gap:10px;align-items:center }
.as .up .av { width:44px;height:44px;border:1px dashed var(--divider);background:var(--bg-base) center/cover no-repeat;flex:none }
.as .up label { cursor:pointer }
.as .up input { display:none }
.as .tp ul { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font:400 12px/1.45 var(--font-mono);color:var(--fg-secondary) }
.as .tp li::before { content:"> ";color:var(--success) }
.as .tp li.x::before { content:"× ";color:var(--danger) }
.as .tp .why { font:400 12px/1.5 var(--font-mono);color:var(--fg-primary);text-wrap:pretty }
.as .sz { display:flex;flex-direction:column;gap:8px;background:none;border:none;padding:0;cursor:pointer;text-align:left;font:400 11px/1.2 var(--font-mono);color:var(--fg-muted) }
.as .sz canvas { display:block;outline:1px solid transparent;outline-offset:3px }
.as .sz:hover canvas { outline-color:var(--divider) }
.as .sz.on canvas { outline:2px solid var(--brand) }
.as .toast { position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--success);color:var(--bg-base);font:700 12px/1 var(--font-mono);padding:10px 14px;display:none;z-index:50 }
.as .toast.on { display:block }
.as .studio2 { display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px;align-items:start }
.as .left { position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;min-width:0 }
.as .left .preview { min-height:520px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:24px }
.as .pvtop { display:flex;flex-direction:column;gap:12px;padding-bottom:20px;border-bottom:1px dashed var(--divider-dim) }
.as .pvc { flex:1;display:flex;align-items:center;justify-content:center }
.as .bar { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center }
.as .allsz { display:none;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:16px;border:1px dashed var(--divider-dim) }
.as .allsz.on { display:flex }
.as .allsz .sz canvas { outline-offset:2px }
.as .acc { display:flex;flex-direction:column;border:1px solid var(--brand-stroke);background:var(--bg-elevated) }
.as .ai+.ai { border-top:1px dashed var(--divider-dim) }
.as .ah { width:100%;display:grid;grid-template-columns:22px auto minmax(0,1fr) 14px;gap:12px;align-items:center;padding:16px 18px;background:none;border:none;cursor:pointer;text-align:left;font:400 12px/1 var(--font-mono);color:var(--fg-muted) }
.as .ah .n { font-weight:700;color:var(--brand) }
.as .ah .t { font:700 13px/1 var(--font-mono);letter-spacing:.6px;color:var(--fg-primary);text-transform:uppercase }
.as .ah .s { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;color:var(--fg-secondary) }
.as .ah .ar { width:12px;height:12px;background:var(--fg-muted);-webkit-mask:url('/assets/icons/chevron-down.svg') center/contain no-repeat;mask:url('/assets/icons/chevron-down.svg') center/contain no-repeat }
.as .ah:hover .t { color:var(--brand) }
.as .ai.open .ah { background:var(--bg-terminal) }
.as .ai.open .ah .ar { transform:rotate(180deg);background:var(--brand) }
.as .ai.open .ah .s { visibility:hidden }
.as .ab2 { display:none;padding:4px 18px 20px;flex-direction:column;gap:16px }
.as .ai.open .ab2 { display:flex }
.as .ab2 .gal { grid-template-columns:repeat(3,minmax(0,1fr)) }
.as .next { align-self:flex-end }
.as .mz { display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border:1px dashed var(--divider-dim);font:400 11px/1.5 var(--font-mono);color:var(--fg-muted);text-wrap:pretty }
.as .mz img { width:48px;height:48px;object-fit:cover;image-rendering:pixelated;display:block }
.as .mz b { color:var(--hint);font-weight:700 }
.as .btn.locked, .as .btn.locked:hover { opacity:1;cursor:not-allowed;background:transparent!important;border-color:var(--divider)!important;color:var(--fg-subdued)!important }
.as .lock { font:400 12px/1.5 var(--font-mono);color:var(--hint) }
.as .lock button { background:none;border:none;padding:0;font:inherit;color:var(--brand);text-decoration:underline;cursor:pointer }
.as .req { color:var(--brand);font-weight:700 }
.as input.in.err { border-color:var(--hint) }
.as #ctaIn[hidden], .as #ctaChips[hidden], .as #promoPre[hidden] { display:none }
.as #shotFld[hidden], .as #lockNote[hidden] { display:none }
.as .btn[data-tip] { position:relative }
.as .btn[data-tip]:hover::after { content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:30;white-space:nowrap;background:var(--bg-base);color:var(--hint);border:1px solid var(--hint);font:400 11px/1 var(--font-mono);letter-spacing:0;text-transform:none;padding:8px 10px;pointer-events:none }
.as .btn.locked:hover { background:transparent;color:var(--brand) }
.as .btn.p.locked:hover { background:var(--brand);color:var(--bg-base) }
.as .btn.g.locked:hover { background:transparent;color:var(--success) }

/* Previously inline styles in the export */
.as .ico--sm { width: 12px; height: 12px; }
.as .ico--dl { --i: url('/assets/icons/download.svg'); }
.as .ico--cp { --i: url('/assets/icons/copy.svg'); }
.as .fl--grow { flex: 1; }
.as .tg--name { gap: 10px; }
.as .up .av--shot { background-size: contain; background-color: var(--bg-base); }
.as .mz-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.as .tp-list { display: flex; flex-direction: column; gap: 10px; }
.as .as-reset { padding: 0; border: none; background: none; cursor: pointer; font: 400 10px/1 var(--font-mono); color: var(--brand); }
.as .cp-post { align-self: flex-start; }
.as [hidden] { display: none !important; }
@media (max-width:1000px) {
  .as .studio2 { grid-template-columns:minmax(0,1fr) }
  .as .left { position:static }
  .as .left .preview { min-height:0 }
}