:root{--bg:#0a0b0f;--panel:#11131a;--panel2:#171a22;--text:#f4f4f5;--muted:#9b9eaa;--line:#282c36;--accent:#fff;--danger:#ff7878;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}.sidebar{border-right:1px solid var(--line);padding:24px 18px;background:#0d0f14;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:11px;align-items:center;margin-bottom:26px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid #424650;border-radius:11px;font-weight:800}.brand strong,.brand span{display:block}.brand span{font-size:11px;color:var(--muted);margin-top:2px}.side-heading,.eyebrow{font-size:10px;letter-spacing:.14em;color:#858995;font-weight:800;text-transform:uppercase}.side-heading{margin:28px 8px 10px}.project-list{display:grid;gap:6px}.project-item{padding:10px 11px;border-radius:11px;cursor:pointer;color:#d8dae0}.project-item:hover,.project-item.active{background:#1a1d25}.project-item strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-item span{font-size:11px;color:var(--muted)}button,.button{border:0;font:inherit;cursor:pointer;text-decoration:none;text-align:center}.primary{background:var(--accent);color:#08090c;padding:11px 16px;border-radius:11px;font-weight:800}.secondary{background:#222630;color:#f5f5f5;padding:11px 16px;border-radius:11px}.full{width:100%}.main{padding:34px 42px 70px;max-width:1500px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}.topbar h1{font-size:26px;margin:0}.topbar p{color:var(--muted);margin:5px 0 0}.card{border:1px solid var(--line);background:linear-gradient(180deg,#13161d,#101218);border-radius:var(--radius)}.empty{min-height:560px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px}.empty h2{font-size:46px;max-width:700px;line-height:1.05;margin:16px 0}.empty p{max-width:620px;color:var(--muted);font-size:16px}.hero-chip{border:1px solid #383c45;padding:7px 11px;border-radius:999px;font-size:10px;letter-spacing:.13em}.overview-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}.project-summary,.progress-card{padding:26px}.project-summary h2{font-size:30px;margin:9px 0}.project-summary p{color:#babdc5;max-width:800px}.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:19px}.meta-row span{border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:#b9bcc5;font-size:11px}.actions{display:flex;gap:8px;margin-top:22px}.progress-number{font-size:48px;font-weight:800;margin-top:8px}.progress-track{height:8px;background:#262a33;border-radius:999px;overflow:hidden}.progress-track div{height:100%;background:#f1f1f1;width:0;transition:width .3s}.progress-card p{color:var(--muted)}.tabs{display:flex;gap:4px;margin:28px 0 14px;border-bottom:1px solid var(--line)}.tab{background:transparent;color:#9296a0;padding:10px 14px;border-bottom:2px solid transparent}.tab.active{color:white;border-bottom-color:white}.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.scene-card{overflow:hidden}.scene-preview{aspect-ratio:16/9;background:#08090c;display:grid;place-items:center;border-bottom:1px solid var(--line);position:relative}.scene-preview video{width:100%;height:100%;object-fit:cover}.scene-num{position:absolute;left:10px;top:10px;background:#090a0dcc;padding:5px 8px;border-radius:8px;font-size:11px}.scene-body{padding:15px}.scene-body h3{margin:0 0 8px;font-size:14px}.scene-body p{color:#9fa3ac;font-size:12px;min-height:52px}.scene-footer{display:flex;justify-content:space-between;align-items:center;gap:8px}.mini-status{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#aeb1b8}.small{padding:7px 9px;border-radius:8px;font-size:11px}.continuity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}.continuity-card{padding:18px}.continuity-card h3{margin:5px 0}.continuity-card p{color:#aeb1ba}.traits{display:flex;flex-wrap:wrap;gap:5px}.traits span{font-size:10px;padding:4px 7px;border:1px solid var(--line);border-radius:999px}.upload{margin-top:14px}.script-card{padding:28px}.script-scene{padding:18px 0;border-bottom:1px solid var(--line)}.script-scene h3{font-size:13px}.script-scene p{color:#c1c4ca}.status{padding:7px 10px;border:1px solid var(--line);border-radius:999px;text-transform:uppercase;font-size:10px;letter-spacing:.1em}.hidden{display:none!important}dialog{border:0;padding:0;background:transparent;color:inherit;width:min(720px,calc(100% - 30px))}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-card{background:#12151c;border:1px solid var(--line);border-radius:20px;padding:24px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2{margin:5px 0 22px;font-size:27px}.icon{background:transparent;color:#aaa;font-size:25px}label{display:grid;gap:7px;color:#c8cad0;font-size:12px;margin-bottom:14px}input,textarea,select{width:100%;border:1px solid #323640;border-radius:10px;background:#0c0e13;color:white;padding:11px 12px;font:inherit}textarea{min-height:120px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.error{color:var(--danger);padding:10px 0}.toast{position:fixed;right:24px;bottom:24px;background:#f0f0f0;color:#101114;padding:11px 15px;border-radius:10px;font-weight:700;box-shadow:0 15px 40px #0008}@media(max-width:850px){.shell{display:block}.sidebar{height:auto;position:relative;border-right:0;border-bottom:1px solid var(--line)}.project-list{display:none}.main{padding:24px 16px}.overview-grid{grid-template-columns:1fr}.empty{padding:30px;min-height:420px}.empty h2{font-size:34px}.form-grid{grid-template-columns:1fr}.topbar{gap:10px}}
.account-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.auth-switch{margin-top:8px}.muted{color:var(--muted)}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.plan-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:#0c0e13}.plan-card h3{margin:4px 0}.plan-card .credits{font-size:22px;font-weight:800;margin:10px 0}.ledger-heading{margin-top:24px}.ledger-list{display:grid;gap:7px;margin-top:10px;max-height:220px;overflow:auto}.ledger-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:8px 0;font-size:12px}.ledger-row span{color:var(--muted)}@media(max-width:700px){.plan-grid{grid-template-columns:1fr}.account-bar{justify-content:flex-start}.topbar{flex-direction:column}}
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.editor-toolbar strong,.editor-toolbar span{display:block}.editor-toolbar span{font-size:12px;color:var(--muted);margin-top:2px}.timeline{display:flex;gap:7px;overflow-x:auto;padding:10px 2px 18px;margin-bottom:3px}.timeline-shot{min-width:88px;border:1px solid var(--line);background:#12151c;color:#fff;border-radius:11px;padding:9px;text-align:left}.timeline-shot span{font-weight:800;display:block}.timeline-shot small{color:var(--muted);white-space:nowrap}.timeline-shot.complete{border-color:#506055}.timeline-shot.generating,.timeline-shot.reviewing{outline:1px solid #777}.timeline-shot.failed{border-color:#6a3b3b}.tier-badge{position:absolute;right:10px;top:10px;background:#0a0b0dcc;border:1px solid #343943;padding:4px 7px;border-radius:999px;font-size:10px}.tier-badge.premium{border-color:#8f7a4b}.tier-badge.economy{border-color:#4d6f68}.scene-title-row{display:flex;justify-content:space-between;align-items:start;gap:8px}.edit-icon{font-size:15px}.prompt-preview{font-size:11px;color:#858995;border-left:2px solid #2d313b;padding-left:9px;margin:10px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.scene-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.tiny{padding:6px 8px;border-radius:8px}.danger{background:#452323;color:#ffdcdc;padding:11px 16px;border-radius:11px}.estimate-box{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-top:18px;color:var(--muted)}.estimate-box strong{color:#fff;font-size:18px}.scene-editor-dialog{
width:min(760px,calc(100vw - 80px))!important;
max-width:760px!important;
position:relative!important;
overflow:visible!important
}
.scene-editor-dialog .dialog-head{
position:relative!important;
padding-right:55px!important
}
.scene-editor-dialog .edit-icon,
.scene-editor-dialog .icon{
position:absolute!important;
top:18px!important;
right:18px!important;
z-index:100!important;
display:flex!important;
visibility:visible!important;
opacity:1!important
}.scene-editor-dialog textarea{min-height:90px}.scene-editor-dialog .actions{justify-content:flex-end}@media(max-width:800px){.editor-toolbar{align-items:flex-start;flex-direction:column}.timeline-shot{min-width:78px}.scene-actions{justify-content:flex-start}}
.toolbar-actions{display:flex;gap:8px;align-items:center}.optimization-preview{border:1px solid var(--line);background:#0c0e13;border-radius:12px;padding:14px;margin:10px 0}.optimization-preview strong{color:#fff;font-size:20px}

/* === Scene Editor narrower width fix === */
.scene-editor-dialog {
    width: min(700px, calc(100vw - 80px)) !important;
    max-width: 700px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .scene-editor-dialog {
        width: 92vw !important;
        max-width: 700px !important;
    }
}


/* Image-only pipeline: old Premium/Economy optimizer is obsolete. */
#optimizeBtn {
    display: none !important;
}


/* === AI FILM STUDIO PURPLE CTA THEME === */

:root {
  --afs-purple: #8B4DFF;
  --afs-purple-hover: #9D66FF;
  --afs-purple-active: #7A3FE8;
  --afs-purple-soft: rgba(139, 77, 255, 0.16);
  --afs-purple-glow: rgba(139, 77, 255, 0.32);
}

/*
  PRIMARY ACTIONS
  Keep destructive, cancel, back and secondary controls neutral.
*/
button[type="submit"],
.btn-primary,
.button-primary,
.primary-button,
.primary-btn,
.cta-button,
[data-variant="primary"] {
  background: linear-gradient(
    135deg,
    var(--afs-purple) 0%,
    #7C3AED 100%
  ) !important;

  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 6px 18px var(--afs-purple-soft),
    0 0 0 1px rgba(139,77,255,0.08) !important;

  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    border-color 160ms ease !important;
}

button[type="submit"]:hover,
.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
.primary-btn:hover,
.cta-button:hover,
[data-variant="primary"]:hover {
  background: linear-gradient(
    135deg,
    var(--afs-purple-hover) 0%,
    var(--afs-purple) 100%
  ) !important;

  box-shadow:
    0 8px 24px var(--afs-purple-glow),
    0 0 0 1px rgba(157,102,255,0.18) !important;

  transform: translateY(-1px);
}

button[type="submit"]:active,
.btn-primary:active,
.button-primary:active,
.primary-button:active,
.primary-btn:active,
.cta-button:active,
[data-variant="primary"]:active {
  background: var(--afs-purple-active) !important;
  transform: translateY(0);
}

/* Keyboard accessibility */
button[type="submit"]:focus-visible,
.btn-primary:focus-visible,
.button-primary:focus-visible,
.primary-button:focus-visible,
.primary-btn:focus-visible,
.cta-button:focus-visible,
[data-variant="primary"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(139,77,255,0.28),
    0 8px 24px var(--afs-purple-glow) !important;
}

/* Disabled actions */
button:disabled,
.btn-primary:disabled,
.button-primary:disabled,
.primary-button:disabled,
.primary-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/*
  SELECTED OPTIONS / CARDS
  Supports several common naming conventions without changing layout.
*/
.selected,
.is-selected,
[aria-selected="true"],
[aria-pressed="true"],
[data-selected="true"] {
  border-color: var(--afs-purple) !important;
  box-shadow:
    0 0 0 1px var(--afs-purple),
    0 0 20px rgba(139,77,255,0.12) !important;
}

/* Purple accents for checked form controls */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--afs-purple);
}

/*
  Don't turn obvious secondary/navigation/destructive buttons purple.
*/
.btn-secondary,
.button-secondary,
.secondary-button,
.secondary-btn,
.btn-danger,
.button-danger,
.cancel-button,
.back-button {
  box-shadow: none;
}

/* === END PURPLE CTA THEME === */



/* === AI FILM STUDIO INTERNAL PURPLE ACTIONS === */

/*
   Internal studio action buttons.
   Purple represents an action that creates, regenerates,
   saves, confirms, renders or advances production.
*/

.scene-actions button:not(.secondary):not(.danger),
.generation-actions button:not(.secondary):not(.danger),
.render-actions button:not(.secondary):not(.danger),
.editor-actions button:not(.secondary):not(.danger),
.actions button.primary,
.scene-card .primary,
.scene-card .generate,
.scene-card .regenerate,
button.generate,
button.regenerate,
button.render,
button.save,
button.confirm,
button.continue,
button[data-action="generate"],
button[data-action="regenerate"],
button[data-action="render"],
button[data-action="save"],
button[data-action="confirm"],
button[data-action="continue"] {
    background: linear-gradient(
        135deg,
        #8B4DFF 0%,
        #7C3AED 100%
    ) !important;

    color: #ffffff !important;

    border:
        1px solid rgba(255,255,255,0.10) !important;

    box-shadow:
        0 5px 16px rgba(139,77,255,0.20),
        0 0 0 1px rgba(139,77,255,0.06) !important;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease !important;
}


/* Hover */

.scene-actions button:not(.secondary):not(.danger):hover,
.generation-actions button:not(.secondary):not(.danger):hover,
.render-actions button:not(.secondary):not(.danger):hover,
.editor-actions button:not(.secondary):not(.danger):hover,
.actions button.primary:hover,
.scene-card .primary:hover,
.scene-card .generate:hover,
.scene-card .regenerate:hover,
button.generate:hover,
button.regenerate:hover,
button.render:hover,
button.save:hover,
button.confirm:hover,
button.continue:hover,
button[data-action="generate"]:hover,
button[data-action="regenerate"]:hover,
button[data-action="render"]:hover,
button[data-action="save"]:hover,
button[data-action="confirm"]:hover,
button[data-action="continue"]:hover {

    background: linear-gradient(
        135deg,
        #9D66FF 0%,
        #8B4DFF 100%
    ) !important;

    box-shadow:
        0 7px 22px rgba(139,77,255,0.34),
        0 0 0 1px rgba(157,102,255,0.18) !important;

    transform: translateY(-1px);
}


/* Active / pressed */

.scene-actions button:active,
.generation-actions button:active,
.render-actions button:active,
.editor-actions button:active,
button.generate:active,
button.regenerate:active,
button.render:active,
button.save:active,
button.confirm:active,
button.continue:active {

    transform: translateY(0);
}


/*
   Selected studio controls.
   Useful for production strategy, scene mode,
   generation mode, visual options, etc.
*/

.scene-option.selected,
.scene-option.active,
.mode-option.selected,
.mode-option.active,
.strategy-option.selected,
.strategy-option.active,
.production-option.selected,
.production-option.active,
.visual-option.selected,
.visual-option.active,
.studio-option.selected,
.studio-option.active,
[data-selected="true"],
[aria-selected="true"],
[aria-pressed="true"] {

    border-color: #8B4DFF !important;

    box-shadow:
        0 0 0 1px #8B4DFF,
        0 0 18px rgba(139,77,255,0.15) !important;
}


/*
   Purple progress / active accents where supported.
*/

progress {
    accent-color: #8B4DFF;
}

input[type="range"],
input[type="radio"],
input[type="checkbox"] {
    accent-color: #8B4DFF;
}


/*
   Preserve neutral hierarchy.
   These should NOT become primary purple actions.
*/

button.secondary,
button.cancel,
button.back,
button.download,
.btn-secondary,
.cancel-button,
.back-button,
.download-button {

    box-shadow: none;
}


/*
   Disabled studio actions.
*/

.scene-actions button:disabled,
.generation-actions button:disabled,
.render-actions button:disabled,
.editor-actions button:disabled {

    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* === END INTERNAL PURPLE ACTIONS === */


/* ==========================================================
   CINEMATIC PLANNING ANIMATION
   ========================================================== */

.film-planning-animation {
  margin: 18px 0 8px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(120,80,255,.14), transparent 55%),
    rgba(255,255,255,.025);
  overflow: hidden;
  text-align: center;
}

.film-planning-stage {
  position: relative;
  width: 180px;
  height: 94px;
  margin: 0 auto 16px;
}

/* moving film strip */
.film-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 64px;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 30px rgba(120,80,255,.18),
    inset 0 0 25px rgba(255,255,255,.04);
}

.film-strip::before,
.film-strip::after {
  content: "";
  position: absolute;
  left: -40px;
  width: 240px;
  height: 8px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.75) 0 8px,
      transparent 8px 15px
    );
  animation: filmPerforation 1s linear infinite;
}

.film-strip::before {
  top: 5px;
}

.film-strip::after {
  bottom: 5px;
}

.film-frame-row {
  position: absolute;
  left: 0;
  top: 17px;
  display: flex;
  gap: 5px;
  animation: filmMove 2.2s linear infinite;
}

.film-frame {
  flex: 0 0 42px;
  height: 28px;
  border-radius: 3px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(125,85,255,.5),
      rgba(255,255,255,.04)
    );
  border: 1px solid rgba(255,255,255,.2);
}

/* scanning/projector light */
.film-light {
  position: absolute;
  top: 7px;
  left: 0;
  width: 50px;
  height: 80px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );
  filter: blur(7px);
  animation: projectorSweep 2.4s ease-in-out infinite;
}

.film-planning-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin-bottom: 5px;
}

.film-planning-message {
  min-height: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  transition: opacity .25s ease, transform .25s ease;
}

.film-planning-dots {
  display: inline-flex;
  gap: 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.film-planning-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  animation: planningDot 1.2s ease-in-out infinite;
}

.film-planning-dots span:nth-child(2) {
  animation-delay: .15s;
}

.film-planning-dots span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes filmMove {
  from { transform: translateX(-45px); }
  to   { transform: translateX(0); }
}

@keyframes filmPerforation {
  from { transform: translateX(0); }
  to   { transform: translateX(15px); }
}

@keyframes projectorSweep {
  0%   { transform: translateX(-30px); opacity: .15; }
  50%  { opacity: .7; }
  100% { transform: translateX(160px); opacity: .15; }
}

@keyframes planningDot {
  0%, 60%, 100% {
    opacity: .25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-frame-row,
  .film-strip::before,
  .film-strip::after,
  .film-light,
  .film-planning-dots span {
    animation-duration: 8s;
  }
}


/* ==========================================================
   PREMIUM CINEMATIC PLANNING EXPERIENCE
   ========================================================== */

#filmPlanningAnimation {
  position: relative;
  margin-top: 18px;
}

.create-planning-active > *:not(#filmPlanningAnimation) {
  opacity: .17;
  filter: blur(1.5px);
  transition: opacity .35s ease, filter .35s ease;
  pointer-events: none;
}

.premium-planning-shell {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 32%, rgba(124,74,255,.22), transparent 32%),
    radial-gradient(circle at 25% 20%, rgba(92,42,220,.11), transparent 24%),
    linear-gradient(180deg, rgba(18,20,30,.98), rgba(9,11,18,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 28px 90px rgba(0,0,0,.38);
}

.premium-planning-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(150,95,255,.12), transparent 24%),
    radial-gradient(circle at 50% 50%, transparent 0 35%, rgba(0,0,0,.28) 75%);
}

.premium-planning-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.premium-planning-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(210,195,255,.75);
  box-shadow: 0 0 9px rgba(160,110,255,.9);
  animation: premiumFloat linear infinite;
}

.premium-planning-particles span:nth-child(1)  { left: 8%;  top: 70%; animation-duration: 7s; animation-delay: -2s; }
.premium-planning-particles span:nth-child(2)  { left: 16%; top: 26%; animation-duration: 9s; animation-delay: -5s; }
.premium-planning-particles span:nth-child(3)  { left: 27%; top: 78%; animation-duration: 8s; animation-delay: -3s; }
.premium-planning-particles span:nth-child(4)  { left: 38%; top: 18%; animation-duration: 10s; animation-delay: -7s; }
.premium-planning-particles span:nth-child(5)  { left: 51%; top: 82%; animation-duration: 7.5s; animation-delay: -4s; }
.premium-planning-particles span:nth-child(6)  { left: 64%; top: 22%; animation-duration: 9.5s; animation-delay: -1s; }
.premium-planning-particles span:nth-child(7)  { left: 76%; top: 74%; animation-duration: 8.5s; animation-delay: -6s; }
.premium-planning-particles span:nth-child(8)  { left: 89%; top: 31%; animation-duration: 11s; animation-delay: -3s; }
.premium-planning-particles span:nth-child(9)  { left: 44%; top: 55%; animation-duration: 12s; animation-delay: -8s; }
.premium-planning-particles span:nth-child(10) { left: 71%; top: 48%; animation-duration: 10s; animation-delay: -5s; }

.premium-planning-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 34px 24px 30px;
}

/* cinematic assembly stage */

.cinema-assembly {
  position: relative;
  width: min(520px, 92%);
  height: 155px;
  margin-bottom: 26px;
}

.cinema-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 80px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 12px;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.cinema-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  transform: translate(-50%, -50%);
  animation: premiumFilmTravel 7s linear infinite;
}

.cinema-frame {
  position: relative;
  width: 82px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(220,210,255,.18);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(120,72,255,.24) 55%,
      rgba(25,18,45,.65)
    );
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.025),
    0 0 18px rgba(114,69,255,.08);
  overflow: hidden;
}

.cinema-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.45) 48%, transparent 72%);
  transform: translateX(-130%);
  animation: frameShine 3.2s ease-in-out infinite;
}

.cinema-frame:nth-child(2n) {
  transform: translateY(-4px);
}

.cinema-frame:nth-child(3n) {
  transform: translateY(5px);
}

.cinema-frame.active-build {
  animation: frameIgnite 2.2s ease-in-out infinite;
}

.cinema-frame .mini-scene {
  position: absolute;
  inset: 7px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 65% 35%, rgba(230,220,255,.24), transparent 18%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(97,55,205,.17));
}

.cinema-perf-top,
.cinema-perf-bottom {
  position: absolute;
  left: 3%;
  width: 94%;
  height: 8px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(235,230,255,.45) 0 11px,
      transparent 11px 19px
    );
  opacity: .7;
}

.cinema-perf-top {
  top: 20px;
}

.cinema-perf-bottom {
  bottom: 20px;
}

/* incoming floating frames */

.incoming-frame {
  position: absolute;
  width: 54px;
  height: 34px;
  border: 1px solid rgba(194,174,255,.32);
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(111,62,245,.22));
  box-shadow: 0 0 22px rgba(113,68,255,.18);
}

.incoming-frame.a {
  left: 7%;
  top: 10%;
  animation: assembleA 4.7s ease-in-out infinite;
}

.incoming-frame.b {
  right: 8%;
  top: 8%;
  animation: assembleB 5.2s ease-in-out infinite;
  animation-delay: -1.9s;
}

.incoming-frame.c {
  left: 18%;
  bottom: 8%;
  animation: assembleC 5.5s ease-in-out infinite;
  animation-delay: -3.1s;
}

.incoming-frame.d {
  right: 17%;
  bottom: 9%;
  animation: assembleD 4.9s ease-in-out infinite;
  animation-delay: -2.2s;
}

/* center pulse */

.story-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(176,145,255,.24);
  box-shadow:
    0 0 35px rgba(119,65,255,.15),
    inset 0 0 28px rgba(118,69,255,.08);
  animation: corePulse 2.7s ease-in-out infinite;
}

.story-core::before,
.story-core::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
}

.story-core::after {
  inset: 22px;
  background: radial-gradient(circle, rgba(164,122,255,.28), rgba(100,60,230,.05));
  border: 0;
  filter: blur(.2px);
}

/* copy */

.premium-planning-eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(177,152,255,.8);
}

.premium-planning-heading {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  font-weight: 760;
  color: rgba(255,255,255,.97);
  letter-spacing: -.025em;
  text-align: center;
}

.premium-planning-subtitle {
  margin-top: 9px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  text-align: center;
}

.premium-status-wrap {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(225,216,255,.78);
  font-size: 13px;
}

.premium-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(163,120,255,.95);
  box-shadow: 0 0 14px rgba(150,96,255,.95);
  animation: statusPulse 1.35s ease-in-out infinite;
}

#filmPlanningMessage {
  min-width: 180px;
  transition: opacity .22s ease, transform .22s ease;
}

@keyframes premiumFilmTravel {
  from { transform: translate(-56%, -50%); }
  to   { transform: translate(-44%, -50%); }
}

@keyframes frameShine {
  0%, 55% { transform: translateX(-140%); opacity: 0; }
  70%     { opacity: .3; }
  100%    { transform: translateX(140%); opacity: 0; }
}

@keyframes frameIgnite {
  0%, 100% {
    border-color: rgba(210,195,255,.18);
    box-shadow: 0 0 14px rgba(120,70,255,.07);
  }
  50% {
    border-color: rgba(183,150,255,.55);
    box-shadow: 0 0 32px rgba(122,70,255,.22);
  }
}

@keyframes corePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.94);
    opacity: .6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
}

@keyframes statusPulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1; transform: scale(1.15); }
}

@keyframes premiumFloat {
  0%   { transform: translateY(25px) scale(.7); opacity: 0; }
  15%  { opacity: .7; }
  75%  { opacity: .5; }
  100% { transform: translateY(-90px) scale(1.1); opacity: 0; }
}

@keyframes assembleA {
  0%, 100% { transform: translate(-18px, -8px) rotate(-12deg); opacity: .15; }
  50%      { transform: translate(128px, 47px) rotate(0deg) scale(.78); opacity: .85; }
}

@keyframes assembleB {
  0%, 100% { transform: translate(16px, -5px) rotate(11deg); opacity: .15; }
  50%      { transform: translate(-130px, 50px) rotate(0deg) scale(.78); opacity: .85; }
}

@keyframes assembleC {
  0%, 100% { transform: translate(-8px, 10px) rotate(8deg); opacity: .12; }
  50%      { transform: translate(105px, -42px) rotate(0deg) scale(.8); opacity: .75; }
}

@keyframes assembleD {
  0%, 100% { transform: translate(8px, 12px) rotate(-10deg); opacity: .12; }
  50%      { transform: translate(-110px, -45px) rotate(0deg) scale(.8); opacity: .75; }
}

@media (max-width: 700px) {
  .premium-planning-shell {
    min-height: 310px;
  }

  .premium-planning-inner {
    min-height: 310px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .cinema-assembly {
    height: 135px;
  }

  .cinema-frame {
    width: 68px;
    height: 44px;
  }

  .story-core {
    width: 76px;
    height: 76px;
  }
}

/* NEW_FILM_PURPLE_V1 */
/* Purple styling ONLY for the left-sidebar New Film button. */
#newProjectBtn {
    background: #8b5cf6;
    color: #ffffff;
    border-color: #8b5cf6;
}

#newProjectBtn:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
}

#newProjectBtn:active {
    background: #6d28d9;
    border-color: #6d28d9;
}


/* ================================================================
   THUMBNAIL_CSS_V1
   ================================================================ */

.thumbnail-creator-panel{
  margin-top:20px;
  padding:22px;
}

.thumbnail-creator-panel.hidden{
  display:none !important;
}

.thumbnail-module-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}

.thumbnail-module-head h2{
  margin:4px 0 6px;
}

.thumbnail-module-head p{
  margin:0;
  max-width:680px;
  line-height:1.55;
}

.thumbnail-main-btn{
  flex:0 0 auto;
  white-space:nowrap;
  background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);
  border-color:#7c3aed;
  color:#fff;
}

.thumbnail-empty-state{
  min-height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;
  color:rgba(255,255,255,.52);
  text-align:center;
  background:rgba(255,255,255,.018);
}

.thumbnail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.thumbnail-card{
  min-width:0;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  transition:
    transform .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}

.thumbnail-card:hover{
  transform:translateY(-2px);
  border-color:rgba(139,92,246,.40);
}

.thumbnail-card-regenerating{
  opacity:.55;
}

.thumbnail-image-wrap{
  position:relative;
  overflow:hidden;
  width:100%;
  border-radius:10px;
  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.08),
      rgba(255,255,255,.025)
    );
}

/* THUMBNAIL_ASPECT_DISPLAY_V1 */
.thumbnail-image-wrap.thumbnail-aspect-16-9{
  aspect-ratio:16 / 9;
}

.thumbnail-image-wrap.thumbnail-aspect-9-16{
  aspect-ratio:9 / 16;
}

.thumbnail-image-wrap.thumbnail-aspect-1-1{
  aspect-ratio:1 / 1;
}

.thumbnail-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .22s ease;
}

.thumbnail-image.ready{
  opacity:1;
}

.thumbnail-image-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  color:rgba(255,255,255,.45);
  font-size:12px;
  text-align:center;
}

.thumbnail-image-loading.hidden{
  display:none;
}

.thumbnail-card-label{
  padding:11px 2px 8px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.72);
}

.thumbnail-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.thumbnail-card-actions button{
  width:100%;
}

.thumbnail-generation-status{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid rgba(139,92,246,.22);
  border-radius:12px;
  background:rgba(139,92,246,.07);
}

.thumbnail-generation-status strong,
.thumbnail-generation-status span{
  display:block;
}

.thumbnail-generation-status span{
  margin-top:3px;
  color:rgba(255,255,255,.48);
  font-size:12px;
}

.thumbnail-spinner{
  width:20px;
  height:20px;
  flex:0 0 auto;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:#8b5cf6;
  animation:thumbnailSpin .8s linear infinite;
}

@keyframes thumbnailSpin{
  to{ transform:rotate(360deg); }
}

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

  .thumbnail-module-head{
    flex-direction:column;
  }

  .thumbnail-main-btn{
    width:100%;
  }
}


/* ================================================================
   YOUTUBE_METADATA_CSS_V1
   ================================================================ */

.youtube-metadata-panel{
  margin-top:20px;
  padding:22px;
}

.youtube-metadata-panel.hidden{
  display:none !important;
}

.youtube-metadata-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}

.youtube-metadata-head h2{
  margin:4px 0 6px;
}

.youtube-metadata-head p{
  margin:0;
  max-width:680px;
  line-height:1.55;
}

.youtube-metadata-main-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

.youtube-metadata-empty{
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;
  color:rgba(255,255,255,.52);
  text-align:center;
  background:rgba(255,255,255,.018);
}

.youtube-metadata-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.youtube-metadata-field{
  min-width:0;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.youtube-metadata-field.wide{
  grid-column:1 / -1;
}

.youtube-metadata-field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.youtube-metadata-field-head strong{
  font-size:13px;
}

.youtube-metadata-copy-btn{
  flex:0 0 auto;
  padding:7px 11px;
  font-size:12px;
}

.youtube-metadata-value{
  min-height:56px;
  max-height:260px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.76);
}

.youtube-metadata-status{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid rgba(139,92,246,.22);
  border-radius:12px;
  background:rgba(139,92,246,.07);
}

.youtube-metadata-status strong,
.youtube-metadata-status span{
  display:block;
}

.youtube-metadata-status span{
  margin-top:3px;
  color:rgba(255,255,255,.48);
  font-size:12px;
}

.youtube-metadata-spinner{
  width:20px;
  height:20px;
  flex:0 0 auto;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:#8b5cf6;
  animation:youtubeMetadataSpin .8s linear infinite;
}

@keyframes youtubeMetadataSpin{
  to{
    transform:rotate(360deg);
  }
}

@media(max-width:1050px){
  .youtube-metadata-head{
    flex-direction:column;
  }

  .youtube-metadata-main-btn{
    width:100%;
  }

  .youtube-metadata-grid{
    grid-template-columns:1fr;
  }

  .youtube-metadata-field.wide{
    grid-column:auto;
  }
}


/* ================================================================
   VOICE_PREVIEW_CSS_V1
   ================================================================ */

.voice-preview-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.voice-preview-row select{
  flex:1 1 auto;
  min-width:0;
}

.voice-preview-button{
  flex:0 0 auto;
  white-space:nowrap;
  min-width:126px;
}

.voice-preview-button.voice-preview-playing{
  border-color:rgba(139,92,246,.55);
  background:rgba(139,92,246,.12);
}

@media(max-width:640px){
  .voice-preview-row{
    align-items:stretch;
    flex-direction:column;
  }

  .voice-preview-button{
    width:100%;
  }
}

/* ================================================================
   MUSIC_SOUND_DESIGN_CSS_V1
   ================================================================ */

.sound-design-panel{
  margin-top:20px;
  padding:22px;
}

.sound-design-panel.hidden{
  display:none !important;
}

.sound-design-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

.sound-design-head h2{
  margin:4px 0 6px;
}

.sound-design-head p{
  margin:0;
  max-width:720px;
  line-height:1.55;
}

.sound-design-credit-summary{
  flex:0 0 auto;
  min-width:130px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  text-align:right;
}

.sound-design-credit-summary span,
.sound-design-credit-summary strong{
  display:block;
}

.sound-design-credit-summary span{
  color:rgba(255,255,255,.48);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.sound-design-credit-summary strong{
  margin-top:4px;
  font-size:18px;
}

.sound-design-safety{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  margin-bottom:18px;
  border:1px solid rgba(34,197,94,.18);
  border-radius:12px;
  background:rgba(34,197,94,.055);
}

.sound-design-safety strong{
  flex:0 0 auto;
  font-size:13px;
}

.sound-design-safety span{
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.5;
}

.sound-design-controls{
  display:grid;
  grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);
  gap:14px;
  margin-bottom:14px;
}

.sound-design-field{
  min-width:0;
}

.sound-design-field > span{
  display:block;
  margin-bottom:7px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
}

.sound-design-field em{
  color:rgba(255,255,255,.38);
  font-style:normal;
  font-weight:500;
}

.sound-design-field select,
.sound-design-field textarea{
  width:100%;
  box-sizing:border-box;
}

.sound-design-field textarea{
  resize:vertical;
  min-height:86px;
}

.sound-design-price-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}

.sound-price-card{
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.022);
}

.sound-price-card span,
.sound-price-card strong,
.sound-price-card small{
  display:block;
}

.sound-price-card span{
  color:rgba(255,255,255,.48);
  font-size:12px;
}

.sound-price-card strong{
  margin-top:4px;
  font-size:17px;
}

.sound-price-card small{
  margin-top:3px;
  color:rgba(255,255,255,.38);
}

.sound-design-actions{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}

.sound-design-preview-btn{
  white-space:nowrap;
}

.sound-design-empty{
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;
  color:rgba(255,255,255,.52);
  text-align:center;
  background:rgba(255,255,255,.018);
}

.sound-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:8px;
}

.sound-preview-card{
  display:block;
  min-width:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}

.sound-preview-card:hover{
  transform:translateY(-1px);
  border-color:rgba(139,92,246,.32);
}

.sound-preview-card.selected{
  border-color:rgba(139,92,246,.58);
  background:rgba(139,92,246,.09);
}

.sound-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}

.sound-preview-kicker{
  margin-bottom:3px;
  color:rgba(255,255,255,.38);
  font-size:10px;
  letter-spacing:.08em;
}

.sound-preview-top input{
  flex:0 0 auto;
}

.sound-preview-audio{
  width:100%;
  height:36px;
}

.sound-preview-meta{
  margin-top:8px;
  color:rgba(255,255,255,.38);
  font-size:11px;
}

.sound-preview-error{
  margin-top:8px;
  color:#fca5a5;
  font-size:11px;
}

.sound-design-apply-box,
.sound-design-ready{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(139,92,246,.20);
  border-radius:14px;
  background:rgba(139,92,246,.055);
}

.sound-design-apply-box strong,
.sound-design-apply-box span,
.sound-design-ready strong,
.sound-design-ready span{
  display:block;
}

.sound-design-apply-box span,
.sound-design-ready span{
  margin-top:4px;
  color:rgba(255,255,255,.50);
  font-size:12px;
  line-height:1.45;
}

.sound-design-apply-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

.sound-design-ready{
  border-color:rgba(34,197,94,.20);
  background:rgba(34,197,94,.055);
}

.sound-design-billing-note{
  margin-top:14px;
  color:rgba(255,255,255,.36);
  font-size:11px;
  line-height:1.5;
}

.sound-design-status,
.sound-design-live-status,
.sound-design-error{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid rgba(139,92,246,.22);
  border-radius:12px;
  background:rgba(139,92,246,.07);
}

.sound-design-live-status{
  position:sticky;
  bottom:12px;
  z-index:5;
}

.sound-design-status strong,
.sound-design-status span,
.sound-design-live-status strong,
.sound-design-live-status span,
.sound-design-error strong,
.sound-design-error span{
  display:block;
}

.sound-design-status span,
.sound-design-live-status span,
.sound-design-error span{
  margin-top:3px;
  color:rgba(255,255,255,.48);
  font-size:12px;
}

.sound-design-error{
  border-color:rgba(239,68,68,.22);
  background:rgba(239,68,68,.06);
}

.sound-design-spinner{
  width:20px;
  height:20px;
  flex:0 0 auto;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:#8b5cf6;
  animation:soundDesignSpin .8s linear infinite;
}

@keyframes soundDesignSpin{
  to{ transform:rotate(360deg); }
}

.sound-design-busy{
  position:relative;
}

@media(max-width:1050px){
  .sound-design-head,
  .sound-design-apply-box,
  .sound-design-ready{
    flex-direction:column;
  }

  .sound-design-credit-summary{
    width:100%;
    box-sizing:border-box;
    text-align:left;
  }

  .sound-design-controls,
  .sound-design-price-row,
  .sound-preview-grid{
    grid-template-columns:1fr;
  }

  .sound-design-actions{
    justify-content:stretch;
  }

  .sound-design-preview-btn,
  .sound-design-apply-btn,
  .sound-design-ready button{
    width:100%;
  }
}

/* PROJECT_ACCENT_COLORS_V1_START */
/* Safe UI-only color accents for project title + progress bar */

:root{
  --project-title-accent: #F2C14E;
  --project-progress-accent: #35E6A5;
  --project-progress-accent-2: #6EF0BF;
}

#projectTitle{
  color: var(--project-title-accent) !important;
  text-shadow: 0 0 18px rgba(240, 98, 255, 0.14);
}

#progressBar{
  background: linear-gradient(
    90deg,
    var(--project-progress-accent) 0%,
    var(--project-progress-accent-2) 100%
  ) !important;
  box-shadow: 0 0 14px rgba(53, 230, 165, 0.28);
}
/* PROJECT_ACCENT_COLORS_V1_END */

/* PROJECT_TITLE_GRADIENT_V1_START */
:root{
  --project-title-gradient: linear-gradient(
    90deg,
    #A855F7 0%,
    #6366F1 48%,
    #22D3EE 100%
  );
}

#projectTitle{
  background: var(--project-title-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}
/* PROJECT_TITLE_GRADIENT_V1_END */

/* RESPONSIVE_DESKTOP_WIDTH_V1_START */
/*
   Keep the entire application inside the browser viewport.

   Important:
   - No global zoom or font shrinking.
   - Timeline may scroll inside itself.
   - Scene cards reflow instead of widening the page.
*/

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.shell{
  width:100%;
  max-width:100vw;
  grid-template-columns:240px minmax(0,1fr);
  overflow-x:hidden;
}

.sidebar{
  width:240px;
  min-width:0;
}

.main{
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding-left:clamp(20px,2.4vw,34px);
  padding-right:clamp(20px,2.4vw,34px);
  overflow-x:hidden;
}

/*
   Grid/flex children normally use min-width:auto, which can force
   the parent wider than the viewport. Explicitly allow shrinking.
*/
#projectView,
.topbar,
.overview-grid,
.project-summary,
.progress-card,
.tabs,
.editor-toolbar,
.scene-grid,
.continuity-grid,
.script-card{
  min-width:0;
  max-width:100%;
}

.overview-grid{
  grid-template-columns:minmax(0,2fr) minmax(270px,1fr);
  width:100%;
}

/*
   Slightly smaller minimum scene-card width allows a normal laptop
   to show four cards where space permits without shrinking text.
*/
.scene-grid{
  width:100%;
  grid-template-columns:
    repeat(auto-fill,minmax(min(250px,100%),1fr));
}

/*
   Long scene-number strips remain locally scrollable and are never
   allowed to widen the complete application.
*/
.timeline{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
}

/* At narrower desktop/tablet widths, stack the overview cleanly. */
@media(max-width:1100px){
  .overview-grid{
    grid-template-columns:1fr;
  }
}

/*
   Preserve the application's existing mobile/sidebar behavior.
*/
@media(max-width:850px){
  .shell{
    width:100%;
    max-width:100%;
  }

  .sidebar{
    width:100%;
  }

  .main{
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }
}
/* RESPONSIVE_DESKTOP_WIDTH_V1_END */

/* THUMBNAIL_COST_ESTIMATE_UI_V1_START */

.thumbnail-cost-estimate{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
  font-size:12px;
  line-height:1.4;
  color:rgba(255,255,255,.58);
}

.thumbnail-cost-estimate strong{
  color:#ffffff;
  font-size:13px;
  font-weight:800;
}

.thumbnail-cost-label{
  color:rgba(255,255,255,.72);
  font-weight:650;
}

.thumbnail-cost-detail{
  color:rgba(255,255,255,.58);
}

.thumbnail-cost-model{
  flex-basis:100%;
  font-size:11px;
  color:rgba(255,255,255,.38);
}

/* THUMBNAIL_COST_ESTIMATE_UI_V1_END */

/* ================================================================
   IMAGI777_BRANDING_V1
   Sidebar logo branding only.
   ================================================================ */

.imagi777-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-bottom:24px;
  padding:2px 2px 4px;
}

.imagi777-brand-logo{
  display:block;
  width:100%;
  max-width:205px;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 0 10px rgba(168,85,247,.14))
    drop-shadow(0 0 14px rgba(34,211,238,.10));
}

@media(max-width:850px){
  .imagi777-brand{
    justify-content:flex-start;
  }

  .imagi777-brand-logo{
    max-width:185px;
  }
}


/* === IMAGI777 MOBILE PROJECTS FIX === */
@media (max-width: 850px) {
  .sidebar {
    display: block !important;
    height: auto !important;
    position: relative !important;
    padding: 16px !important;
  }

  .project-list {
    display: grid !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    margin-top: 8px !important;
  }
}
/* === END MOBILE PROJECTS FIX === */


/* === IMAGI777 FULL MOBILE RESPONSIVE FIX === */
@media (max-width: 850px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .shell,
  .main,
  .topbar,
  #emptyState,
  #projectView,
  .card,
  .overview-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .main {
    margin: 0 !important;
    padding: 22px 16px 48px !important;
  }

  .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .topbar h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .topbar p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  .account-bar {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .account-bar > * {
    max-width: 100% !important;
  }

  .empty {
    min-height: 430px !important;
    padding: 36px 20px !important;
    overflow: hidden !important;
  }

  .empty h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere !important;
  }

  .empty p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  .empty .primary {
    max-width: 100% !important;
  }

  .overview-grid,
  .scene-grid,
  .continuity-grid,
  .form-grid,
  .plan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .project-summary,
  .progress-card,
  .script-card,
  .dialog-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
  }

  .actions,
  .toolbar-actions {
    flex-wrap: wrap !important;
  }

  .tabs {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .scene-grid {
    width: 100% !important;
  }

  .scene-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  img,
  video {
    max-width: 100% !important;
  }

  dialog {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }
}
/* === END IMAGI777 FULL MOBILE RESPONSIVE FIX === */



/* =========================================================
   IMAGI777 BILLING V4 FIX
   ========================================================= */

.billing-v4-dialog{
  width:min(1320px,calc(100vw - 32px))!important;
  max-width:1320px!important;
  max-height:calc(100vh - 24px)!important;
}

.billing-v4-dialog::backdrop{
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(14px);
}

.billing-v4-shell{
  max-height:calc(100vh - 24px);
  overflow-y:auto;
  padding:44px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% -20%,rgba(132,86,255,.16),transparent 34%),
    #0c0d12;
  box-shadow:0 60px 160px rgba(0,0,0,.72);
}

.billing-v4-header{
  display:flex;
  justify-content:space-between;
  gap:40px;
}

.billing-v4-kicker{
  color:#9577ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.2em;
}

.billing-v4-header h2{
  margin:10px 0 12px;
  font-size:58px;
  line-height:.94;
  letter-spacing:-.055em;
}

.billing-v4-header h2 span{
  color:#737783;
}

.billing-v4-header p{
  max-width:600px;
  margin:0;
  color:#888d9b;
  font-size:15px;
  line-height:1.6;
}

.billing-v4-header-right{
  display:flex;
  gap:12px;
}

.billing-v4-balance{
  min-width:185px;
  padding:15px 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.billing-v4-balance small{
  display:block;
  color:#6e7380;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.billing-v4-balance strong{
  display:block;
  margin-top:4px;
  font-size:25px;
}

.billing-v4-close{
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  color:#8b909d;
  font-size:25px;
}

.billing-v4-cycle-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  margin:32px 0 30px;
}

.billing-v4-cycle{
  display:flex;
  padding:4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:#17181e;
}

.billing-v4-cycle button{
  min-width:120px;
  padding:11px 22px;
  border-radius:999px;
  background:transparent;
  color:#747986;
  font-weight:800;
}

.billing-v4-cycle button.active{
  background:#f4f1ea;
  color:#111216;
}

.billing-v4-saving{
  color:#777c89;
  font-size:11px;
}

.billing-v4-saving b{
  color:#69dda4;
}

.billing-v4-plans{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.billing-v4-card{
  position:relative;
  padding:30px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:21px;
  background:#14151b;
}

.billing-v4-card.popular{
  border-color:rgba(150,120,255,.72);
  background:
    radial-gradient(circle at 50% 0%,rgba(130,82,255,.14),transparent 33%),
    #15151d;
  box-shadow:0 25px 70px rgba(64,39,140,.17);
}

.billing-v4-popular{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 17px;
  border-radius:0 0 9px 9px;
  background:#f3efe8;
  color:#111216;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}

.billing-v4-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.billing-v4-card-head h3{
  margin:0;
  font-size:22px;
}

.billing-v4-save-pill{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(65,206,140,.11);
  color:#6fdca6;
  font-size:8px;
  font-weight:900;
}

.billing-v4-desc{
  min-height:40px;
  margin:8px 0 16px;
  color:#777c89;
  font-size:12px;
}

.billing-v4-price{
  display:flex;
  align-items:flex-end;
}

.billing-v4-price sup{
  align-self:flex-start;
  margin-top:8px;
  color:#b4b8c2;
  font-size:19px;
  font-weight:800;
}

.billing-v4-price strong{
  font-size:62px;
  line-height:.95;
  letter-spacing:-.065em;
}

.billing-v4-price span{
  margin:0 0 7px 7px;
  color:#737886;
  font-size:12px;
}

.billing-v4-billed{
  margin-top:7px;
  color:#646977;
  font-size:10px;
}

.billing-v4-credit-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin:23px 0 18px;
  padding:16px 17px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:#1b1c22;
}

.billing-v4-credit-box small{
  display:block;
  color:#6f7481;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}

.billing-v4-credit-box strong{
  display:block;
  margin-top:2px;
  font-size:25px;
}

.billing-v4-credit-box>span{
  color:#686d7a;
  font-size:9px;
}

.billing-v4-select{
  display:flex;
  justify-content:space-between;
  width:100%;
  padding:14px 16px;
  border:0;
  border-radius:10px;
  background:#f3f0e9;
  color:#101116;
  font-weight:850;
}

.billing-v4-select.featured{
  background:linear-gradient(135deg,#946cff,#714aff);
  color:white;
  box-shadow:0 13px 34px rgba(111,71,255,.26);
}

.billing-v4-rule{
  height:1px;
  margin:24px 0 20px;
  background:rgba(255,255,255,.07);
}

.billing-v4-card ul{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
  color:#a5a9b5;
  font-size:11px;
}

.billing-v4-included,
.billing-v4-topups{
  margin-top:20px;
  padding:25px 27px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:19px;
  background:rgba(255,255,255,.02);
}

.billing-v4-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
}

.billing-v4-section-head small,
.billing-v4-topups small{
  color:#707582;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.billing-v4-section-head h3,
.billing-v4-topups h3{
  margin:5px 0 0;
  font-size:20px;
}

.billing-v4-section-head p{
  max-width:430px;
  margin:0;
  color:#747986;
  font-size:11px;
  text-align:right;
}

.billing-v4-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:18px;
}

.billing-v4-features div{
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  color:#a5a9b5;
  font-size:10px;
}

.billing-v4-topups{
  display:grid;
  grid-template-columns:.8fr 1.5fr;
  gap:28px;
  align-items:center;
}

.billing-v4-topups p{
  margin:7px 0 0;
  color:#747986;
  font-size:11px;
}

.billing-v4-topup-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.billing-v4-topup{
  min-height:110px;
  padding:14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:13px;
  background:#15161c;
  color:white;
}

.billing-v4-topup>span{
  color:#9675ff;
  font-size:18px;
}

.billing-v4-topup strong{
  display:block;
  margin-top:3px;
  font-size:27px;
}

.billing-v4-topup small{
  display:block;
  margin-top:1px;
  color:#777c89;
}

.billing-v4-topup b{
  display:block;
  margin-top:9px;
  color:#969ba7;
  font-size:9px;
}

.billing-v4-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:18px;
  color:#606572;
  font-size:10px;
}

.billing-v4-footer button{
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:#9499a6;
}

@media(max-width:900px){
  .billing-v4-dialog{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
  }

  .billing-v4-shell{
    padding:24px 17px;
  }

  .billing-v4-header{
    flex-direction:column;
  }

  .billing-v4-header h2{
    font-size:40px;
  }

  .billing-v4-header-right{
    width:100%;
  }

  .billing-v4-balance{
    flex:1;
  }

  .billing-v4-plans{
    grid-template-columns:1fr;
  }

  .billing-v4-card.popular{
    order:-1;
    margin-top:10px;
  }

  .billing-v4-section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .billing-v4-section-head p{
    text-align:left;
  }

  .billing-v4-features{
    grid-template-columns:1fr 1fr;
  }

  .billing-v4-topups{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .billing-v4-cycle{
    width:100%;
  }

  .billing-v4-cycle button{
    flex:1;
    min-width:0;
  }

  .billing-v4-features{
    grid-template-columns:1fr;
  }

  .billing-v4-topup-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .billing-v4-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* === END BILLING V4 FIX === */

/* =========================================================
   BILLING V4 — LOWER SECTION TYPOGRAPHY IMPROVEMENT
   ========================================================= */

.billing-v4-section-head small,
.billing-v4-topups > div > small {
  font-size: 10px !important;
  letter-spacing: .13em !important;
}

.billing-v4-section-head h3,
.billing-v4-topups h3 {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

.billing-v4-section-head p,
.billing-v4-topups p {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.billing-v4-features div {
  font-size: 13px !important;
  padding: 14px 15px !important;
  line-height: 1.35 !important;
}

.billing-v4-topup strong {
  font-size: 31px !important;
}

.billing-v4-topup small {
  font-size: 11px !important;
}

.billing-v4-topup b {
  font-size: 11px !important;
}

.billing-v4-footer {
  font-size: 11px !important;
}

/* === END LOWER SECTION TYPOGRAPHY IMPROVEMENT === */



/* =========================================================
   BILLING — FOUR EXTRA CREDIT OPTIONS
   ========================================================= */

.billing-v4-topup-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 760px) {
  .billing-v4-topup-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  .billing-v4-topup-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* === END FOUR EXTRA CREDIT OPTIONS === */

/* =========================================================
   BILLING — MINIMAL TOP HEADER
   ========================================================= */

.billing-v4-header-minimal {
  min-height: 54px !important;
  align-items: flex-start !important;
}

.billing-v4-header-spacer {
  flex: 1;
}

.billing-v4-cycle-wrap {
  margin-top: 4px !important;
}

/* === END MINIMAL TOP HEADER === */



/* =========================================================
   SUBSCRIPTION-AWARE BILLING
   ========================================================= */

.billing-current-plan{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  margin:2px 0 18px;
  padding:14px 17px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:13px;

  background:rgba(255,255,255,.025);
}

.billing-current-left{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.billing-current-left small{
  display:block;
  margin-bottom:2px;

  color:#6f7481;

  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.billing-current-left strong{
  display:block;

  color:#e7e8ed;

  font-size:12px;
}

.billing-current-dot{
  color:#4f535e;
}

.billing-plan-live,
.billing-plan-warning{
  padding:5px 8px;

  border-radius:999px;

  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.billing-plan-live{
  background:rgba(65,206,140,.10);
  color:#6bdca4;
}

.billing-plan-warning{
  background:rgba(245,174,74,.11);
  color:#efba70;
}

.billing-current-manage{
  flex:0 0 auto;

  padding:9px 12px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:9px;

  background:rgba(255,255,255,.035);

  color:#aaaeba;

  font-size:10px;
  font-weight:750;
}

.billing-v4-select.current{
  cursor:default;

  border:1px solid rgba(105,221,164,.20);

  background:rgba(68,194,137,.09);

  color:#75dfad;

  box-shadow:none;
}

.billing-v4-select.current:disabled{
  opacity:1;
}

.billing-v4-select.upgrade{
  background:linear-gradient(
    135deg,
    #956dff,
    #714aff
  );

  color:white;
}

.billing-v4-select.downgrade{
  border:1px solid rgba(255,255,255,.08);

  background:rgba(255,255,255,.04);

  color:#a3a7b3;
}

.billing-v4-select.switch{
  border:1px solid rgba(139,92,246,.22);

  background:rgba(139,92,246,.09);

  color:#b9a6ff;
}

@media(max-width:700px){

  .billing-current-plan{
    align-items:flex-start;
    flex-direction:column;
  }

  .billing-current-manage{
    width:100%;
  }

}

/* === END SUBSCRIPTION-AWARE BILLING === */

/* =========================================================
   BILLING — SMALL TEXT SIZE BUMP
   ========================================================= */

.billing-current-left small{
  font-size:10px !important;
  letter-spacing:.14em !important;
}

.billing-current-left strong{
  font-size:15px !important;
}

.billing-plan-live,
.billing-plan-warning{
  font-size:9px !important;
  padding:6px 9px !important;
}

.billing-v4-plans article p{
  font-size:15px !important;
  line-height:1.55 !important;
}

.billing-v4-plans article small{
  font-size:11px !important;
  line-height:1.45 !important;
  letter-spacing:.10em !important;
}

.billing-v4-plans article li,
.billing-v4-plans article .billing-v4-feature{
  font-size:14px !important;
  line-height:1.55 !important;
}

.billing-v4-features div{
  font-size:14px !important;
  line-height:1.45 !important;
  padding:15px 16px !important;
}

.billing-v4-topups p,
.billing-v4-section-head p{
  font-size:15px !important;
  line-height:1.6 !important;
}

.billing-v4-footer{
  font-size:12px !important;
}

/* === END BILLING SMALL TEXT SIZE BUMP === */



/* =========================================================
   BILLING — EXTRA CREDITS PROMINENT V2
   ========================================================= */

.billing-v4-topups{
  margin-top: 22px !important;
  padding: 34px 34px !important;
  grid-template-columns:
    minmax(300px, .85fr)
    minmax(0, 1.7fr) !important;
  gap: 38px !important;
}

.billing-v4-topups > div > small{
  font-size: 11px !important;
  letter-spacing: .16em !important;
}

.billing-v4-topups > div > h3{
  margin: 7px 0 10px !important;
  font-size: 34px !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
}

.billing-v4-topups > div > p{
  max-width: 390px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.billing-v4-topup-grid{
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.billing-v4-topup{
  min-height: 155px !important;
  padding: 22px 16px !important;
  text-align: center !important;
}

.billing-v4-topup > span{
  font-size: 22px !important;
}

.billing-v4-topup strong{
  margin-top: 6px !important;
  font-size: 37px !important;
  line-height: 1 !important;
}

.billing-v4-topup small{
  margin-top: 6px !important;
  font-size: 12px !important;
}

.billing-v4-topup b{
  margin-top: 13px !important;
  font-size: 12px !important;
}

/* Slightly stronger package bullets now that
   the duplicate feature section is removed. */

.billing-v4-card ul{
  gap: 13px !important;
}

.billing-v4-card li{
  font-size: 15px !important;
  line-height: 1.5 !important;
}

@media(max-width:900px){

  .billing-v4-topups{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 27px 22px !important;
  }

  .billing-v4-topup-grid{
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }

}

@media(max-width:520px){

  .billing-v4-topups > div > h3{
    font-size: 29px !important;
  }

  .billing-v4-topup{
    min-height: 135px !important;
  }

  .billing-v4-topup strong{
    font-size: 31px !important;
  }

}

/* === END EXTRA CREDITS PROMINENT V2 === */

/* =========================================================
   BILLING — UNFRAMED TOP-RIGHT CREDITS
   ========================================================= */

.billing-v4-balance{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  padding: 0 !important;
  margin: 0 !important;
  min-width: auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.billing-v4-balance small{
  margin: 0 0 4px 0 !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}

.billing-v4-balance strong{
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.billing-v4-header-right{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

@media (max-width: 640px){
  .billing-v4-balance strong{
    font-size: 21px !important;
  }
}

/* === END UNFRAMED TOP-RIGHT CREDITS === */



/* =========================================================
   FAILED SCENE — CUSTOMER RECOVERY UX
   ========================================================= */

.scene-attention-box{
  display:flex;
  gap:16px;
  align-items:flex-start;

  margin-top:8px;
  padding:18px;

  border:1px solid rgba(255,180,74,.30);
  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      rgba(255,171,64,.095),
      rgba(255,120,80,.045)
    );

  text-align:left;
}

.scene-attention-icon{
  display:grid;
  place-items:center;

  width:36px;
  height:36px;
  flex:0 0 36px;

  border-radius:10px;

  background:rgba(255,178,72,.15);

  color:#ffc16b;

  font-size:20px;
  font-weight:900;
}

.scene-attention-copy{
  flex:1;
  min-width:0;
}

.scene-attention-copy strong{
  display:block;

  color:#fff;

  font-size:17px;
  line-height:1.25;
}

.scene-attention-copy p{
  margin:6px 0 5px;

  color:#d2d4dc;

  font-size:13px;
  line-height:1.5;
}

.scene-attention-copy > span{
  display:block;

  color:#8f94a1;

  font-size:11px;
  line-height:1.45;
}

.scene-attention-cta{
  margin-top:13px;
  padding:10px 14px;

  border:0;
  border-radius:9px;

  background:#f3f0e9;

  color:#111217;

  font-size:12px;
  font-weight:850;
}

.scene-attention-cta:hover{
  background:white;
}

.scene-card-needs-attention{
  border-color:rgba(255,177,72,.55) !important;

  box-shadow:
    0 0 0 1px rgba(255,177,72,.10),
    0 18px 45px rgba(0,0,0,.20);
}

.scene-card-needs-attention .scene-preview{
  background:
    linear-gradient(
      135deg,
      rgba(255,177,72,.08),
      rgba(7,8,12,.96)
    );
}

.scene-card-needs-attention .mini-status{
  color:#ffc16b !important;
  font-weight:800;
}

.failed-scene-regen{
  background:#f3f0e9 !important;
  color:#111217 !important;

  font-weight:850 !important;
}

.scene-attention-pulse{
  animation:
    failedScenePulse 1s ease-in-out 2;
}

@keyframes failedScenePulse{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,177,72,.10);
  }

  50%{
    box-shadow:
      0 0 0 4px rgba(255,177,72,.28),
      0 0 36px rgba(255,177,72,.16);
  }
}

@media(max-width:650px){

  .scene-attention-box{
    padding:15px;
  }

  .scene-attention-copy strong{
    font-size:16px;
  }

  .scene-attention-cta{
    width:100%;
  }

}

/* === END FAILED SCENE CUSTOMER RECOVERY UX === */

/* RENDER FILM OVERLAY */
.render-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.render-overlay.hidden{
  display:none;
}

.render-box{
  background:#111827;
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  padding:40px;
  text-align:center;
  color:white;
  width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.film-spinner{
  font-size:60px;
  animation:filmPulse 1.2s infinite ease-in-out;
}

.render-box h2{
  margin:20px 0 10px;
}

.render-box p{
  opacity:.75;
}

.render-dots{
  margin-top:20px;
}

.render-dots span{
  display:inline-block;
  width:10px;
  height:10px;
  margin:0 5px;
  background:white;
  border-radius:50%;
  animation:dotBounce 1.2s infinite;
}

.render-dots span:nth-child(2){
  animation-delay:.2s;
}

.render-dots span:nth-child(3){
  animation-delay:.4s;
}

@keyframes filmPulse{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.15);
  }
}

@keyframes dotBounce{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-8px);
  }
}


.animation-box{
  border:1px solid rgba(120,90,255,.5);
  background:
    radial-gradient(circle at top,
    rgba(120,90,255,.25),
    transparent 60%),
    #111827;
}

.animation-spinner{
  font-size:70px;
  animation:
    filmPulse 1.2s infinite ease-in-out,
    glowPulse 2s infinite;
}

@keyframes glowPulse{
  0%,100%{
    filter:drop-shadow(0 0 10px #8b5cf6);
  }
  50%{
    filter:drop-shadow(0 0 35px #22d3ee);
  }
}



/* =========================================================
   PREMIUM OVERLAY REDESIGN
   ========================================================= */

.render-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(82,163,255,.18), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(109,92,255,.18), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(0,224,255,.12), transparent 30%),
    rgba(6,10,20,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.render-overlay.hidden{
  display:none !important;
}

.render-box-premium{
  width: min(520px, 92vw);
  padding: 34px 30px 26px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(18,25,48,.96), rgba(8,13,28,.96));
  box-shadow:
    0 25px 80px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(111,153,255,.06);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.render-box-premium::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(
    135deg,
    rgba(120,180,255,.55),
    rgba(125,105,255,.35),
    rgba(70,235,255,.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

.render-box-premium::after{
  content:"";
  position:absolute;
  top:-120px;
  left:-80px;
  width:260px;
  height:260px;
  background: radial-gradient(circle, rgba(115,175,255,.22), transparent 70%);
  pointer-events:none;
}

.premium-orb-stack{
  width: 116px;
  height: 116px;
  margin: 0 auto 22px;
  position: relative;
}

.premium-ring{
  position:absolute;
  inset:6px;
  border-radius:50%;
  border: 1px solid rgba(130,188,255,.35);
  box-shadow:
    0 0 18px rgba(86,180,255,.28),
    inset 0 0 18px rgba(86,180,255,.18);
  animation: premiumSpin 4.8s linear infinite;
}

.premium-core{
  position:absolute;
  top:50%;
  left:50%;
  width:26px;
  height:26px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #ffffff, #98dcff 36%, #5aa7ff 65%, #4d69ff 100%);
  box-shadow:
    0 0 24px rgba(107,189,255,.85),
    0 0 48px rgba(93,109,255,.35);
  animation: premiumPulse 1.8s ease-in-out infinite;
}

.premium-orb{
  position:absolute;
  border-radius:50%;
  filter: blur(.2px);
}

.orb-a{
  width:16px;
  height:16px;
  top:10px;
  left:50%;
  margin-left:-8px;
  background: radial-gradient(circle at 30% 30%, #fff, #8fd7ff 45%, #4d7fff 100%);
  box-shadow: 0 0 18px rgba(96,184,255,.7);
  animation: orbitA 2.8s linear infinite;
}

.orb-b{
  width:12px;
  height:12px;
  top:50%;
  left:12px;
  margin-top:-6px;
  background: radial-gradient(circle at 30% 30%, #fff, #7af0ff 45%, #3fa0ff 100%);
  box-shadow: 0 0 16px rgba(93,235,255,.65);
  animation: orbitB 3.6s linear infinite reverse;
}

.orb-c{
  width:14px;
  height:14px;
  bottom:12px;
  right:14px;
  background: radial-gradient(circle at 30% 30%, #fff, #beb4ff 45%, #6d5cff 100%);
  box-shadow: 0 0 18px rgba(131,111,255,.68);
  animation: orbitC 3.2s linear infinite;
}

.render-box-premium h2{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#f5f9ff;
}

.render-box-premium p{
  margin:0 auto 18px;
  max-width:420px;
  font-size:15px;
  line-height:1.55;
  color:rgba(229,238,255,.82);
}

.premium-status-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(230,240,255,.88);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
}

.premium-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: linear-gradient(180deg, #94f7ff, #51bfff);
  box-shadow:
    0 0 12px rgba(103,228,255,.9),
    0 0 24px rgba(103,228,255,.45);
  animation: premiumBlink 1.2s ease-in-out infinite;
}

@keyframes premiumSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes premiumPulse{
  0%,100%{
    transform:translate(-50%,-50%) scale(1);
    box-shadow:
      0 0 24px rgba(107,189,255,.85),
      0 0 48px rgba(93,109,255,.35);
  }
  50%{
    transform:translate(-50%,-50%) scale(1.14);
    box-shadow:
      0 0 32px rgba(125,214,255,.95),
      0 0 62px rgba(109,92,255,.45);
  }
}

@keyframes premiumBlink{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(.82); }
}

@keyframes orbitA{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(28px,18px); }
  50%{ transform: translate(0,40px); }
  75%{ transform: translate(-28px,18px); }
  100%{ transform: translate(0,0); }
}

@keyframes orbitB{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(22px,-24px); }
  50%{ transform: translate(48px,0); }
  75%{ transform: translate(22px,24px); }
  100%{ transform: translate(0,0); }
}

@keyframes orbitC{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-22px,-18px); }
  50%{ transform: translate(-40px,-2px); }
  75%{ transform: translate(-18px,18px); }
  100%{ transform: translate(0,0); }
}

.metadata-free-note{
  margin: 8px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(210,225,255,.82);
}

.metadata-free-note{
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  color:rgba(210,225,255,.85);
}

.metadata-free-note{
    margin-top:10px;
    font-size:13px;
    font-weight:600;
    color:rgba(210,225,255,.85);
}


.metadata-free-note{
    margin-top:10px;
    font-size:13px;
    font-weight:600;
    color:rgba(210,225,255,.85);
}



/* METADATA FREE BADGE OVERRIDE */
.youtube-metadata-head .metadata-free-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0;
  margin-left:14px;
  padding:10px 18px;
  min-width:88px;
  border-radius:999px;
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  color:#ffffff;
  background:linear-gradient(135deg,#7c5cff 0%, #4da8ff 100%);
  box-shadow:0 0 18px rgba(124,92,255,.35);
  text-transform:uppercase;
  white-space:nowrap;
}


/* =========================================================
   REAL RENDER PROGRESS V1
   ========================================================= */

.render-progress-wrap{
  width:100%;
  margin:22px 0 18px;
  text-align:left;
}

.render-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  font-size:13px;
  color:rgba(229,238,255,.82);
}

.render-progress-head strong{
  color:#ffffff;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}

.render-progress-track{
  width:100%;
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.35);
}

.render-progress-fill{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    #556cff,
    #7f69ff,
    #49caff
  );
  box-shadow:
    0 0 16px rgba(92,130,255,.55),
    0 0 28px rgba(73,202,255,.22);
  transition:width .45s ease;
}



/* =========================================================
   PREMIUM SCENE-LOCAL ANIMATION STATUS V1
   ========================================================= */

.scene-preview{
  position:relative;
  overflow:hidden;
}

.scene-animation-state{
  position:absolute;
  inset:0;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;

  padding:24px;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(91,105,255,.20),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      rgba(6,10,24,.76),
      rgba(12,16,35,.86)
    );

  backdrop-filter:
    blur(8px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(8px)
    saturate(135%);

  pointer-events:none;
  overflow:hidden;
}

.scene-animation-state::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;

  border:1px solid
    rgba(143,171,255,.28);

  box-shadow:
    inset 0 0 25px rgba(100,116,255,.08),
    0 0 30px rgba(75,105,255,.12);

  pointer-events:none;
}

.scene-animation-state.is-generating{
  background:
    radial-gradient(
      circle at 45% 40%,
      rgba(70,203,255,.20),
      transparent 42%
    ),
    radial-gradient(
      circle at 65% 55%,
      rgba(126,93,255,.20),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      rgba(5,9,24,.74),
      rgba(12,15,35,.88)
    );
}

.scene-animation-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(79,202,255,.22),
      rgba(113,79,255,.10) 42%,
      transparent 70%
    );

  filter:blur(15px);

  animation:
    sceneAnimationGlow 2.4s
    ease-in-out infinite;
}

.scene-animation-orb{
  position:relative;
  flex:0 0 auto;
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  filter:
    drop-shadow(
      0 0 16px rgba(73,200,255,.55)
    );
}

.scene-animation-orb-core{
  width:15px;
  height:15px;
  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff,
      #79e9ff 35%,
      #7768ff 72%
    );

  box-shadow:
    0 0 12px rgba(121,233,255,.95),
    0 0 28px rgba(113,94,255,.70);

  animation:
    sceneAnimationCore 1.25s
    ease-in-out infinite;
}

.scene-animation-orb-ring{
  position:absolute;
  inset:3px;
  border-radius:50%;

  border:
    1.5px solid
    rgba(133,221,255,.70);

  border-top-color:
    rgba(134,103,255,.95);

  border-right-color:
    transparent;

  box-shadow:
    0 0 15px rgba(92,177,255,.30);

  animation:
    sceneAnimationSpin 1.55s
    linear infinite;
}

.scene-animation-copy{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  gap:5px;

  text-shadow:
    0 2px 18px rgba(0,0,0,.55);
}

.scene-animation-copy strong{
  color:#ffffff;
  font-size:15px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:.01em;
}

.scene-animation-copy span{
  color:rgba(226,236,255,.76);
  font-size:12px;
  line-height:1.35;
}

.scene-animation-shimmer{
  position:absolute;
  top:-40%;
  bottom:-40%;
  left:-45%;
  width:32%;

  transform:
    rotate(14deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035),
      rgba(137,220,255,.17),
      rgba(255,255,255,.035),
      transparent
    );

  filter:blur(2px);

  animation:
    sceneAnimationShimmer 2.8s
    ease-in-out infinite;
}

.scene-animation-state.is-queued
.scene-animation-orb-ring{
  animation-duration:3s;
  opacity:.7;
}

.scene-animation-state.is-queued
.scene-animation-glow{
  opacity:.65;
  animation-duration:3.8s;
}

@keyframes sceneAnimationSpin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes sceneAnimationCore{
  0%,100%{
    transform:scale(.88);
    opacity:.78;
  }

  50%{
    transform:scale(1.12);
    opacity:1;
  }
}

@keyframes sceneAnimationGlow{
  0%,100%{
    transform:
      translate(-50%,-50%)
      scale(.88);
    opacity:.48;
  }

  50%{
    transform:
      translate(-50%,-50%)
      scale(1.18);
    opacity:1;
  }
}

@keyframes sceneAnimationShimmer{
  0%{
    left:-48%;
    opacity:0;
  }

  20%{
    opacity:1;
  }

  72%{
    opacity:.9;
  }

  100%{
    left:118%;
    opacity:0;
  }
}



.auth-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:24px 0 30px;
}

.auth-tab{
  background:none;
  border:0;
  color:#9ca3af;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  padding:4px 0;
}

.auth-tab.active{
  color:#ffffff;
}

.auth-divider{
  color:#555;
  font-size:14px;
}

.forgot-row{
  display:flex;
  justify-content:flex-end;
  margin-top:-8px;
  margin-bottom:18px;
}

.forgot-password{
  color:#9ca3af;
  font-size:13px;
  text-decoration:none;
}

.forgot-password:hover{
  color:#ffffff;
}

.auth-premium-card label{
  margin-bottom:18px;
}

.auth-tagline{
  color:#a1a1aa;
  line-height:1.5;
  margin-bottom:8px;
}


/* ==========================================================
   EMAIL VERIFICATION BONUS
   ========================================================== */

.verification-banner{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
  padding:18px 20px;
  border:1px solid rgba(139,92,246,.38);
  border-radius:16px;
  background:
    radial-gradient(circle at 0% 50%,rgba(139,92,246,.18),transparent 42%),
    linear-gradient(135deg,rgba(26,20,45,.96),rgba(14,15,24,.96));
  box-shadow:0 12px 35px rgba(0,0,0,.18);
}

.verification-banner.hidden{
  display:none;
}

.verification-gift{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:13px;
  background:rgba(139,92,246,.16);
  font-size:24px;
}

.verification-copy{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.verification-copy strong{
  color:#fff;
  font-size:16px;
  font-weight:700;
}

.verification-copy span{
  color:#b8b8c5;
  font-size:14px;
  line-height:1.5;
}

/* ==========================================================
   LARGE BILLING CTA
   ========================================================== */

.billing-hero-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin:0 0 24px;
  padding:28px 30px;
  border:1px solid rgba(139,92,246,.38);
  border-radius:20px;
  background:
    radial-gradient(circle at 15% 50%,rgba(139,92,246,.22),transparent 40%),
    linear-gradient(135deg,rgba(21,18,34,.98),rgba(12,13,20,.98));
  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.billing-hero-copy{
  max-width:700px;
}

.billing-hero-eyebrow{
  margin-bottom:8px;
  color:#a78bfa;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
}

.billing-hero-copy h2{
  margin:0 0 8px;
  color:#fff;
  font-size:24px;
  line-height:1.2;
}

.billing-hero-copy p{
  margin:0;
  color:#aaa8b8;
  font-size:14px;
  line-height:1.55;
}

.billing-hero-button{
  flex:0 0 auto;
  min-width:310px;
  padding:19px 28px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 48%,#9333ea 100%);
  box-shadow:
    0 12px 34px rgba(124,58,237,.34),
    inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.billing-hero-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 40px rgba(124,58,237,.44),
    inset 0 1px 0 rgba(255,255,255,.2);
}

@media (max-width:900px){
  .billing-hero-cta{
    flex-direction:column;
    align-items:stretch;
  }

  .billing-hero-button{
    width:100%;
    min-width:0;
  }
}

.verification-important{
  display:block;
  margin-top:5px;
  color:#ffffff;
  font-weight:800;
  line-height:1.45;
}

/* ==========================================================
   INSUFFICIENT CREDITS
   ========================================================== */

.credits-needed-dialog{
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
}

.credits-needed-dialog::backdrop{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);
}

.credits-needed-card{
  width:min(460px,calc(100vw - 32px));
  padding:30px;
  border:1px solid rgba(139,92,246,.42);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 0%,rgba(139,92,246,.22),transparent 45%),
    #11121a;
  box-shadow:0 25px 80px rgba(0,0,0,.55);
  text-align:center;
}

.credits-needed-icon{
  font-size:34px;
  margin-bottom:10px;
}

.credits-needed-card h2{
  margin:0 0 12px;
  font-size:24px;
}

.credits-needed-card p{
  margin:0;
  color:#b8b8c5;
  font-size:15px;
  line-height:1.6;
}

.credits-needed-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.credits-needed-actions button{
  flex:1;
}

.credits-needed-buy{
  min-height:48px;
  font-weight:800;
}


/* ==========================================================
   PASSWORD RESET
   ========================================================== */

.password-reset-dialog{
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
}

.password-reset-dialog::backdrop{
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(6px);
}

.password-reset-card{
  position:relative;
  width:min(460px,calc(100vw - 32px));
  padding:32px;
  border:1px solid rgba(139,92,246,.38);
  border-radius:22px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(139,92,246,.20),
      transparent 45%
    ),
    #11121a;
  box-shadow:0 28px 90px rgba(0,0,0,.58);
}

.password-reset-x{
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:transparent;
  color:#8f91a3;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.password-reset-x:hover{
  color:#fff;
}

.password-reset-icon{
  font-size:34px;
  text-align:center;
  margin-bottom:10px;
}

.password-reset-card h2{
  margin:0;
  text-align:center;
  font-size:25px;
}

.password-reset-copy{
  margin:10px 0 24px;
  color:#aeb0c0;
  text-align:center;
  line-height:1.55;
}

.password-reset-card label{
  display:block;
  margin-bottom:16px;
}

.password-reset-card input{
  width:100%;
  margin-top:7px;
}

.password-reset-hint{
  margin:-5px 0 16px;
  color:#9698aa;
  font-size:13px;
}

.password-reset-success{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border:1px solid rgba(74,222,128,.25);
  border-radius:14px;
  background:rgba(74,222,128,.07);
  color:#d7fbe4;
  line-height:1.5;
}

.password-reset-success strong{
  font-size:18px;
  color:#fff;
}

.password-reset-success button{
  margin-top:10px;
}


/* ==========================================================
   ACCOUNT PANEL
   ========================================================== */

.account-dialog{
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
}

.account-dialog::backdrop{
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(7px);
}

.account-panel{
  width:min(560px,calc(100vw - 28px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:30px;
  border:1px solid rgba(139,92,246,.32);
  border-radius:22px;
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(124,58,237,.22),
      transparent 38%
    ),
    #11121a;
  box-shadow:
    0 30px 100px rgba(0,0,0,.62);
}

.account-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.account-eyebrow{
  margin-bottom:5px;
  color:#a78bfa;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}

.account-panel-header h2{
  margin:0;
  font-size:28px;
  line-height:1.15;
}

.account-panel-header p{
  margin:8px 0 0;
  color:#9698aa;
  line-height:1.5;
}

.account-close{
  flex:0 0 auto;
  border:0;
  padding:0;
  background:transparent;
  color:#858799;
  font-size:29px;
  line-height:1;
  cursor:pointer;
}

.account-close:hover{
  color:#fff;
}

.account-profile-card{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:25px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

.account-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:50%;
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #4f46e5
    );
  color:#fff;
  font-size:21px;
  font-weight:800;
}

.account-profile-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}

.account-profile-copy strong{
  overflow:hidden;
  color:#fff;
  font-size:17px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.account-profile-copy span{
  overflow:hidden;
  color:#9b9dad;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.account-section{
  margin-top:18px;
  padding:20px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.account-section h3{
  margin:0 0 14px;
  color:#fff;
  font-size:15px;
}

.account-info-grid{
  display:flex;
  flex-direction:column;
}

.account-info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:43px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.account-info-row:last-child{
  border-bottom:0;
}

.account-info-row span{
  color:#8f91a1;
  font-size:14px;
}

.account-info-row strong{
  color:#f5f5f8;
  font-size:14px;
  font-weight:650;
  text-align:right;
  overflow-wrap:anywhere;
}

.account-manage-billing{
  margin-top:15px;
}

.account-password-row > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.account-password-mask{
  letter-spacing:2px;
}

.account-security-note{
  margin:13px 0 0;
  color:#858797;
  font-size:12px;
  line-height:1.55;
}

.account-status-verified{
  color:#86efac !important;
}

.account-status-unverified{
  color:#fbbf24 !important;
}

.account-message{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:18px;
  padding:15px;
  border:1px solid rgba(99,102,241,.28);
  border-radius:13px;
  background:rgba(99,102,241,.08);
  color:#d8d9f3;
  font-size:13px;
  line-height:1.5;
}

.account-message strong{
  color:#fff;
  font-size:14px;
}

.account-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.07);
}

.account-signout-btn{
  min-height:40px;
  padding:0 17px;
  border:1px solid rgba(248,113,113,.25);
  border-radius:10px;
  background:rgba(248,113,113,.07);
  color:#fca5a5;
  font-weight:700;
  cursor:pointer;
}

.account-signout-btn:hover{
  border-color:rgba(248,113,113,.48);
  background:rgba(248,113,113,.12);
  color:#fff;
}

@media(max-width:600px){

  .account-panel{
    padding:22px;
  }

  .account-info-row{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
    padding:11px 0;
  }

  .account-info-row strong{
    text-align:left;
  }

  .account-password-row{
    align-items:flex-start;
  }

}

/* ============================================================
   CUSTOMER SUPPORT LINK
============================================================ */

.support-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
}


/* ============================================================
   AUTH_MODAL_PREMIUM_V1
============================================================ */

#authDialog {
  width: min(760px, calc(100vw - 40px)) !important;
  max-width: 760px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.20), transparent 28%),
    radial-gradient(circle at top left, rgba(85,215,189,.12), transparent 20%),
    linear-gradient(180deg, rgba(14,19,34,.96), rgba(8,12,24,.98)) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  padding: 26px 26px 28px !important;
  overflow: hidden !important;
  position: relative !important;
}

#authDialog::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.02), transparent 40%),
    radial-gradient(circle at 85% 12%, rgba(153,102,255,.18), transparent 16%);
}

#authDialog::backdrop {
  background: rgba(3,7,17,.72) !important;
  backdrop-filter: blur(10px) !important;
}

#authDialog .dialog-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}

#authDialog .dialog-head .eyebrow {
  font-size: 12px !important;
  letter-spacing: .24em !important;
  font-weight: 800 !important;
  color: #a78bfa !important;
  margin-bottom: 10px !important;
}

#authDialog .dialog-head h2 {
  font-size: 46px !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  margin: 0 !important;
  max-width: 520px !important;
}

#authDialog .dialog-head .icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: #fff !important;
  font-size: 24px !important;
}

#authDialog .dialog-head + p {
  position: relative !important;
  z-index: 1 !important;
  margin: 10px 0 22px !important;
  color: #b5bdd2 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  max-width: 560px !important;
}

#authRegisterBtn,
#authModeBtn {
  min-width: 180px !important;
  height: 52px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: #cdd5e8 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all .22s ease !important;
}

#authRegisterBtn.active,
#authModeBtn.active {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 45%, #55d7bd 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 35px rgba(124,58,237,.33) !important;
}

#authRegisterBtn:not(.active):hover,
#authModeBtn:not(.active):hover {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

.auth-benefits {
  position: relative !important;
  z-index: 1 !important;
  margin: 22px 0 18px !important;
  display: grid !important;
  gap: 12px !important;
}

.auth-benefit {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.auth-benefit-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(85,215,189,.18)) !important;
  font-size: 18px !important;
}

.auth-benefit-copy strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-bottom: 3px !important;
}

.auth-benefit-copy small {
  display: block !important;
  color: #aab3c8 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.auth-trust-line {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  color: #97a2bb !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 10px 0 18px !important;
}

#authDialog form {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 8px !important;
}

#authDialog form label {
  display: block !important;
  margin-bottom: 14px !important;
  color: #e2e8f7 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

#authDialog form input,
#authDialog form select,
#authDialog form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 58px !important;
  margin-top: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(7,11,22,.88) !important;
  color: #ffffff !important;
  padding: 0 18px !important;
  font-size: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

#authDialog form input::placeholder {
  color: #6f7a93 !important;
}

#authDialog form input:focus,
#authDialog form select:focus,
#authDialog form textarea:focus {
  outline: none !important;
  border-color: rgba(139,92,246,.80) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.16) !important;
  transform: translateY(-1px) !important;
}

#authDialog form .primary.full,
#authDialog form button.primary.full,
#authDialog form button[type="submit"] {
  width: 100% !important;
  height: 60px !important;
  margin-top: 8px !important;
  border: none !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 45%, #55d7bd 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 18px 40px rgba(124,58,237,.28) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

#authDialog form .primary.full:hover,
#authDialog form button.primary.full:hover,
#authDialog form button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
  box-shadow: 0 20px 46px rgba(124,58,237,.36) !important;
}

#authDialog a,
#authDialog .link {
  color: #b99cff !important;
}

#authDialog .forgot-password,
#authDialog [data-auth-forgot],
#authDialog a[href*="forgot"] {
  color: #b5bdd2 !important;
  font-size: 14px !important;
}

@media (max-width: 760px) {
  #authDialog {
    width: calc(100vw - 24px) !important;
    padding: 22px 18px 22px !important;
    border-radius: 24px !important;
  }

  #authDialog .dialog-head h2 {
    font-size: 34px !important;
  }

  #authDialog .dialog-head + p {
    font-size: 15px !important;
  }

  #authRegisterBtn,
  #authModeBtn {
    min-width: 0 !important;
    width: calc(50% - 4px) !important;
    font-size: 14px !important;
  }

  .auth-trust-line {
    font-size: 12px !important;
  }

  #authDialog form .primary.full,
  #authDialog form button.primary.full,
  #authDialog form button[type="submit"] {
    font-size: 16px !important;
  }
}


/* ============================================================
   AUTH MODAL FINAL FIX
   Prevent chopped bottom buttons and allow scrolling
============================================================ */

#authDialog{
    max-height:90vh;
    overflow:hidden;
}

#authDialog .dialog-card{
    max-height:90vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:35px;
}

#authDialog form{
    padding-bottom:10px;
}

@media(max-height:800px){

    #authDialog .dialog-card{
        max-height:85vh;
    }

}


/* ============================================================
   AUTH MODAL CENTERED POPUP FIX
============================================================ */

#authDialog{
    width:min(560px, 92vw);
    max-height:none;
    overflow:visible;
    margin:auto;
    padding:0;
}

#authDialog::backdrop{
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

#authDialog .dialog-card{
    max-height:none;
    overflow:visible;
    padding:42px;
    border-radius:28px;
}

#authDialog form{
    overflow:visible;
}

@media(max-width:700px){

    #authDialog{
        width:94vw;
    }

    #authDialog .dialog-card{
        padding:28px 22px;
    }

}


/* ============================================================
   STUDIO PROJECT TITLE — STRONGER FUCHSIA -> BLUE GRADIENT
   Targets the main current-project title in the studio card.
   No backend changes. No service restart needed.
============================================================ */
.current-project h1,
.current-project .project-title,
.project-card .project-title,
.project-card h1.project-title,
.project-panel .project-title,
.project-panel h1,
#projectTitle,
[data-project-title]{
  background: linear-gradient(
    90deg,
    #ff2ea6 0%,
    #d94bff 38%,
    #5a8dff 72%,
    #43b8ff 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ============================================================
   CAPTION_BUTTON_PREMIUM_STYLE_V1
   Premium modern controls for Standard + Viral Captions only.
   ============================================================ */

#generateFreeCaptionsBtn,
#generateViralCaptionsBtn,
#downloadFreeCaptionsBtn,
#downloadViralCaptionsBtn {
    position: relative;
    width: 100%;
    min-height: 56px;
    padding: 14px 24px;

    border-radius: 16px !important;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    overflow: hidden;
    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease,
        opacity .22s ease;

    -webkit-tap-highlight-color: transparent;
}


/* ------------------------------------------------------------
   GENERATE / READY BUTTONS
   ------------------------------------------------------------ */

#generateFreeCaptionsBtn,
#generateViralCaptionsBtn {
    color: #fff !important;

    border: 1px solid rgba(190, 132, 255, .55) !important;

    background:
        linear-gradient(
            135deg,
            #7448ff 0%,
            #8e4dff 42%,
            #a83df0 100%
        ) !important;

    box-shadow:
        0 10px 26px rgba(126, 73, 255, .25),
        inset 0 1px 0 rgba(255,255,255,.20);
}


/* Gentle premium highlight */

#generateFreeCaptionsBtn::before,
#generateViralCaptionsBtn::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 15%,
            rgba(255,255,255,.13) 45%,
            transparent 70%
        );

    transform: translateX(-120%);
    transition: transform .55s ease;

    pointer-events: none;
}


/* ------------------------------------------------------------
   DOWNLOAD BUTTONS — GLASS STYLE
   ------------------------------------------------------------ */

#downloadFreeCaptionsBtn,
#downloadViralCaptionsBtn {
    color: rgba(255,255,255,.92) !important;

    border: 1px solid rgba(255,255,255,.13) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.045)
        ) !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

#generateFreeCaptionsBtn:hover:not(:disabled),
#generateViralCaptionsBtn:hover:not(:disabled) {
    transform: translateY(-2px);

    border-color: rgba(216, 174, 255, .78) !important;

    box-shadow:
        0 14px 34px rgba(134, 76, 255, .36),
        0 0 22px rgba(164, 75, 255, .13),
        inset 0 1px 0 rgba(255,255,255,.24);
}


#generateFreeCaptionsBtn:hover:not(:disabled)::before,
#generateViralCaptionsBtn:hover:not(:disabled)::before {
    transform: translateX(120%);
}


#downloadFreeCaptionsBtn:hover:not(:disabled),
#downloadViralCaptionsBtn:hover:not(:disabled) {
    transform: translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.065)
        ) !important;

    border-color: rgba(180, 133, 255, .34) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.27),
        0 0 18px rgba(136, 79, 255, .08),
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* ------------------------------------------------------------
   ACTIVE / CLICK
   ------------------------------------------------------------ */

#generateFreeCaptionsBtn:active:not(:disabled),
#generateViralCaptionsBtn:active:not(:disabled),
#downloadFreeCaptionsBtn:active:not(:disabled),
#downloadViralCaptionsBtn:active:not(:disabled) {
    transform: translateY(0) scale(.99);
}


/* ------------------------------------------------------------
   DISABLED DOWNLOAD
   Keep it elegant instead of a flat gray rectangle.
   ------------------------------------------------------------ */

#downloadFreeCaptionsBtn:disabled,
#downloadViralCaptionsBtn:disabled {
    color: rgba(255,255,255,.30) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.025)
        ) !important;

    border-color: rgba(255,255,255,.065) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

    opacity: .72;
    cursor: not-allowed;
    transform: none !important;
}


/* ------------------------------------------------------------
   BUTTON STACK SPACING
   ------------------------------------------------------------ */

.caption-option-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* Slightly softer styling on compact/mobile screens */

@media (max-width: 720px) {
    #generateFreeCaptionsBtn,
    #generateViralCaptionsBtn,
    #downloadFreeCaptionsBtn,
    #downloadViralCaptionsBtn {
        min-height: 52px;
        border-radius: 15px !important;
        padding: 13px 18px;
    }
}



/* GOLD_GET_CREDITS_CTA_V1 */
#bigBillingBtn.billing-hero-button{
  position:relative;
  overflow:hidden;
  color:#241500 !important;
  font-weight:800;
  background:
    linear-gradient(
      135deg,
      #8f5b00 0%,
      #d89a16 20%,
      #ffe08a 43%,
      #fff4bd 52%,
      #f5bd36 67%,
      #a86a00 100%
    ) !important;
  border:1px solid rgba(255,226,133,.95) !important;
  box-shadow:
    0 0 0 1px rgba(255,199,66,.20),
    0 8px 28px rgba(234,166,28,.32),
    0 0 30px rgba(255,205,73,.20),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.32);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

#bigBillingBtn.billing-hero-button::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-55%;
  width:38%;
  height:180%;
  transform:rotate(20deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.72),
      transparent
    );
  pointer-events:none;
  animation:goldCtaShine 3.6s ease-in-out infinite;
}

#bigBillingBtn.billing-hero-button:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.08) saturate(1.08);
  box-shadow:
    0 0 0 1px rgba(255,226,133,.35),
    0 12px 36px rgba(234,166,28,.42),
    0 0 42px rgba(255,205,73,.28),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

#bigBillingBtn.billing-hero-button:active{
  transform:translateY(0) scale(.995);
}

@keyframes goldCtaShine{
  0%,55%{
    left:-55%;
    opacity:0;
  }
  62%{
    opacity:1;
  }
  78%{
    left:125%;
    opacity:0;
  }
  100%{
    left:125%;
    opacity:0;
  }
}

@media (prefers-reduced-motion:reduce){
  #bigBillingBtn.billing-hero-button::before{
    animation:none;
  }
}


/* GOLD_GET_CREDITS_CTA_SIZE_V2 */
#bigBillingBtn.billing-hero-button{
  min-width:340px;
  min-height:68px;
  padding:18px 34px !important;
  font-size:19px !important;
  line-height:1.2;
  letter-spacing:-0.01em;
  border-radius:15px;
}

@media (max-width:900px){
  #bigBillingBtn.billing-hero-button{
    min-width:0;
    width:100%;
    min-height:64px;
    padding:17px 24px !important;
    font-size:18px !important;
  }
}


/* MOBILE_PROJECTS_BOTTOM_V1
   Desktop remains unchanged.
   Mobile order:
   Main studio content -> Projects -> Storage policy
*/
@media (max-width:900px){

  .shell{
    display:flex !important;
    flex-direction:column !important;
  }

  /* Main studio experience comes first */
  .shell > .main{
    order:1 !important;
    width:100% !important;
  }

  /* Projects area comes after all main content */
  .shell > .sidebar{
    order:2 !important;
    width:100% !important;
    max-width:none !important;
  }

  /*
   * On mobile the large sidebar branding and duplicate
   * New Film button unnecessarily push Welcome downward.
   */
  .shell > .sidebar .imagi777-brand,
  .shell > .sidebar #newProjectBtn{
    display:none !important;
  }

  /* Make the lower Projects section feel intentional */
  .shell > .sidebar .side-heading{
    margin-top:28px !important;
  }
}


/* MOBILE_PROJECTS_NORMAL_FLOW_V2
   Mobile only: remove nested/canvas scrolling from Projects.
   Desktop remains unchanged.
*/
@media (max-width:900px){

  .shell > .sidebar{
    position:static !important;
    top:auto !important;
    left:auto !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;

    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;

    padding-top:12px !important;
    padding-bottom:40px !important;

    overscroll-behavior:auto !important;
  }

  .shell > .sidebar .project-list,
  .shell > .sidebar #projectList{
    position:static !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;

    overscroll-behavior:auto !important;
    -webkit-overflow-scrolling:auto !important;
  }

  .shell > .sidebar .project-storage-policy{
    position:static !important;
    margin-top:28px !important;
  }
}


/* CREATE_FILM_CARD_V2
   Desktop + mobile.
   Reduce dead space and enlarge Create your film CTA.
*/
#emptyState.empty{
  min-height:0 !important;
  height:auto !important;
  justify-content:flex-start !important;
  padding:56px 40px 54px !important;
}

#emptyState .hero-chip{
  margin-top:0 !important;
  margin-bottom:14px !important;
}

#emptyState h2{
  margin:10px 0 20px !important;
}

#emptyState p{
  margin:0 0 30px !important;
}

#emptyState .primary{
  min-width:260px !important;
  min-height:64px !important;
  padding:18px 34px !important;
  font-size:19px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  border-radius:15px !important;
}

@media (max-width:850px){
  #emptyState.empty{
    padding:34px 20px 36px !important;
  }

  #emptyState .primary{
    width:min(100%,320px) !important;
    min-width:0 !important;
  }
}


/* UI_LANGUAGE_SELECTOR_V1 */
.ui-language-select{
  width:auto !important;
  min-width:68px;
  height:34px;
  padding:5px 28px 5px 10px;
  margin:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:#222630;
  color:#fff;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:850px){
  .ui-language-select{
    min-width:72px;
    height:36px;
  }
}


/* UI_LANGUAGE_FLAGS_V1 */
.ui-language-select-native{
  display:none !important;
}

.ui-language-flags{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:#1c2029;
}

.ui-language-flag{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:34px;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  font-size:21px;
  line-height:1;
  cursor:pointer;
  opacity:.58;
  filter:saturate(.75);
  transition:opacity .16s ease,transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}

.ui-language-flag:hover{
  opacity:1;
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
}

.ui-language-flag.active{
  opacity:1;
  filter:saturate(1.15);
  background:rgba(139,92,246,.16);
  border-color:rgba(167,139,250,.70);
  box-shadow:0 0 0 1px rgba(139,92,246,.10),0 0 14px rgba(139,92,246,.18);
}

@media(max-width:850px){
  .ui-language-flags{
    gap:5px;
  }

  .ui-language-flag{
    width:42px;
    height:38px;
    font-size:23px;
  }
}


/* SCENE_ASPECT_PREVIEW_V1 */
.scene-preview.scene-preview-landscape{
  aspect-ratio:16 / 9 !important;
}

.scene-preview.scene-preview-portrait{
  aspect-ratio:9 / 16 !important;
}

.scene-preview.scene-preview-square{
  aspect-ratio:1 / 1 !important;
}

.scene-preview > video,
.scene-preview > img,
.scene-preview .scene-video,
.scene-preview .scene-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* =========================================================
   TWO-SHOT SCENE EDITOR V1
   One semantic scene, two independently editable visual shots.
   ========================================================= */

.scene-two-shot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:10px 10px 0;
}

.scene-shot-slot{
  min-width:0;
}

.scene-shot-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin:0 0 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.78;
}

.scene-shot-slot .scene-preview{
  width:100%;
}

.scene-shot-regenerate{
  width:100%;
  margin-top:7px;
}

@media(max-width:650px){
  .scene-two-shot-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   LARGE TWO-SHOT SCENE EDITOR V2
   Make each shot large enough for proper visual review.
   ========================================================= */

.scene-two-shot-grid{
  grid-template-columns:1fr !important;
  gap:22px !important;
  padding:14px 14px 0 !important;
}

.scene-shot-slot{
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.scene-shot-slot .scene-preview{
  width:100%;
  cursor:zoom-in;
}

.scene-shot-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:9px;
}

.scene-shot-actions .scene-shot-regenerate{
  width:100%;
  margin-top:0;
}

.scene-shot-actions button{
  width:100%;
}

.scene-shot-slot .scene-preview-portrait{
  width:min(100%,520px);
  margin-left:auto;
  margin-right:auto;
}

.scene-shot-slot .scene-preview-square{
  width:min(100%,760px);
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:650px){
  .scene-two-shot-grid{
    padding:10px 8px 0 !important;
    gap:18px !important;
  }

  .scene-shot-actions{
    grid-template-columns:1fr;
    gap:8px;
  }
}


/* =========================================================
   SCENE PREVIEW LIGHTBOX V1
   ========================================================= */

.scene-preview-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
}

.scene-preview-lightbox-media{
  display:block;
  max-width:min(94vw,1500px);
  max-height:90vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 28px 80px rgba(0,0,0,.5);
}

.scene-preview-lightbox-close{
  position:fixed;
  top:18px;
  right:22px;
  z-index:100000;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  background:rgba(255,255,255,.14);
  color:#fff;
}

.scene-preview-lightbox-close:hover{
  background:rgba(255,255,255,.24);
}

@media(max-width:650px){
  .scene-preview-lightbox{
    padding:14px;
  }

  .scene-preview-lightbox-media{
    max-width:96vw;
    max-height:86vh;
  }
}



/* =========================================================
   SUPER ANIMATE BRIDGE V1
   Desktop: Shot A | glowing Super Animate bridge | Shot B
   Mobile: stacked shots with compact horizontal connector.
   ========================================================= */

@media(min-width:651px){

  .scene-two-shot-grid{
    grid-template-columns:
      minmax(0,1fr)
      92px
      minmax(0,1fr)
      !important;
    gap:14px !important;
    align-items:stretch;
  }

  .scene-shot-slot{
    max-width:none !important;
    margin:0 !important;
  }

  .scene-super-animate-bridge{
    display:flex;
    align-items:stretch;
    justify-content:center;
    padding-top:25px;
  }

  .scene-super-animate-button{
    width:100%;
    min-height:100%;
    border:1px solid rgba(255,190,75,.88);
    border-radius:18px;
    padding:18px 8px;
    cursor:pointer;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;

    color:#fff;
    text-align:center;

    background:
      linear-gradient(
        180deg,
        #ffba3d 0%,
        #ff8a1f 40%,
        #f45a12 100%
      );

    box-shadow:
      0 0 18px rgba(255,126,25,.55),
      0 0 42px rgba(255,102,0,.24),
      inset 0 1px 0 rgba(255,255,255,.3);

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      filter .18s ease;
  }

  .scene-super-animate-button:hover{
    transform:translateY(-2px) scale(1.015);
    filter:brightness(1.08);
    box-shadow:
      0 0 24px rgba(255,146,32,.7),
      0 0 54px rgba(255,102,0,.34),
      inset 0 1px 0 rgba(255,255,255,.38);
  }

  .scene-super-title{
    font-size:12px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:.05em;
  }

  .scene-super-pair{
    font-size:22px;
    line-height:1;
    font-weight:900;
  }

  .scene-super-both{
    font-size:9px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.08em;
    opacity:.9;
  }

  .scene-super-price{
    margin-top:3px;
    font-size:15px;
    line-height:1;
    font-weight:900;
  }
}


@media(max-width:650px){

  .scene-two-shot-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .scene-super-animate-bridge{
    display:flex;
    justify-content:center;
    padding:0 8px;
  }

  .scene-super-animate-button{
    width:min(100%,360px);
    min-height:70px;
    border:1px solid rgba(255,190,75,.9);
    border-radius:16px;
    padding:10px 16px;

    display:grid;
    grid-template-columns:auto auto auto auto;
    align-items:center;
    justify-content:center;
    gap:10px;

    cursor:pointer;
    color:#fff;

    background:
      linear-gradient(
        135deg,
        #ffba3d 0%,
        #ff851c 48%,
        #f45112 100%
      );

    box-shadow:
      0 0 18px rgba(255,126,25,.52),
      0 0 34px rgba(255,102,0,.22),
      inset 0 1px 0 rgba(255,255,255,.3);
  }

  .scene-super-title{
    font-size:11px;
    font-weight:900;
    letter-spacing:.035em;
  }

  .scene-super-pair{
    font-size:19px;
    font-weight:900;
  }

  .scene-super-both{
    font-size:9px;
    font-weight:800;
    letter-spacing:.05em;
  }

  .scene-super-price{
    font-size:14px;
    font-weight:900;
  }
}


/* =========================================================
   SUPER ANIMATE BRIDGE V2
   Keep A/B large. Premium horizontal connector between them.
   ========================================================= */

.scene-two-shot-grid{
  grid-template-columns:1fr !important;
  gap:14px !important;
  padding:14px 14px 0 !important;
}

.scene-shot-slot{
  width:100% !important;
  max-width:1100px !important;
  margin:0 auto !important;
}

.scene-super-animate-bridge{
  width:100% !important;
  max-width:1100px !important;
  margin:2px auto !important;
  padding:0 !important;
  display:block !important;
}

.scene-super-animate-button{
  -webkit-appearance:none !important;
  appearance:none !important;

  width:100% !important;
  min-height:64px !important;
  height:auto !important;

  margin:0 !important;
  padding:10px 18px !important;

  border:1px solid rgba(255,190,75,.95) !important;
  border-radius:15px !important;

  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:8px 14px !important;

  cursor:pointer !important;

  color:#fff !important;

  background:
    linear-gradient(
      100deg,
      #ffad32 0%,
      #ff7a18 45%,
      #f45112 100%
    ) !important;

  box-shadow:
    0 0 16px rgba(255,126,25,.42),
    0 7px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.30)
    !important;

  text-align:center !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease
    !important;
}

.scene-super-animate-button:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.07) !important;

  box-shadow:
    0 0 22px rgba(255,132,25,.58),
    0 9px 26px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.38)
    !important;
}

.scene-super-title{
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.055em !important;
  color:#fff !important;
}

.scene-super-pair{
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#fff !important;
}

.scene-super-both{
  font-size:10px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.07em !important;
  color:rgba(255,255,255,.88) !important;
}

.scene-super-price{
  font-size:16px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#fff !important;
  margin:0 !important;
}


@media(max-width:650px){

  .scene-two-shot-grid{
    padding:10px 8px 0 !important;
    gap:13px !important;
  }

  .scene-super-animate-bridge{
    width:100% !important;
    padding:0 !important;
  }

  .scene-super-animate-button{
    width:100% !important;
    min-height:62px !important;
    padding:10px 12px !important;
    gap:7px 10px !important;
    border-radius:14px !important;
  }

  .scene-super-title{
    font-size:11px !important;
  }

  .scene-super-pair{
    font-size:17px !important;
  }

  .scene-super-both{
    font-size:9px !important;
  }

  .scene-super-price{
    font-size:15px !important;
  }
}

/* ANIMATION_FAILURE_UI_V2 */
.animation-failure-notice{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(120,20,20,.92);
  border:1px solid rgba(255,120,120,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  color:#fff;
  pointer-events:none;
}

.animation-failure-notice strong{
  font-size:13px;
  font-weight:800;
}

.animation-failure-notice span{
  font-size:11px;
  opacity:.9;
}