/* Composer — Metricool-style multi-platform publishing composer */

.composer {
  margin-top: 28px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
}

.composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.composer-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240,240,255,0.55);
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

@media (max-width: 1200px) {
  .composer-grid { grid-template-columns: 1fr; }
}

.composer-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
  scrollbar-width: thin;
}

.composer-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(240,240,255,0.65);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
  flex-shrink: 0;
}
.composer-tab:hover { background: rgba(255,255,255,0.06); }
.composer-tab.active {
  color: #fff;
  background: rgba(99,102,241,0.12);
  border-color: var(--tab-accent, rgba(99,102,241,0.55));
  box-shadow: 0 0 0 1px var(--tab-accent, rgba(99,102,241,0.55)) inset;
}
.composer-tab .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.composer-tab .dot.connected { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.composer-tab input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--tab-accent, #6366f1);
  cursor: pointer;
}

.composer-editor-wrap { position: relative; }

.composer-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 6px;
}
.composer-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(240,240,255,0.7);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.composer-toolbar button:hover { background: rgba(255,255,255,0.08); color: #fff; }

.composer-textarea {
  width: 100%;
  min-height: 200px;
  padding: 14px 14px 32px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,10,20,0.45);
  color: #f0f0ff;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.composer-textarea:focus { outline: none; border-color: rgba(99,102,241,0.5); }

.composer-char-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(0,0,0,0.5);
  font-size: 0.7rem;
  font-weight: 700;
  color: #10b981;
  pointer-events: none;
}
.composer-char-counter.warn { color: #f59e0b; }
.composer-char-counter.err  { color: #ef4444; }

.composer-autosave {
  text-align: right;
  font-size: 0.68rem;
  color: rgba(240,240,255,0.4);
  margin-top: 4px;
  min-height: 14px;
}

.composer-media {
  margin-top: 14px;
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  text-align: center;
  color: rgba(240,240,255,0.4);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all .18s;
}
.composer-media:hover { border-color: rgba(99,102,241,0.35); color: rgba(240,240,255,0.7); }
.composer-media-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.composer-media-thumbs img {
  width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Preview panel */
.composer-preview {
  position: sticky;
  top: 20px;
  align-self: start;
}
.composer-preview-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: rgba(240,240,255,0.4);
  margin-bottom: 8px;
}
.composer-preview-card {
  background: #1c1e21;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px;
  color: #e4e6eb;
  font-size: 0.875rem;
  line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.composer-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.composer-preview-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#a855f7);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.9rem;
  flex-shrink: 0;
}
.composer-preview-name { font-weight: 700; font-size: 0.8125rem; }
.composer-preview-meta { font-size: 0.7rem; color: rgba(228,230,235,0.55); }
.composer-preview-body { white-space: pre-wrap; word-wrap: break-word; }
.composer-preview-more {
  display: inline-block;
  color: rgba(228,230,235,0.55);
  cursor: pointer;
  margin-left: 4px;
}

/* Sticky action bar */
.composer-action-bar {
  position: sticky;
  bottom: 0;
  margin-top: 18px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(12,12,24,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 3;
}
.composer-action-bar .left { flex: 1 1 220px; min-width: 180px; }
.composer-action-bar .right { display: flex; gap: 8px; flex-wrap: wrap; }
.composer-action-bar input[type="datetime-local"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #f0f0ff;
  font-size: 0.8125rem;
  color-scheme: dark;
}
.composer-action-bar button {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(240,240,255,0.75);
  transition: all .18s;
}
.composer-action-bar button:hover { background: rgba(255,255,255,0.08); color: #fff; }
.composer-action-bar button.primary {
  background: rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.4);
  color: #a5b4fc;
}
.composer-action-bar button.primary:hover { background: rgba(99,102,241,0.28); color: #fff; }
.composer-action-bar button.gradient {
  background: linear-gradient(135deg,#6366f1,#a855f7);
  border: none;
  color: #fff;
}
.composer-action-bar button.gradient:hover { filter: brightness(1.1); }
.composer-action-bar button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ───── Per-platform live previews ───── */
.cmp-prev-placeholder {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:160px;
  color:rgba(255,255,255,0.35); font-size:13px;
  background:rgba(255,255,255,0.03);
}
.cmp-hashtag { color:#3b82f6; }

/* Facebook media */
.cmp-prev-media { margin-top:8px; border-radius:8px; overflow:hidden; }
.cmp-prev-media img { width:100%; display:block; max-height:280px; object-fit:cover; }

/* Instagram */
.cmp-prev-ig {
  width:100%; max-width:400px; margin:0 auto;
  background:#000; color:#fff;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; overflow:hidden;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.cmp-prev-ig-head {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
}
.cmp-prev-ig-avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:13px;
}
.cmp-prev-ig-user { font-weight:600; font-size:14px; flex:1; }
.cmp-prev-ig-dots { opacity:0.7; }
.cmp-prev-ig-media {
  width:100%;
  background:#111; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cmp-prev-ig-media img,
.cmp-prev-ig-media video { width:100%; height:auto; max-height:70vh; object-fit:contain; display:block; }
.cmp-prev-ig-actions {
  display:flex; gap:14px; padding:10px 12px 6px; font-size:20px;
}
.cmp-prev-ig-caption {
  padding:0 12px 12px; font-size:13px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* LinkedIn */
.cmp-prev-li {
  width:100%; max-width:540px;
  background:#fff; color:#000;
  border:1px solid #d0d7de; border-radius:8px;
  font-family:-apple-system,"Segoe UI",Arial,sans-serif;
  overflow:hidden;
}
.cmp-prev-li-head { display:flex; gap:10px; padding:12px 14px 6px; align-items:flex-start; }
.cmp-prev-li-avatar {
  width:44px; height:44px; border-radius:50%;
  background:#0a66c2; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px;
}
.cmp-prev-li-name { font-weight:600; font-size:14px; color:#000; }
.cmp-prev-li-sub { font-size:12px; color:#65676b; }
.cmp-prev-li-text {
  padding:4px 14px 10px; font-size:14px; line-height:1.5; color:#000;
  white-space:pre-wrap;
}
.cmp-prev-li-more { color:#65676b; font-weight:500; cursor:pointer; }
.cmp-prev-li-media { width:100%; background:#000; }
.cmp-prev-li-media img,
.cmp-prev-li-media video { width:100%; height:auto; max-height:70vh; object-fit:contain; display:block; }
.cmp-prev-li-actions {
  display:flex; justify-content:space-around;
  padding:8px; border-top:1px solid #e4e6eb;
  font-size:13px; color:#65676b; font-weight:600;
}

/* TikTok */
.cmp-prev-tt { display:flex; justify-content:center; }
.cmp-prev-tt-frame {
  position:relative; width:240px; height:427px;
  background:#000; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  color:#fff; font-family:-apple-system,"Segoe UI",sans-serif;
}
.cmp-prev-tt-media {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#222,#000);
}
.cmp-prev-tt-media img { width:100%; height:100%; object-fit:cover; }
.cmp-prev-tt-side {
  position:absolute; right:8px; bottom:80px;
  display:flex; flex-direction:column; gap:16px; align-items:center;
  z-index:2;
}
.cmp-prev-tt-ava {
  position:relative; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#25f4ee,#fe2c55);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; border:2px solid #fff;
}
.cmp-prev-tt-plus {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:#fe2c55; font-size:11px; line-height:16px;
  text-align:center;
}
.cmp-prev-tt-icon {
  display:flex; flex-direction:column; align-items:center;
  font-size:22px; text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.cmp-prev-tt-icon small { font-size:10px; margin-top:2px; }
.cmp-prev-tt-bottom {
  position:absolute; left:10px; right:60px; bottom:12px; z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.cmp-prev-tt-user { font-weight:700; font-size:14px; }
.cmp-prev-tt-caption {
  font-size:12px; line-height:1.35; margin:4px 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.cmp-prev-tt-music { font-size:11px; opacity:0.9; }

/* YouTube Shorts */
.cmp-prev-yt { display:flex; justify-content:center; }
.cmp-prev-yt-frame {
  position:relative; width:240px; height:427px;
  background:#000; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  color:#fff; font-family:Roboto,-apple-system,sans-serif;
}
.cmp-prev-yt-media {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#1a0000,#000);
}
.cmp-prev-yt-media img { width:100%; height:100%; object-fit:cover; }
.cmp-prev-yt-side {
  position:absolute; right:8px; bottom:100px;
  display:flex; flex-direction:column; gap:16px; align-items:center; z-index:2;
}
.cmp-prev-yt-icon {
  display:flex; flex-direction:column; align-items:center;
  font-size:22px; text-shadow:0 1px 2px rgba(0,0,0,0.7);
}
.cmp-prev-yt-icon small { font-size:10px; margin-top:2px; }
.cmp-prev-yt-bottom {
  position:absolute; left:10px; right:60px; bottom:12px; z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.cmp-prev-yt-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cmp-prev-yt-ava {
  width:28px; height:28px; border-radius:50%;
  background:#ff0000; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.cmp-prev-yt-user { font-size:13px; font-weight:600; flex:1; }
.cmp-prev-yt-sub {
  background:#ff0000; color:#fff; border:none;
  padding:6px 12px; border-radius:16px;
  font-weight:700; font-size:12px; cursor:pointer;
}
.cmp-prev-yt-title {
  font-size:15px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ============================================================
   Studio Creare — dedicated full-page composer
   ============================================================ */

.studio-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 16px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .studio-layout { grid-template-columns: 1fr; }
}

.studio-form,
.studio-preview {
  padding: 20px;
  border-radius: 14px;
}
.studio-preview {
  position: sticky;
  top: 80px;
}
@media (max-width: 1024px) {
  .studio-preview { position: static; }
}

.studio-section-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240,240,255,0.55);
  margin-bottom: 12px;
}

/* Studio header row — title + status badge + quick schedule */
.studio-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.studio-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Status badges */
.studio-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.studio-status-draft {
  background: rgba(100,116,139,0.18);
  border: 1px solid rgba(100,116,139,0.35);
  color: #94a3b8;
}
.studio-status-scheduled {
  background: rgba(59,130,246,0.14);
  border: 1px solid rgba(59,130,246,0.35);
  color: #60a5fa;
}
.studio-status-published {
  background: rgba(16,185,129,0.14);
  border: 1px solid rgba(16,185,129,0.35);
  color: #34d399;
}

/* Quick-schedule calendar icon button */
.studio-quick-schedule-btn {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: rgba(240,240,255,0.55);
  font-size: 0.9rem;
  padding: 3px 8px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
.studio-quick-schedule-btn:hover {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.3);
  color: #93c5fd;
}
.studio-quick-date-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Publish modal button in action bar */
.studio-publish-modal-btn {
  background: rgba(16,185,129,0.14) !important;
  border: 1px solid rgba(16,185,129,0.35) !important;
  color: #34d399 !important;
}
.studio-publish-modal-btn:hover {
  background: rgba(16,185,129,0.22) !important;
  border-color: rgba(16,185,129,0.55) !important;
}

.studio-platform-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.studio-platform-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(240,240,255,0.65);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.studio-platform-tab:hover { background: rgba(255,255,255,0.06); }
.studio-platform-tab.active {
  border-color: var(--tab-accent, #6366f1);
  color: #fff;
  background: color-mix(in srgb, var(--tab-accent, #6366f1) 18%, transparent);
}
.studio-platform-tab .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.studio-platform-tab .dot.connected { background: #10b981; }

.studio-type-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.studio-type-pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(240,240,255,0.7);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.studio-type-pill:hover { background: rgba(255,255,255,0.08); }
.studio-type-pill.active {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.5);
  color: #c7d2fe;
}

.studio-field { margin-bottom: 12px; }
.studio-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240,240,255,0.55);
  margin-bottom: 6px;
}
.studio-label .studio-sub {
  font-size: 0.7rem;
  color: rgba(240,240,255,0.4);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
.studio-label .studio-sub.warn { color: #f59e0b; }
.studio-label .studio-sub.err { color: #ef4444; }

.studio-input,
.studio-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #f0f0ff;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
  transition: all 0.15s;
}
.studio-input:focus,
.studio-textarea:focus {
  border-color: rgba(99,102,241,0.5);
  background: rgba(255,255,255,0.05);
}
.studio-textarea { min-height: 180px; resize: vertical; line-height: 1.55; }

.studio-autosave {
  margin-top: 6px;
  font-size: 0.7rem;
  color: rgba(240,240,255,0.4);
  min-height: 14px;
}

.studio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.studio-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc;
  font-size: 0.75rem;
  font-weight: 600;
}

.studio-media-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  min-height: 110px;
  align-items: center;
  transition: all 0.15s;
  cursor: pointer;
}
.studio-media-zone.dragover {
  border-color: #6366f1;
  background: rgba(99,102,241,0.06);
}
.studio-media-item {
  position: relative;
  width: 90px; height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.studio-media-item video,
.studio-media-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.studio-media-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 11px;
  border: none;
  background: rgba(0,0,0,0.75);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.studio-media-add {
  width: 90px; height: 90px;
  border-radius: 10px;
  border: 1.5px dashed rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  cursor: pointer;
}

.studio-action-bar {
  position: static;
  margin: 20px 0 0;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
/* Action row: calendar left, buttons right */
.studio-action-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.studio-cal-wrap {
  flex: 0 0 auto;
  width: 240px;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 12px;
  padding: 10px;
}
.studio-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.studio-cal-month {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c4b5fd;
}
.studio-cal-nav {
  background: none;
  border: none;
  color: #818cf8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}
.studio-cal-nav:hover { background: rgba(99,102,241,0.15); }
.studio-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.studio-cal-dow {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(240,240,255,0.35);
  padding: 2px 0;
}
.studio-cal-empty { padding: 4px; }
.studio-cal-day {
  background: none;
  border: none;
  color: #d1d5f0;
  font-size: 0.72rem;
  padding: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.6;
}
.studio-cal-day:hover { background: rgba(99,102,241,0.18); }
.studio-cal-day.today { color: #818cf8; font-weight: 700; }
.studio-cal-day.sel {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-weight: 700;
}
.studio-cal-day.past { color: rgba(240,240,255,0.2); }
.studio-cal-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(99,102,241,0.12);
}
.studio-cal-sel {
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 8px;
  color: #c4b5fd;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.studio-cal-sel:focus { outline: none; border-color: rgba(99,102,241,0.5); }

/* Action buttons column */
.studio-action-btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.studio-act-btn {
  padding: 10px 16px !important;
  font-size: 0.82rem !important;
  border-radius: 10px !important;
  width: 100%;
  text-align: center;
}
.studio-act-publish {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none !important;
}
/* Platform tab icon */
.studio-tab-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.studio-tab-ico svg { width: 16px; height: 16px; }

/* Preview stage */
.studio-preview-stage {
  min-height: 400px;
  padding: 10px;
}
.studio-prev-hash { color: #60a5fa; }
.studio-prev-empty {
  width: 100%; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.35);
  font-size: 0.8125rem;
  border-radius: 8px;
}

.studio-prev-fb,
.studio-prev-video-card {
  max-width: 500px;
  margin: 0 auto;
  background: #1c1e21;
  border-radius: 10px;
  overflow: hidden;
  color: #e4e6eb;
  font-size: 0.875rem;
}
.studio-prev-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.studio-prev-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#3b82f6,#a855f7);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.studio-prev-name { font-weight: 700; color: #e4e6eb; }
.studio-prev-sub { font-size: 0.75rem; color: #8a8d91; }
.studio-prev-text {
  padding: 0 14px 12px;
  color: #e4e6eb;
  white-space: pre-wrap;
  line-height: 1.4;
}
.studio-prev-fb-media {
  width: 100%;
  background: #000;
}
.studio-prev-fb-media video,
.studio-prev-fb-media img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; }

.studio-prev-video-title {
  padding: 14px 14px 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.studio-prev-video-media {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.studio-prev-video-media video,
.studio-prev-video-media img { width: 100%; height: 100%; object-fit: cover; }
.studio-prev-video-body { padding: 10px 0; }

/* Vertical 9:16 (reel / short / story) */
.studio-prev-vertical {
  position: relative;
  width: 280px;
  aspect-ratio: 9/16;
  margin: 0 auto;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
.studio-prev-vertical-media {
  position: absolute; inset: 0;
  background: #111;
}
.studio-prev-vertical-media video,
.studio-prev-vertical-media img { width: 100%; height: 100%; object-fit: cover; }
.studio-prev-vertical-side {
  position: absolute;
  right: 10px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.studio-prev-vertical-bottom {
  position: absolute;
  left: 12px;
  right: 60px;
  bottom: 14px;
  color: #fff;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Studio Creare — additions (v=4) */
.studio-mini-btn {
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.35);
  color: #c4b5fd;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
.studio-mini-btn:hover { background: rgba(168,85,247,0.2); }
.studio-mini-btn:disabled { opacity: 0.5; cursor: default; }

.studio-tab-icon { font-size: 0.95rem; line-height: 1; }

/* (legacy sticky action bar override removed — see earlier .studio-action-bar rule) */

.studio-prev-script {
  max-width: 520px;
  margin: 0 auto;
  background: rgba(168,85,247,0.06);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 12px;
  padding: 16px;
  color: #e4e6eb;
}
.studio-prev-script-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 10px;
}
.studio-prev-script-body {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  color: #e4e6eb;
  background: transparent;
}
.studio-prev-script-foot {
  margin-top: 12px;
  font-size: 0.7rem;
  color: rgba(240,240,255,0.4);
  text-align: center;
}

.studio-prev-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
}
.studio-prev-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.studio-prev-dots span.on { background: #60a5fa; }

/* ─── Music picker ─── */
/* ── Music chip (after selection, shown in Studio page) ── */
.studio-music-row { display:flex; gap:6px; align-items:center; }
.studio-music-chip {
  flex:1; display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
}
.studio-music-chip-icon { font-size:14px; flex-shrink:0; }
.studio-music-chip-body { flex:1; min-width:0; }
.studio-music-chip-title { font-weight:500; color:#d1d5db; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-music-chip-sub { font-size:10px; color:#6b7280; }
.studio-music-chip .btn {
  padding:3px 8px !important; font-size:11px !important; border-radius:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
  color:#9ca3af; cursor:pointer; flex-shrink:0;
  width:auto !important; min-width:0;
}
.studio-music-chip .btn:hover { background:rgba(255,255,255,0.10); color:#e5e7eb; }

/* Override global .btn width:100% inside music components */
.studio-music-modal .btn,
.studio-music-row .btn { width:auto !important; }

/* ── Music modal ── */
.studio-music-modal {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.studio-music-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); }
.studio-music-dialog {
  position:relative; width:min(680px, 94vw); max-height:86vh;
  background:#0f1724; border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.studio-music-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.06); }
.studio-music-title { font-size:16px; font-weight:700; color:#fff; }
.studio-music-x { background:transparent; border:none; color:#9ca3af; font-size:22px; cursor:pointer; width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.studio-music-x:hover { background:rgba(255,255,255,0.08); color:#fff; }

/* Tabs */
.studio-music-tabs { display:flex; gap:2px; padding:10px 20px 0; }
.studio-music-tab {
  padding:7px 14px; background:transparent; color:#6b7280;
  border:none; border-bottom:2px solid transparent;
  cursor:pointer; font-weight:600; font-size:12px;
  transition:all .15s;
}
.studio-music-tab:hover { color:#d1d5db; }
.studio-music-tab.active { color:#60a5fa; border-bottom-color:#60a5fa; }

/* Search */
.studio-music-search { display:flex; gap:6px; padding:10px 20px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.06); }
.studio-music-search input[type="text"] {
  flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  color:#fff; padding:8px 12px; border-radius:8px; font-size:12px;
}
.studio-music-search .btn { padding:8px 14px !important; font-size:12px !important; width:auto !important; }
.studio-music-upload { padding:8px 12px; background:rgba(168,85,247,0.10); border:1px solid rgba(168,85,247,0.30); color:#c4b5fd; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; }

/* Track list */
.studio-music-list { flex:1; overflow-y:auto; padding:4px 8px; min-height:200px; max-height:44vh; }
.studio-music-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:8px; margin-bottom:2px;
  transition:background .12s; cursor:default;
}
.studio-music-item:hover { background:rgba(255,255,255,0.03); }
.studio-music-item.selected { background:rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.20); }

/* Play button */
.studio-music-play {
  width:32px; height:32px; border-radius:50%;
  background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.30);
  color:#60a5fa; font-size:12px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .12s;
}
.studio-music-play:hover { background:rgba(59,130,246,0.22); }

/* Track info */
.studio-music-item-body { flex:1; min-width:0; }
.studio-music-item-title { font-weight:500; color:#e5e7eb; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-music-item-sub { font-size:10px; color:#6b7280; margin-top:1px; }
.studio-music-item-dur {
  font-size:11px; color:#9ca3af; background:rgba(255,255,255,0.05);
  padding:2px 8px; border-radius:10px; flex-shrink:0; font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* Select button in track row */
.studio-music-pick {
  padding:4px 10px !important; font-size:11px !important; border-radius:6px;
  background:rgba(59,130,246,0.10); border:1px solid rgba(59,130,246,0.25);
  color:#60a5fa; cursor:pointer; font-weight:600; flex-shrink:0;
  transition:all .12s; width:auto !important;
}
.studio-music-pick:hover { background:rgba(59,130,246,0.20); color:#93c5fd; }

/* Footer */
.studio-music-foot {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.20); flex-wrap:wrap;
}
.studio-music-selected { flex:1; font-size:12px; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:120px; }
.studio-music-foot .btn { padding:7px 14px !important; font-size:12px !important; width:auto !important; }
.studio-music-foot #studio-music-auto { padding:6px 12px !important; font-size:11px !important; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:#9ca3af; width:auto !important; }
.studio-music-foot #studio-music-auto:hover { background:rgba(255,255,255,0.08); color:#e5e7eb; }

/* Volume controls inline */
.studio-music-volume { position:relative; }
.studio-music-volpop {
  position:fixed; z-index:1200;
  background:#1e293b; border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; padding:12px 14px; width:260px;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
}
.studio-music-volrow { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.studio-music-volrow:last-child { margin-bottom:0; }
.studio-music-volrow label { font-size:11px; width:44px; color:#6b7280; flex-shrink:0; }
.studio-music-volrow input[type="range"] { flex:1; }
.studio-music-volrow span { font-size:10px; color:#6b7280; width:34px; text-align:right; flex-shrink:0; }
.studio-music-volpop .studio-music-volrow input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 3px; background: rgba(255,255,255,0.12); border-radius: 2px; outline: none;
}
.studio-music-volpop .studio-music-volrow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #60a5fa; cursor: pointer;
}
.studio-music-volpop .studio-music-volrow input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #60a5fa; border: none; cursor: pointer;
}

/* Datetime input: lighter calendar icon */
#studio-datetime {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #e5e7eb;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color-scheme: dark;
}
#studio-datetime::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: 0.9;
  cursor: pointer;
}

/* Mobile: stack calendar + buttons */
@media (max-width: 600px) {
  .studio-action-row { flex-direction: column; }
  .studio-cal-wrap { width: 100%; }
  .studio-action-btns { flex-direction: row; flex-wrap: wrap; }
  .studio-act-btn { width: auto !important; flex: 1; min-width: 100px; }
}