/* dev-tts-compare.css — TTS比較検証ページ */
:root {
  --bg:#0f0f23; --card:#1a1a2e; --card2:#16213e; --border:#2a2d4e;
  --text:#e2e8f0; --text-muted:#94a3b8; --text-dim:#64748b;
  --green:#22c55e; --red:#ef4444; --yellow:#eab308; --blue:#3b82f6; --purple:#a855f7;
  --radius:12px; --radius-sm:8px;
}
html, body { height: 100%; }

/* タブナビ */
.tab-nav { display:flex; gap:4px; padding:12px 20px 0; background:var(--card); border-bottom:1px solid var(--border); overflow-x:auto; flex-shrink:0; }
.tab-link { display:flex; align-items:center; gap:5px; padding:8px 14px; color:var(--text-muted); text-decoration:none; font-size:13px; font-weight:500; border-radius:var(--radius-sm) var(--radius-sm) 0 0; border:1px solid transparent; border-bottom:none; white-space:nowrap; transition:all 0.2s; }
.tab-link:hover { color:var(--text); background:var(--card2); }
.tab-link.active { color:var(--text); background:var(--bg); border-color:var(--border); border-bottom-color:var(--bg); }
.tab-icon { font-size:14px; }

/* メイン */
.main { padding:20px; max-width:1200px; margin:0 auto; }

/* 入力カード */
.input-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin-bottom:20px; }
.section-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; display:block; }
.tts-textarea { width:100%; min-height:72px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:14px; font-family:inherit; padding:10px 14px; resize:vertical; outline:none; transition:border-color 0.2s; margin-bottom:14px; box-sizing:border-box; }
.tts-textarea:focus { border-color:var(--purple); }
.controls-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.control-group { display:flex; align-items:center; gap:8px; }
.control-label { font-size:12px; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.control-select { background:var(--card2); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; padding:6px 10px; outline:none; cursor:pointer; }
.control-select:focus { border-color:var(--purple); }
.action-buttons { margin-left:auto; display:flex; gap:8px; }

/* ボタン */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:inherit; min-height:40px; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn:not(:disabled):hover { opacity:0.85; transform:translateY(-1px); }
.btn-all { background:linear-gradient(135deg,#6366f1,#3b82f6); color:#fff; }
.btn-generate { background:linear-gradient(135deg,var(--purple),#7c3aed); color:#fff; padding:7px 14px; font-size:12px; min-height:34px; }
.btn-clear { background:var(--card2); border:1px solid var(--border); border-radius:6px; color:var(--text-muted); font-size:12px; padding:4px 12px; cursor:pointer; font-family:inherit; transition:all 0.2s; min-height:30px; }
.btn-clear:hover { color:var(--text); border-color:var(--text-muted); }
.btn-icon { font-size:12px; }

/* バックエンドグリッド */
.backends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:20px; }

/* バックエンドカード */
.backend-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; transition:border-color 0.2s; }
.backend-card:not(.unavailable):hover { border-color:rgba(168,85,247,0.4); }
.backend-card.unavailable { opacity:0.5; }
.card-header { padding:14px 16px 10px; border-bottom:1px solid var(--border); }
.card-title-row { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.card-name { font-size:14px; font-weight:700; color:var(--text); }
.card-meta { font-size:11px; color:var(--text-dim); }

/* ステータスドット */
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
.status-dot.online { background:var(--green); }
.status-dot.offline { background:var(--red); }
.status-dot.checking { background:var(--yellow); animation:blink 1s infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* カードボディ */
.card-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.card-timing { font-size:26px; font-weight:700; color:var(--purple); font-variant-numeric:tabular-nums; line-height:1; }
.card-timing-label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.card-audio { margin-top:6px; }
.card-audio audio { width:100%; height:32px; }

/* 簡易波形 */
.card-waveform { display:none; align-items:flex-end; gap:3px; height:24px; margin-top:4px; }
.card-waveform.playing { display:flex; }
.wave-bar { width:4px; background:var(--purple); border-radius:2px; animation:waveanim 0.8s ease-in-out infinite; opacity:0.8; }
.wave-bar:nth-child(1) { height:40%; animation-delay:0s; }
.wave-bar:nth-child(2) { height:80%; animation-delay:0.1s; }
.wave-bar:nth-child(3) { height:60%; animation-delay:0.2s; }
.wave-bar:nth-child(4) { height:100%; animation-delay:0.05s; }
.wave-bar:nth-child(5) { height:50%; animation-delay:0.15s; }
.wave-bar:nth-child(6) { height:90%; animation-delay:0.25s; }
.wave-bar:nth-child(7) { height:70%; animation-delay:0.1s; }
.wave-bar:nth-child(8) { height:45%; animation-delay:0.2s; }
@keyframes waveanim { 0%,100% { transform:scaleY(0.4); } 50% { transform:scaleY(1); } }

.card-error { font-size:11px; color:var(--red); background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); border-radius:6px; padding:6px 10px; margin-top:4px; }
.unavailable-badge { display:inline-block; padding:4px 10px; background:var(--card2); border:1px solid var(--border); border-radius:20px; font-size:11px; color:var(--text-dim); margin-top:4px; width:fit-content; }

/* カードフッター */
.card-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* 比較カード */
.compare-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin-bottom:20px; }
.compare-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.compare-empty { text-align:center; padding:28px 0; color:var(--text-dim); font-size:13px; }

/* バーチャート */
.chart-area { display:flex; flex-direction:column; gap:12px; }
.chart-row { display:flex; align-items:center; gap:12px; }
.chart-label { width:100px; font-size:12px; font-weight:600; color:var(--text-muted); flex-shrink:0; }
.chart-track { flex:1; height:24px; background:var(--card2); border-radius:6px; overflow:hidden; }
.chart-fill { height:100%; border-radius:6px; width:0%; transition:width 0.6s ease; }
.chart-fill-kokoro { background:linear-gradient(90deg,var(--purple),rgba(168,85,247,0.5)); }
.chart-fill-elevenlabs { background:linear-gradient(90deg,var(--blue),rgba(59,130,246,0.5)); }
.chart-value { font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; width:70px; text-align:right; flex-shrink:0; }
.chart-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.chart-badge.fastest { background:rgba(34,197,94,0.15); color:var(--green); border:1px solid rgba(34,197,94,0.3); }
.chart-badge.slowest { background:rgba(239,68,68,0.15); color:var(--red); border:1px solid rgba(239,68,68,0.3); }

/* スピナー */
.spinner { display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.footer-space { height:40px; }

/* レスポンシブ */
@media (max-width:640px) {
  .main { padding:12px; }
  .backends-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .controls-row { flex-direction:column; align-items:flex-start; }
  .action-buttons { margin-left:0; width:100%; }
  .btn-all { width:100%; justify-content:center; }
  .tab-link { padding:6px 10px; font-size:12px; }
}
@media (max-width:400px) { .backends-grid { grid-template-columns:1fr; } }

/* VRAM モニター */
.vram-monitor { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.vram-monitor-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.vram-bar-bg { background: #222; border-radius: 4px; height: 18px; overflow: hidden; }
.vram-bar-fill { background: var(--green); height: 100%; width: 0%; transition: width 0.5s ease; border-radius: 4px; }
.vram-bar-fill.vram-warn { background: var(--yellow); }
.vram-bar-fill.vram-danger { background: var(--red); }
.vram-text { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-family: monospace; }
.vram-processes { font-size: 11px; color: var(--text-dim); margin-top: 3px; font-family: monospace; }

/* 検証結果サマリー */
.results-section { background: var(--card-bg, var(--card)); border: 1px solid #333; border-radius: 12px; padding: 24px; margin-top: 24px; }
.results-section h2 { color: #fff; margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.results-section h3 { color: var(--purple); margin: 20px 0 10px; font-size: 16px; font-weight: 600; }
.results-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.results-table th { background: rgba(168,85,247,0.15); color: var(--purple); padding: 8px 12px; text-align: left; border-bottom: 1px solid #444; font-weight: 600; }
.results-table td { padding: 8px 12px; border-bottom: 1px solid #333; color: #ccc; }
.results-table tr:hover td { background: rgba(255,255,255,0.03); }
.results-conclusion { background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.3); border-radius: 8px; padding: 16px; margin-top: 16px; }
.results-conclusion ul { margin: 0; padding-left: 20px; }
.results-conclusion li { color: #ccc; margin: 6px 0; font-size: 13px; }
.results-conclusion strong { color: #fff; }