/* =========================================================
   TTS Starter · OpenAI + ElevenLabs
   Minimal dark theme with clean controls + accessible states
   ========================================================= */

:root{
  --bg:#0b0c10;
  --panel:#11131a;
  --muted:#aab;
  --text:#e9ecf1;
  --accent:#6ee7ff;
  --accent-2:#a78bfa;
  --warn:#ffb454;
  --danger:#ff6a6a;
  --ok:#66d9a8;
  --border:#20253a;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html { color-scheme: dark; }

body{
  margin:0;
  background:radial-gradient(80vw 80vh at 60% -10%, #141826 0, #0b0c10 55%, #0b0c10 100%);
  color:var(--text);
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display:flex;
  flex-direction:column;
}

/* ---------- Header ---------- */
.app-header{
  padding:12px 16px;
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid #1d2130;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.app-header h1{
  margin:0;
  font-size:20px;
  letter-spacing:.2px;
}
.engine-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- Form controls ---------- */
label{
  font-size:12px;
  color:var(--muted);
  margin-right:4px;
}

select,
button,
textarea,
input[type="range"],
a.btn{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
}

select,
button,
a.btn{
  padding:10px 12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
}

button{ cursor:pointer; }
button#speakBtn{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#02121a;
  border:none;
  font-weight:700;
}
button.ghost,
a.btn{
  background:transparent;
  border-color:#2a314c;
}
button#testBtn{ background:transparent; }

a.btn.disabled{
  opacity:.45;
  pointer-events:none;
  cursor:not-allowed;
}

/* Hover/focus states */
button:hover:not(:disabled),
a.btn:hover:not(.disabled),
select:hover{
  filter:brightness(1.05);
  border-color:#2f3756;
}
button:active{ transform:translateY(0.5px); }

:where(select,button,a.btn,textarea,input[type="range"]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(110,231,255,0.18);
}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #2a314c;
  color:var(--muted);
}
.badge.ok{ color:#0c1; border-color:#1a3; }
.badge.warn{ color:var(--warn); border-color:#6a4; }
.badge.danger{ color:var(--danger); border-color:#a44; }

/* ---------- Layout ---------- */
main{
  padding:16px;
  max-width:900px;
  width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

textarea#text{
  width:100%;
  padding:12px 14px;
  min-height:140px;
  resize:vertical;
}

.controls{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
}
.controls label{
  display:flex; gap:8px; align-items:center;
}
.controls input[type="range"]{
  width:180px; height:28px; padding:0 6px;
}

.buttons{
  display:flex; gap:8px; align-items:center;
}

audio#player{
  width:100%;
  margin-top:8px;
}

/* ---------- Status & footer ---------- */
#status{
  min-height:1.4em;
  color:var(--muted);
  margin:2px 0 0;
  word-break:break-word;
}

footer{
  padding:12px 16px;
  color:#9aa;
  text-align:center;
  border-top:1px solid #1d2130;
}

/* ---------- Small screens ---------- */
@media (max-width:560px){
  .controls{ gap:12px; }
  .controls input[type="range"]{ width:140px; }
  select,button,a.btn{ min-height:38px; }
}