@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--r:8px;--tr:all .18s cubic-bezier(.4,0,.2,1)}
html{font-size:15px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Dark-mode FOUC fix: html.dark is set by an early head script BEFORE body renders,
   so first paint is already dark. body.dark CSS rules below take over once body class is set. */
html.dark{background:#0a0a0f;color:#fafafa;color-scheme:dark}
html.dark body{background:#0a0a0f;color:#fafafa}

body{
  -webkit-font-smoothing:antialiased;
  font-family:'Sora',system-ui,sans-serif;
  --bg:#ffffff;--bg2:#f8f8f9;--bg3:#f1f1f3;--bg4:#e8e8ec;
  --border:#e4e4e8;--border2:#cecece;
  --tx:#09090b;--tx2:#52525b;--tx3:#a1a1aa;
  --accent:#ff6b35;--accent2:#ff8c5a;--accent-bg:rgba(255,107,53,.08);
  --hover:#f4f4f6;--active:#ebebef;
  --green:#16a34a;--red:#dc2626;--yellow:#ca8a04;--blue:#2563eb;
  --input-bg:#fff;--input-border:#d4d4d8;
  --sb-bg:#fafafa;--sb-border:#e4e4e8;
  --btn-prim-bg:#09090b;--btn-prim-tx:#ffffff;
  --tag-bg:#f4f4f6;--tag-border:#e4e4e8;--tag-tx:#52525b;
  --tag-on-bg:#09090b;--tag-on-tx:#ffffff;
  --shadow:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 6px 20px rgba(0,0,0,.1);
  --shadow-lg:0 16px 48px rgba(0,0,0,.14);
  background:var(--bg);color:var(--tx);display:flex;min-height:100vh;line-height:1.6;
}
body.dark{
  --bg:#0a0a0f;--bg2:#111117;--bg3:#18181f;--bg4:#1f1f28;
  --border:#242430;--border2:#2e2e3e;
  --tx:#fafafa;--tx2:#a1a1aa;--tx3:#52525b;
  --accent:#ff6b35;--accent2:#ff8c5a;--accent-bg:rgba(255,107,53,.12);
  --hover:#18181f;--active:#1f1f28;
  --green:#22c55e;--red:#ef4444;--yellow:#eab308;--blue:#3b82f6;
  --input-bg:#111117;--input-border:#2e2e3e;
  --sb-bg:#0a0a0f;--sb-border:#18181f;
  --btn-prim-bg:#fafafa;--btn-prim-tx:#09090b;
  --tag-bg:#18181f;--tag-border:#2e2e3e;--tag-tx:#a1a1aa;
  --tag-on-bg:#fafafa;--tag-on-tx:#09090b;
}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
*::-webkit-scrollbar{width:4px;height:4px}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.sb{width:230px;min-height:100vh;background:var(--sb-bg);border-right:1px solid var(--sb-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto;}
.sb-logo{padding:12px 14px 8px;display:flex;align-items:center;gap:10px}

/* ── Professional Logo Mark ───────────────────────────── */
.logo-wrap{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.logo-wrap::before{content:'';position:absolute;inset:-5px;border-radius:15px;background:linear-gradient(135deg,#ff6b35,#ff3366,#8b5cf6);opacity:.3;filter:blur(10px);z-index:-1;animation:logoPulse 3s ease-in-out infinite;pointer-events:none}
@keyframes logoPulse{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:.55;transform:scale(1.08)}}
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#ff6b35 0%,#ff3366 52%,#8b5cf6 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(255,107,53,.45),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;flex-shrink:0}
.logo-mark::after{content:'';position:absolute;top:0;left:-140%;width:75%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);animation:logoShimmer 4s ease-in-out infinite;pointer-events:none}
@keyframes logoShimmer{0%,65%{left:-140%}85%,100%{left:160%}}
.sb-logo:hover .logo-mark,.lnav-logo:hover .logo-mark,.auth-logo:hover .logo-mark{transform:scale(1.1) rotate(-7deg);box-shadow:0 8px 28px rgba(255,107,53,.6)}
.eq-bar{transform-box:fill-box;transform-origin:50% 100%;animation:eqBounce 1s ease-in-out infinite}
.eq-bar:nth-child(1){animation-duration:1.1s;animation-delay:0s}
.eq-bar:nth-child(2){animation-duration:.9s;animation-delay:.18s}
.eq-bar:nth-child(3){animation-duration:1.25s;animation-delay:.07s}
.eq-bar:nth-child(4){animation-duration:1.05s;animation-delay:.3s}
@keyframes eqBounce{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
.logo-wordmark{display:flex;flex-direction:column;justify-content:center;line-height:1}
.logo-wm-main{font-size:14.5px;font-weight:800;letter-spacing:-.04em;color:var(--tx);line-height:1.15}
.logo-wm-main em{font-style:normal;background:linear-gradient(135deg,#ff6b35,#ff3366);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-wm-sub{font-size:9px;color:var(--tx3);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;font-weight:600;opacity:.75}
.sb-nav{padding:2px 6px}
.si{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);font-size:13.5px;font-weight:400;color:var(--tx2);text-decoration:none;transition:var(--tr);margin-bottom:2px;cursor:pointer;border:none;background:none;width:100%;text-align:left;position:relative;}
.si:hover{background:var(--hover);color:var(--tx)}
.si.on{background:var(--accent-bg);color:var(--accent);font-weight:600}
.si.on .si-ic{opacity:1;color:var(--accent)}
.si-ic{width:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.6}
.si-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--accent);color:#fff;margin-left:auto;flex-shrink:0;}
.sb-bot{margin-top:auto;padding:8px 6px 10px;border-top:1px solid var(--border)}

.main{margin-left:230px;flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh}
.topbar{height:52px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;position:sticky;top:0;z-index:50;background:var(--bg);gap:10px;flex-shrink:0;}
.tb-breadcrumb{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;flex:1;color:var(--tx);}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center;transition:var(--tr);position:relative;}
.tb-icon-btn:hover{background:var(--hover);color:var(--tx);border-color:var(--border2)}

/* TTS Elements */
.tts-layout{display:flex;flex-direction:row;flex:1;height:calc(100vh - 52px);overflow:hidden;position:relative}
.tts-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}
.tts-editor{flex:1;padding:32px 40px 16px;overflow-y:auto}
.tts-editor textarea{width:100%;height:100%;min-height:calc(100vh - 280px);background:transparent;border:none;outline:none;resize:none;font-family:'Sora',inherit;font-size:16px;line-height:2;color:var(--tx);}
.tts-sidebar{width:340px!important;flex-shrink:0!important;border-left:1px solid var(--border)!important;border-top:none!important;overflow-y:auto!important;overflow-x:hidden!important;background:var(--bg);}
.tts-settings{padding:0 16px 18px}

.adv-settings-btn { display: none; }
.adv-settings-panel { display: block; }

/* Buttons & Components */
.btn{cursor:pointer;border-radius:var(--r);font-family:'Sora',inherit;font-weight:600;transition:var(--tr);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap;border:1px solid transparent;font-size:13.5px;}
.baccent{background:var(--accent);color:#fff;border-color:var(--accent)}

.hist-row{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--border)}
.hist-ic{width:32px;height:32px;border-radius:9px;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
.hist-info{flex:1;min-width:0}
.hist-voice{font-size:11px;font-weight:700;color:var(--tx2);margin-bottom:2px;text-transform:uppercase}
.hist-text{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.hist-actions{display:flex;gap:7px;align-items:center;flex-shrink:0}

@media(max-width: 768px) {
  .tts-sidebar { width:100%!important; border-left:none!important; border-top:1px solid var(--border)!important; flex:1!important; }
  .tts-layout { flex-direction: column!important; height:auto!important; min-height:calc(100vh - 50px)!important; }
  
  /* Advanced Settings Accordion on Mobile */
  .adv-settings-btn {
      display: flex; align-items: center; justify-content: space-between; width: 100%;
      padding: 12px 14px; margin-top: 16px; margin-bottom: 8px;
      background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
      color: var(--tx); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s;
  }
  .adv-settings-btn:hover { background: var(--hover); }
  .adv-settings-btn svg { color: var(--tx2); transition: transform 0.2s; }
  .adv-settings-btn.open .chevron { transform: rotate(180deg); }
  .adv-settings-panel { 
      display: none; padding: 14px; background: var(--bg2); border: 1px solid var(--border); 
      border-radius: 8px; margin-bottom: 12px;
  }
  .adv-settings-panel.open { display: block; animation: slideDown 0.2s ease-out; }
  @keyframes slideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

  /* History Mobile Fix (Perfect single line) */
  .hist-row { display: flex!important; flex-wrap: nowrap!important; align-items: center!important; gap: 10px!important; padding: 14px 0!important; }
  .hist-ic { width: 34px!important; height: 34px!important; flex-shrink: 0!important; }
  .hist-info { flex: 1!important; min-width: 0!important; overflow: hidden!important; }
  .hist-voice, .hist-text { white-space: nowrap!important; overflow: hidden!important; text-overflow: ellipsis!important; width: 100%!important; display: block!important; }
  .hist-actions { flex-shrink: 0!important; display: flex!important; gap: 6px!important; justify-content: flex-end!important; }
  
  html, body, .main { max-width: 100vw!important; overflow-x: hidden!important; min-width: 0!important; margin-left: 0!important; }
  .sb { width: 0; overflow: hidden; }
  .topbar { padding: 0 12px; height: 50px; }
  .mob-menu-btn { display: flex!important; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; color: var(--tx2); }
}

.tb-breadcrumb{
  display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;flex:1;color:var(--tx);
}
.tb-breadcrumb a{color:var(--tx2);text-decoration:none;transition:var(--tr)}
.tb-breadcrumb a:hover{color:var(--tx)}
.tb-sep{color:var(--tx3)}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-icon-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:transparent;cursor:pointer;color:var(--tx3);
  display:flex;align-items:center;justify-content:center;transition:var(--tr);position:relative;
}
.tb-icon-btn:hover{background:var(--hover);color:var(--tx);border-color:var(--border2)}
/* Account circle in topbar */
.tb-account{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);
  background:var(--bg2);cursor:pointer;color:var(--tx2);
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
  position:relative;flex-shrink:0;font-size:12px;font-weight:700;
}
.tb-account:hover{border-color:var(--accent);color:var(--tx)}
.tb-account:hover .tb-acct-cam{opacity:1}
.tb-account img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Account "dropdown" — actually a centered overlay modal now. The id stays
   .acct-drop so existing show/hide JS keeps working. */
.acct-drop-bd{
  position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;
  background:rgba(5,5,12,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  z-index:9998;display:none;animation:fadeIn .22s ease;
}
.acct-drop-bd.open{display:block}
.acct-drop{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(100% - 32px);max-width:980px;
  height:min(620px, calc(100vh - 64px));
  background:var(--bg2);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  z-index:9999;display:none;padding:0;
  overflow:hidden;animation:acctPop .22s cubic-bezier(.4,0,.2,1);
  flex-direction:column;
}
.acct-drop.open{display:flex}
.acct-body{display:flex;flex:1;min-height:0;overflow:hidden}
.acct-sb{
  width:220px;flex-shrink:0;background:var(--bg3);
  border-right:1px solid var(--border);
  padding:16px 12px;display:flex;flex-direction:column;gap:3px;
  overflow-y:auto;
}
.acct-content{flex:1;min-width:0;overflow-y:auto;padding:6px 0 4px;background:var(--bg2);min-height:0}
@keyframes acctPop{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.acct-drop-close{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;
  border:none;background:transparent;color:var(--tx3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
}
.acct-drop-close:hover{background:var(--hover);color:var(--tx)}
.acct-drop-hdr{padding:22px 22px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
.acct-drop-av{width:52px;height:52px;border-radius:50%;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--accent);flex-shrink:0;overflow:hidden;position:relative}
.acct-drop-av img{width:100%;height:100%;object-fit:cover}
.acct-drop-name{font-size:15px;font-weight:700;color:var(--tx)}
.acct-drop-email{font-size:12px;color:var(--tx3);margin-top:2px}
/* Info rows (WhatsApp number + verified badge) inside the overlay */
.acct-drop-info{padding:14px 22px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.acct-drop-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acct-drop-row-l{display:flex;align-items:center;gap:10px;color:var(--tx2);font-size:12.5px;font-weight:600;min-width:0}
.acct-drop-row-l svg{flex-shrink:0;color:var(--tx3)}
.acct-drop-row-v{font-size:13px;font-weight:600;color:var(--tx);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-drop-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.02em}
.acct-drop-badge.ok{background:rgba(34,197,94,.14);color:#16a34a;border:1px solid rgba(34,197,94,.30)}
.acct-drop-badge.warn{background:rgba(234,179,8,.14);color:#ca8a04;border:1px solid rgba(234,179,8,.30)}
.acct-drop-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.acct-drop-section{padding:10px 12px}
.acct-drop-section-lbl{font-size:10.5px;font-weight:700;color:var(--tx3);padding:6px 12px 8px;text-transform:uppercase;letter-spacing:.08em}
/* ── Vertical sidebar tabs (Profile / Security / Avatar) ── */
.acct-tab{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  font-size:13px;font-weight:600;color:var(--tx2);cursor:pointer;
  border:none;background:none;border-radius:9px;transition:var(--tr);
  font-family:inherit;text-align:left;width:100%;
}
.acct-tab:hover{background:var(--hover);color:var(--tx)}
.acct-tab.active{background:var(--accent-bg);color:var(--accent)}
.acct-tab svg{flex-shrink:0}
.acct-pane{display:none;padding:0}
.acct-pane.active{display:block;animation:fadeIn .18s ease}
.acct-pane-title{font-size:14px;font-weight:700;color:var(--tx);padding:14px 22px 6px;border-bottom:1px solid var(--border)}
.acct-foot{border-top:1px solid var(--border);padding:10px 14px;background:var(--bg3);flex-shrink:0}
@media (max-width: 640px){
  .acct-drop{max-width:calc(100% - 24px);max-height:90vh}
  .acct-body{flex-direction:column}
  .acct-sb{width:100%;flex-direction:row;border-right:none;border-bottom:1px solid var(--border);padding:8px;gap:4px;overflow-x:auto}
  .acct-tab{flex:1;justify-content:center;white-space:nowrap}
}
/* ── Settings-table layout (Security tab) ── */
.acct-tbl{padding:6px 18px 8px;border-bottom:1px solid var(--border)}
.acct-tbl:last-of-type{border-bottom:none}
.acct-tr{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)}
.acct-tbl .acct-tr:last-child{border-bottom:none}
.acct-tr-label{font-size:12.5px;font-weight:600;color:var(--tx2);display:flex;align-items:center;gap:8px;padding-top:6px;min-width:0}
.acct-tr-label svg{flex-shrink:0;color:var(--tx3)}
.acct-tr-value{font-size:13px;color:var(--tx);min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right}
.acct-tr-value > *{max-width:100%}
.acct-tr-value-strong{font-weight:700;font-size:13.5px}
@media (max-width: 480px){
  .acct-tr{grid-template-columns:1fr;gap:6px}
  .acct-tr-value{align-items:flex-start;text-align:left}
}
/* ── Inline change-password form (compact, fits inside table value cell) ── */
.acct-cpw-wrap{display:flex;flex-direction:column;gap:8px;width:100%}
.acct-cpw-input{width:100%;padding:10px 13px;background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:9px;color:var(--tx);font-size:13.5px;outline:none;font-family:inherit;box-sizing:border-box}
.acct-cpw-input:focus{border-color:var(--accent)}
.acct-cpw-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.acct-cpw-btn{padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:none;color:var(--tx2);transition:var(--tr)}
.acct-cpw-btn:hover{background:var(--hover)}
.acct-cpw-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.acct-cpw-btn.primary:hover{filter:brightness(1.08)}
.acct-cpw-btn:disabled{opacity:.5;cursor:not-allowed}
.acct-cpw-msg{font-size:11.5px;font-weight:600;margin-top:8px;display:none}
/* ── Inline login activity list ── */
.acct-act-wrap{display:flex;flex-direction:column;gap:6px;width:100%}
.acct-act-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;text-align:left;width:100%}
.acct-act-row:last-child{border-bottom:none}
.acct-act-row .acct-act-ic{width:30px;height:30px;border-radius:8px;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tx2)}
.acct-act-row .acct-act-info{flex:1;min-width:0}
.acct-act-row .acct-act-loc{font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.acct-act-row .acct-act-meta{color:var(--tx3);font-size:11px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-act-empty{padding:18px 0;text-align:center;font-size:12px;color:var(--tx3)}
/* ── Searchable country dropdown (cnum) ── */
.cnum-cdd{position:relative;width:100%}
.cnum-cdd-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;background:var(--input-bg);
  border:1.5px solid var(--input-border);border-radius:9px;
  color:var(--tx);font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:inherit;text-align:left;transition:var(--tr);
}
.cnum-cdd-btn:hover,.cnum-cdd-btn:focus{border-color:var(--accent);outline:none}
.cnum-cdd-btn svg{flex-shrink:0;color:var(--tx3);transition:transform .18s}
.cnum-cdd.open .cnum-cdd-btn svg{transform:rotate(180deg)}
.cnum-cdd-panel{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;
  background:var(--bg2);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);overflow:hidden;
  display:flex;flex-direction:column;max-height:280px;
}
.cnum-cdd-search{
  width:100%;padding:9px 12px;background:var(--bg3);
  border:none;border-bottom:1px solid var(--border);
  color:var(--tx);font-size:13px;outline:none;font-family:inherit;
}
.cnum-cdd-search::placeholder{color:var(--tx3)}
.cnum-cdd-list{flex:1;overflow-y:auto;padding:4px 0}
.cnum-cdd-item{
  display:block;width:100%;text-align:left;padding:8px 13px;
  font-size:12.5px;color:var(--tx);background:none;border:none;cursor:pointer;
  font-family:inherit;transition:var(--tr);
}
.cnum-cdd-item:hover,.cnum-cdd-item.kb-active{background:var(--hover)}
.cnum-cdd-item.selected{background:var(--accent-bg);color:var(--accent);font-weight:600}
.cnum-cdd-empty{padding:14px;text-align:center;font-size:12px;color:var(--tx3)}
/* Auth-context override (used inside .auth-form-card on /verify-whatsapp etc.)
   so the dropdown button matches the translucent .auth-input look. */
.cnum-cdd-auth .cnum-cdd-btn{
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.08);
  color:#fff;border-radius:12px;padding:13px 16px;font-size:14.5px;
}
.cnum-cdd-auth .cnum-cdd-btn:hover,.cnum-cdd-auth .cnum-cdd-btn:focus{
  border-color:rgba(255,107,53,.5);background:rgba(255,255,255,.08);
}
.cnum-cdd-auth .cnum-cdd-panel{
  background:#15151d;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
}
.cnum-cdd-auth .cnum-cdd-search{
  background:rgba(255,255,255,.04);color:#fff;border-bottom:1px solid rgba(255,255,255,.08);padding:11px 14px;
}
.cnum-cdd-auth .cnum-cdd-search::placeholder{color:rgba(255,255,255,.4)}
.cnum-cdd-auth .cnum-cdd-item{color:#fff;padding:9px 14px;font-size:13px}
.cnum-cdd-auth .cnum-cdd-item:hover,.cnum-cdd-auth .cnum-cdd-item.kb-active{background:rgba(255,255,255,.06)}
.cnum-cdd-auth .cnum-cdd-item.selected{background:rgba(255,107,53,.16);color:#ff8c5a}
/* Light-mode auth-context (verify-whatsapp respects body.dark/.light theme) */
body:not(.dark) .cnum-cdd-auth .cnum-cdd-btn{
  background:var(--input-bg);border-color:var(--input-border);color:var(--tx);
}
body:not(.dark) .cnum-cdd-auth .cnum-cdd-btn:hover,body:not(.dark) .cnum-cdd-auth .cnum-cdd-btn:focus{
  border-color:var(--accent);background:#fff;
}
body:not(.dark) .cnum-cdd-auth .cnum-cdd-panel{background:var(--bg2);border-color:var(--border)}
body:not(.dark) .cnum-cdd-auth .cnum-cdd-search{background:var(--bg3);color:var(--tx);border-color:var(--border)}
body:not(.dark) .cnum-cdd-auth .cnum-cdd-search::placeholder{color:var(--tx3)}
body:not(.dark) .cnum-cdd-auth .cnum-cdd-item{color:var(--tx)}
body:not(.dark) .cnum-cdd-auth .cnum-cdd-item:hover,body:not(.dark) .cnum-cdd-auth .cnum-cdd-item.kb-active{background:var(--hover)}
/* ── WhatsApp manage button ── */
.acct-wa-manage{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:var(--tr);margin-top:4px}
.acct-wa-manage:hover{filter:brightness(1.08)}
.acct-wa-manage.outline{background:none;border:1px solid var(--border);color:var(--tx2)}
.acct-wa-manage.outline:hover{background:var(--hover);color:var(--tx)}
.acct-drop-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;font-size:13.5px;
  color:var(--tx2);cursor:pointer;transition:var(--tr);border:none;background:none;
  width:100%;text-align:left;border-radius:10px;font-family:inherit;
}
.acct-drop-item:hover{background:var(--hover);color:var(--tx)}
.acct-drop-item.danger{color:var(--red)}
.acct-drop-item.danger:hover{background:rgba(239,68,68,.06)}
.acct-drop-sep{height:1px;background:var(--border);margin:6px 14px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (max-width: 480px){
  .acct-drop{border-radius:16px 16px 0 0;top:auto;bottom:0;transform:translate(-50%,0);max-height:88vh}
  @keyframes acctPop{from{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%,0)}}
}
.tb-notif-dot{
  position:absolute;top:-3px;right:-3px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  font-size:10.5px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);z-index:2;
  box-shadow:0 2px 6px rgba(239,68,68,.45);
  animation:notifPulse 1.6s ease-in-out infinite;
  letter-spacing:-.02em;
}
@keyframes notifPulse{
  0%,100%{box-shadow:0 2px 6px rgba(239,68,68,.45),0 0 0 0 rgba(239,68,68,.55)}
  50%{box-shadow:0 2px 6px rgba(239,68,68,.45),0 0 0 6px rgba(239,68,68,0)}
}
@keyframes bellRing{
  0%, 70%, 100%{transform:rotate(0)}
  73%{transform:rotate(14deg)}
  76%{transform:rotate(-12deg)}
  79%{transform:rotate(10deg)}
  82%{transform:rotate(-8deg)}
  85%{transform:rotate(5deg)}
  88%{transform:rotate(-3deg)}
  92%{transform:rotate(0)}
}
.tb-icon-btn.ringing svg{animation:bellRing 4s ease-in-out infinite;transform-origin:top center}
/* Notification dropdown */
.notif-drop{
  position:absolute;top:42px;right:0;width:320px;max-height:400px;overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lg);z-index:200;display:none;
}
.notif-drop.open{display:block}
.notif-drop-hdr{padding:14px 16px 10px;font-size:14px;font-weight:700;border-bottom:1px solid var(--border)}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--tx2);transition:var(--tr);display:flex;gap:10px;align-items:flex-start}
.notif-item:hover{background:var(--hover)}
.notif-item:last-child{border-bottom:none}
.notif-dot-wrap{flex-shrink:0;padding-top:4px}
.notif-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.notif-dot.success{background:#22c55e}
.notif-dot.error{background:#ef4444}
.notif-dot.warning{background:#eab308}
.notif-dot.info{background:#3b82f6}
.notif-content{flex:1;min-width:0}
.notif-item-title{font-weight:600;color:var(--tx);margin-bottom:2px;font-size:13px}
.notif-item-time{font-size:10.5px;color:var(--tx3);margin-top:4px}
.notif-empty{padding:30px 16px;text-align:center;color:var(--tx3);font-size:13px}

/* Green blinking credits */
@keyframes creditBlink{0%,100%{opacity:1}50%{opacity:.4}}
.tts-foot-credits{
  display:flex;align-items:center;gap:5px;font-size:12px;color:var(--green);
  font-weight:600;white-space:nowrap;
}
.tts-foot-credits .credit-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:creditBlink 1.5s ease-in-out infinite;flex-shrink:0;
}
.tts-foot-credits svg{flex-shrink:0;color:var(--green)}

/* ── BUTTONS ── */
.btn{
  cursor:pointer;border-radius:var(--r);font-family:'Sora',inherit;font-weight:600;
  transition:var(--tr);display:inline-flex;align-items:center;justify-content:center;
  gap:6px;text-decoration:none;line-height:1;white-space:nowrap;
  border:1px solid transparent;font-size:13.5px;letter-spacing:-.02em;
}
.bsm{padding:6px 12px;font-size:12px;border-radius:6px}
.bmd{padding:8px 16px;font-size:13.5px}
.blg{padding:11px 22px;font-size:14px}
.bxl{padding:14px 28px;font-size:15px;border-radius:10px}
.bfl{width:100%;justify-content:center}
.bprim{background:var(--btn-prim-bg);color:var(--btn-prim-tx);border-color:var(--btn-prim-bg)}
.bprim:hover{opacity:.85;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.bprim:active{transform:translateY(0)}
.baccent{background:var(--accent);color:#fff;border-color:var(--accent)}
.baccent:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,53,.3)}
.bsec{background:transparent;color:var(--tx2);border-color:var(--border2)}
.bsec:hover{background:var(--hover);color:var(--tx)}
.bdanger{background:transparent;color:var(--red);border-color:rgba(220,38,38,.25)}
.bdanger:hover{background:rgba(220,38,38,.06)}
.bgreen{background:transparent;color:var(--green);border-color:rgba(22,163,74,.25)}
.bgreen:hover{background:rgba(22,163,74,.06)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ── FORMS ── */
.fd{margin-bottom:16px}
.flbl{display:block;font-size:11px;font-weight:700;color:var(--tx2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.07em}
.finp{
  width:100%;background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:var(--r);padding:9px 13px;color:var(--tx);
  font-family:'Sora',inherit;font-size:13.5px;outline:none;transition:var(--tr);
}
.finp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.finp::placeholder{color:var(--tx3)}
textarea.finp{resize:vertical;min-height:100px;line-height:1.7}
select.finp option{background:var(--bg)}

/* ── TAGS ── */
.tag{
  display:inline-flex;align-items:center;gap:5px;padding:6px 13px;
  border-radius:20px;font-size:12px;font-weight:600;
  border:1px solid var(--tag-border);background:var(--tag-bg);color:var(--tag-tx);
  cursor:pointer;transition:var(--tr);white-space:nowrap;text-decoration:none;
}
.tag:hover{background:var(--hover);color:var(--tx);border-color:var(--border2)}
.tag.on{background:var(--tag-on-bg);color:var(--tag-on-tx);border-color:var(--tag-on-bg)}
.tags-row{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:22px;
}

/* ── CARDS ── */
.card{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:20px;margin-bottom:16px;box-shadow:var(--shadow);
}
.card-t{font-size:13.5px;font-weight:700;margin-bottom:16px;color:var(--tx)}

/* ── SEARCH ── */
.search-wrap{position:relative;flex:1}
.search-wrap input{
  width:100%;background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:var(--r);padding:9px 13px 9px 36px;font-size:13.5px;
  color:var(--tx);outline:none;font-family:'Sora',inherit;transition:var(--tr);
}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.search-wrap input::placeholder{color:var(--tx3)}
.search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none;display:flex}

/* ── VOICE GRID ── */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
@media(max-width:1100px){.voice-grid{grid-template-columns:repeat(2,1fr)}}
.vcard{
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:18px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:flex-start;gap:14px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.vcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#ff4080,var(--accent));
  opacity:0;transition:opacity .25s;
}
.vcard:hover{
  border-color:var(--accent);box-shadow:0 8px 32px rgba(255,107,53,.15);
  transform:translateY(-3px);
}
.vcard:hover::before{opacity:1}
.vcard-av{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;position:relative;color:transparent;
  box-shadow:0 5px 18px rgba(0,0,0,.3),inset -4px -5px 10px rgba(0,0,0,.2),inset 3px 4px 8px rgba(255,255,255,.55);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),outline .15s,box-shadow .15s;
  outline:2.5px solid transparent;outline-offset:2px;
}
.vcard-av::after{
  content:'';position:absolute;top:6%;left:12%;width:44%;height:36%;
  border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 38% 32%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.65) 35%,rgba(255,255,255,.15) 65%,transparent 100%);
}
.vcard-av[data-ci="0"]{background:conic-gradient(from 190deg at 50% 55%,#86efac,#34d399,#059669,#0d9488,#22d3ee,#67e8f9,#86efac)}
.vcard-av[data-ci="1"]{background:conic-gradient(from 190deg at 50% 55%,#93c5fd,#818cf8,#6366f1,#7c3aed,#a855f7,#c084fc,#93c5fd)}
.vcard-av[data-ci="2"]{background:conic-gradient(from 190deg at 50% 55%,#fda4af,#fb923c,#f97316,#dc2626,#e11d48,#f43f5e,#fda4af)}
.vcard-av[data-ci="3"]{background:conic-gradient(from 190deg at 50% 55%,#7dd3fc,#38bdf8,#0ea5e9,#0369a1,#0891b2,#22d3ee,#7dd3fc)}
.vcard-av[data-ci="4"]{background:conic-gradient(from 190deg at 50% 55%,#d8b4fe,#c084fc,#a855f7,#7c3aed,#6366f1,#818cf8,#d8b4fe)}
.vcard-av[data-ci="5"]{background:conic-gradient(from 190deg at 50% 55%,#fde68a,#fbbf24,#f59e0b,#b45309,#92400e,#a16207,#fde68a)}
.vcard-av[data-ci="6"]{background:conic-gradient(from 190deg at 50% 55%,#6ee7b7,#34d399,#10b981,#065f46,#14532d,#166534,#6ee7b7)}
.vcard-av[data-ci="7"]{background:conic-gradient(from 190deg at 50% 55%,#fca5a5,#f87171,#ef4444,#b91c1c,#991b1b,#7f1d1d,#fca5a5)}
.vcard-av[data-ci="8"]{background:conic-gradient(from 190deg at 50% 55%,#f5d0fe,#e879f9,#d946ef,#a21caf,#86198f,#701a75,#f5d0fe)}
.vcard-av[data-ci="9"]{background:conic-gradient(from 190deg at 50% 55%,#fed7aa,#fdba74,#fb923c,#ea580c,#c2410c,#9a3412,#fed7aa)}
.vcard-av[data-ci="10"]{background:conic-gradient(from 190deg at 50% 55%,#a5f3fc,#67e8f9,#22d3ee,#06b6d4,#0e7490,#155e75,#a5f3fc)}
.vcard-av[data-ci="11"]{background:conic-gradient(from 190deg at 50% 55%,#bfdbfe,#93c5fd,#60a5fa,#2563eb,#1d4ed8,#1e3a8a,#bfdbfe)}
.vcard-av[data-ci="12"]{background:conic-gradient(from 190deg at 50% 55%,#d9f99d,#bef264,#a3e635,#65a30d,#4d7c0f,#365314,#d9f99d)}
.vcard-av[data-ci="13"]{background:conic-gradient(from 190deg at 50% 55%,#fecdd3,#fda4af,#fb7185,#e11d48,#be123c,#9f1239,#fecdd3)}
.vcard-av[data-ci="14"]{background:conic-gradient(from 190deg at 50% 55%,#99f6e4,#5eead4,#2dd4bf,#0d9488,#0f766e,#134e4a,#99f6e4)}
.vcard-av[data-ci="15"]{background:conic-gradient(from 190deg at 50% 55%,#ede9fe,#c4b5fd,#a78bfa,#7c3aed,#6d28d9,#4c1d95,#ede9fe)}
.vcard-av[data-ci="16"]{background:conic-gradient(from 190deg at 50% 55%,#fde8d8,#fbb27a,#f56e0f,#e55a00,#c44a00,#9a3a00,#fde8d8)}
.vcard-av[data-ci="17"]{background:conic-gradient(from 190deg at 50% 55%,#d1fae5,#a7f3d0,#6ee7b7,#10b981,#047857,#064e3b,#d1fae5)}
.vcard-av[data-ci="18"]{background:conic-gradient(from 190deg at 50% 55%,#e0e7ff,#c7d2fe,#a5b4fc,#6366f1,#4338ca,#312e81,#e0e7ff)}
.vcard-av[data-ci="19"]{background:conic-gradient(from 190deg at 50% 55%,#fce7f3,#f9a8d4,#f472b6,#db2777,#be185d,#881337,#fce7f3)}
.vcard-av.n{background:conic-gradient(from 190deg at 50% 55%,#bbf7d0,#86efac,#4ade80,#22c55e,#16a34a,#15803d,#166534,#bbf7d0)}
.vcard:hover .vcard-av{transform:scale(1.1);outline:2.5px solid #ff6b35;outline-offset:2px;box-shadow:0 7px 24px rgba(255,107,53,.4),inset -4px -5px 10px rgba(0,0,0,.2),inset 3px 4px 8px rgba(255,255,255,.55)}
.vcard-badge{
  position:absolute;top:-4px;right:-4px;width:18px;height:18px;
  border-radius:50%;
  background:linear-gradient(145deg,#2d3748,#1a202c);
  border:1.5px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);z-index:3;
}
.vcard-check{
  position:absolute;bottom:-2px;right:-2px;width:15px;height:15px;
  border-radius:50%;background:var(--green);border:2px solid var(--bg);
  display:none;align-items:center;justify-content:center;
}
.vcard.on .vcard-check{display:flex}
.vcard-info{flex:1;min-width:0}
.vcard-name{font-size:14px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx);letter-spacing:-.01em}
.vcard-cat{font-size:11.5px;color:var(--tx3);margin-bottom:10px;font-weight:500}
.vcard-actions{display:flex;align-items:center;gap:8px}
/* Play/Pause button — animated */
.play-btn{
  width:32px;height:32px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--accent),#ff4080);
  cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  box-shadow:0 3px 10px rgba(255,107,53,.3);
  position:relative;
}
.play-btn:hover{transform:scale(1.12);box-shadow:0 4px 16px rgba(255,107,53,.45)}
.play-btn:active{transform:scale(.95)}
.play-btn.playing{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow:0 3px 10px rgba(239,68,68,.3);
  animation:playPulse 1.5s ease-in-out infinite;
}
@keyframes playPulse{0%,100%{box-shadow:0 3px 10px rgba(239,68,68,.3)}50%{box-shadow:0 3px 20px rgba(239,68,68,.5)}}
@keyframes spinBtn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.play-btn .spin-icon{animation:spinBtn 1s linear infinite}

/* ── VOICE LIST (panel) ── */
.vlist-item{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  cursor:pointer;transition:all .2s ease;border-left:3px solid transparent;
}
.vlist-item:hover{background:var(--hover);border-left-color:var(--accent)}
.vlist-item.on{background:var(--accent-bg);border-left-color:var(--accent)}
/* ── Voice Avatar — prismatic glass sphere ── */
.vl-av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;position:relative;color:transparent;
  box-shadow:0 5px 16px rgba(0,0,0,.3),inset -4px -5px 9px rgba(0,0,0,.2),inset 3px 4px 7px rgba(255,255,255,.55);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),outline .15s,box-shadow .15s;
  outline:2.5px solid transparent;outline-offset:2px;
}
.vl-av::after{
  content:'';position:absolute;top:6%;left:12%;width:44%;height:36%;
  border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 38% 32%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.65) 35%,rgba(255,255,255,.15) 65%,transparent 100%);
}
/* Photo avatars (Speechify Ultra) — drop the glossy highlight so faces stay clean */
.vl-av[style*="background-image"]::after{ display:none; }
/* 20 vivid unique prismatic palettes — each voice gets its own color */
.vl-av[data-ci="0"]{background:conic-gradient(from 190deg at 50% 55%,#86efac,#34d399,#059669,#0d9488,#22d3ee,#67e8f9,#86efac)}
.vl-av[data-ci="1"]{background:conic-gradient(from 190deg at 50% 55%,#93c5fd,#818cf8,#6366f1,#7c3aed,#a855f7,#c084fc,#93c5fd)}
.vl-av[data-ci="2"]{background:conic-gradient(from 190deg at 50% 55%,#fda4af,#fb923c,#f97316,#dc2626,#e11d48,#f43f5e,#fda4af)}
.vl-av[data-ci="3"]{background:conic-gradient(from 190deg at 50% 55%,#7dd3fc,#38bdf8,#0ea5e9,#0369a1,#0891b2,#22d3ee,#7dd3fc)}
.vl-av[data-ci="4"]{background:conic-gradient(from 190deg at 50% 55%,#d8b4fe,#c084fc,#a855f7,#7c3aed,#6366f1,#818cf8,#d8b4fe)}
.vl-av[data-ci="5"]{background:conic-gradient(from 190deg at 50% 55%,#fde68a,#fbbf24,#f59e0b,#b45309,#92400e,#a16207,#fde68a)}
.vl-av[data-ci="6"]{background:conic-gradient(from 190deg at 50% 55%,#6ee7b7,#34d399,#10b981,#065f46,#14532d,#166534,#6ee7b7)}
.vl-av[data-ci="7"]{background:conic-gradient(from 190deg at 50% 55%,#fca5a5,#f87171,#ef4444,#b91c1c,#991b1b,#7f1d1d,#fca5a5)}
.vl-av[data-ci="8"]{background:conic-gradient(from 190deg at 50% 55%,#f5d0fe,#e879f9,#d946ef,#a21caf,#86198f,#701a75,#f5d0fe)}
.vl-av[data-ci="9"]{background:conic-gradient(from 190deg at 50% 55%,#fed7aa,#fdba74,#fb923c,#ea580c,#c2410c,#9a3412,#fed7aa)}
.vl-av[data-ci="10"]{background:conic-gradient(from 190deg at 50% 55%,#a5f3fc,#67e8f9,#22d3ee,#06b6d4,#0e7490,#155e75,#a5f3fc)}
.vl-av[data-ci="11"]{background:conic-gradient(from 190deg at 50% 55%,#bfdbfe,#93c5fd,#60a5fa,#2563eb,#1d4ed8,#1e3a8a,#bfdbfe)}
.vl-av[data-ci="12"]{background:conic-gradient(from 190deg at 50% 55%,#d9f99d,#bef264,#a3e635,#65a30d,#4d7c0f,#365314,#d9f99d)}
.vl-av[data-ci="13"]{background:conic-gradient(from 190deg at 50% 55%,#fecdd3,#fda4af,#fb7185,#e11d48,#be123c,#9f1239,#fecdd3)}
.vl-av[data-ci="14"]{background:conic-gradient(from 190deg at 50% 55%,#99f6e4,#5eead4,#2dd4bf,#0d9488,#0f766e,#134e4a,#99f6e4)}
.vl-av[data-ci="15"]{background:conic-gradient(from 190deg at 50% 55%,#ede9fe,#c4b5fd,#a78bfa,#7c3aed,#6d28d9,#4c1d95,#ede9fe)}
.vl-av[data-ci="16"]{background:conic-gradient(from 190deg at 50% 55%,#fde8d8,#fbb27a,#f56e0f,#e55a00,#c44a00,#9a3a00,#fde8d8)}
.vl-av[data-ci="17"]{background:conic-gradient(from 190deg at 50% 55%,#d1fae5,#a7f3d0,#6ee7b7,#10b981,#047857,#064e3b,#d1fae5)}
.vl-av[data-ci="18"]{background:conic-gradient(from 190deg at 50% 55%,#e0e7ff,#c7d2fe,#a5b4fc,#6366f1,#4338ca,#312e81,#e0e7ff)}
.vl-av[data-ci="19"]{background:conic-gradient(from 190deg at 50% 55%,#fce7f3,#f9a8d4,#f472b6,#db2777,#be185d,#881337,#fce7f3)}
/* Hover: orange outline only, no blink */
.vlist-item:hover .vl-av{transform:scale(1.12);outline:2.5px solid #ff6b35;outline-offset:2px;box-shadow:0 6px 22px rgba(255,107,53,.4),inset -4px -5px 9px rgba(0,0,0,.2),inset 3px 4px 7px rgba(255,255,255,.55)}
/* Verified badge — dark glossy like image */
.vl-badge{
  position:absolute;top:-4px;right:-4px;width:16px;height:16px;
  border-radius:50%;
  background:linear-gradient(145deg,#2d3748,#1a202c);
  border:1.5px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);
  flex-shrink:0;z-index:3;
}
.vl-check{
  position:absolute;bottom:-2px;right:-2px;width:13px;height:13px;
  border-radius:50%;background:var(--green);border:2px solid var(--bg);
  display:none;align-items:center;justify-content:center;z-index:3;
}
.vlist-item.on .vl-check{display:flex}
.vl-info{flex:1;min-width:0}
.vl-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.vlist-item.on .vl-name{color:var(--accent)}
.vl-desc{font-size:11px;color:var(--tx3);margin-top:1px}
.vl-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.vp-el-play{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--tx2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s,border-color .15s}
.vp-el-play:hover,.vp-el-play.playing{background:var(--accent);color:#fff;border-color:var(--accent)}
.vp-use-btn{padding:4px 12px;border-radius:7px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;white-space:nowrap}
.vp-use-btn:hover{background:var(--accent);color:#fff}
.vp-use-btn.loading{opacity:.6;pointer-events:none}
.vp-cat-pill{padding:4px 11px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--tx2);font-size:11.5px;font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s,border-color .12s}
.vp-cat-pill:hover{border-color:var(--border2);color:var(--tx)}
.vp-cat-pill.on{background:var(--btn-prim-bg);color:var(--btn-prim-tx);border-color:var(--btn-prim-bg)}
/* Voice 3-dot language menu */
.vl-menu-wrap{position:relative}
.vl-dots{
  width:28px;height:28px;border-radius:6px;border:none;background:transparent;
  cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center;
  transition:all .2s;font-size:16px;letter-spacing:2px;line-height:1;
}
.vl-dots:hover{background:var(--hover);color:var(--tx)}
.vl-lang-menu{
  position:absolute;right:0;top:32px;width:180px;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-lg);z-index:100;display:none;padding:4px 0;
  animation:fadeUp .15s ease;
}
.vl-lang-menu.open{display:block}
.vl-lang-menu-hdr{padding:8px 12px 6px;font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em}
.vl-lang-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;
  color:var(--tx2);cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left;
}
.vl-lang-item:hover{background:var(--hover);color:var(--tx)}
.vl-lang-flag{font-size:14px;flex-shrink:0;width:20px;text-align:center}

/* ── VOICE PANEL — right-side drawer sidebar ── */
#vp-ov{background:rgba(0,0,0,.48);align-items:stretch;justify-content:flex-end}
.vpanel{
  position:relative;width:520px;max-width:100vw;height:100%;background:var(--bg);
  display:flex;flex-direction:column;
  animation:vpSlideIn .26s cubic-bezier(.4,0,.2,1);
  box-shadow:-10px 0 48px rgba(0,0,0,.35);overflow:hidden;
}
@keyframes vpSlideIn{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:translateX(0)}}
/* Top bar: title + tabs + close */
.vp-hdr{
  padding:0 28px;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;
}
.vp-hdr-top{display:flex;align-items:center;gap:14px;padding:14px 0 0}
.vp-back{
  background:none;border:none;cursor:pointer;color:var(--tx2);padding:7px;
  border-radius:8px;transition:var(--tr);display:flex;align-items:center;
}
.vp-back:hover{background:var(--hover);color:var(--tx)}
.vp-title{font-size:16px;font-weight:700;flex:1;color:var(--tx)}
.vtabs{display:flex;gap:0;padding:0;flex-shrink:0;margin-top:4px}
.vtab{
  font-size:13.5px;font-weight:500;color:var(--tx3);padding:12px 0;margin-right:26px;
  cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;
}
.vtab:hover{color:var(--tx)}.vtab.on{color:var(--tx);border-bottom-color:var(--tx);font-weight:600}
/* Search + filters row */
.vp-search-row{
  display:flex;align-items:center;gap:10px;padding:16px 28px 0;flex-shrink:0;
}
.vp-search-wrap{
  position:relative;flex:1;
}
.vp-search-wrap input{
  width:100%;padding:10px 14px 10px 38px;border:1px solid var(--border2);
  border-radius:10px;background:var(--bg2);color:var(--tx);font-size:13.5px;
  outline:none;transition:border .15s;font-family:inherit;
}
.vp-search-wrap input:focus{border-color:var(--accent)}
.vp-search-wrap input::placeholder{color:var(--tx3)}
.vp-search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none}
.vp-filter-btn{
  padding:9px 14px;border:1px solid var(--border2);border-radius:10px;background:var(--bg2);
  color:var(--tx2);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;
  gap:7px;white-space:nowrap;transition:all .15s;flex-shrink:0;
}
.vp-filter-btn:hover{border-color:var(--accent);color:var(--tx)}
/* Category chips */
.vp-chips-row{
  display:flex;align-items:center;gap:7px;padding:12px 28px;
  overflow-x:auto;flex-shrink:0;border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.vp-chips-row::-webkit-scrollbar{display:none}
.vp-chip{
  padding:6px 16px;border-radius:20px;border:1px solid var(--border2);
  font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  background:transparent;color:var(--tx2);transition:all .15s;flex-shrink:0;
}
.vp-chip:hover{border-color:var(--tx3);color:var(--tx)}
.vp-chip.on{border-color:var(--tx);color:var(--tx);background:var(--bg2);font-weight:600}
/* Results header */
.vp-results-hdr{
  padding:12px 28px 6px;font-size:13.5px;font-weight:700;color:var(--tx);flex-shrink:0;
  display:flex;align-items:center;gap:8px;
}
.vp-results-hdr span{font-size:12.5px;font-weight:400;color:var(--tx3)}
/* Voice list */
.vp-list{flex:1;overflow-y:auto}
.vp-search{padding:11px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.vp-filters{padding:9px 11px 7px;display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0;border-bottom:1px solid var(--border)}
/* Voice rows — EL style */
.vlist-item{
  display:flex;align-items:center;gap:14px;padding:13px 28px;
  cursor:pointer;transition:background .12s;
  border-bottom:1px solid var(--border);border-left:none;
}
.vlist-item:hover{background:var(--hover)}
.vlist-item.on{background:var(--accent-bg)}
.vl-info{flex:1;min-width:0}
.vl-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.vlist-item.on .vl-name{color:var(--accent)}
.vl-desc{font-size:12px;color:var(--tx3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
.vl-lang-col{display:flex;align-items:center;gap:6px;min-width:110px;flex-shrink:0}
.vl-flag{font-size:15px;line-height:1}
.vl-lang-nm{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.vl-cat-tag{font-size:11.5px;color:var(--tx3);min-width:90px;flex-shrink:0;white-space:nowrap}
.vl-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Selected check badge moves to after-el */
.vl-check{
  position:absolute;bottom:-2px;right:-2px;width:13px;height:13px;
  border-radius:50%;background:var(--green);border:2px solid var(--bg);
  display:none;align-items:center;justify-content:center;z-index:3;
}
.vlist-item.on .vl-check{display:flex}

/* ── TTS ── */
.tts-layout{display:flex;flex:1;height:calc(100vh - 52px);overflow:hidden;position:relative}
.tts-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}
.tts-editor{flex:1;padding:32px 40px 16px;overflow-y:auto}
.tts-editor textarea{
  width:100%;height:100%;min-height:calc(100vh - 280px);
  background:transparent;border:none;outline:none;resize:none;
  font-family:'Sora',inherit;font-size:16px;line-height:2;color:var(--tx);
  letter-spacing:-.01em;
}
.tts-editor textarea::placeholder{color:var(--tx3);font-size:16px;font-weight:400}

/* Footer bar — UPDATED with credits + voice */
.tts-foot{
  border-top:1px solid var(--border);padding:0 24px;
  min-height:72px;
  display:flex;align-items:center;gap:14px;flex-shrink:0;background:var(--bg);
  position:relative;z-index:5;flex-wrap:wrap;
}
.tts-foot-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.tts-foot-voice{
  display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx2);
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;
}
.tts-foot-voice .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.char-bar{font-size:12.5px;color:var(--tx3);font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.char-bar span{color:var(--tx2)}
.tts-dl-btn{
  width:38px;height:38px;border-radius:8px;border:1px solid var(--border);
  background:transparent;cursor:pointer;color:var(--tx2);
  display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0;
}
.tts-dl-btn:hover{background:var(--hover);color:var(--tx);border-color:var(--border2)}
.tts-dl-btn.hidden{opacity:0;pointer-events:none}

/* Sidebar — Fixed width on PC, full on mobile */
.tts-sidebar {
  width: 340px !important; /* PC par fix width */
  flex-shrink: 0 !important;
  border-left: 1px solid var(--border) !important;
  border-top: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--bg);
}

@media(max-width: 768px) {
  .tts-sidebar {
    width: 100% !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    flex: 1 !important;
  }
}
.tts-settings{padding:0 16px 18px}
.stabs{
  display:flex;border-bottom:1px solid var(--border);
  margin:0 -16px;padding:0 16px;margin-bottom:16px;position:sticky;top:0;
  background:var(--bg);z-index:10;
}
.stab{
  font-size:13.5px;font-weight:500;color:var(--tx2);padding:13px 0;margin-right:20px;
  cursor:pointer;border-bottom:2px solid transparent;transition:var(--tr);
}
.stab:hover{color:var(--tx)}.stab.on{color:var(--tx);border-bottom-color:var(--tx)}
.ss-label{
  font-size:11px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:8px;margin-top:16px;
}
.voice-sel-btn{
  width:100%;display:flex;align-items:center;gap:10px;padding:9px 11px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:var(--tr);margin-bottom:4px;text-align:left;
}
.voice-sel-btn:hover{border-color:var(--border2);background:var(--hover)}
.vsb-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;position:relative;color:transparent;
  box-shadow:0 3px 10px rgba(0,0,0,.28),inset -2px -3px 6px rgba(0,0,0,.18),inset 2px 3px 5px rgba(255,255,255,.52);
}
.vsb-av::after{content:'';position:absolute;top:6%;left:12%;width:44%;height:36%;border-radius:50%;background:radial-gradient(ellipse at 38% 32%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.55) 40%,transparent 100%);pointer-events:none;z-index:1}
/* vsb-av colors set via inline style from voiceBg() */
.vsb-dot{
  position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;
  border-radius:50%;background:var(--green);border:1.5px solid var(--bg);z-index:2;
}
.vsb-info{flex:1;min-width:0}
.vsb-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.vsb-tags{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}

/* Model box */
.model-box{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 12px;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;cursor:pointer;transition:var(--tr);
}
.model-box:hover{border-color:var(--border2)}
.model-box-gradient{
  position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(135deg,#4f46e5,#818cf8,#f472b6,#fb923c);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s;
  pointer-events:none;
}
.model-box:hover .model-box-gradient{opacity:1}
.model-v2-tag{
  width:24px;height:16px;border-radius:4px;
  background:var(--bg3);border:1px solid var(--border);
  font-size:9px;font-weight:800;color:var(--tx2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.model-try-v3{
  font-size:10px;font-weight:700;
  background:linear-gradient(135deg,#4f46e5,#f472b6,#fb923c);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Sliders */
.slider-row{margin-bottom:14px}
.slider-lbl{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:400;color:var(--tx2);margin-bottom:8px}
.slider-lbl-val{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--tx2)}
input[type=range]{
  -webkit-appearance:none;width:100%;height:2px;
  background:var(--tx);border-radius:1px;outline:none;cursor:pointer;border:none;padding:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--tx);cursor:pointer;border:none;transition:transform .1s;
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.3)}

/* Toggles */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;}
.toggle-lbl{font-size:13.5px;color:var(--tx);font-weight:400}
.toggle{
  width:34px;height:19px;border-radius:10px;background:var(--border2);position:relative;
  cursor:pointer;transition:background .18s;flex-shrink:0;border:none;
}
.toggle.on{background:var(--accent)}
.toggle::after{
  content:'';position:absolute;width:15px;height:15px;border-radius:50%;
  background:#fff;top:2px;left:2px;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on::after{left:17px}

/* Reset */
.reset-link{
  display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx3);
  background:none;border:none;cursor:pointer;padding:6px 0;transition:var(--tr);
  font-family:'Sora',inherit;
}
.reset-link:hover{color:var(--tx)}

/* Wave animation */
.wave-box{
  padding:14px 22px;display:none;align-items:center;gap:14px;
  border-top:1px solid var(--border);background:var(--bg);flex-shrink:0;
  position:relative;overflow:hidden;
}
.wave-box::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,107,53,.04),rgba(255,51,102,.04),rgba(139,92,246,.04));pointer-events:none}
.wave-box.show{display:flex}
.bars{display:flex;align-items:flex-end;gap:3px;height:24px}
.bar{
  width:3.5px;border-radius:3px;
  background:linear-gradient(180deg,#ff6b35,#ff3366);
  animation:wb .75s ease-in-out infinite;
  transform-origin:bottom;
  box-shadow:0 0 6px rgba(255,107,53,.4);
}
.bar:nth-child(1){height:6px;animation-delay:0s}
.bar:nth-child(2){height:12px;animation-delay:.08s}
.bar:nth-child(3){height:20px;animation-delay:.16s}
.bar:nth-child(4){height:24px;animation-delay:.24s}
.bar:nth-child(5){height:20px;animation-delay:.32s}
.bar:nth-child(6){height:12px;animation-delay:.40s}
.bar:nth-child(7){height:6px;animation-delay:.48s}
.bar:nth-child(8){height:12px;animation-delay:.40s}
.bar:nth-child(9){height:20px;animation-delay:.32s}
.bar:nth-child(10){height:24px;animation-delay:.24s}
@keyframes wb{
  0%,100%{transform:scaleY(.12);opacity:.3;filter:brightness(.7)}
  50%{transform:scaleY(1);opacity:1;filter:brightness(1.2)}
}

/* ── BOTTOM AUDIO PLAYER ── */
.audio-player{
  position:absolute;left:0;right:0;bottom:0;
  height:auto;min-height:96px;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-top:1px solid var(--border);
  display:flex;align-items:center;padding:18px 28px;gap:18px;
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:20;box-shadow:0 -8px 32px rgba(0,0,0,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.audio-player.visible{transform:translateY(0)}
body.dark .audio-player{box-shadow:0 -8px 32px rgba(0,0,0,.35);background:linear-gradient(180deg,var(--bg3) 0%,var(--bg) 100%)}
.ap-text{flex:1;min-width:0;padding-right:16px;border-right:1px solid var(--border)}
.ap-text-main{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx);letter-spacing:-.01em}
.ap-text-sub{display:flex;align-items:center;gap:6px;margin-top:4px}
.ap-voice-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:creditBlink 1.5s ease-in-out infinite}
.ap-voice-name{font-size:12px;color:var(--tx3);font-weight:500}
.ap-play{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,#ff6b35,#ff3366);
  border:none;
  cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 18px rgba(255,107,53,.45);
}
.ap-play:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(255,107,53,.6)}
.ap-play:active{transform:scale(.92)}
.ap-progress{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.ap-time{font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;flex-shrink:0}
.ap-bar{
  flex:1;height:4px;background:rgba(255,107,53,.12);border-radius:99px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:height .2s cubic-bezier(.4,0,.2,1);
}
.ap-bar:hover{height:7px}
.ap-bar-fill{
  height:100%;border-radius:99px;width:0%;
  background:linear-gradient(90deg,#ff6b35,#ff3366,#8b5cf6);
  background-size:200% 100%;
  transition:width .1s linear;
  animation:apBarShimmer 3s ease-in-out infinite;
  box-shadow:0 0 8px rgba(255,107,53,.5);
}
@keyframes apBarShimmer{0%,100%{background-position:0% 0%}50%{background-position:100% 0%}}
.ap-actions{display:flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--border)}
.ap-action-btn{
  width:32px;height:32px;border-radius:8px;border:none;background:transparent;
  cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center;
  transition:var(--tr);font-size:13px;
}
.ap-action-btn:hover{background:var(--hover);color:var(--tx)}
.ap-dl-btn{
  display:flex;align-items:center;gap:6px;padding:7px 14px;
  background:rgba(255,107,53,.1);
  border:1.5px solid rgba(255,107,53,.25);border-radius:8px;
  cursor:pointer;font-size:12px;font-weight:700;color:#ff6b35;
  transition:all .2s cubic-bezier(.4,0,.2,1);font-family:'Sora',inherit;text-decoration:none;
}
.ap-dl-btn:hover{transform:translateY(-1px);background:rgba(255,107,53,.18);border-color:rgba(255,107,53,.5);box-shadow:0 4px 14px rgba(255,107,53,.2)}

/* Clone overlay */
.clov{
  position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.7);
  backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;flex-direction:column;
}
.clov.show{display:flex;animation:fi .28s ease}
@keyframes fi{from{opacity:0}to{opacity:1}}
.ring-wrap{position:relative;width:120px;height:120px;margin-bottom:22px}
.rsv{transform:rotate(-90deg)}
.r-bg2{fill:none;stroke:var(--border2);stroke-width:5}
.r-arc2{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset .5s ease}
.ri{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ri-n{font-size:28px;font-weight:800;color:var(--tx)}
.ri-u{font-size:9px;color:var(--tx3);letter-spacing:.12em;text-transform:uppercase}
.ov-t{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:5px}
.ov-m{font-size:12.5px;color:var(--tx2);margin-bottom:20px}
.ov-steps{display:flex;flex-direction:column;gap:7px;width:260px}
.ovs{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);font-size:12.5px;color:var(--tx3);transition:all .3s}
.ovs.act{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ovs.done{border-color:rgba(22,163,74,.3);color:var(--green);background:rgba(22,163,74,.06)}
.ovs .sd{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.ovs.act .sd{animation:blink .7s ease-in-out infinite}
@keyframes blink{0%,100%{transform:scale(1)}50%{transform:scale(2)}}

/* Upload zone */
.uzone{
  border:2px dashed var(--border2);border-radius:12px;padding:44px 28px;
  text-align:center;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden;
}
.uzone:hover,.uzone.drag{border-color:var(--accent);background:var(--accent-bg)}
.uzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.fchip{
  background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r);
  padding:9px 13px;font-size:12.5px;color:var(--green);
  display:none;align-items:center;gap:9px;margin-top:12px;
}
.fchip.show{display:flex}
.fchip-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}

/* History */
.hist-row{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--border)}
.hist-row:last-child{border-bottom:none}
/* Engine badge — transparent, subtle, lets the user tell Ultra vs ElevenLabs at a glance */
.hist-badge{display:inline-flex;align-items:center;font-size:9px;font-weight:800;padding:2px 7px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase;line-height:1;border:1px solid transparent;backdrop-filter:blur(2px);}
.hist-badge-ultra{background:rgba(139,92,246,.10);color:#a78bfa;border-color:rgba(139,92,246,.32);}
.hist-badge-el{background:rgba(255,107,53,.08);color:#ff8c5a;border-color:rgba(255,107,53,.28);}
.hist-ic{width:32px;height:32px;border-radius:9px;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
.hist-info{flex:1;min-width:0}
.hist-voice{font-size:11px;font-weight:700;color:var(--tx2);margin-bottom:2px;text-transform:uppercase;letter-spacing:.05em}
.hist-text{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.hist-time{font-size:10px;color:var(--tx3);margin-top:2px}
.hist-actions{display:flex;gap:7px;align-items:center;flex-shrink:0}

/* Dashboard stats */
.dash-pad{padding:26px 30px}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.scard{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:var(--shadow);transition:var(--tr)}
.scard:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.scard-l{font-size:11px;color:var(--tx3);margin-bottom:7px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.scard-v{font-size:26px;font-weight:800;color:var(--tx);letter-spacing:-.03em}

/* sec header */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sec-title{font-size:15px;font-weight:700}
.sec-more{font-size:12.5px;color:var(--tx2);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;transition:var(--tr)}
.sec-more:hover{color:var(--accent)}

/* Admin */
.admin-pad{padding:24px 28px;max-width:1200px}
.alert-ok{background:rgba(22,163,74,.07);border:1.5px solid rgba(22,163,74,.2);border-radius:var(--r);padding:11px 16px;font-size:13.5px;color:var(--green);margin-bottom:16px}
.alert-er{background:rgba(220,38,38,.07);border:1.5px solid rgba(220,38,38,.2);border-radius:var(--r);padding:11px 16px;font-size:13.5px;color:var(--red);margin-bottom:16px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:9px 13px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--border)}
.tbl td{padding:10px 13px;border-bottom:1px solid var(--border);color:var(--tx2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}.tbl tr:hover td{background:var(--hover)}
.tbl .nm{font-weight:700;color:var(--tx)}
.badge{display:inline-flex;padding:3px 9px;border-radius:5px;font-size:10.5px;font-weight:700;letter-spacing:.05em}
.ba{background:rgba(22,163,74,.1);color:var(--green)}.bb{background:rgba(220,38,38,.1);color:var(--red)}.be{background:rgba(202,138,4,.1);color:var(--yellow)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ifrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.srow{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.sbr{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--r);padding:8px 12px;color:var(--tx);font-family:'Sora',inherit;font-size:13.5px;outline:none;transition:var(--tr);flex:1;min-width:150px}
.sbr:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.tag-checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tck{display:flex;align-items:center;gap:5px;padding:5px 11px;background:var(--tag-bg);border:1px solid var(--tag-border);border-radius:20px;cursor:pointer;font-size:11.5px;color:var(--tag-tx);transition:var(--tr)}
.tck:hover{background:var(--hover);color:var(--tx)}
.empty{text-align:center;padding:44px 22px;color:var(--tx3)}
.empty h3{font-size:14px;font-weight:700;color:var(--tx2);margin-bottom:6px}
.empty a{color:var(--accent)}

/* Toasts — always bottom, above WhatsApp button */
.toasts{position:fixed;bottom:104px;right:16px;z-index:99999;display:flex;flex-direction:column;gap:0;pointer-events:none;}
.toast{
  position:relative;overflow:hidden;pointer-events:auto;
  background:#ffffff;border:2px solid #c8c8d0;border-radius:14px;
  padding:14px 18px 17px;font-size:13.5px;font-weight:600;
  min-width:240px;max-width:340px;
  display:flex;align-items:center;gap:11px;
  box-shadow:0 16px 48px rgba(0,0,0,.32),0 4px 14px rgba(0,0,0,.2);
  animation:toastIn .42s cubic-bezier(.34,1.36,.64,1);
  color:#09090b;
}
body.dark .toast{background:#2e2e42;border-color:#44445a;color:#fafafa;box-shadow:0 8px 28px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);}
@keyframes toastIn{
  0%{opacity:0;transform:translateX(60px) scale(.86);}
  65%{opacity:1;transform:translateX(-6px) scale(1.02);}
  100%{opacity:1;transform:translateX(0) scale(1);}
}
.toast::before{content:'';width:11px;height:11px;border-radius:50%;flex-shrink:0}
.toast-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;border-radius:0 0 12px 12px;opacity:.55;animation:toastBar 3.5s linear forwards;}
@keyframes toastBar{from{width:100%;}to{width:0;}}
.toast.ok{border-color:rgba(22,163,74,.8);color:#15803d;background:linear-gradient(135deg,#ecfdf5,#d1fae5);}
body.dark .toast.ok{background:linear-gradient(135deg,#1a3a28,#1e4d34);color:#86efac;border-color:rgba(34,197,94,.4);}
.toast.ok::before{background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.6)}
.toast.ok .toast-bar{background:#22c55e;}
.toast.er{border-color:rgba(239,68,68,.8);color:#b91c1c;background:linear-gradient(135deg,#fef2f2,#fecaca);}
body.dark .toast.er{background:linear-gradient(135deg,#3a1a1a,#4d2020);color:#fca5a5;border-color:rgba(239,68,68,.4);}
.toast.er::before{background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,.6)}
.toast.er .toast-bar{background:#ef4444;}

/* WhatsApp float */
.wa-float{
  position:fixed;bottom:28px;right:28px;z-index:8888;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:0 6px 24px rgba(37,211,102,.4);
  transition:transform .2s ease,box-shadow .2s ease;
  animation:waPop .6s cubic-bezier(.34,1.56,.64,1) 1s both;
}
.wa-float:hover{transform:scale(1.1);box-shadow:0 10px 32px rgba(37,211,102,.5)}
@keyframes waPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Page animations */
.page-enter{animation:pageIn .4s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════════════════════
   ULTRA-PRO LIVE GENERATION ANIMATION
   ════════════════════════════════════════════════════════ */

/* Slide-in entrance for new rows */
@keyframes lv-enter {
  0%   { opacity:0; transform:translateY(-12px) scale(.97); }
  100% { opacity:1; transform:translateY(0)     scale(1);   }
}
/* Shimmer sweep across the progress bar */
@keyframes lv-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
/* Pulsing glow on the icon */
@keyframes lv-glow {
  0%,100% { box-shadow: 0 0 0   4px rgba(255,107,53,.0), 0 0 0  0px rgba(255,107,53,.0); }
  50%     { box-shadow: 0 0 12px 4px rgba(255,107,53,.35),0 0 24px 8px rgba(255,107,53,.12); }
}
/* Spinning ring for the icon */
@keyframes lv-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
/* Fade+scale for "Generating" text badge */
@keyframes lv-badge {
  0%,100% { opacity:.6; transform:scale(1);    }
  50%     { opacity:1;  transform:scale(1.04); }
}
/* Done row pop */
@keyframes lv-done {
  0%   { transform:scale(.98); }
  60%  { transform:scale(1.02); }
  100% { transform:scale(1);   }
}

/* ── Row wrapper ── */
.lv-row {
  animation: lv-enter .35s cubic-bezier(.34,1.3,.64,1) both;
  position: relative;
  border-radius: 10px;
  margin-bottom: 4px;
  overflow: visible;
  padding: 10px 12px;
}
/* Animated left border accent */
/* no left border line */

/* ── Icon with spin ring ── */
.lv-icon-wrap {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  animation: lv-glow 2s ease-in-out infinite;
}
.lv-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: rgba(255,107,53,.3);
  animation: lv-spin 1.2s linear infinite;
}

/* ── Progress bar ── */
.lv-prog {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 7px;
  width: 100%;
}
.lv-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .7s ease;
}
.lv-fill.ani {
  background: linear-gradient(90deg,
    var(--accent) 0%,
    #ff4080      30%,
    #8b5cf6      60%,
    var(--accent) 100%
  );
  background-size: 200% 100%;
  animation: lv-shimmer 1.8s linear infinite;
}
.lv-fill.done {
  background: var(--green);
  animation: none;
  width: 100% !important;
}

/* ── Timer text ── */
.lv-time {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em;
}

/* ── Generating badge ── */
.lv-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid rgba(255,107,53,.25);
  border-radius: 5px;
  padding: 3px 9px;
  animation: lv-badge 1.6s ease-in-out infinite;
  white-space: nowrap;
  letter-spacing: .03em;
}

/* Done row bounce */
.lv-done-row {
  animation: lv-done .4s cubic-bezier(.34,1.3,.64,1);
}


/* Sidebar layout: fixed height flex column so history never pushes Generate button */
.tts-sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.tts-settings {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
#s-settings {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
}
/* Language Override / Speaker boost / Reset — settings column ke BOTTOM pe */
.settings-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
/* Model info card — chhota professional paragraph (Speed ke neeche) */
.model-info { margin-top: 16px; padding: 2px 2px 0; }
.mi-title { font-size: 12px; font-weight: 700; color: var(--tx2); letter-spacing: .01em; margin-bottom: 6px; }
.mi-desc { font-size: 11.5px; color: var(--tx3); line-height: 1.65; margin: 0 0 14px; }
.mi-feats { display: flex; flex-direction: column; gap: 9px; padding-top: 13px; border-top: 1px solid var(--border); }
.mi-feat { font-size: 12px; color: var(--tx2); font-weight: 500; display: flex; align-items: center; gap: 9px; }
.mi-feat svg { flex-shrink: 0; color: var(--tx3); }
#s-hist {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.stabs {
  flex-shrink: 0 !important;
}
#hist-container {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 0 0 8px;
}
/* ── Multi-Script toggle button ── */
.ms-btn {
  font-size: 11.5px; font-weight: 700;
  padding: 7px 15px; border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid var(--border2);
  background: transparent; color: var(--tx2);
  font-family: inherit;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
.ms-btn:hover:not(.on) { background: var(--hover); border-color: var(--border2); }
.ms-btn.on {
  background: linear-gradient(135deg, var(--accent), #ff4080);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255,107,53,.35);
}
.ms-btn.on::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 50%);
  pointer-events: none;
}
/* ════════════════════════════════════════════════════════
   NOTIFICATION BELL + PANEL
   ════════════════════════════════════════════════════════ */

/* Bell ring animation */
@keyframes bell-ring {
  0%,100% { transform: rotate(0deg); }
  10%     { transform: rotate(22deg); }
  20%     { transform: rotate(-18deg); }
  30%     { transform: rotate(14deg); }
  40%     { transform: rotate(-10deg); }
  50%     { transform: rotate(7deg); }
  60%     { transform: rotate(-4deg); }
  70%     { transform: rotate(2deg); }
  80%     { transform: rotate(-1deg); }
}
@keyframes bell-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes notif-slide {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes badge-pop {
  0%   { transform:scale(0); }
  70%  { transform:scale(1.3); }
  100% { transform:scale(1); }
}

/* Bell button */
.vl-bell {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.vl-bell:hover { background: var(--hover); border-color: var(--accent); }
.vl-bell.ringing svg { animation: bell-ring .6s ease both; }
.vl-bell.ringing { box-shadow: 0 0 0 4px rgba(255,107,53,.25); }
.vl-bell.pop { animation: bell-pop .35s cubic-bezier(.34,1.56,.64,1); }

/* Unread badge */
.vl-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 17px; height: 17px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
  animation: badge-pop .25s cubic-bezier(.34,1.56,.64,1) both;
  pointer-events: none;
  border: 2px solid var(--bg);
}
.vl-bell-badge.hidden { display: none; }


/* ── Admin panel independent styles ── */
body.admin-page .btn.bdanger {
  background: rgba(239,68,68,.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239,68,68,.3) !important;
}
body.admin-page .btn.bdanger:hover {
  background: rgba(239,68,68,.2) !important;
}
.stagger > *{animation:staggerIn .35s ease both}
.stagger > *:nth-child(1){animation-delay:.05s}.stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.15s}.stagger > *:nth-child(4){animation-delay:.2s}
.stagger > *:nth-child(5){animation-delay:.25s}.stagger > *:nth-child(6){animation-delay:.3s}
@keyframes staggerIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}
.si-soon{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;background:rgba(37,99,235,.1);color:var(--blue);margin-left:auto;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Complete overhaul
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE v2 — max 10 voices, name+play only
   ══════════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;min-width:320px}
*{-webkit-tap-highlight-color:transparent}
.mob-menu-btn{display:none}

@media(max-width: 768px) {
  /* ── Base Layout ── */
  input, textarea, select { font-size: 16px !important; }
  html, body, .main, .tts-layout, .dash-pad, .admin-pad { max-width: 100vw !important; overflow-x: hidden !important; overflow-y: auto !important; }
  .main { min-width: 0 !important; margin-left: 0 !important; }
  
  /* ── Mobile Sidebar & Navigation ── */
  .sb { width: 0; overflow: hidden; transition: width .25s ease; }
  .sb.mob-open { width: 270px; box-shadow: 8px 0 40px rgba(0,0,0,.45); }
  .mob-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; color: var(--tx2); flex-shrink: 0; }
  .mob-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99; display: none; }
  .mob-overlay.open { display: block; }
  body.no-scroll { overflow: hidden !important; }
  .topbar { padding: 0 12px; gap: 6px; height: 50px; }
  .tb-breadcrumb { font-size: 14px; }
  .tb-right > .btn { display: none !important; } 

  /* ══════════════════════════════════════════════════════════
     TTS LAYOUT REORDER (Khali jaga khatam ki gayi)
     ══════════════════════════════════════════════════════════ */
  .tts-layout { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; overflow: visible !important; }
  .tts-body { display: contents !important; } 
  
  /* 1. Text Area Top Par */
  .tts-editor { order: 1 !important; flex: none !important; height: auto !important; padding: 16px 14px 0 !important; overflow: visible !important; }
  .tts-editor textarea { min-height: 120px !important; height: 120px !important; max-height: none !important; padding-bottom: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
  
  /* 2. Settings aur History uske theek neeche */
  .tts-sidebar { order: 2 !important; width: 100% !important; flex: none !important; height: auto !important; max-height: none !important; border-top: none !important; border-left: none !important; padding-bottom: 0 !important; overflow: visible !important; background: transparent !important; }
  .tts-settings { padding: 16px 14px 0 !important; flex: none !important; height: auto !important; overflow: visible !important; }
  .stabs { margin: 0 -14px 16px !important; padding: 0 14px !important; position: static !important; border-bottom: 1px solid var(--border) !important; }
  #s-settings, #s-hist, #hist-container { flex: none !important; height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: 10px !important; }

  /* 3. Wave Box (Generating animation) */
  .wave-box { order: 3 !important; }
  
  /* 4. Generate Button sabse aakhir mein */
  .tts-foot { order: 4 !important; flex-direction: column !important; padding: 16px 14px 120px 14px !important; border-top: none !important; gap: 10px !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .tts-foot-left { display: flex !important; flex-direction: row !important; justify-content: space-between !important; width: 100% !important; margin: 0 !important; flex-wrap: wrap !important; gap: 10px 8px !important; }
  .tts-foot-voice { display: none !important; } 
  .tts-foot-credits { font-size: 12.5px !important; margin: 0 !important; }
  .char-bar { width: auto !important; text-align: right !important; font-size: 12px !important; margin: 0 !important; }
  #gen-btn { width: 100% !important; padding: 14px !important; font-size: 16px !important; margin-top: 4px !important; border-radius: 12px !important; }
  .tts-foot > .ms-btn { display: flex !important; width: 100% !important; justify-content: center !important; padding: 14px !important; font-size: 14px !important; border-radius: 10px !important; margin-top: 4px !important; }
  .tts-dl-btn { display: none !important; }

  /* 5. Audio Player Hamesha bottom par sticky */
  .audio-player { order: 5 !important; position: fixed !important; left: 0; right: 0; bottom: 0; padding: 12px 14px !important; gap: 8px 12px !important; display: grid !important; grid-template-columns: 1fr auto auto !important; grid-template-rows: auto auto !important; z-index: 200; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.15); min-height: auto !important; max-width: 100vw !important; padding-bottom: calc(12px + env(safe-area-inset-bottom,0px)) !important; }
  .tts-body.player-open .tts-editor textarea { min-height: 80px !important; height: 80px !important; }
  
  .ap-text { grid-column: 1 !important; grid-row: 1 !important; min-width: 0; padding-right: 0 !important; border-right: none !important; display: flex; flex-direction: column; justify-content: center; }
  .ap-text-main { font-size: 13.5px !important; max-width: 100% !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ap-text-sub { gap: 4px; margin-top: 2px; }
  .ap-voice-name { font-size: 11px !important; }
  .ap-actions { grid-column: 2 !important; grid-row: 1 !important; padding: 0 !important; border: none !important; align-self: center !important; display: flex; position: static !important; }
  .ap-dl-btn { padding: 8px 12px !important; font-size: 11.5px !important; border-radius: 8px !important; }
  .ap-play { grid-column: 3 !important; grid-row: 1 !important; width: 42px !important; height: 42px !important; min-width: 42px !important; align-self: center !important; margin: 0 !important; position: static !important; }
  .ap-progress { grid-column: 1/4 !important; grid-row: 2 !important; display: flex !important; align-items: center; gap: 8px; width: 100%; padding: 0 !important; margin-top: 4px; }
  .ap-time { font-size: 10.5px !important; }
  .ap-bar { height: 4px !important; flex: 1; }

  /* ── HISTORY ROWS (Max 20 limit) ── */
  #hist-container .hist-row:nth-child(n+21) { display: none !important; }
  .hist-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; padding: 14px 0 !important; border-bottom: 1px solid var(--border) !important; }
  .hist-ic { display: none !important; } 
  .hist-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
  .hist-voice { font-size: 13px !important; font-weight: 700 !important; color: var(--tx) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .hist-text { font-size: 12.5px !important; color: var(--tx2) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; }
  .hist-time { font-size: 10.5px !important; color: var(--tx3) !important; }
  .hist-actions { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }
  .hist-actions .ap-action-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; background: var(--bg2) !important; color: var(--tx2) !important; display: flex !important; align-items: center !important; justify-content: center !important; }

  /* ── ADVANCED SETTINGS ACCORDION ── */
  .adv-settings-btn { -webkit-appearance: none !important; appearance: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; padding: 14px 16px !important; margin-top: 12px !important; margin-bottom: 8px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--tx) !important; font-size: 14px !important; font-weight: 600 !important; font-family: inherit !important; cursor: pointer !important; }
  .adv-settings-btn.open .chevron { transform: rotate(180deg) !important; }
  .adv-settings-panel { display: none !important; padding: 16px 14px !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; margin-bottom: 12px !important; }
  .adv-settings-panel.open { display: block !important; animation: slideDown 0.2s ease-out !important; }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

  /* General UI & Admin */
  .lv-row { padding: 14px 12px !important; margin-bottom: 8px !important; }
  .lv-icon-wrap { width: 34px !important; height: 34px !important; }
  .voice-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .vpanel{width:100%!important;box-shadow:none!important}
  .vp-hdr{padding:0 16px!important}.vp-hdr-top{padding:12px 0 0!important}.vp-search-row{padding:12px 16px 0!important}.vp-chips-row{padding:10px 16px!important}.vp-results-hdr{padding:8px 16px 4px!important}.vlist-item{padding:12px 16px!important}.vl-lang-col,.vl-cat-tag,.vl-stats-col{display:none!important}
  .dash-pad { padding: 16px 14px; }
  .stat-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
 
  .toasts { bottom: 104px; right: 10px; left: 10px; align-items: stretch; }
  .toast { min-width: auto; max-width: none; width: 100%; font-size: 13px; padding: 13px 16px 17px; border-radius: 14px; }
  .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; margin-bottom: 8px; }
  .admin-topbar { display: flex !important; }
  .admin-pad { padding: 16px 14px !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .srow { flex-direction: column !important; align-items: stretch !important; }
  .sbr { width: 100% !important; max-width: 100% !important; }
  .admin-danger-actions { flex-direction: column !important; align-items: stretch !important; }
  .admin-danger-actions form { display: flex; flex-direction: column; }
  .admin-danger-actions .btn { width: 100% !important; margin: 0 !important; }
}
/* ── DROPDOWN MENU (el-dd) – used on voices explore + TTS panel ── */
.el-dd-wrap{position:relative;flex-shrink:0}
.el-dd-btn{display:flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--tx2);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:var(--tr)}
.el-dd-btn:hover{border-color:var(--border2);color:var(--tx);background:var(--hover)}
.el-dd-btn.active{border-color:var(--accent);color:var(--accent);background:var(--bg2)}
.el-dd-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:9999;display:none;max-height:280px;overflow-y:auto}
.el-dd-panel.open{display:block;animation:ddIn .12s ease}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.el-dd-item{padding:9px 14px;font-size:13px;cursor:pointer;color:var(--tx2);transition:background .1s;white-space:nowrap}
.el-dd-item:hover{background:var(--hover);color:var(--tx)}
.el-dd-item.on{font-weight:700;color:var(--accent)}
/* ---> YAHAN PAR KHATAM <--- */