/* A light, compact speech studio aligned with Mediatavio's current visual system. */
body[data-tool-theme="tts"] {
  --bg: #f7f9f8;
  --bg-1: #fff;
  --bg-2: #fbfaff;
  --bg-3: #f1effb;
  --line: #e3e6e8;
  --line-2: #d3cdef;
  --fg: #17202b;
  --fg-2: #65717d;
  --fg-3: #7b858d;
  --acc: #6957d5;
  --acc-2: #5140b4;
  --acc-glow: rgb(105 87 213 / 16%);
  --cyan: #8bcf42;
  --green: #54852b;
  --amber: #a66a18;
  --red: #c94f60;
  --shadow: 0 10px 30px rgb(23 32 43 / 7%);
  background: #f7f9f8 !important;
  color: #17202b !important;
}
body[data-tool-theme="tts"]::before { display: none; }
body[data-tool-theme="tts"] .wrap { max-width: 1120px; padding: 0 24px 60px; }
body[data-tool-theme="tts"] .hero { padding: 52px 0 30px; }
body[data-tool-theme="tts"] .tool-kicker { color: #6957d5 !important; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
body[data-tool-theme="tts"] .hero h1 { max-width: 760px; color: #17202b; font-size: clamp(36px, 5vw, 58px); letter-spacing: -.055em; }
body[data-tool-theme="tts"] .hero p.lede { max-width: 740px; color: #65717d; font-size: 16px; }
body[data-tool-theme="tts"] .stat { min-width: 130px; border-color: #e3e6e8; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgb(23 32 43 / 4%); }
body[data-tool-theme="tts"] .stat b { color: #6957d5; font-family: inherit; }
body[data-tool-theme="tts"] .stat span { color: #65717d; }
body[data-tool-theme="tts"] .stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
body[data-tool-theme="tts"] .stat { display: flex; min-width: 0; align-items: baseline; gap: 7px; padding: 8px 11px; border-radius: 9px; box-shadow: none; }
body[data-tool-theme="tts"] .stat b { font-size: 13px; }
body[data-tool-theme="tts"] .stat span { font-size: 11px; }
body[data-tool-theme="tts"] #demo { padding: 22px 0 36px !important; }
body[data-tool-theme="tts"] .sec-head { margin-bottom: 16px; }
body[data-tool-theme="tts"] .sec-head h2, body[data-tool-theme="tts"] .sec-head h3 { color: #17202b; }
body[data-tool-theme="tts"] .sec-head p { color: #65717d; }
body[data-tool-theme="tts"] .bench { grid-template-columns: minmax(0, 1fr); gap: 16px; }
body[data-tool-theme="tts"] .bench > .card, body[data-tool-theme="tts"] .card {
  border: 1px solid #e3e6e8 !important;
  border-radius: 16px;
  background: #fff !important;
  color: #17202b !important;
  box-shadow: 0 9px 28px rgb(23 32 43 / 6%);
}
body[data-tool-theme="tts"] .voice-grid { min-height: 0; max-height: none; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); padding: 2px; overflow: visible; }
body[data-tool-theme="tts"] .vcard { border-color: #e3e6e8; border-radius: 12px; background: #fff; color: #17202b; }
body[data-tool-theme="tts"] .vcard:hover { border-color: #c7c0ec; background: #fbfaff; }
body[data-tool-theme="tts"] .vcard[aria-current="true"] { border-color: #6957d5; background: #f4f1ff; box-shadow: 0 0 0 1px #6957d5 inset; }
body[data-tool-theme="tts"] .vcard-select {
  display: block; width: 100%; margin: 0; padding: 0; border: 0 !important;
  border-radius: 8px !important; background: transparent !important; color: inherit !important;
  text-align: left; box-shadow: none !important; transform: none !important;
}
body[data-tool-theme="tts"] .vcard-select:hover { background: transparent !important; box-shadow: none !important; transform: none !important; }
body[data-tool-theme="tts"] .vcard-select:focus-visible { outline: 3px solid rgb(105 87 213 / 28%) !important; outline-offset: 4px; }
body[data-tool-theme="tts"] .vcard .videntity, body[data-tool-theme="tts"] .vcard .vname, body[data-tool-theme="tts"] .vcard .vacc { display: block; }
body[data-tool-theme="tts"] .vcard .vname { color: #17202b; }
body[data-tool-theme="tts"] .vcard .vacc, body[data-tool-theme="tts"] .vcard .vfoot { color: #65717d; }
body[data-tool-theme="tts"] .chip { border-color: #e3e0f3; background: #f7f6fc; color: #5140b4; }
body[data-tool-theme="tts"] .chip[aria-pressed="true"] { border-color: #6957d5; background: #6957d5; color: #fff; }
body[data-tool-theme="tts"] textarea#text {
  min-height: 190px;
  border: 1px solid #dfe3e6;
  border-radius: 12px;
  background: #fff;
  color: #17202b;
  box-shadow: inset 0 1px 2px rgb(23 32 43 / 3%);
}
body[data-tool-theme="tts"] textarea#text:focus { border-color: #8b7be1; box-shadow: 0 0 0 3px rgb(105 87 213 / 13%); }
body[data-tool-theme="tts"] textarea#text::placeholder { color: #8a939a; }
body[data-tool-theme="tts"] .note, body[data-tool-theme="tts"] .note.info { border: 1px solid #e6e2f5; border-left: 3px solid #6957d5; border-radius: 9px; background: #f8f6ff; color: #65717d; }
body[data-tool-theme="tts"] .note b { color: #44378f; }
body[data-tool-theme="tts"] .ta-foot .cnt, body[data-tool-theme="tts"] .slider-box .sl-top, body[data-tool-theme="tts"] .slider-box .sl-top b { color: #65717d; }
body[data-tool-theme="tts"] .ta-foot { justify-content: flex-start; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 2px; }
body[data-tool-theme="tts"] .ta-foot .cnt { font-family: inherit; font-weight: 650; }
body[data-tool-theme="tts"] .ta-foot .text-meta { color: #65717d; font-size: 12px; }
body[data-tool-theme="tts"] .text-upload { display: inline-flex; align-items: center; margin: 0 0 0 auto; padding: 7px 11px; border: 1px solid #dcd7f4; border-radius: 9px; background: #f3f1fc; color: #44378f; font-size: 12px; font-weight: 650; cursor: pointer; }
body[data-tool-theme="tts"] .text-upload:hover { border-color: #c7c0ec; background: #efecff; }
body[data-tool-theme="tts"] .text-upload:focus-within { outline: 3px solid rgb(105 87 213 / 28%); outline-offset: 3px; }
body[data-tool-theme="tts"] input[type="range"] { accent-color: #6957d5; }
body[data-tool-theme="tts"] .samples button { border-color: #e3e0f3; background: #f7f6fc; color: #5140b4; }
body[data-tool-theme="tts"] .samples button:hover { border-color: #c7c0ec; background: #efecff; color: #44378f; }
body[data-tool-theme="tts"] .toggle .tk { border-color: #d9dce0; background: #f0f1f2; }
body[data-tool-theme="tts"] .toggle input:checked + .tk { border-color: #6957d5; background: #6957d5; }
body[data-tool-theme="tts"] .toggle .tl, body[data-tool-theme="tts"] .adv-hint { color: #65717d; }
body[data-tool-theme="tts"] .upload-fold { border-color: #e3e6e8; }
body[data-tool-theme="tts"] .upload-fold > summary { color: #5140b4; font-weight: 650; }
body[data-tool-theme="tts"] .drop { border: 1.5px dashed #c7c0ec; border-radius: 14px; background: #fbfaff; color: #17202b; }
body[data-tool-theme="tts"] .drop:hover, body[data-tool-theme="tts"] .drop.over { border-color: #6957d5; background: #f4f1ff; }
body[data-tool-theme="tts"] .drop .di { color: #6957d5; }
body[data-tool-theme="tts"] .drop .dl, body[data-tool-theme="tts"] .limits li { color: #65717d; }
body[data-tool-theme="tts"] .lic.cc0 { background: #eff8e7; color: #4f7b2b; }
body[data-tool-theme="tts"] .btn-go, body[data-tool-theme="tts"] .btn-sub, body[data-tool-theme="tts"] .btn-play { border-radius: 11px; }
body[data-tool-theme="tts"] .btn-go { min-height: 48px; background: linear-gradient(135deg, #6957d5, #5140b4); box-shadow: 0 7px 18px rgb(81 64 180 / 18%); }
body[data-tool-theme="tts"] .btn-go:hover:not(:disabled) { box-shadow: 0 10px 23px rgb(81 64 180 / 24%); }
body[data-tool-theme="tts"] .result { border-color: #e3e6e8; }
body[data-tool-theme="tts"] .wave { border-color: #e2dfef; border-radius: 10px; background: #f8f7fc; }
body[data-tool-theme="tts"] .status { color: #65717d; }
body[data-tool-theme="tts"] .status.err { color: #b33c4b; }
body[data-tool-theme="tts"] .spin { border-color: #d9d2f8; border-top-color: #6957d5; }
body[data-tool-theme="tts"] #how, body[data-tool-theme="tts"] #features, body[data-tool-theme="tts"] #faq { max-width: 1000px; margin-inline: auto; }
body[data-tool-theme="tts"] .step-card, body[data-tool-theme="tts"] .feat { border-color: #e3e6e8; background: #fff; }
body[data-tool-theme="tts"] .step-card p, body[data-tool-theme="tts"] .feat p, body[data-tool-theme="tts"] #faq p { color: #65717d; }
body[data-tool-theme="tts"] .faq details { border-color: #e3e6e8; }
body[data-tool-theme="tts"] .faq summary { color: #17202b; }
body[data-tool-theme="tts"] .faq details[open] { background: #fbfaff; }
body[data-tool-theme="tts"] footer { border-color: #e3e6e8; color: #65717d; }

.reference-samples { margin: 12px 0 6px; }
.reference-samples > p { margin: 0 0 10px; color: #65717d; font-size: 13px; }
.reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.reference-card { min-width: 0; padding: 12px; border: 1px solid #e3e6e8; border-radius: 12px; background: #fff; }
.reference-card strong { display: block; color: #17202b; font-size: 13px; }
.reference-card span { display: block; margin: 2px 0 7px; color: #65717d; font-size: 11px; }
.reference-card audio { display: block; width: 100%; height: 34px; }
.reference-card button { width: 100%; margin-top: 8px; padding: 8px 9px; font-size: 11px; }
.reference-credit { margin: 9px 0 0 !important; font-size: 11px !important; }
body[data-tool-theme="tts"] .reference-card { box-shadow: 0 4px 12px rgb(23 32 43 / 3%); }
body[data-tool-theme="tts"] .reference-card audio { accent-color: #6957d5; }
body[data-tool-theme="tts"] .reference-card button { min-height: 38px; border: 1px solid #dcd7f4 !important; border-radius: 9px !important; background: #f3f1fc !important; color: #44378f !important; }
body[data-tool-theme="tts"] .reference-card button:hover { border-color: #c7c0ec !important; background: #efecff !important; }
@media (max-width: 940px) {
  body[data-tool-theme="tts"] .bench { grid-template-columns: 1fr; }
  .reference-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body[data-tool-theme="tts"] .wrap { padding-inline: 18px; }
  body[data-tool-theme="tts"] .hero { padding-top: 36px; }
  body[data-tool-theme="tts"] .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-tool-theme="tts"] .bench > .card { padding: 18px; }
  body[data-tool-theme="tts"] .text-upload { margin-left: 0; }
}
@media (max-width: 390px) {
  body[data-tool-theme="tts"] .voice-grid { grid-template-columns: 1fr; }
}