:root{
  --orange-1:#ff9a1f;
  --orange-2:#e85a00;
  --orange-3:#c94500;
  --gold:#ffcc00;
  --ink:#2a1400;
  --panel:rgba(0,0,0,0.16);
  --panel-brd:rgba(255,255,255,0.14);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{
  font-family:'Bricolage Grotesque', sans-serif;
  color:#fff;
  background:linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 55%, var(--orange-3) 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
.grid-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
}
body.shake-mode #app{ animation:pageShake 0.5s infinite; }
@keyframes pageShake{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(-1px,1px); }
  50%{ transform:translate(1px,-1px); }
  75%{ transform:translate(-1px,-1px); }
}

#app{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:36px 18px 60px; }

/* Hero */
.hero{ text-align:center; margin-bottom:26px; animation:fadeUp .6s both; }
.logo{
  font-weight:800; font-size:clamp(48px, 11vw, 84px); line-height:.9;
  letter-spacing:2px; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,0.15);
}
.logo-sub{
  display:block; color:var(--gold); font-size:.28em; letter-spacing:.5em;
  margin-top:.2em; margin-left:.5em; text-shadow:0 2px 0 rgba(0,0,0,0.2);
}
.tagline{ margin-top:12px; color:rgba(255,255,255,0.82); font-size:15px; }

/* Section titles */
.section-title{ text-align:center; font-weight:800; font-size:22px; margin:34px 0 6px;
  text-shadow:0 2px 0 rgba(0,0,0,0.15); }
.section-sub{ text-align:center; color:rgba(255,255,255,0.7); font-size:13px; margin-bottom:14px; }

/* Tutorial */
.tutorial{ margin-bottom:22px; animation:fadeUp .6s .05s both; }
.tut-header{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:rgba(0,0,0,0.28); color:#fff; border:1px solid var(--panel-brd);
  border-radius:12px; padding:14px 18px; font-family:inherit; font-weight:800;
  font-size:15px; cursor:pointer; transition:background .2s;
}
.tut-header:hover{ background:rgba(0,0,0,0.36); }
.chevron{ transition:transform .3s; color:var(--gold); }
.tut-body{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
.tut-card{ background:var(--panel); border:1px solid var(--panel-brd); border-radius:12px; padding:16px; }
.tut-icon{ font-size:26px; margin-bottom:6px; }
.tut-card h4{ font-size:14px; margin-bottom:4px; color:var(--gold); }
.tut-card p{ font-size:12.5px; color:rgba(255,255,255,0.82); line-height:1.35; }

/* Dropzone */
.dropzone{
  background:var(--panel); border:2px dashed rgba(255,255,255,0.4);
  border-radius:18px; padding:34px 20px; text-align:center; cursor:pointer;
  transition:all .2s; animation:fadeUp .6s .1s both;
}
.dropzone:hover{ border-color:var(--gold); background:rgba(0,0,0,0.22); }
.dropzone.drag-over{ border-color:var(--gold); background:rgba(255,204,0,0.12); transform:scale(1.01); }
.dropzone.loaded{ border-style:solid; border-color:var(--gold); }
.dz-icon{ font-size:40px; margin-bottom:8px; }
.dz-title{ font-weight:800; font-size:18px; }
.dz-sub{ color:rgba(255,255,255,0.68); font-size:13px; margin:4px 0 14px; }
.video-info{ margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:12px;
  background:rgba(0,0,0,0.3); border-radius:8px; padding:8px 12px; display:inline-block; }
.vi-name{ color:var(--gold); font-weight:700; }
.vi-dur{ color:rgba(255,255,255,0.7); margin-left:8px; }

/* Buttons */
.btn-gold{
  background:linear-gradient(180deg,#ffd633,#ffb800); color:var(--ink);
  border:none; border-radius:999px; padding:10px 22px; font-family:inherit;
  font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 4px 0 #c98d00;
  transition:transform .1s;
}
.btn-gold:active{ transform:translateY(3px); box-shadow:0 1px 0 #c98d00; }

/* Effects row */
.effect-row{ display:flex; gap:12px; overflow-x:auto; padding:6px 2px 14px;
  scroll-snap-type:x mandatory; animation:fadeUp .6s .15s both; }
.effect-card{
  position:relative; flex:0 0 148px; background:var(--panel);
  border:2px solid var(--panel-brd); border-radius:14px; padding:14px;
  color:#fff; text-align:left; cursor:pointer; font-family:inherit;
  scroll-snap-align:start; transition:all .18s;
}
.effect-card:hover{ transform:translateY(-3px); background:rgba(0,0,0,0.24); }
.effect-card.selected{ border-color:var(--gold); background:rgba(255,204,0,0.12);
  box-shadow:0 0 22px rgba(255,204,0,0.4); }
.check{ position:absolute; top:8px; right:10px; color:var(--gold); font-weight:900; font-size:15px; }
.e-icon{ font-size:26px; margin-bottom:8px; }
.e-name{ font-weight:800; font-size:15px; }
.e-desc{ font-size:11.5px; color:rgba(255,255,255,0.78); margin:5px 0 10px; line-height:1.3; min-height:44px; }
.e-pitch{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
  color:var(--ink); background:var(--gold); border-radius:999px; padding:3px 8px; display:inline-block; }

/* Power */
.power-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; animation:fadeUp .6s .2s both; }
.power-pill{
  background:rgba(0,0,0,0.28); color:#fff; border:1px solid var(--panel-brd);
  border-radius:999px; padding:9px 20px; font-family:'JetBrains Mono',monospace;
  font-weight:700; font-size:14px; cursor:pointer; transition:all .15s;
}
.power-pill:hover{ background:rgba(0,0,0,0.4); }
.power-pill.selected{ background:linear-gradient(180deg,#ffd633,#ffb800); color:var(--ink);
  box-shadow:0 0 18px rgba(255,204,0,0.45); border-color:var(--gold); }

/* Actions */
.action-wrap{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px;
  animation:fadeUp .6s .25s both; }
.btn-generate{
  background:linear-gradient(180deg,#ffd633,#ff9500); color:var(--ink); border:none;
  border-radius:999px; padding:15px 40px; font-family:inherit; font-weight:800;
  font-size:18px; cursor:pointer; box-shadow:0 5px 0 #c96000; transition:transform .1s;
}
.btn-generate:not(:disabled):hover{ filter:brightness(1.05); }
.btn-generate:active:not(:disabled){ transform:translateY(4px); box-shadow:0 1px 0 #c96000; }
.btn-generate:disabled{ opacity:.45; cursor:not-allowed; box-shadow:0 5px 0 rgba(0,0,0,0.2); }
.btn-random{
  background:rgba(0,0,0,0.3); color:#fff; border:1px solid var(--panel-brd);
  border-radius:999px; padding:13px 22px; font-family:inherit; font-weight:800;
  font-size:15px; cursor:pointer; transition:background .15s;
}
.btn-random:hover{ background:rgba(0,0,0,0.42); }

/* Progress */
.progress-wrap{ margin-top:28px; background:var(--panel); border:1px solid var(--panel-brd);
  border-radius:14px; padding:20px; text-align:center; }
.progress-label{ font-weight:800; font-size:16px; margin-bottom:10px; }
.progress-track{ height:14px; background:rgba(0,0,0,0.35); border-radius:999px; overflow:hidden; }
.progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,#ffd633,#ff5500);
  transition:width .2s; box-shadow:0 0 12px var(--gold); }
.progress-status{ margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--gold); }

/* Result */
.result-wrap{ margin-top:28px; text-align:center; }
.result-video{ width:100%; max-width:520px; border-radius:14px; border:2px solid var(--gold);
  box-shadow:0 0 30px rgba(255,204,0,0.35); background:#000; }
.result-stat{ margin:14px 0; font-family:'JetBrains Mono',monospace; font-size:13px;
  color:rgba(255,255,255,0.9); }
.result-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Footer */
.footer{ margin-top:50px; text-align:center; color:rgba(255,255,255,0.6); font-size:12px; }
.footer a{ color:var(--gold); text-decoration:none; font-weight:700; }
.footer a:hover{ text-decoration:underline; }

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(30px);
  background:rgba(0,0,0,0.85); color:#fff; padding:12px 22px; border-radius:999px;
  border:1px solid var(--gold); font-size:13px; font-weight:700; z-index:99;
  opacity:0; transition:all .3s; pointer-events:none; max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Confetti */
.confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:50; overflow:hidden; }
.confetti-piece{ position:absolute; top:-14px; width:10px; height:14px; border-radius:2px;
  animation:confFall linear forwards; }
@keyframes confFall{ to{ transform:translateY(105vh) rotate(720deg); opacity:.2; } }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.hidden{ display:none !important; }

/* Mobile */
@media (max-width:560px){
  .tut-body{ grid-template-columns:1fr; }
  .logo{ font-size:56px; }
  .btn-generate{ width:100%; }
}