/* =========================================================
   AI Video Maker — Stylesheet
   Design is unchanged from the original single-file version.
   ========================================================= */

:root{
  --bg:#090a14; --bg-2:#0f1120; --panel:rgba(255,255,255,0.045); --panel-border:rgba(255,255,255,0.09);
  --violet:#8b5cf6; --cyan:#22d3ee; --pink:#f472b6; --text:#eef1f8; --text-dim:#9aa0b4; --text-dim2:#6b7086;
  --glow: 0 0 40px rgba(139,92,246,0.35);
}
[data-theme="light"]{
  --bg:#f4f5fb; --bg-2:#ffffff; --panel:rgba(20,20,40,0.035); --panel-border:rgba(20,20,40,0.09);
  --text:#14152a; --text-dim:#565b74; --text-dim2:#888ca3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',sans-serif; color:var(--text); min-height:100vh;
  background:
    radial-gradient(ellipse 800px 500px at 15% -5%, rgba(139,92,246,0.25), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(34,211,238,0.18), transparent 60%),
    radial-gradient(ellipse 600px 400px at 50% 100%, rgba(244,114,182,0.12), transparent 60%),
    var(--bg);
  transition:background-color .3s, color .3s;
}
.wrap{max-width:1180px; margin:0 auto; padding:28px 24px 90px;}
.display{font-family:'Space Grotesk',sans-serif;}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:56px;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:600; font-size:18px;}
.logo .dot{width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,var(--violet),var(--cyan)); box-shadow:0 0 22px rgba(139,92,246,.6); display:flex; align-items:center; justify-content:center; font-size:14px;}
.theme-toggle{width:46px; height:26px; border-radius:20px; background:var(--panel); border:1px solid var(--panel-border); cursor:pointer; position:relative;}
.theme-toggle::after{content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--cyan)); transition:transform .25s;}
[data-theme="light"] .theme-toggle::after{transform:translateX(20px);}
.hero{text-align:center; margin-bottom:54px;}
.eyebrow{display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); background:rgba(34,211,238,0.1); border:1px solid rgba(34,211,238,0.25); padding:6px 14px; border-radius:20px; margin-bottom:22px;}
.hero h1{font-family:'Space Grotesk'; font-weight:700; font-size:clamp(38px,6vw,64px); line-height:1.05; letter-spacing:-.02em;
  background:linear-gradient(120deg,#fff 10%,var(--violet) 60%,var(--cyan) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
[data-theme="light"] .hero h1{background:linear-gradient(120deg,#14152a 10%,var(--violet) 60%,#0891b2 100%); -webkit-background-clip:text; background-clip:text;}
.hero p{color:var(--text-dim); font-size:18px; margin-top:16px; max-width:560px; margin-left:auto; margin-right:auto;}
.upload-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px;}
@media(max-width:760px){.upload-grid{grid-template-columns:1fr;}}
.panel{background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);}
.dropzone{padding:32px 24px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; position:relative;}
.dropzone.drag{border-color:var(--violet); background:rgba(139,92,246,.08);}
.dz-icon{width:52px; height:52px; margin:0 auto 14px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(34,211,238,.2)); border:1px solid rgba(255,255,255,.1);}
.dz-title{font-weight:600; font-size:16px; margin-bottom:4px;}
.dz-sub{color:var(--text-dim2); font-size:12.5px;}
input[type=file]{display:none;}
.img-strip{display:flex; flex-wrap:wrap; gap:10px; padding:0 20px 20px; margin-top:-4px;}
.img-card{width:76px; height:76px; border-radius:12px; overflow:hidden; position:relative; border:1px solid var(--panel-border); cursor:grab; flex-shrink:0;}
.img-card img{width:100%; height:100%; object-fit:cover; display:block;}
.img-card .rm{position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; border:none; font-size:11px; line-height:18px; cursor:pointer;}
.img-card .num{position:absolute; bottom:2px; left:3px; font-size:9px; background:rgba(0,0,0,.6); color:#fff; padding:1px 5px; border-radius:8px;}
.img-card.dragover{outline:2px solid var(--cyan);}
.audio-box{padding:20px; display:none;}
.audio-box.show{display:block;}
.audio-meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-dim); margin-bottom:10px;}
audio{width:100%; height:34px;}
.replace-btn{margin-top:10px; font-size:12.5px; background:none; border:1px solid var(--panel-border); color:var(--text-dim); padding:6px 12px; border-radius:8px; cursor:pointer;}
.settings-panel{padding:26px; margin-bottom:24px;}
.settings-title{font-family:'Space Grotesk'; font-weight:600; font-size:17px; margin-bottom:20px; display:flex; align-items:center; gap:8px;}
.settings-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px 26px;}
@media(max-width:900px){.settings-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.settings-grid{grid-template-columns:1fr;}}
.field label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em;}
.seg{display:flex; background:rgba(255,255,255,.04); border:1px solid var(--panel-border); border-radius:10px; padding:3px; flex-wrap:wrap;}
.seg button{flex:1; min-width:44px; border:none; background:transparent; color:var(--text-dim); padding:7px 6px; font-size:12.5px; border-radius:7px; cursor:pointer; transition:.15s;}
.seg button.active{background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#fff; font-weight:600;}
.field select{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--panel-border); color:var(--text); padding:9px 10px; border-radius:9px; font-size:13.5px;}
.field input[type=range]{width:100%; accent-color:var(--violet);}
.range-val{color:var(--cyan); font-weight:600;}
.field input[type=color]{width:100%; height:34px; border:1px solid var(--panel-border); border-radius:9px; background:none; cursor:pointer;}
.switch-row{display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.04); border:1px solid var(--panel-border); border-radius:9px; padding:8px 12px; height:34px;}
.switch-row span{font-size:13px;}
.toggle{width:38px; height:20px; border-radius:12px; background:rgba(255,255,255,.15); position:relative; cursor:pointer; flex-shrink:0;}
.toggle.on{background:linear-gradient(135deg,var(--violet),var(--cyan));}
.toggle::after{content:''; position:absolute; width:16px; height:16px; background:#fff; border-radius:50%; top:2px; left:2px; transition:.2s;}
.toggle.on::after{transform:translateX(18px);}
.gen-wrap{text-align:center; margin:36px 0;}
.gen-btn{font-family:'Space Grotesk'; font-weight:600; font-size:17px; color:#fff; border:none; padding:18px 52px; border-radius:16px; cursor:pointer;
  background:linear-gradient(135deg,var(--violet),var(--pink) 55%,var(--cyan)); box-shadow:0 8px 40px rgba(139,92,246,.45); transition:transform .15s;}
.gen-btn:hover{transform:translateY(-2px);}
.gen-btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.progress-panel{padding:28px; margin:0 0 24px; display:none;}
.progress-panel.show{display:block;}
.steps{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;}
.step{font-size:12.5px; padding:6px 13px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid var(--panel-border); color:var(--text-dim2); transition:.2s;}
.step.active{background:rgba(139,92,246,.18); border-color:var(--violet); color:var(--text); box-shadow:0 0 16px rgba(139,92,246,.25);}
.step.done{background:rgba(34,211,238,.12); border-color:var(--cyan); color:var(--cyan);}
.bar-track{height:8px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden;}
.bar-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--violet),var(--cyan)); transition:width .25s; box-shadow:0 0 12px rgba(139,92,246,.6);}
.progress-note{margin-top:10px; font-size:12.5px; color:var(--text-dim);}
.result-panel{padding:28px; display:none;}
.result-panel.show{display:block;}
.result-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:26px;}
@media(max-width:820px){.result-grid{grid-template-columns:1fr;}}
video{width:100%; border-radius:14px; background:#000; display:block;}
.dl-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.btn{font-family:'Inter'; font-weight:600; font-size:13.5px; padding:11px 18px; border-radius:11px; cursor:pointer; border:1px solid var(--panel-border); background:rgba(255,255,255,.04); color:var(--text); transition:.15s;}
.btn.primary{background:linear-gradient(135deg,var(--violet),var(--cyan)); border:none; color:#fff;}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.seo-box h4{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim2); margin:16px 0 6px;}
.seo-box h4:first-child{margin-top:0;}
.seo-val{background:rgba(255,255,255,.04); border:1px solid var(--panel-border); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.5; position:relative;}
.copy-btn{position:absolute; top:8px; right:8px; font-size:10.5px; background:rgba(255,255,255,.08); border:none; color:var(--text-dim); padding:3px 8px; border-radius:6px; cursor:pointer;}
.tag-chip{display:inline-block; background:rgba(139,92,246,.15); color:var(--violet); border:1px solid rgba(139,92,246,.35); font-size:11.5px; padding:3px 9px; border-radius:14px; margin:2px 4px 2px 0;}
[data-theme="light"] .tag-chip{color:#6d28d9;}
.topic-row{display:flex; gap:8px; margin-bottom:14px;}
.topic-row input{flex:1; background:rgba(255,255,255,.04); border:1px solid var(--panel-border); color:var(--text); padding:9px 12px; border-radius:9px; font-size:13.5px;}
.footer-note{text-align:center; color:var(--text-dim2); font-size:12px; margin-top:60px;}
.hidden{display:none !important;}
.error-note{color:#f87171; font-weight:600;}