/* Mass-generation panel — slide-in from the right, matches the studio tokens. */
.ms-trigger svg { display: block; }
.ms-trigger-float {
  position: fixed; right: 16px; bottom: 64px; z-index: 55; width: 40px; height: 40px;
  border-radius: 50%; background: var(--surface-2, rgba(255,255,255,.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,.08)); color: var(--t2, #c9c9d1);
}

.ms-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 94vw;
  z-index: 60; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-deep, var(--bg, #0a0a0c));
  border-left: 1px solid var(--glass-border, rgba(255,255,255,.08));
  box-shadow: var(--shadow-lg, -8px 0 32px rgba(0,0,0,.5));
  transform: translateX(100%); transition: transform var(--dur, .2s) var(--ease, ease);
}
.ms-panel.open { transform: translateX(0); }

.ms-head { padding: 14px; border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.08)); position: relative; }
.ms-title { font-size: 14px; font-weight: 600; color: var(--t1, #f4f4f6); }
.ms-sub { font-size: 11px; color: var(--t3, #828289); margin-top: 3px; padding-right: 20px; }
.ms-close { position: absolute; top: 12px; right: 12px; background: none; border: none;
  color: var(--t3, #828289); cursor: pointer; font-size: 14px; }

.ms-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ms-label { display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--t3, #828289); margin: 12px 0 5px; }
.ms-label:first-child { margin-top: 0; }
.ms-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--t4, #5a5a62); }

.ms-csv, .ms-template {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 8px 10px;
  font: inherit; font-size: 12px; color: var(--t1, #f4f4f6);
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,.08)); border-radius: var(--radius-sm, 8px);
}
.ms-csv { font-family: var(--font-mono, ui-monospace, monospace); }
.ms-load { margin-top: 6px; padding: 5px 12px; font-size: 12px; }
.ms-cols { font-size: 11px; color: var(--t2, #c9c9d1); margin-top: 8px; line-height: 1.8; }
.ms-cols-label { color: var(--t3, #828289); }
.ms-col, .ms-mapping code, .ms-map-label code {
  background: var(--surface-2, rgba(255,255,255,.06)); border-radius: 4px; padding: 1px 5px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--accent);
}
.ms-err { color: var(--err, #f87171); }
.ms-warn { color: var(--warn, #fbbf24); }
.ms-muted { color: var(--t3, #828289); }

.ms-mapping { margin-top: 8px; }
.ms-map-label { font-size: 11px; color: var(--t3, #828289); margin-bottom: 5px; }
.ms-map { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; color: var(--t2, #c9c9d1); }
.ms-map select, .ms-num, .ms-txt {
  background: var(--surface, rgba(255,255,255,.04)); color: var(--t1, #f4f4f6);
  border: 1px solid var(--glass-border, rgba(255,255,255,.08)); border-radius: 6px; padding: 4px 6px; font-size: 12px;
}
.ms-multi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.ms-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2, #c9c9d1); }
.ms-num { width: 56px; }
.ms-txt { width: 130px; } .ms-txt-sm { width: 64px; }
.ms-placements { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.ms-pl { font-size: 12px; color: var(--t2, #c9c9d1); display: inline-flex; align-items: center; gap: 4px; }

.ms-actions { display: flex; gap: 8px; margin: 14px 0 6px; }
.ms-actions button { padding: 7px 16px; }
.ms-result { margin-top: 8px; }
.ms-summary { font-size: 13px; color: var(--t1, #f4f4f6); padding: 8px 10px;
  background: var(--surface, rgba(255,255,255,.04)); border-radius: var(--radius-sm, 8px); }
.ms-preview { list-style: none; margin: 8px 0 0; padding: 0; }
.ms-preview li { font-size: 12px; color: var(--t2, #c9c9d1); padding: 5px 8px; border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.06)); }
.ms-tag { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0 4px; }
@media (max-width: 480px) { .ms-panel { width: 100vw; } }