.tts-page {
  --bg: var(--page-bg);
  --white: var(--panel);
  --bdr: var(--header-border);
  --bdr2: color-mix(in srgb, var(--text-muted) 32%, var(--header-border));
  --t1: var(--text-strong);
  --t2: var(--text-soft);
  --t3: var(--text-muted);
  --ac: var(--accent);
  --ac2: var(--accent-strong);
  --grad: linear-gradient(135deg, var(--accent), var(--accent-strong));
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --shad: var(--shadow);
  --r: 14px;
  --rm: 10px;
  --rs: 7px;
  --font: var(--font-display);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--bg);
  min-height: 100vh;
  padding: 2.5rem 1.25rem 1rem;
  font-family: var(--font);
  color: var(--t1);
}
.tts-page *,
.tts-page *::before,
.tts-page *::after{box-sizing:border-box;margin:0;padding:0;}
.tts-page .inner{max-width:1020px;margin:0 auto;}

.tts-page .tts-hdr{text-align:center;margin-bottom:2.5rem;animation:up .5s ease both;}
.tts-page .badge{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb, var(--ac) 8%, transparent);border:1px solid color-mix(in srgb, var(--ac) 20%, transparent);border-radius:100px;padding:5px 16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ac);margin-bottom:1rem;}
.tts-page .bdot{width:6px;height:6px;border-radius:50%;background:var(--ac);animation:blink 1.6s infinite;}
.tts-page .tts-hdr h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;letter-spacing:0;line-height:1.1;margin-bottom:.65rem;}
.tts-page .tts-hdr h1 .g{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tts-page .tts-hdr p{color:var(--t2);font-size:.97rem;}

.tts-page .card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--shad);overflow:hidden;animation:up .6s ease both;}
.tts-page .ch{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.4rem;border-bottom:1px solid var(--bdr);background:#fafbfe;}
.tts-page .cl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);}
.tts-page .cb{padding:1.35rem;}

.tts-page .grid{display:grid;grid-template-columns:1fr 320px;gap:1.2rem;align-items:start;}
@media(max-width:760px){.tts-page .grid{grid-template-columns:1fr;}}
.tts-page .col{display:flex;flex-direction:column;gap:1.2rem;}

.tts-page .presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.9rem;}
.tts-page .pbtn{font-size:.74rem;font-weight:600;padding:5px 13px;border-radius:100px;border:1.5px solid var(--bdr2);background:transparent;color:var(--t2);cursor:pointer;transition:all .14s;font-family:var(--font);}
.tts-page .pbtn:hover{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb, var(--ac) 6%, transparent);}

.tts-page #textInput{width:100%;height:195px;background:var(--panel-soft);border:1.5px solid var(--bdr2);border-radius:var(--rm);padding:1rem 1.1rem;color:var(--t1);font-family:var(--font);font-size:.96rem;line-height:1.7;resize:vertical;outline:none;transition:border-color .18s,box-shadow .18s;}
.tts-page #textInput:focus{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb, var(--ac) 10%, transparent);}
.tts-page #textInput::placeholder{color:var(--t3);}

.tts-page .statsrow{display:flex;justify-content:space-between;align-items:center;margin-top:.55rem;}
.tts-page .stats{display:flex;gap:1.1rem;}
.tts-page .stat{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.67rem;color:var(--t3);}
.tts-page .pip{width:5px;height:5px;border-radius:50%;}
.tts-page .pip-b{background:var(--ac);}
.tts-page .pip-g{background:var(--green);}
.tts-page .pip-a{background:var(--amber);}
.tts-page .charlim{font-family:var(--mono);font-size:.67rem;color:var(--t3);}
.tts-page .charlim.warn{color:var(--amber);}
.tts-page .charlim.over{color:var(--red);font-weight:700;}

.tts-page .wavebox{height:76px;background:var(--bg);border:1.5px solid var(--bdr);border-radius:var(--rm);display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden;margin-bottom:.9rem;}
.tts-page .wb{width:3px;border-radius:3px;background:var(--bdr2);animation:idle 2s ease-in-out infinite;}
.tts-page .wb.on{background:var(--ac);animation:live .35s ease-in-out infinite;}
.tts-page .wb:nth-child(1){height:10px;animation-delay:0s}.tts-page .wb:nth-child(2){height:20px;animation-delay:.08s}.tts-page .wb:nth-child(3){height:34px;animation-delay:.16s}.tts-page .wb:nth-child(4){height:18px;animation-delay:.24s}.tts-page .wb:nth-child(5){height:50px;animation-delay:.32s}.tts-page .wb:nth-child(6){height:26px;animation-delay:.4s}.tts-page .wb:nth-child(7){height:60px;animation-delay:.48s}.tts-page .wb:nth-child(8){height:36px;animation-delay:.56s}.tts-page .wb:nth-child(9){height:54px;animation-delay:.64s}.tts-page .wb:nth-child(10){height:22px;animation-delay:.72s}.tts-page .wb:nth-child(11){height:44px;animation-delay:.8s}.tts-page .wb:nth-child(12){height:14px;animation-delay:.88s}.tts-page .wb:nth-child(13){height:48px;animation-delay:.96s}.tts-page .wb:nth-child(14){height:28px;animation-delay:1.04s}.tts-page .wb:nth-child(15){height:56px;animation-delay:1.12s}.tts-page .wb:nth-child(16){height:18px;animation-delay:1.2s}.tts-page .wb:nth-child(17){height:38px;animation-delay:1.28s}.tts-page .wb:nth-child(18){height:12px;animation-delay:1.36s}.tts-page .wb:nth-child(19){height:30px;animation-delay:1.44s}.tts-page .wb:nth-child(20){height:46px;animation-delay:1.52s}

.tts-page .transport{display:flex;align-items:center;gap:.7rem;}
.tts-page .tbtn{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s;}
.tts-page .tplay{background:var(--grad);color:#fff;box-shadow:0 4px 14px color-mix(in srgb, var(--ac) 30%, transparent);}
.tts-page .tplay:hover{transform:scale(1.08);}
.tts-page .tstop{background:var(--white);border:1.5px solid var(--bdr2)!important;color:var(--t2);}
.tts-page .tstop:hover{border-color:var(--red)!important;color:var(--red);}
.tts-page .ptrack{flex:1;height:4px;background:var(--bdr);border-radius:2px;overflow:hidden;}
.tts-page .pfill{height:100%;background:var(--grad);width:0%;border-radius:2px;transition:width .2s linear;}
.tts-page .ttime{font-family:var(--mono);font-size:.67rem;color:var(--t3);min-width:70px;text-align:right;}

.tts-page .lbl{display:block;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:.5rem;}
.tts-page .div{height:1px;background:var(--bdr);margin:1rem 0;}

.tts-page .lpills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:.7rem;}
.tts-page .lpill{font-size:.64rem;font-family:var(--mono);padding:3px 10px;border-radius:100px;border:1.5px solid var(--bdr2);background:transparent;color:var(--t3);cursor:pointer;transition:all .14s;}
.tts-page .lpill:hover,.tts-page .lpill.on{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb, var(--ac) 7%, transparent);}

.tts-page .vsrch{position:relative;margin-bottom:.55rem;}
.tts-page .vsrch input{width:100%;background:var(--panel-soft);border:1.5px solid var(--bdr2);border-radius:var(--rs);padding:.52rem .8rem .52rem 2rem;font-size:.81rem;color:var(--t1);font-family:var(--font);outline:none;transition:border-color .18s;}
.tts-page .vsrch input:focus{border-color:var(--ac);}
.tts-page .vsrch input::placeholder{color:var(--t3);}
.tts-page .vsrch::before{content:'⌕';position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--t3);font-size:1rem;pointer-events:none;}
.tts-page select.vsel{width:100%;background:var(--panel-soft);border:1.5px solid var(--bdr2);color:var(--t1);padding:.58rem .8rem;border-radius:var(--rs);font-family:var(--font);font-size:.81rem;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239299b5' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;cursor:pointer;margin-bottom:1rem;}
.tts-page select.vsel:focus{border-color:var(--ac);}

.tts-page .srow{display:flex;align-items:center;gap:.65rem;margin-bottom:.75rem;}
.tts-page .srow label{font-size:.77rem;color:var(--t2);width:36px;flex-shrink:0;}
.tts-page .srow input[type=range]{flex:1;-webkit-appearance:none;height:3px;background:var(--bdr);border-radius:2px;outline:none;cursor:pointer;}
.tts-page .srow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb, var(--ac) 15%, transparent);cursor:pointer;}
.tts-page .srow .v{font-family:var(--mono);font-size:.67rem;color:var(--ac);width:34px;text-align:right;flex-shrink:0;}
.tts-page .schips{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:.4rem;margin-bottom:.75rem;}
.tts-page .schip{padding:5px 0;text-align:center;border-radius:var(--rs);border:1.5px solid var(--bdr2);background:transparent;color:var(--t3);font-size:.64rem;font-family:var(--mono);cursor:pointer;transition:all .14s;}
.tts-page .schip:hover,.tts-page .schip.on{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb, var(--ac) 7%, transparent);}

.tts-page .api-voices{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:1rem;}
.tts-page .avbtn{padding:.55rem .65rem;border-radius:var(--rs);border:1.5px solid var(--bdr2);background:transparent;font-family:var(--font);font-size:.78rem;font-weight:600;color:var(--t2);cursor:pointer;transition:all .14s;text-align:left;line-height:1.25;}
.tts-page .avbtn small{display:block;font-size:.63rem;font-weight:400;color:var(--t3);margin-top:2px;}
.tts-page .avbtn:hover{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb, var(--ac) 5%, transparent);}
.tts-page .avbtn.on{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb, var(--ac) 7%, transparent);}
.tts-page .avbtn.on small{color:var(--ac2);}

.tts-page .btn-dl{width:100%;padding:.95rem;border-radius:var(--rm);border:none;background:var(--grad);color:#fff;font-family:var(--font);font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 18px color-mix(in srgb, var(--ac) 30%, transparent);}
.tts-page .btn-dl:hover{transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb, var(--ac) 42%, transparent);}
.tts-page .btn-dl:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.tts-page .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
.tts-page .btn-dl.loading .spin{display:inline-block;}
.tts-page .btn-dl.loading .ico{display:none;}

.tts-page .dl-progress{height:4px;background:var(--bdr);border-radius:2px;margin-top:.75rem;overflow:hidden;display:none;}
.tts-page .dl-progress.show{display:block;}
.tts-page .dl-bar{height:100%;width:0%;background:var(--grad);border-radius:2px;transition:width .3s ease;}

.tts-page .note{margin-top:.75rem;font-size:.68rem;color:var(--t3);text-align:center;line-height:1.7;}
.tts-page .note a{color:var(--ac);text-decoration:none;}
.tts-page .note strong{color:var(--t2);}

/* Tips */
.tts-page .tips{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem;animation:up .65s ease both;animation-delay:.15s;}
@media(max-width:580px){.tts-page .tips{grid-template-columns:1fr;}}
.tts-page .tip{background:var(--white);border:1px solid var(--bdr);border-radius:var(--rm);padding:1rem 1.1rem;box-shadow:var(--shad);}
.tts-page .ti{font-size:1.25rem;margin-bottom:.4rem;}
.tts-page .tt{font-size:.8rem;font-weight:700;margin-bottom:.25rem;}
.tts-page .tb{font-size:.74rem;color:var(--t2);line-height:1.6;}

/* ── FAQ Section ─────────────────────────────── */
.tts-page .faq-section{margin-top:4rem;padding-top:2.5rem;border-top:2px solid var(--bdr);}
.tts-page .faq-hdr{text-align:center;margin-bottom:2rem;}
.tts-page .faq-hdr h2{font-size:1.75rem;font-weight:800;letter-spacing:0;margin-bottom:.5rem;}
.tts-page .faq-hdr p{color:var(--t2);font-size:.92rem;}

.tts-page .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;background:var(--white);box-shadow:var(--shad);}
@media(max-width:680px){.tts-page .faq-grid{grid-template-columns:1fr;}}

.tts-page .faq-item{padding:0;border-bottom:1px solid var(--bdr);}
.tts-page .faq-item:nth-child(odd){border-right:1px solid var(--bdr);}
@media(max-width:680px){.tts-page .faq-item:nth-child(odd){border-right:none;}}
.tts-page .faq-item:nth-last-child(-n+2){border-bottom:none;}
@media(max-width:680px){.tts-page .faq-item:last-child{border-bottom:none;}.tts-page .faq-item:nth-last-child(2){border-bottom:1px solid var(--bdr);}}

.tts-page .faq-q{
  width:100%;text-align:left;
  background:transparent;border:none;
  padding:1.15rem 1.35rem;
  font-family:var(--font);font-size:.88rem;font-weight:700;
  color:var(--t1);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:background .15s;
}
.tts-page .faq-q:hover{background:color-mix(in srgb, var(--ac) 3%, transparent);}
.tts-page .faq-q[aria-expanded="true"]{color:var(--ac);}
.tts-page .faq-icon{
  width:20px;height:20px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--bdr2);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;flex-shrink:0;transition:all .2s;color:var(--t3);
}
.tts-page .faq-q[aria-expanded="true"] .faq-icon{
  background:var(--ac);border-color:var(--ac);color:#fff;transform:rotate(45deg);
}
.tts-page .faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  font-size:.82rem;color:var(--t2);line-height:1.7;
  padding:0 1.35rem;
}
.tts-page .faq-a.open{max-height:300px;padding:0 1.35rem 1.2rem;}

/* SEO text block */
.tts-page .seo-text{
  margin-top:3rem;
  background:var(--white);
  border:1px solid var(--bdr);
  border-radius:var(--r);
  padding:2rem 2.25rem;
  box-shadow:var(--shad);
}
.tts-page .seo-text h2{font-size:1.2rem;font-weight:800;margin-bottom:.75rem;letter-spacing:0;}
.tts-page .seo-text h3{font-size:.92rem;font-weight:700;margin:1.25rem 0 .4rem;color:var(--t1);}
.tts-page .seo-text p{font-size:.82rem;color:var(--t2);line-height:1.75;margin-bottom:.5rem;}

@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes idle{0%,100%{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@keyframes live{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.35)}}
@keyframes spin{to{transform:rotate(360deg)}}
.tts-page .status-label{font-family:var(--mono);font-size:.62rem;color:var(--ac);background:color-mix(in srgb, var(--ac) 8%, transparent);border:1px solid color-mix(in srgb, var(--ac) 18%, transparent);border-radius:100px;padding:3px 9px;white-space:nowrap;}
.tts-page .free-badge{font-family:var(--mono);font-size:.62rem;color:var(--green);background:color-mix(in srgb, var(--green) 10%, transparent);border:1px solid color-mix(in srgb, var(--green) 25%, transparent);padding:2px 9px;border-radius:100px;}
.tts-page .lbl-spaced{margin-top:.5rem;}
.tts-page .schips-download{margin-bottom:1rem;}
.tts-page .srow-last{margin-bottom:0;}
.tts-page .anim-delay-03{animation-delay:.03s;}
.tts-page .anim-delay-06{animation-delay:.06s;}
.tts-page .anim-delay-07{animation-delay:.07s;}
.tts-page .anim-delay-10{animation-delay:.1s;}

@media (max-width: 760px) {
  .tts-page .grid {
    display: flex;
    flex-direction: column;
  }

  .tts-page .col {
    display: contents;
  }

  .tts-page .script-card { order: 1; }
  .tts-page .download-card { order: 2; }
  .tts-page .playback-card { order: 3; }
}
.tts-page .generated-empty {
  border: 1px dashed var(--bdr2);
  border-radius: var(--rm);
  color: var(--t2);
  font-size: .82rem;
  line-height: 1.6;
  padding: 1rem;
  text-align: center;
}

.tts-page .generated-result {
  display: grid;
  gap: .85rem;
}

.tts-page .generated-result[hidden] {
  display: none;
}

.tts-page .generated-result audio {
  width: 100%;
}

.tts-page .download-ready {
  align-items: center;
  background: var(--grad);
  border-radius: var(--rm);
  color: #fff;
  display: flex;
  font-weight: 800;
  justify-content: center;
  padding: .78rem 1rem;
  text-decoration: none;
}

.tts-page .download-ready:hover {
  color: #fff;
  transform: translateY(-1px);
}

.tts-page .expire-note {
  color: var(--t3);
  font-size: .72rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}
.tts-page .generated-card .ch {
  gap: .65rem;
}

@media (max-width: 520px) {
  .tts-page .ch {
    align-items: flex-start;
    gap: .55rem;
    padding: .8rem 1rem;
  }

  .tts-page .generated-card .ch {
    align-items: flex-start;
    flex-direction: column;
  }

  .tts-page .generated-card .cl {
    line-height: 1.35;
  }

  .tts-page .generated-card .status-label {
    align-self: flex-start;
  }

  .tts-page .generated-result audio {
    min-width: 0;
  }
}

/* Free/basic TTS mode polish */
.tts-page .basic-note{
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  border-radius: var(--rs);
  color: var(--t2);
  font-size: .72rem;
  line-height: 1.55;
  margin: -.25rem 0 1rem;
  padding: .65rem .75rem;
}
.tts-page .api-voices .avbtn[data-lang="hi"]{
  border-color: color-mix(in srgb, var(--green) 35%, var(--bdr2));
}
.tts-page .api-voices .avbtn[data-lang="hi"] small{
  color: color-mix(in srgb, var(--green) 72%, var(--t3));
}
.tts-page .api-voices .avbtn.on[data-lang="hi"]{
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border-color: var(--green);
  color: var(--green);
}
.tts-page .api-voices .avbtn.on[data-lang="hi"] small{
  color: color-mix(in srgb, var(--green) 82%, var(--t2));
}
.tts-page .free-badge{
  white-space: nowrap;
}
@media(max-width:520px){
  .tts-page .api-voices{
    grid-template-columns: 1fr;
  }
}