/* Growth Tools → Clipping Studio: the streamer's admin view. Uses the
   dashboard's own tokens (--accent, --card, --border, --text-dim) so it belongs
   to the dashboard rather than looking like a page bolted onto it. */

.cs-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center; position:relative; overflow:hidden; }
/* A faint wash behind the hero: enough to make the section feel like a front
   door, not so much that it fights the cards below. */
.cs-hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 88% 0%, rgba(var(--accent-rgb,0,229,255),.10), transparent 60%); }
.cs-hero > * { position:relative; z-index:1; }
.cs-badge { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1px solid var(--border); color:var(--text-dim); }
.cs-badge.on { color:var(--green,#00ff88); border-color:rgba(0,255,136,.45); background:rgba(0,255,136,.08); }
.cs-badge.off { color:var(--text-dim); }
.cs-badge i { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }
.cs-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.cs-actions .btn { text-decoration:none; }
.cs-url { margin-top:10px; font-size:12px; color:var(--text-dim); word-break:break-all; }
.cs-hero-stats { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; max-width:420px; }
.cs-stat { min-width:96px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card,rgba(255,255,255,.02)); text-align:center; }
.cs-stat b { display:block; font-size:22px; line-height:1.2; color:var(--bright); }
.cs-stat span { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.cs-stat.warn b { color:var(--gold,#f5c518); }

.cs-filters { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:14px; }
.cs-clip { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg-card,rgba(255,255,255,.02)); display:flex; flex-direction:column; }
.cs-clip .shot { position:relative; aspect-ratio:16/9; background:#05090e center/cover no-repeat; }
.cs-clip .shot img { width:100%; height:100%; object-fit:cover; display:block; }
.cs-clip .shot .len { position:absolute; right:7px; bottom:7px; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:5px; background:rgba(0,0,0,.72); color:#fff; }
.cs-clip .shot .state { position:absolute; left:7px; top:7px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:5px; background:rgba(0,0,0,.72); }
.cs-clip .shot .state.hidden { color:var(--gold,#f5c518); }
.cs-clip .shot .state.live { color:var(--green,#00ff88); }
.cs-clip .shot .state.work { color:var(--text-dim); }
.cs-clip .meta { padding:11px 12px 12px; display:flex; flex-direction:column; gap:3px; flex:1; }
.cs-clip .name { font-weight:700; font-size:13.5px; color:var(--bright); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-clip .by { font-size:11.5px; color:var(--text-dim); }
.cs-clip .row { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.cs-clip .row .btn { text-decoration:none; }
.cs-empty { padding:26px; text-align:center; color:var(--text-dim); border:1px dashed var(--border); border-radius:12px; margin-top:14px; }

.cs-how { padding:0; }
.cs-how > summary { cursor:pointer; padding:16px 18px; font-weight:700; color:var(--bright); list-style:none; }
.cs-how > summary::-webkit-details-marker { display:none; }
.cs-how > summary::before { content:'▸ '; color:var(--accent); }
.cs-how[open] > summary::before { content:'▾ '; }
.cs-how .body { padding:0 18px 18px; color:var(--text-dim); font-size:13.5px; line-height:1.7; }
.cs-how .body h4 { color:var(--bright); margin:16px 0 6px; font-size:13px; }
.cs-how .body ol { margin:0; padding-left:18px; }
.cs-how .body li { margin:9px 0; }

@media (max-width: 900px) {
  .cs-hero { grid-template-columns:1fr; }
  .cs-hero-stats { justify-content:flex-start; max-width:none; }
}

/* Studio colour preview. One hue drives the studio's whole palette, so the
   settings panel shows the result rather than asking an admin to save and go
   look. The preview is always dark because the studio itself is. */
.cs-palette { margin-top:14px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cs-palette-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--border); }
.cs-palette-head > span { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.cs-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.cs-swatches button { width:20px; height:20px; padding:0; border-radius:6px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); }
.cs-swatches button:hover { transform:scale(1.12); }
.cs-swatches button:focus-visible { outline:2px solid var(--bright); outline-offset:2px; }

.cs-preview { display:grid; grid-template-columns:132px minmax(0,1fr); background:var(--cs-bg,#0e0b13); }
.cs-preview-side { padding:13px 12px; background:var(--cs-panel,#17121f); border-right:1px solid var(--cs-border,#302439); }
.cs-preview-side b { display:block; font-size:13px; color:var(--cs-text,#f8f5fc); letter-spacing:-.01em; }
.cs-preview-side small { display:block; font-size:8px; letter-spacing:.14em; color:var(--cs-muted,#ad9fb9); margin-top:3px; }
.cs-preview-side i { display:block; font-style:normal; font-size:11px; color:var(--cs-muted,#ad9fb9);
  padding:5px 8px; border-radius:6px; margin-top:4px; }
.cs-preview-side i.on { background:var(--cs-border,#302439); color:var(--cs-text,#f8f5fc); }
.cs-preview-main { padding:14px 14px 15px; display:grid; gap:10px; align-content:start; }
.cs-preview-eyebrow { font-size:9px; letter-spacing:.16em; color:var(--cs-accent,#eb85d3); }
.cs-preview-main h4 { margin:2px 0 0; font-size:15px; color:var(--cs-text,#f8f5fc); font-weight:600; }
.cs-preview-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cs-preview-tiles > div { padding:8px 10px; border:1px solid var(--cs-border,#302439); border-radius:8px;
  background:var(--cs-panel,#17121f); }
.cs-preview-tiles span { display:block; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cs-muted,#ad9fb9); }
.cs-preview-tiles b { font-size:16px; color:var(--cs-text,#f8f5fc); font-variant-numeric:tabular-nums; }
.cs-preview-tiles b.gold { color:var(--cs-gold,#e7c583); }
.cs-preview-clip { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
  border:1px solid var(--cs-border,#302439); background:var(--cs-panel,#17121f); }
.cs-preview-clip i { width:22px; height:22px; border-radius:6px; background:var(--cs-highlight,#b986fa); flex:none; }
.cs-preview-clip p { margin:0; font-size:11.5px; color:var(--cs-text,#f8f5fc); }
.cs-preview-clip small { display:block; font-size:10px; color:var(--cs-muted,#ad9fb9); }
.cs-preview-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cs-preview-row em { font-style:normal; font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:7px;
  background:var(--cs-accent,#eb85d3); color:var(--cs-bg,#0e0b13); }
.cs-preview-row span { font-size:10.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--cs-muted,#ad9fb9); }
.cs-palette-note { padding:9px 12px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-dim); }
@media (max-width:640px) { .cs-preview { grid-template-columns:1fr; } .cs-preview-side { display:none; } }