/* CinEstate Apple design system — product/editor pages */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Playfair+Display:ital,wght@1,500;1,600&display=swap');
:root{--app-bg:#f5f5f7;--app-surface:rgba(255,255,255,.88);--app-solid:#fff;--app-text:#1d1d1f;--app-muted:#6e6e73;--app-line:#d2d2d7;--app-blue:#0071e3;--app-gold:#b18a52;--app-shadow:0 24px 70px rgba(0,0,0,.08)}
html,body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;background:var(--app-bg)!important;color:var(--app-text)!important;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.uh,.hl,.mode-header h2{font-family:'Playfair Display',Georgia,serif!important;font-style:italic}
header{height:58px!important;padding:0 18px!important;background:rgba(255,255,255,.82)!important;border-bottom:1px solid rgba(0,0,0,.08)!important;backdrop-filter:saturate(180%) blur(20px);position:sticky;top:0;z-index:100;box-shadow:0 1px 12px rgba(0,0,0,.03)}
.logo{color:#111!important;font-size:1.45rem!important}.logo-sub{color:#8b8b91!important}.step-dot{background:#d2d2d7!important}.step-dot.active{background:#111!important}.step-dot.done{background:#b18a52!important}
main{max-width:1180px!important;padding:72px 28px 110px!important}
#upload-zone{border:1px dashed #c7c7cc!important;border-radius:28px!important;padding:110px 30px!important;background:rgba(255,255,255,.8)!important;box-shadow:var(--app-shadow)!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s!important}
#upload-zone:hover,#upload-zone.drag{border-color:#111!important;background:#fff!important;transform:translateY(-4px);box-shadow:0 32px 90px rgba(0,0,0,.1)!important}
#upload-zone .ico{color:#111!important;opacity:.22}.uh,#upload-zone h2{color:#111!important;font-size:clamp(2rem,4vw,3.3rem)!important}.us,#upload-zone p{color:#6e6e73!important}
.mode-header h2{color:#111!important}.mode-header p,.sub{color:#6e6e73!important}
.mode-cards{max-width:850px!important;gap:18px}.mode-card{background:#fff!important;border:1px solid #d2d2d7!important;border-radius:24px!important;padding:34px!important;box-shadow:0 10px 35px rgba(0,0,0,.045)!important;transition:transform .3s,box-shadow .3s,border-color .3s!important}.mode-card:hover{border-color:#aaa!important;background:#fff!important;transform:translateY(-5px);box-shadow:0 22px 55px rgba(0,0,0,.09)!important}.mode-card .mc-icon{color:#111!important}.mode-card h3{color:#1d1d1f!important}.mode-card p{color:#6e6e73!important}.mode-card.auto-card{border-color:rgba(177,138,82,.35)!important}.mode-card.auto-card:hover{background:#fffaf2!important;border-color:#b18a52!important}
.sec-bar{border-bottom:1px solid #d2d2d7!important}.sec-title{color:#6e6e73!important}.sec-title strong{color:#1d1d1f!important}.sec-acts{gap:8px}.sec-acts button,.res-sel,.btn-card,.sp-sel,.sp-input{background:#fff!important;border:1px solid #d2d2d7!important;color:#1d1d1f!important;border-radius:999px!important;box-shadow:0 1px 2px rgba(0,0,0,.03)}
#photos-grid{gap:18px!important}.pcard{background:#fff!important;border:1px solid #d2d2d7!important;border-radius:20px!important;box-shadow:0 12px 35px rgba(0,0,0,.055)!important;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .25s!important}.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 55px rgba(0,0,0,.09)!important}.drag-handle{background:#f5f5f7!important;border-bottom:1px solid #e5e5e7!important;color:#8b8b91!important}.drag-handle:hover{background:#eeeef0!important;color:#111!important}.btn-rm{background:rgba(255,255,255,.9)!important;color:#6e6e73!important;border-color:#d2d2d7!important}.btn-rm:hover{background:#111!important;border-color:#111!important}.pcard-body{padding:12px!important}.pcard-name{color:#8b8b91!important}.room-tag{color:#b18a52!important}.fx-sel,.card-sel,.card-text-input{background:#f5f5f7!important;border:1px solid #d2d2d7!important;color:#1d1d1f!important;border-radius:10px!important}.card-label{color:#8b8b91!important}.btn-card:hover{color:#111!important;border-color:#111!important}
.settings-panel{background:#fff!important;border:1px solid #d2d2d7!important;border-radius:22px!important;box-shadow:0 12px 35px rgba(0,0,0,.05)!important}.sp-title,.sp-label{color:#8b8b91!important}.sp-sel,.sp-input{border-radius:12px!important;background:#f5f5f7!important}.toggle-slider{background:#d2d2d7!important}.toggle-switch input:checked+.toggle-slider{background:#111!important}
/* common controls in the editor */
button,.btn-primary,.btn-magic,.dlbtn,.pill,.mode,.msel,.pp{font-family:'DM Sans',sans-serif!important}.btn-primary,.dlbtn{background:#111!important;color:#fff!important;border:0!important;border-radius:999px!important}.btn-magic{background:#fff!important;color:#1d1d1f!important;border:1px solid #d2d2d7!important;border-radius:999px!important}.btn-primary:hover,.dlbtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.16)}
/* Authentication */
.page{background:transparent!important;padding:28px 18px!important}.page .card{max-width:630px!important;background:rgba(255,255,255,.88)!important;border:1px solid #d2d2d7!important;border-radius:30px!important;padding:44px!important;box-shadow:0 30px 90px rgba(0,0,0,.1)!important;backdrop-filter:blur(22px);animation:appleCardIn .7s cubic-bezier(.2,.8,.2,1) both!important}.page .logo{color:#111!important;font-size:2rem!important}.page .tagline{color:#8b8b91!important}.tabs{background:#f5f5f7!important;border-color:#d2d2d7!important;border-radius:16px!important;padding:4px!important}.tab{border-radius:12px!important;color:#6e6e73!important;padding:11px!important;font-size:.92rem!important}.tab.active{background:#fff!important;color:#111!important;box-shadow:0 2px 10px rgba(0,0,0,.08)!important}.field label{color:#6e6e73!important}.field input{background:#f5f5f7!important;border-color:#d2d2d7!important;color:#111!important;border-radius:14px!important;padding:14px 16px!important}.field input:focus{border-color:#111!important;box-shadow:0 0 0 3px rgba(0,0,0,.06)}.forgot{color:#6e6e73!important}.forgot:hover{color:#111!important}.page .btn-primary{background:#111!important;color:#fff!important;border-radius:999px!important;padding:14px!important}.page .btn-magic{background:#fff!important;border-color:#d2d2d7!important;color:#555!important;border-radius:14px!important}.divider{color:#8b8b91!important}.divider:before,.divider:after{background:#d2d2d7!important}.card-footer{color:#8b8b91!important}.card-footer a{color:#111!important}.msg.error{background:#fff2f2!important;border-color:#f0c8c8!important}.msg.success{background:#f0f8f2!important;border-color:#c6e4ce!important}#fb-btn{background:#111!important;color:#fff!important;box-shadow:0 12px 28px rgba(0,0,0,.15)!important}#fb-overlay{background:rgba(0,0,0,.32)!important}#fb-modal{background:#fff!important;border-color:#d2d2d7!important;border-radius:24px!important;box-shadow:0 30px 90px rgba(0,0,0,.2)!important}#fb-modal h3{color:#111!important}#fb-modal p{color:#6e6e73!important}#fb-textarea{background:#f5f5f7!important;border-color:#d2d2d7!important;color:#111!important;border-radius:14px!important}.fb-cancel{background:#f5f5f7!important;border-color:#d2d2d7!important;color:#555!important;border-radius:999px!important}.fb-send{background:#111!important;color:#fff!important;border-radius:999px!important}
@keyframes appleCardIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:640px){.page .card{padding:28px 20px!important;border-radius:24px!important}.page{padding:14px!important}}

/* ─────────────────────────────────────────────────────────────
   CinEstate Product UI — final visual parity with the landing page
   Light, spacious, editorial, premium. Keep product functionality intact.
   ───────────────────────────────────────────────────────────── */
:root{
  --app-bg:#f5f5f7;
  --app-surface:#ffffff;
  --app-surface-soft:rgba(255,255,255,.78);
  --app-text:#1d1d1f;
  --app-muted:#6e6e73;
  --app-subtle:#8b8b91;
  --app-line:#d2d2d7;
  --app-line-soft:#e8e8ed;
  --app-gold:#b18a52;
  --app-gold-soft:#f7f1e7;
  --app-black:#111111;
  --app-shadow:0 25px 80px rgba(0,0,0,.07);
}

html{background:var(--app-bg)!important}
body{
  background:
    radial-gradient(900px 420px at 70% 0%,rgba(255,255,255,.96),transparent 70%),
    var(--app-bg)!important;
  color:var(--app-text)!important;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  letter-spacing:-.012em;
}
button,input,select,textarea{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
h1,h2,h3,.uh,.mode-header h2,#upload-zone h2,#prog-overlay h2,.result-head h2,.modal-fx-name{
  font-family:'Playfair Display',Georgia,serif!important;
  font-style:italic!important;
  letter-spacing:-.035em!important;
}

/* Product header */
header{
  height:68px!important;
  padding:0 18px!important;
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
  backdrop-filter:saturate(180%) blur(24px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(24px)!important;
  box-shadow:0 1px 14px rgba(0,0,0,.025)!important;
}
.logo{color:#111!important;font-size:1.45rem!important}
.logo-sub{color:#8b8b91!important;font-size:.74rem!important;letter-spacing:.17em!important}
.step-trail{gap:7px!important}
.step-dot{width:7px!important;height:7px!important;background:#d2d2d7!important;transition:transform .25s,background .25s!important}
.step-dot.active{background:#111!important;transform:scale(1.25)}
.step-dot.done{background:#b18a52!important}

/* Main canvas */
main{max-width:1180px!important;margin:0 auto!important;padding:70px 28px 110px!important}

/* Upload / empty state */
#upload-zone{
  min-height:420px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px dashed #c8c8cd!important;
  border-radius:30px!important;
  padding:80px 32px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.055)!important;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s,background .3s!important;
}
#upload-zone:hover,#upload-zone.drag{
  border-color:#aaa!important;background:#fff!important;transform:translateY(-5px)!important;
  box-shadow:0 38px 100px rgba(0,0,0,.09)!important;
}
#upload-zone .ico{color:#111!important;opacity:.2!important;font-size:2.8rem!important;margin-bottom:1.1rem!important}
#upload-zone h2{color:#111!important;font-size:clamp(2.2rem,4.2vw,3.8rem)!important;line-height:1.04!important;margin-bottom:.8rem!important}
#upload-zone p{color:#6e6e73!important;font-size:.98rem!important}

/* Mode selection */
.mode-header{text-align:center!important;margin-bottom:2.6rem!important}
.mode-header h2{color:#111!important;font-size:clamp(2rem,3.5vw,3rem)!important}
.mode-header p{color:#6e6e73!important}
.thumb-strip{padding:.5rem 0 1.5rem!important;scrollbar-color:#c8c8cd transparent!important}
.thumb-strip img{height:78px!important;border-radius:12px!important;border:1px solid #d2d2d7!important}
.res-row label,.sec-title,.sp-label{color:#8b8b91!important}
.res-sel,.sp-sel,.sp-input{background:#fff!important;color:#1d1d1f!important;border:1px solid #d2d2d7!important;border-radius:12px!important}
.mode-cards{gap:18px!important}
.mode-card{
  background:#fff!important;border:1px solid #d2d2d7!important;border-radius:24px!important;
  padding:36px 32px!important;box-shadow:0 12px 38px rgba(0,0,0,.045)!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s!important;
}
.mode-card:hover{background:#fff!important;border-color:#aaa!important;transform:translateY(-6px)!important;box-shadow:0 25px 65px rgba(0,0,0,.09)!important}
.mode-card .mc-icon{color:#111!important}.mode-card h3{color:#1d1d1f!important}.mode-card p{color:#6e6e73!important}
.mode-card.auto-card{border-color:rgba(177,138,82,.35)!important}.mode-card.auto-card:hover{border-color:#b18a52!important;background:#fffaf3!important}

/* Manual editor */
.sec-bar{padding-bottom:16px!important;border-bottom:1px solid #d2d2d7!important}
.sec-title{font-size:.82rem!important;letter-spacing:.08em!important}
.sec-acts{gap:8px!important}
.sec-acts button,.btn-ghost,.btn-card,.btn-sm{
  border-radius:999px!important;background:#fff!important;border:1px solid #d2d2d7!important;color:#1d1d1f!important;
  transition:transform .25s,box-shadow .25s,border-color .2s!important;
}
.sec-acts button:hover,.btn-ghost:hover,.btn-card:hover{border-color:#aaa!important;transform:translateY(-1px)!important;box-shadow:0 6px 18px rgba(0,0,0,.06)!important;color:#111!important}
.btn-ai{
  background:var(--app-gold-soft)!important;color:#9b753f!important;border:1px solid rgba(177,138,82,.28)!important;
  border-radius:999px!important;
}
#photos-grid{gap:18px!important}
.pcard{
  background:#fff!important;border:1px solid #d2d2d7!important;border-radius:20px!important;
  box-shadow:0 12px 35px rgba(0,0,0,.05)!important;overflow:hidden!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s!important;
}
.pcard:hover{transform:translateY(-4px)!important;box-shadow:0 25px 60px rgba(0,0,0,.09)!important;border-color:#bcbcc1!important}
.drag-handle{background:#f5f5f7!important;border-bottom:1px solid #e5e5e7!important;color:#8b8b91!important}
.drag-handle:hover{background:#ededf0!important;color:#111!important}
.btn-rm{background:rgba(255,255,255,.92)!important;color:#6e6e73!important;border-color:#d2d2d7!important;box-shadow:0 3px 10px rgba(0,0,0,.08)!important}
.pcard-body{padding:13px!important}.pcard-name{color:#8b8b91!important}.room-tag{color:#a27b45!important}
.fx-sel,.card-sel,.card-text-input{background:#f7f7f8!important;border:1px solid #d2d2d7!important;color:#1d1d1f!important;border-radius:10px!important}
.fx-sel:focus,.card-sel:focus,.card-text-input:focus,.sp-sel:focus,.sp-input:focus{border-color:#111!important;box-shadow:0 0 0 3px rgba(0,0,0,.045)!important}
.card-label{color:#8b8b91!important}.btn-card{background:#f7f7f8!important;color:#6e6e73!important}
.settings-panel{background:rgba(255,255,255,.9)!important;border:1px solid #d2d2d7!important;border-radius:24px!important;box-shadow:0 15px 45px rgba(0,0,0,.045)!important}
.sp-title{color:#8b8b91!important}.sp-divider{border-color:#e5e5e7!important}
.toggle-slider{background:#d2d2d7!important}.toggle-switch input:checked+.toggle-slider{background:#111!important}
.action-bar{margin-top:22px!important}.total-info{color:#8b8b91!important}
.btn,.btn-primary,.dlbtn{border-radius:999px!important}
.btn-primary,.dlbtn{background:#111!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,0,0,.12)!important}
.btn-primary:hover,.dlbtn:hover{background:#000!important;transform:translateY(-2px)!important;box-shadow:0 15px 32px rgba(0,0,0,.16)!important}

/* Rendering overlay: same light editorial environment as landing page */
#prog-overlay{
  background:rgba(245,245,247,.92)!important;
  backdrop-filter:blur(24px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(120%)!important;
  gap:18px!important;
}
#prog-overlay h2{color:#111!important;font-size:clamp(1.8rem,3vw,2.5rem)!important}
#prev-wrap{
  background:#000!important;border:1px solid #d2d2d7!important;border-radius:24px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.16)!important;overflow:hidden!important;
}
.prog-bg{background:#e5e5e7!important;border:0!important;border-radius:99px!important;height:3px!important}
.prog-fill{background:#111!important;border-radius:99px!important}
.prog-meta{color:#6e6e73!important}
.shot-lbl{color:rgba(255,255,255,.58)!important}

/* Result / finished video */
#s-result{
  margin-top:2.5rem!important;background:#fff!important;border:1px solid #d2d2d7!important;
  border-radius:26px!important;overflow:hidden!important;box-shadow:0 20px 65px rgba(0,0,0,.07)!important;
}
.result-head{padding:22px 28px 18px!important;border-bottom:1px solid #e5e5e7!important}
.result-head h2{color:#111!important;font-size:clamp(1.55rem,2.5vw,2rem)!important}
.result-head small{color:#6e6e73!important}
.result-actions{padding:16px 28px!important;border-top:1px solid #e5e5e7!important;background:#fff!important}
.fmt-note{color:#8b8b91!important}.fmt-note a{color:#111!important}
.btn-tiktok{background:#111!important;border:0!important;border-radius:999px!important;padding:.68rem 1.25rem!important}

/* Preview modal */
#modal-preview{background:rgba(245,245,247,.9)!important;backdrop-filter:blur(25px)!important}
#modal-canvas{border:1px solid #d2d2d7!important;border-radius:18px!important;box-shadow:0 30px 90px rgba(0,0,0,.18)!important}
.modal-fx-name{color:#111!important}.badge{background:#fff!important;border:1px solid #d2d2d7!important;color:#6e6e73!important;border-radius:999px!important}
.modal-close-hint{color:#8b8b91!important}

/* Smooth page transitions and control feedback */
#s-upload,#s-mode,#s-manual,#s-result{animation:appleSectionIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes appleSectionIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:800px){
  main{padding:42px 16px 80px!important}
  header{padding:0 12px!important}.logo-sub{display:none!important}
  #upload-zone{min-height:340px!important;padding:60px 20px!important;border-radius:24px!important}
  #photos-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .pcard{border-radius:16px!important}.settings-panel{border-radius:18px!important;padding:18px!important}
  .result-head,.result-actions{padding-left:18px!important;padding-right:18px!important}
}
@media(max-width:560px){
  #photos-grid{grid-template-columns:1fr!important}
  .mode-cards{grid-template-columns:1fr!important}
  #prev-wrap{max-width:calc(100vw - 32px)!important;max-height:72vh!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Unified CinEstate typography: same family and hierarchy as the public site */
body,button,input,textarea,select{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
h1,h2,h3,.uh,.hl,.mode-header h2,.logo,.rh,.mname,.fn{
  font-family:'Playfair Display',Georgia,serif!important;
  font-style:italic!important;
}