/* MODALS */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.8);
  display:none;align-items:center;justify-content:center;z-index:100;
  backdrop-filter:blur(8px);
}
.overlay.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.modal{
  background:var(--panel);border:1px solid var(--brd2);
  border-radius:14px;padding:24px;width:90%;max-width:350px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(124,58,237,.1);
  animation:modalIn .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-lg{max-width:410px}
@keyframes modalIn{0%{opacity:0;transform:scale(.92) translateY(16px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.m-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.m-title{font-size:15px;font-weight:700;color:var(--tx)}
.m-close{font-size:20px;color:var(--tx4);cursor:pointer;line-height:1;transition:all .15s;background:none;border:none;padding:0;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.m-close:hover{color:var(--tx);background:var(--bg3)}
.fg{margin-bottom:13px}
.fg label{font-size:10px;color:var(--tx4);text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px;font-weight:600}
.fi{
  width:100%;background:var(--bg4);border:1px solid var(--brd2);
  border-radius:8px;padding:10px 13px;font-size:12px;color:var(--tx);
  font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s;
}
.fi:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc3)}
.fi::placeholder{color:var(--tx5)}
.btn-p{
  width:100%;background:linear-gradient(135deg,var(--acc),var(--logo));
  color:#fff;font-size:13px;font-weight:700;padding:11px;
  border-radius:9px;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 16px var(--glow);
}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--glow)}
.btn-s{width:100%;background:transparent;color:var(--tx3);font-size:12px;padding:10px;border-radius:9px;border:1px solid var(--brd2);cursor:pointer;margin-top:9px;transition:all .15s;font-family:var(--font)}
.btn-s:hover{border-color:var(--acc2);color:var(--acc2)}
.form-sw{font-size:11px;color:var(--tx4);text-align:center;margin-top:13px}
.adm-hint{font-size:9px;color:var(--tx5);text-align:center;margin-top:8px}

/* Voice Filter Details */
.vf-dd{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.vf-sel{background:var(--bg4);border:1px solid var(--brd2);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--tx3);width:100%;outline:none;font-family:var(--font)}
.vf-sec{margin-bottom:14px}
.vf-lbl{font-size:11px;font-weight:600;color:var(--tx3);margin-bottom:8px;display:block}
.gender-row{display:flex;border:1px solid var(--brd2);border-radius:9px;overflow:hidden}
.g-opt{flex:1;text-align:center;padding:8px 4px;font-size:11px;cursor:pointer;color:var(--tx3);background:var(--bg4);transition:all .15s;border:none;font-family:var(--font);font-weight:500}
.g-opt.on{background:var(--acc);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:5px 12px;border-radius:99px;border:1px solid var(--brd2);font-size:10px;color:var(--tx3);cursor:pointer;background:transparent;transition:all .15s;font-family:var(--font)}
.chip:hover{border-color:var(--acc2);color:var(--acc2)}
.chip.on{background:var(--bg4);border-color:var(--acc);color:var(--acc2)}
.m-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.btn-rst{font-size:11px;color:var(--tx3);background:transparent;border:1px solid var(--brd2);padding:8px 15px;border-radius:7px;cursor:pointer;font-family:var(--font)}
.btn-apl{font-size:11px;color:#fff;background:var(--acc);border:none;padding:8px 20px;border-radius:7px;cursor:pointer;font-weight:700;font-family:var(--font)}

/* Pro plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.plan{border:1px solid var(--brd2);border-radius:10px;padding:16px}
.plan.ft{border-color:var(--acc);background:#13103a;box-shadow:0 0 0 1px var(--acc3)}
.plan-name{font-size:12px;font-weight:700;color:var(--tx);margin-bottom:5px}
.plan-price{font-size:24px;font-weight:800;color:var(--acc2);margin-bottom:12px}
.plan-price small{font-size:11px;color:var(--tx4);font-weight:400}
.plan-feat{font-size:10px;color:var(--tx3);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.plan-feat i{font-size:13px}
.ok{color:var(--grn)}.no{color:#ef4444}

/* Watch Ad Modal */
.watch-box{
  background:var(--bg3);border:1.5px dashed var(--brd2);border-radius:10px;
  padding:24px;text-align:center;margin-bottom:18px;position:relative;overflow:hidden;
}
.watch-box::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(192,38,211,.05));
  animation:watchGlow 2s ease-in-out infinite alternate;
}
@keyframes watchGlow{0%{opacity:0}100%{opacity:1}}
.watch-count{
  font-size:48px;font-weight:800;color:var(--acc2);margin-bottom:8px;line-height:1;
  text-shadow:0 0 30px var(--acc2);
}
.watch-lbl{font-size:11px;color:var(--tx4)}

/* Toast */
#toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--bg4);border:1px solid var(--brd2);border-radius:10px;
  padding:10px 20px;font-size:12px;color:var(--tx);z-index:200;
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.6);white-space:nowrap;
  transform:translateX(-50%) translateY(8px);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* SPEAKING VISUALIZER */
.speaking-vis{
  display:none;align-items:flex-end;gap:2px;height:20px;margin-left:6px;
}
.speaking-vis.show{display:flex}
.vis-bar{
  width:3px;border-radius:2px;
  background:linear-gradient(to top,var(--acc),var(--acc2));
  animation:visAnim .5s ease-in-out infinite alternate;
}
.vis-bar:nth-child(1){height:6px;animation-delay:0s}
.vis-bar:nth-child(2){height:12px;animation-delay:.08s}
.vis-bar:nth-child(3){height:18px;animation-delay:.16s}
.vis-bar:nth-child(4){height:14px;animation-delay:.24s}
.vis-bar:nth-child(5){height:8px;animation-delay:.32s}
.vis-bar:nth-child(6){height:16px;animation-delay:.4s}
.vis-bar:nth-child(7){height:10px;animation-delay:.48s}
@keyframes visAnim{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}

/* PARTICLE EFFECT */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{
  position:absolute;border-radius:50%;pointer-events:none;
  animation:float linear infinite;
}
@keyframes float{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:.6}
  90%{opacity:.3}
  100%{transform:translateY(-10px) scale(1);opacity:0}
}

/* ANIMATED LOADING */
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.spin-icon{animation:spin 1s linear infinite}

/* CREDITS BADGE */
.crd-badge{
  background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(192,38,211,.15));
  border:1px solid rgba(124,58,237,.3);border-radius:8px;
  padding:5px 11px;display:flex;align-items:center;gap:6px;
}
.crd-badge i{color:#f59e0b;font-size:14px}

/* SECTION DIVIDERS */
.glow-divider{
  border:none;border-top:1px solid var(--border);margin:4px 0;flex-shrink:0;
  position:relative;
}
.glow-divider::after{
  content:'';position:absolute;left:20%;right:20%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc3),transparent);
}