/* ============================================================================
   Broadcast OS · Creator module — UI enhancer styles (creator-ui.css)
   Companion to creator-ui.js. The enhancer removes the sidebar/quick-broadcast
   panel and rebuilds the Creator Studio as a header + a grid of control cards,
   each opening its real form inside a modal. These styles match the existing
   creator page, which is rendered with the shared shell (modules/core/shell.css)
   — so they consume the shell design tokens (--panel/--line/--hot/--violet/...)
   rather than introducing a separate aesthetic. Scoped to the creator page.
   ============================================================================ */

/* Single-column layout once the enhancer removes the aside */
body[data-page="creator"] .layout.solo{ grid-template-columns:1fr; }

/* ── Studio header ───────────────────────────────────────────────────────── */
body[data-page="creator"] .studio-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin:4px 0 22px;
}
body[data-page="creator"] .studio-head h1{
  font-size:clamp(28px,4vw,40px); line-height:1.02; margin:0 0 6px;
}
body[data-page="creator"] .studio-head p{
  margin:0; color:var(--muted); font-size:14px; max-width:560px;
}

/* ── Control card grid ───────────────────────────────────────────────────── */
body[data-page="creator"] .control-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:16px; margin-bottom:22px;
}
body[data-page="creator"] .control{
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:18px; border-radius:22px;
  background:linear-gradient(180deg,rgba(17,23,39,.86),rgba(11,15,24,.78));
  border:1px solid var(--line); color:var(--text);
  box-shadow:var(--shadow); cursor:pointer;
  transition:.18s transform,.18s border-color,.18s background;
}
body[data-page="creator"] .control:hover{
  transform:translateY(-4px); border-color:rgba(255,255,255,.32);
}
body[data-page="creator"] .control.accent{
  background:linear-gradient(135deg,rgba(255,35,79,.16),rgba(139,92,246,.16));
  border-color:rgba(139,92,246,.4);
}
body[data-page="creator"] .control-ico{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:var(--violet);
}
body[data-page="creator"] .control.accent .control-ico{
  color:#fff; background:linear-gradient(135deg,var(--hot),var(--violet)); border-color:transparent;
}
body[data-page="creator"] .control-ico svg{
  width:24px; height:24px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
body[data-page="creator"] .control-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
body[data-page="creator"] .control-tx strong{ font-size:16px; }
body[data-page="creator"] .control-tx span{ color:var(--muted); font-size:12.5px; line-height:1.35; }
body[data-page="creator"] .control-go{ flex:0 0 auto; color:var(--muted); transition:.18s transform,.18s color; }
body[data-page="creator"] .control:hover .control-go{ transform:translateX(3px); color:var(--text); }
body[data-page="creator"] .control-go svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Modal overlay (forms moved here) ────────────────────────────────────── */
.cr-modals{ position:fixed; inset:0; z-index:1200; pointer-events:none; }
.cr-overlay{
  position:fixed; inset:0; display:none; align-items:flex-start; justify-content:center;
  padding:6vh 16px; overflow:auto;
  background:rgba(2,4,10,.66); backdrop-filter:blur(8px);
}
.cr-overlay.open{ display:flex; pointer-events:auto; animation:crFade .16s ease; }
@keyframes crFade{ from{opacity:0} to{opacity:1} }
.cr-modal{
  position:relative; width:min(640px,100%);
  background:linear-gradient(180deg,rgba(17,23,39,.96),rgba(11,15,24,.94));
  border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); padding:26px 24px 22px;
  animation:crRise .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes crRise{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.cr-modal-body{ display:block; }
.cr-modal-body h2{ margin:0 0 12px; font-size:22px; padding-right:34px; }
.cr-modal .panel{ background:none; border:0; box-shadow:none; padding:0; margin:0; border-radius:0; }
.cr-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; line-height:1;
  background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--text);
  transition:.15s background,.15s transform;
}
.cr-close:hover{ background:rgba(255,35,79,.2); transform:scale(1.05); }
body.cr-noscroll{ overflow:hidden; }

@media(max-width:560px){
  .cr-overlay{ padding:0; }
  .cr-modal{ min-height:100%; border-radius:0; width:100%; }
}