/* Studio home: steps on the left, sticky live preview + checklist on the right. */

/* Stats become a slim strip */
.kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.kpi-grid .kpi-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 14px;
  gap: 10px;
}
.kpi-grid .kpi-card + .kpi-card { border-left: 1px solid var(--border-subtle); }
.kpi-grid .kpi-icon { width: 30px; height: 30px; border-radius: 8px; }
.kpi-grid .kpi-icon svg { width: 15px; height: 15px; }
.kpi-grid .kpi-label { font-size: 10.5px; }
.kpi-grid .kpi-val { font-size: 17px; }

/* Workspace */
.studio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}
.studio-steps { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.studio-preview {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.preview-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.preview-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

/* Phone mock-up */
.mini-phone {
  margin: 0 auto;
  width: 100%;
  max-width: 215px;
  border-radius: 26px;
  padding: 8px;
  background: linear-gradient(160deg, #262b3a, #10131b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
.mini-phone-media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px 20px 6px 6px;
  overflow: hidden;
  background: radial-gradient(80% 60% at 30% 25%, rgba(236, 72, 153, 0.25), transparent 70%), #0b0e15;
  display: grid;
  place-items: center;
}
.mini-phone-media video,
.mini-phone-media img { width: 100%; height: 100%; object-fit: cover; }
.mini-phone-empty { padding: 16px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.mini-phone-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
}
.mini-post { padding: 10px 6px 6px; }
.mini-post-user { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.mini-avatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.mini-post-caption {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #cbd5e1;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-post-caption.placeholder { color: var(--text-faint); }

/* Checklist */
.checklist-count {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.15);
}
.publish-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.publish-checklist li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.check-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
}
.publish-checklist li.done { color: var(--text-main); }
.publish-checklist li.done .check-dot {
  border: none;
  background: var(--accent-emerald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.check-label { flex: 1; }
.check-fix {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #f472b6;
  cursor: pointer;
}
.publish-checklist li.done .check-fix,
.publish-checklist li.unknown .check-fix,
.publish-checklist li[data-check="media"] .check-fix,
.publish-checklist li[data-check="caption"] .check-fix { display: none; }

.carousel-auto-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
}

/* Narrower screens: preview goes above the steps, side by side with the checklist */
@media (max-width: 1180px) {
  .studio-workspace { grid-template-columns: minmax(0, 1fr); }
  .studio-preview { position: static; order: -1; flex-direction: row; align-items: stretch; }
  .studio-preview .preview-panel { flex: 1; }
  .mini-phone { max-width: 170px; }
  .kpi-grid { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
}
@media (max-width: 640px) {
  /* On phones the steps come first; the preview follows them. */
  .studio-preview { flex-direction: column; order: 0; }
  .mini-phone { max-width: 190px; }
  .kpi-grid { display: flex; overflow-x: auto; }
  .kpi-grid .kpi-card { flex: 0 0 150px; }
}

/* ---------------- Media picker (tiles) ---------------- */
.media-picker {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
  margin-bottom: 16px;
}
.media-group { min-width: 0; }
.media-group-label {
  margin: 0 0 8px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.media-group.ai .media-group-label { color: #c4b5fd; }
.media-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }

/* Tiles reuse .media-tab-btn (so the existing switching logic applies) with a card look. */
.media-tab-btn.media-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 12px 12px 10px;
  text-align: left;
  white-space: normal;
  color: var(--text-muted);
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.media-tab-btn.media-tile:hover { border-color: rgba(99, 102, 241, 0.45); transform: translateY(-1px); }
.media-tab-btn.media-tile:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.media-tab-btn.media-tile.active {
  color: var(--text-main);
  background: linear-gradient(160deg, rgba(99, 102, 241, 0.16), rgba(236, 72, 153, 0.08)), var(--bg-card-elevated);
  border-color: transparent;
  box-shadow: 0 0 0 1.5px #818cf8, 0 8px 22px -12px rgba(99, 102, 241, 0.8);
}
.media-group.ai .media-tab-btn.media-tile { background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), transparent 60%), var(--bg-card-elevated); }
.media-group.ai .media-tab-btn.media-tile.active { box-shadow: 0 0 0 1.5px #c084fc, 0 8px 22px -12px rgba(236, 72, 153, 0.8); }

.tile-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 9px;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.14);
}
.tile-icon svg { width: 16px; height: 16px; }
.media-group.ai .tile-icon { color: #f0abfc; background: rgba(217, 70, 239, 0.14); }
.media-tile.active .tile-icon { color: #fff; background: linear-gradient(135deg, #6366f1, #ec4899); }

.tile-title { font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.25; }
.tile-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.tile-format, .tile-quota {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.tile-format.reel { color: #f9a8d4; background: rgba(236, 72, 153, 0.12); }
.tile-format.carousel { color: #93c5fd; background: rgba(59, 130, 246, 0.12); }
.tile-quota { color: #6ee7b7; background: rgba(16, 185, 129, 0.12); }
.tile-quota:empty { display: none; }
.tile-quota.locked { color: #fcd34d; background: rgba(245, 158, 11, 0.12); }

@media (max-width: 900px) {
  .media-picker { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .media-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-tiles .media-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile-desc { display: none; }
}

/* ---------------- Carousel frame (crop) ---------------- */
.frame-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
}
.frame-bar-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.frame-options { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #0d1017; border: 1px solid var(--border-subtle); }
.frame-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}
.frame-btn:hover { color: var(--text-main); }
.frame-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(236, 72, 153, 0.4)); }
.frame-shape { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; }
.frame-shape.square { width: 11px; height: 11px; }
.frame-shape.portrait { width: 10px; height: 12.5px; }
.frame-shape.landscape { width: 15px; height: 8.5px; }
.frame-shape.original { width: 12px; height: 10px; border-style: dashed; }
.frame-hint { font-size: 11.5px; color: var(--text-faint); }

.carousel-thumb-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0b0e15;
}
.carousel-item-card .carousel-thumb-frame img { height: auto; }
.carousel-adjust-btn {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.carousel-item-card:hover .carousel-adjust-btn,
.carousel-adjust-btn:focus-visible { opacity: 1; }
@media (hover: none) { .carousel-adjust-btn { opacity: 1; } }
.carousel-ratio-warning {
  padding: 4px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.15);
}
.carousel-ratio-warning[hidden] { display: none; }

/* Live preview: carousel cover shown in its frame */
.mini-carousel-frame { position: relative; width: 100%; overflow: hidden; }

/* Crop editor */
.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 7, 13, 0.85);
  backdrop-filter: blur(8px);
}
.crop-modal[hidden] { display: none; }
.crop-dialog {
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 16px;
  border-radius: 18px;
  background: #0e121c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8);
}
.crop-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.crop-dialog-title { font-weight: 700; font-size: 15px; }
.crop-close { border: 0; background: none; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.crop-stage { display: grid; place-items: center; padding: 12px; border-radius: 12px; background: repeating-conic-gradient(#141824 0% 25%, #10131b 0% 50%) 50% / 16px 16px; }
.crop-frame {
  position: relative;
  width: min(100%, 320px);
  max-height: 60dvh;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 0 0 2px #fff, 0 10px 30px rgba(0, 0, 0, 0.6);
  user-select: none;
}
.crop-frame:active { cursor: grabbing; }
.crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
  background-position: -1px -1px;
}
.crop-controls { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 13px; }
.crop-controls input[type="range"] { flex: 1; accent-color: #8b5cf6; }
.crop-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crop-tip { font-size: 12px; color: var(--text-muted); }

.media-tab-btn.media-tile[hidden] { display: none; }

/* Instagram / Facebook preview switch */
.preview-switch { display: flex; gap: 4px; padding: 3px; margin-bottom: 12px; border-radius: 10px; background: #090c14; border: 1px solid var(--border-subtle); }
.preview-switch-btn { flex: 1; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.preview-switch-btn:hover { color: var(--text-main); }
.preview-switch-btn.active { background: rgba(99, 102, 241, 0.2); color: #c7d2fe; }
#openIgPreviewBtn[hidden] { display: none; }

/* Facebook preview, in Facebook's own dark theme */
.fb-preview { --fb-surface: #242526; --fb-text: #e4e6eb; --fb-muted: #b0b3b8; --fb-line: #3e4042; --fb-blue: #2d88ff; margin: 0 auto; max-width: 260px; }
.fb-preview[hidden] { display: none; }
.fbp-empty { padding: 36px 16px; border-radius: 12px; background: var(--fb-surface); color: var(--fb-muted); font-size: 12px; text-align: center; line-height: 1.5; }
.fbp-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: #1877f2; color: #fff; font-size: 11px; font-weight: 700; }
.fbp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fbp-caption.placeholder { opacity: 0.6; }

/* Page Reel */
.fbp-reel { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; }
.fbp-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbp-reel-top { position: absolute; top: 10px; left: 12px; color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.fbp-reel-side { position: absolute; right: 8px; bottom: 70px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.fbp-reel-icon { display: grid; place-items: center; width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.fbp-reel-icon svg { width: 20px; height: 20px; }
.fbp-reel-bottom { position: absolute; left: 0; right: 36px; bottom: 0; padding: 30px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; }
.fbp-reel-who { display: flex; align-items: center; gap: 7px; font-size: 12px; min-width: 0; }
.fbp-reel-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbp-follow { flex: none; padding: 1px 7px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 5px; font-size: 10.5px; font-weight: 600; }
.fbp-reel-caption { margin-top: 6px; font-size: 11px; line-height: 1.4; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Page feed post */
.fbp-post { border-radius: 12px; overflow: hidden; background: var(--fb-surface); color: var(--fb-text); font-size: 12px; }
.fbp-post-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; }
.fbp-post-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fbp-post-meta b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbp-time { color: var(--fb-muted); font-size: 10.5px; }
.fbp-more { color: var(--fb-muted); font-weight: 700; }
.fbp-post-text { margin: 0 10px 8px; line-height: 1.4; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fbp-grid { display: grid; gap: 2px; aspect-ratio: 1; background: var(--fb-surface); }
.fbp-grid-2 { grid-template-columns: 1fr 1fr; }
.fbp-grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 3fr 2fr; }
.fbp-grid-3 .fbp-tile:first-child { grid-column: 1 / -1; }
.fbp-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.fbp-grid-5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 3fr 2fr; }
.fbp-grid-5 .fbp-tile:nth-child(-n + 2) { grid-column: span 3; }
.fbp-grid-5 .fbp-tile:nth-child(n + 3) { grid-column: span 2; }
.fbp-tile { position: relative; overflow: hidden; background: #18191a; min-height: 0; }
.fbp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbp-tile-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; font-weight: 700; }
.fbp-stats { padding: 8px 10px; color: var(--fb-muted); font-size: 11px; border-bottom: 1px solid var(--fb-line); margin: 0 10px; padding-left: 0; padding-right: 0; }
.fbp-actions { display: flex; justify-content: space-around; padding: 4px 6px 6px; }
.fbp-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px; color: var(--fb-muted); font-size: 11.5px; font-weight: 600; }
.fbp-action svg { width: 15px; height: 15px; }