/* Zento AI Video — theme
   Direction: a creator's editing-suite at midnight. Deep ink canvas, a single
   electric "scan-line" cyan→magenta accent (the TikTok duotone), one display
   face with tight tracking. The signature is the 9:16 "frame" motif that wraps
   media and progress, echoing the vertical video the tool produces. */

:root{
  --ink:        #0b0b12;
  --ink-2:      #14141f;
  --panel:      #1a1a28;
  --line:       #2a2a3c;
  --text:       #ECECF4;
  --muted:      #8b8ba3;
  --cyan:       #25F4EE;   /* TikTok cyan */
  --magenta:    #FE2C55;   /* TikTok red  */
  --grad:       linear-gradient(135deg, var(--cyan), var(--magenta));
}

body{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(37,244,238,.06), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(254,44,85,.06), transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Tamil","Noto Sans SC",sans-serif;
  letter-spacing:.1px;
  min-height:100vh;
}

/* ---- nav ---- */
.zn-nav{ background:rgba(11,11,18,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.zn-brand{ font-weight:800; letter-spacing:-.5px; color:var(--text)!important; display:flex; align-items:center; gap:.5rem; }
.zn-brand em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.zn-spark{ width:10px;height:18px;border-radius:3px;background:var(--grad); display:inline-block; box-shadow:0 0 14px rgba(37,244,238,.6); }
.zn-lang{ width:auto; background:var(--ink-2); border-color:var(--line); color:var(--text); }
.zn-credit-pill{ border:1px solid var(--line); background:var(--ink-2); padding:.3rem .7rem; border-radius:999px; font-weight:700; font-size:.85rem; }
.zn-credit-pill .bi{ color:var(--cyan); }

/* ---- buttons ---- */
.zn-btn{ background:var(--grad); border:0; color:#0b0b12; font-weight:700; }
.zn-btn:hover{ filter:brightness(1.08); color:#0b0b12; }
.btn-outline-light{ border-color:var(--line); }

/* ---- the 9:16 frame motif ---- */
.zn-frame{
  position:relative; border:1px solid var(--line); border-radius:18px;
  background:var(--panel); overflow:hidden;
}
.zn-frame::before{ /* scan accent on the left edge, vertical like a video rail */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad);
}
.zn-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; }

/* ---- stat tiles ---- */
.zn-stat{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem; }
.zn-stat .v{ font-size:1.9rem; font-weight:800; letter-spacing:-1px; line-height:1; }
.zn-stat .l{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; margin-top:.4rem; }
.zn-stat.accent .v{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- wizard stepper ---- */
.zn-steps{ display:flex; gap:.4rem; flex-wrap:wrap; }
.zn-steps .s{ flex:1; min-width:90px; padding:.5rem .6rem; border-radius:10px; border:1px solid var(--line);
  background:var(--ink-2); font-size:.78rem; color:var(--muted); text-align:center; }
.zn-steps .s.active{ border-color:transparent; background:var(--grad); color:#0b0b12; font-weight:700; }
.zn-steps .s.done{ color:var(--cyan); border-color:var(--cyan); }

/* ---- upload dropzones ---- */
.zn-drop{ border:1.5px dashed var(--line); border-radius:14px; padding:1.6rem; text-align:center;
  cursor:pointer; transition:.15s; background:var(--ink-2); }
.zn-drop:hover{ border-color:var(--cyan); }
.zn-drop img{ max-height:160px; border-radius:10px; }

/* ---- progress ---- */
.zn-progress{ height:10px; border-radius:999px; background:var(--ink-2); overflow:hidden; border:1px solid var(--line); }
.zn-progress > span{ display:block; height:100%; background:var(--grad); transition:width .5s ease; }

/* ---- template grid ---- */
.zn-tpl{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); cursor:pointer; transition:.15s; }
.zn-tpl:hover{ transform:translateY(-3px); border-color:var(--cyan); }
.zn-tpl .cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cyan); }

/* ---- inspiration columns ---- */
.zn-insp h6{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.zn-insp .item{ border-bottom:1px solid var(--line); padding:.45rem 0; font-size:.92rem; }

.zn-muted{ color:var(--muted); }
.form-control,.form-select{ background:var(--ink-2); border-color:var(--line); color:var(--text); }
.form-control:focus,.form-select:focus{ background:var(--ink-2); color:var(--text); border-color:var(--cyan); box-shadow:0 0 0 .2rem rgba(37,244,238,.15); }
.zn-footer{ border-top:1px solid var(--line); padding:1.4rem 0; color:var(--muted); margin-top:3rem; }

@media (prefers-reduced-motion: reduce){ *{ transition:none!important; } }