/* Shared TTS styles – main pages + embed */
:root{
  --clr-primary:#4f46e5;
  --clr-primary-dark:#4338ca;
  --radius:.5rem;
  --max-w:90ch;
  --ff:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);color:#111;line-height:1.6;text-align:center}

/* Embed-specific */
body.embed{padding:.75rem;text-align:left}
.embed-wrap{max-width:32rem;margin:0 auto}
.embed-backlink{
  display:inline-block;
  margin-bottom:.6rem;
  font-size:.8rem;
  color:var(--clr-primary);
  text-decoration:none;
  font-weight:600;
}
.embed-backlink:hover{color:var(--clr-primary-dark);text-decoration:underline}

.support-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.28rem;
  border:1px solid #cfd6f7;
  background:#fff;
  color:#1f2a44;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  padding:.32rem .56rem;
  text-decoration:none;
  cursor:pointer;
  width:auto;
  max-width:none;
  margin:0;
  flex:0 0 auto;
}
.support-chip:hover{background:#eef2ff}

/* Text input */
.text-input-wrap{
  position:relative;
  width:100%;
  max-width:32rem;
  margin:.5rem auto;
}
.embed-wrap .text-input-wrap{margin:.4rem 0}
#text-input{
  width:100%;
  max-width:none;
  margin:0;
  min-height:9rem;
  padding:.6rem 3rem .6rem .6rem;
  font-size:1rem;
  border:1px solid #ccc;
  border-radius:var(--radius);
  resize:vertical;
}
.embed-wrap #text-input{min-height:5rem;padding:.5rem}

/* Voice select row */
.voice-select-row{
  display:grid;
  grid-template-columns:minmax(8.5rem,1.15fr) minmax(4rem,.6fr) minmax(8rem,1fr) minmax(11rem,1.6fr);
  align-items:stretch;
  width:100%;
  max-width:32rem;
  margin:0 auto .7rem auto;
  gap:.25rem;
}
.embed-wrap .voice-select-row{margin:.5rem 0}
.voice-select-row label{font-size:.98em;margin-right:.2em}
.voice-select-row select{
  width:100%;
  max-width:none;
  min-width:0;
  padding:.2em .5em;
  border-radius:.25em;
  border:1px solid #bbb;
  background:#fafbfc;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  margin:0;
  font-size:.95em;
  height:2.2em;
}
#language-select{min-width:2.7em;font-size:.95em;height:2.2em}
#dialect-select{min-width:5em;font-size:.95em;height:2.2em}
#voice-select{min-width:6em;font-size:.95em;height:2.2em}

/* Engine switch */
.engine-switch{
  display:flex;
  align-items:center;
  gap:.18rem;
  padding:.16rem;
  border:1px solid #b8c0db;
  border-radius:.6rem;
  background:#f4f6ff;
  min-height:2.2em;
}
.engine-switch button{
  width:50%;
  max-width:none;
  margin:0;
  padding:.32rem .45rem;
  min-height:1.65rem;
  border:0;
  border-radius:.45rem;
  background:transparent;
  color:#42507d;
  font-size:.83rem;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.engine-switch button:hover{background:#e6eafe}
.engine-switch button.is-active{
  background:var(--clr-primary);
  color:#fff;
  box-shadow:0 2px 8px rgba(67,56,202,.28);
}
#engine-select{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* TTS player */
.tts-player{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  width:100%;
  max-width:32rem;
  margin:.85rem auto 0;
  padding:.55rem .65rem;
  border-radius:1rem;
  background:#232741;
  color:#eef2ff;
}
.embed-wrap .tts-player{margin:.6rem 0 0}
.tts-primary{
  display:flex;
  align-items:center;
  gap:.45rem;
  width:100%;
}
.tts-player button{
  width:2.2rem;
  max-width:none;
  min-height:2.2rem;
  margin:0;
  padding:0;
  border-radius:999px;
  background:#3a426f;
  font-size:1rem;
  line-height:1;
  border:none;
  cursor:pointer;
}
.tts-player button:hover{background:#4b568f}
.tts-player .player-main{background:#5762a8}
.tts-player .player-main:hover{background:#6975c3}
.tts-progress{
  appearance:none;
  -webkit-appearance:none;
  flex:1;
  width:auto;
  max-width:none;
  margin:0;
  height:.35rem;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  outline:none;
}
.tts-progress::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:.85rem;
  height:.85rem;
  border-radius:50%;
  background:#eef2ff;
  border:0;
}
.tts-progress::-moz-range-thumb{
  width:.85rem;
  height:.85rem;
  border-radius:50%;
  background:#eef2ff;
  border:0;
}
.tts-tweaks{
  width:100%;
  display:flex;
  gap:.5rem;
  padding:.1rem .05rem 0;
}
.tts-mini{
  display:flex;
  align-items:center;
  gap:.3rem;
  font-size:.8rem;
  color:#ccd4ff;
  flex:1;
}
.tts-mini input{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  max-width:none;
  margin:0;
  height:.28rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  outline:none;
}
.tts-mini input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:.72rem;
  height:.72rem;
  border-radius:50%;
  background:#eef2ff;
  border:0;
}
.tts-mini input::-moz-range-thumb{
  width:.72rem;
  height:.72rem;
  border-radius:50%;
  background:#eef2ff;
  border:0;
}
.ai-export-status{
  max-width:32rem;
  margin:.4rem auto 0;
  font-size:.82rem;
  color:#4b5565;
}

@media(max-width:40em){
  .voice-select-row{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);
    gap:.22rem;
  }
  .voice-select-row select{font-size:.92em;height:2.05em}
  .engine-switch button{font-size:.79rem;padding:.28rem .34rem}
  #voice-select{grid-column:auto}
}