/* ============================================================
 *  tts.css — 在线文字转语音
 * ============================================================ */
.tts-wrap{max-width:1080px;margin:0 auto}

/* 额度提示条 */
.tts-quota{background:#eef4ff;border:1px solid #dbe7ff;color:#3b5b8c;border-radius:12px;padding:10px 16px;font-size:14px;margin-bottom:18px}
.tts-quota b{color:#2563eb}
.tts-quota.used{background:#fff7ed;border-color:#fed7aa;color:#9a5b13}
.tts-quota.used b{color:#c2410c}

/* 布局 */
.tts-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}

.tts-card{background:var(--card,#fff);border:1px solid var(--border,#e5e9f2);border-radius:14px;padding:18px}

/* 左：输入与合成 */
.tts-label{font-size:14px;font-weight:600;color:var(--text,#1f2937);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tts-textarea{width:100%;min-height:200px;resize:vertical;padding:14px;border:1px solid var(--border,#dbe1ec);border-radius:12px;font-size:15px;line-height:1.7;font-family:inherit;color:var(--text,#1f2937);background:var(--bg2,#f7f9fc);transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.tts-textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1);background:#fff}
.tts-count-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--muted,#8a93a6)}
.tts-count-row .tts-demo{background:none;border:none;color:#2563eb;font-size:13px;cursor:pointer;padding:2px 4px}
.tts-count-row .tts-demo:hover{text-decoration:underline}

.tts-opt-row{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
.tts-opt-row label{font-size:13px;color:var(--muted,#6b7280);white-space:nowrap}
.tts-select{height:38px;padding:0 10px;border:1px solid var(--border,#dbe1ec);border-radius:10px;background:#fff;color:var(--text,#1f2937);font-size:14px}

.tts-go{margin-top:18px;width:100%;height:48px;border:none;border-radius:12px;background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s;box-shadow:0 4px 14px rgba(37,99,235,.25)}
.tts-go:hover:not(:disabled){opacity:.92}
.tts-go:active:not(:disabled){transform:scale(.99)}
.tts-go:disabled{background:#c3cad9;box-shadow:none;cursor:not-allowed}

/* 错误 / 结果 */
.tts-error{margin-top:14px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 14px;font-size:14px}
.tts-result{margin-top:16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:14px}
.tts-result-title{font-size:14px;font-weight:600;color:#15803d;margin-bottom:10px}
.tts-result audio{width:100%;height:40px}
.tts-dl{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:#16a34a;color:#fff;text-decoration:none;font-size:14px;font-weight:600;border-radius:10px;padding:9px 18px;transition:background .2s}
.tts-dl:hover{background:#15803d}

/* 右：音色选择 */
.tts-voice-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tts-voice-head .tts-title{font-size:15px;font-weight:700;color:var(--text,#1f2937);white-space:nowrap}
.tts-kw{flex:1;min-width:120px;height:36px;padding:0 12px;border:1px solid var(--border,#dbe1ec);border-radius:100px;font-size:13px;background:var(--bg2,#f7f9fc);color:var(--text,#1f2937)}
.tts-kw:focus{outline:none;border-color:#2563eb;background:#fff}

.tts-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px;scrollbar-width:none}
.tts-tabs::-webkit-scrollbar{display:none}
.tts-tabs button{flex-shrink:0;border:1px solid var(--border,#e2e8f0);background:var(--bg2,#f7f9fc);color:var(--muted,#64748b);border-radius:100px;font-size:13px;padding:6px 14px;cursor:pointer;transition:all .15s;min-height:0}
.tts-tabs button.on{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600}

.tts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-height:430px;overflow-y:auto;padding-right:4px}
@media (max-width:520px){.tts-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
.tts-voice{position:relative;display:flex;align-items:center;gap:10px;border:1.5px solid var(--border,#e8edf5);border-radius:12px;padding:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s;background:var(--card,#fff)}
.tts-voice:hover{border-color:#b9c8f5}
.tts-voice.on{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15);background:#f5f9ff}

.tts-play{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none;background:#eef4ff;color:#2563eb;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;min-height:0;padding:0}
.tts-play:hover{background:#2563eb;color:#fff}
.tts-play.playing{background:#dc2626;color:#fff}

.tts-vinfo{min-width:0;flex:1}
.tts-vname{font-size:13.5px;font-weight:600;color:var(--text,#1f2937);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tts-vscene{font-size:12px;color:var(--muted,#94a3b8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

.tts-empty,.tts-err{grid-column:1/-1;text-align:center;color:var(--muted,#94a3b8);font-size:13px;padding:26px 0}

/* 隐私与说明 */
.tts-notes{margin-top:20px;font-size:13px;color:var(--muted,#8a93a6);line-height:1.9}
.tts-notes b{color:var(--text,#475569)}