/* Meenira Studio pages: New video (Fast / Advanced), the video page (progress, review, player), My videos.
   Every colour comes from the console theme (console.css) or the tokens below, so light and dark
   mode both work (the console follows the device's prefers-color-scheme). */

:root {
  --st-surface: var(--bg-surface, #fff);
  --st-muted: var(--bg-muted, #f1f1f4);
  --st-border: var(--border-default, #d9d9e0);
  --st-text: var(--text-primary, #1f2433);
  --st-text-2: var(--text-secondary, #555);
  --st-text-3: var(--text-tertiary, #888);
  --st-accent: var(--video-brand-600, #7a4bbd);
  --st-accent-text: var(--video-brand-700, #6d3cb8);
  --st-accent-soft: var(--video-brand-50, #f5f0ff);
  --st-accent-ring: var(--video-brand-100, #ede5ff);
  --st-accent-track: var(--video-brand-200, #dec9ff);
  --st-info-text: var(--video-brand-900, #4a297a);
  --st-skel-a: #ececf1;
  --st-skel-b: #f6f6f8;
  --st-error-bg: #fef3f2;
  --st-error-text: #912018;
  --st-error: #b42318;
  --st-switch-on: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --st-accent: #a77ee6;
    --st-accent-text: #d4bcff;
    --st-accent-soft: rgba(142, 92, 217, 0.18);
    --st-accent-ring: rgba(142, 92, 217, 0.35);
    --st-accent-track: rgba(167, 126, 230, 0.35);
    --st-info-text: #e4d6ff;
    --st-skel-a: #262a36;
    --st-skel-b: #313646;
    --st-error-bg: rgba(240, 68, 56, 0.14);
    --st-error-text: #fda29b;
    --st-error: #f97066;
    --st-switch-on: var(--bg-elevated, #2a2f3d);
  }
}

.studio-wrap { max-width: 720px; }

/* Fast | Advanced switch */
.mode-switch { display: inline-flex; background: var(--st-muted); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: var(--space-4, 16px); }
.mode-switch button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--st-text-2); cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--st-switch-on); color: var(--st-accent-text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mode-note { color: var(--st-text-2); font-size: var(--text-sm, 14px); margin: 0 0 var(--space-3, 12px); }

/* Option groups: chip rows */
.opt-group { margin-top: var(--space-4, 16px); }
.opt-group > .form-label { display: block; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1px solid var(--st-border); background: var(--st-surface); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: var(--text-sm, 14px); cursor: pointer; color: var(--st-text); }
.chips button small { color: var(--st-text-3); margin-left: 4px; }
.chips button[aria-pressed="true"] { border-color: var(--st-accent); background: var(--st-accent-soft); color: var(--st-accent-text); font-weight: 600; }
.chips button[aria-pressed="true"] small { color: var(--st-accent-text); opacity: .8; }
.chips button:disabled { opacity: .45; cursor: not-allowed; }
.opt-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 12px); }
@media (max-width: 640px) { .opt-row { grid-template-columns: 1fr; } }
.switch-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: var(--text-sm, 14px); }
.switch-line input { width: 18px; height: 18px; accent-color: var(--st-accent); }

/* Tier cards (Advanced) */
.tier-grid { display: grid; gap: 8px; }
.tier-card { text-align: left; border: 1px solid var(--st-border); background: var(--st-surface); color: var(--st-text); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; }
.tier-card[aria-pressed="true"] { border-color: var(--st-accent); background: var(--st-accent-soft); box-shadow: 0 0 0 3px var(--st-accent-ring); }
.tier-card .t-top { display: flex; justify-content: space-between; font-weight: 600; }
.tier-card .t-desc { color: var(--st-text-2); font-size: var(--text-sm, 14px); margin-top: 4px; }

.price-line { margin-top: var(--space-4, 16px); padding: 12px 14px; border-radius: 12px; background: var(--st-accent-soft); color: var(--st-info-text); font-size: var(--text-sm, 14px); }
.price-line strong { font-size: 1.05em; }

/* Planning / progress stepper */
.stepper { list-style: none; margin: 0; padding: 0; }
.stepper li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: var(--st-text-3); }
.stepper li .dot { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.stepper li .s-label { font-weight: 600; }
.stepper li .s-sub { font-size: var(--text-sm, 14px); font-weight: 400; color: var(--st-text-2); }
.stepper li.done { color: var(--st-text); }
.stepper li.done .dot { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
.stepper li.working { color: var(--st-accent-text); }
.stepper li.working .dot { border-color: var(--st-accent-track); border-top-color: var(--st-accent); animation: studio-spin 0.9s linear infinite; }
.stepper li.failed { color: var(--st-error); }
.stepper li.failed .dot { background: var(--st-error); border-color: var(--st-error); color: #fff; }
@keyframes studio-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stepper li.working .dot { animation: none; border-style: dashed; } }

.live-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--text-sm, 14px); color: var(--st-text-2); margin-top: 6px; }
.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #12b76a; margin-right: 6px; animation: studio-pulse 1.6s ease-in-out infinite; vertical-align: middle; }
@keyframes studio-pulse { 50% { opacity: .25; } }
.leave-note { margin-top: var(--space-3, 12px); font-size: var(--text-sm, 14px); color: var(--st-text-2); background: var(--st-muted); padding: 10px 12px; border-radius: 10px; }

/* Scene thumbnails, filled in as each picture is made */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: var(--space-3, 12px); }
.thumb { aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--st-skel-a); position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; animation: studio-fade .4s ease; }
.thumb.waiting { background: linear-gradient(90deg, var(--st-skel-a) 25%, var(--st-skel-b) 50%, var(--st-skel-a) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; }
.thumb .n { position: absolute; left: 6px; top: 4px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.thumb.waiting .n { color: var(--st-text-3); text-shadow: none; }
@keyframes studio-fade { from { opacity: 0; } }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Result */
.player-wrap { display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; align-items: flex-start; }
.player { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; background: #000; border-radius: 14px; }
.result-actions { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }

.script-box { white-space: pre-wrap; background: var(--st-muted); color: var(--st-text); border-radius: 10px; padding: 12px 14px; font-size: var(--text-sm, 14px); line-height: 1.55; }
.settings-line { color: var(--st-text-2); font-size: var(--text-sm, 14px); }
.section-title { font-size: var(--text-base, 16px); font-weight: 700; margin: var(--space-4, 16px) 0 8px; }
.error-box { background: var(--st-error-bg); color: var(--st-error-text); border-radius: 10px; padding: 12px 14px; }

/* My videos list */
.studio-row { display: flex; flex-direction: row; gap: 14px; align-items: center; padding: 12px; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.studio-row:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08)); }
.studio-row .mini { flex: 0 0 54px; width: 54px; height: 96px; border-radius: 8px; background-color: var(--st-skel-a); background-position: center; background-size: cover; background-repeat: no-repeat; }
.studio-row .v-body { flex: 1; min-width: 0; }
.studio-row h3 { margin: 6px 0 2px; font-size: var(--text-base, 16px); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.studio-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); opacity: 0; background: #1f2433; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; transition: all .2s; z-index: 1000; pointer-events: none; max-width: 90vw; }
.studio-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.studio-toast-error { background: #b42318; }
@media (prefers-color-scheme: dark) { .studio-toast { background: #f2f4f7; color: #1f2433; } .studio-toast-error { background: #b42318; color: #fff; } }

/* Your photos (New video) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 8px 0; }
.photo-grid:empty { display: none; }
.photo-item { border: 1px solid var(--st-border); border-radius: 10px; overflow: hidden; background: var(--st-surface); }
.photo-item .ph { position: relative; aspect-ratio: 4 / 3; background: var(--st-skel-a) center / cover no-repeat; }
.photo-item .ph .n { position: absolute; left: 6px; top: 4px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.photo-item .ph button { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 16px; line-height: 26px; padding: 0; }
.photo-item input { width: 100%; border: 0; border-top: 1px solid var(--st-border); padding: 6px 8px; font: inherit; font-size: var(--text-xs, 12px); background: var(--st-surface); color: var(--st-text); }
.photo-item input::placeholder { color: var(--st-text-3); }
.photo-item.uploading .ph { background: linear-gradient(90deg, var(--st-skel-a) 25%, var(--st-skel-b) 50%, var(--st-skel-a) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; }
.photo-add { cursor: pointer; display: inline-flex; }

/* Post to Instagram (job page) */
.ig-box { margin-top: var(--space-4, 16px); padding: 14px 16px; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-surface); color: var(--st-text); }
.ig-caption { width: 100%; resize: vertical; min-height: 110px; font: inherit; line-height: 1.45; }
.ig-count { text-align: right; font-size: var(--text-xs, 12px); margin-top: 4px; }
.ig-posts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--text-sm, 14px); }
.ig-post { padding: 8px 10px; border-radius: 8px; background: var(--st-muted); color: var(--st-text); }
.ig-post.published { background: var(--st-accent-soft); color: var(--st-info-text); }
.ig-post.failed { background: var(--st-error-bg); color: var(--st-error-text); }
.ig-post a { color: inherit; font-weight: 600; }
.link-btn { background: none; border: 0; padding: 0; color: var(--st-text-2); text-decoration: underline; cursor: pointer; font: inherit; }