:root {
  --bg: #0b1020;
  --card: rgba(20,28,48,.92);
  --line: rgba(255,255,255,.09);
  --text: #f4f6ff;
  --muted: #93a0b8;
}

html, body { min-height: 100%; }
body {
  background:
    radial-gradient(circle at 10% 0%, rgba(95,110,255,.15), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(0,210,190,.09), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size: 14px;
}

.topbar { background: rgba(7,11,24,.92); border-bottom: 1px solid var(--line); min-height: 52px; }
.topbar small { color: #7f8ba4; font-size: .65em; }
.status { color: #9fe7d9; font-size: .76rem; }
.app-shell { max-width: 1700px; margin: 0 auto; }

.app-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.16);
}

.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.section-head h4 { font-size: 1.2rem; }
.section-head h5 { font-size: 1.02rem; }
.muted { color: var(--muted); }
.tiny { font-size: .69rem; }
.small-title { color:#cbd5e9; font-weight:600; font-size:.78rem; }

.form-control {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-color: rgba(255,255,255,.12);
  border-radius: 8px;
}
.form-control:focus { background: rgba(255,255,255,.07); color:var(--text); border-color:#7c8cff; box-shadow:0 0 0 .13rem rgba(124,140,255,.14); }
.form-control::placeholder { color:#65728a; }
label { color:#cbd5e9; font-size:.76rem; font-weight:600; margin-bottom:.3rem; }
.compact-row { margin-left:-5px; margin-right:-5px; }
.compact-row > [class*="col-"] { padding-left:5px; padding-right:5px; }

.text-editor { min-height: 230px; resize: vertical; line-height:1.58; }
.badge-soft { background:rgba(124,140,255,.12); color:#cdd5ff; border:1px solid rgba(124,140,255,.2); padding:.34rem .55rem; font-size:.68rem; }
.text-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:.3rem; }
.char-count { color:#74829b; font-size:.67rem; font-weight:500; line-height:1; }
.editor-tools { display:flex; align-items:center; gap:10px; }
.audio-info-row { min-height:18px; display:flex; align-items:center; justify-content:flex-end; }
.audio-box { padding:10px 12px; border-radius:11px; background:rgba(0,0,0,.13); border:1px solid var(--line); }
audio { width:100%; height:38px; }
.action-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; min-height:30px; }
.action-buttons { display:flex; align-items:center; gap:6px; }
.synth-info { min-height:18px; display:flex; align-items:center; justify-content:flex-end; text-align:right; }
.voice-controls { border-top:1px solid var(--line); }
.control-grid label { display:flex; justify-content:space-between; }

.btn-primary { background:#6675f0; border-color:#6675f0; }
.btn-primary:hover { background:#7886ff; border-color:#7886ff; }
.icon-btn { width:30px; height:30px; padding:0; }

.current-voice { padding:12px 13px; border-radius:11px; background:rgba(255,255,255,.045); border:1px solid var(--line); }
.current-voice-label { color:#74829b; font-size:.6rem; letter-spacing:.09em; font-weight:700; }
.current-voice-name { margin-top:2px; font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.current-voice-sub { color:var(--muted); font-size:.72rem; margin-top:1px; }
.voice-meta { margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:.69rem; }
.voice-meta-line { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; }
.voice-meta-line .text-monospace { color:#b9c5dd; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voice-meta-tags { flex-shrink:0; text-align:right; }
@media (max-width: 767.98px) {
  .voice-meta-line { align-items:flex-start; flex-direction:column; gap:3px; }
  .voice-meta-tags { width:100%; text-align:left; }
  .audio-box .audio-layout { flex-direction:column; }
  .audio-box .audio-player-wrap { order:2; width:100%; }
  .audio-box .audio-listen { order:1; width:100%; }
  .audio-box .audio-export { order:3; width:100%; }
  .audio-box .audio-listen .btn,
  .audio-box .audio-export .btn { width:100%; }
  .audio-box audio { width:100%; }
  .audio-box .audio-player-wrap { padding:0; }
}
@media (min-width: 768px) {
  .audio-box .audio-layout { display:flex; align-items:center; gap:.5rem; }
  .audio-box .audio-listen, .audio-box .audio-export { flex:0 0 auto; }
  .audio-box .audio-player-wrap { flex:1 1 auto; min-width:0; }
.audio-box .audio-player-wrap { background:#f8f9fa; border-radius:.25rem; }
.audio-box audio { height:31px; display:block; }
.audio-box .audio-layout > div { gap:.5rem; }
}
.voice-meta-tags .voice-tag { margin-top:0; }

.voice-tabs { display:flex; gap:3px; padding:3px; border-radius:9px; background:rgba(0,0,0,.18); border:1px solid var(--line); }
.voice-tab { flex:1; border:0; background:transparent; color:#8f9db5; border-radius:7px; padding:7px 5px; font-size:.72rem; cursor:pointer; }
.voice-tab:hover { color:#dce3f5; background:rgba(255,255,255,.04); }
.voice-tab.active { color:#fff; background:rgba(102,117,240,.24); box-shadow:inset 0 0 0 1px rgba(124,140,255,.18); }
.tab-count { opacity:.7; margin-left:2px; }
.voice-tab-panel { padding-top:12px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.panel-heading strong { font-size:.82rem; }

.voice-tag { display:inline-block; padding:2px 5px; margin:2px 2px 0 0; border-radius:999px; background:rgba(124,140,255,.10); border:1px solid rgba(124,140,255,.16); color:#aeb8d7; font-size:.59rem; }
.empty { text-align:center; padding:14px 4px; color:#66738b; font-size:.75rem; }

.recommended-item { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid rgba(255,255,255,.065); }
.recommended-item:first-child { border-top:0; }
.recommended-main { flex:1; min-width:0; }
.recommended-name { font-weight:600; font-size:.79rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recommended-sub { color:var(--muted); font-size:.66rem; }

.discovery-list { max-height:360px; overflow-y:auto; padding-right:2px; }
.discovery-item { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid rgba(255,255,255,.065); }
.discovery-item:first-child { border-top:0; }
.discovery-main { min-width:0; flex:1; }
.discovery-name { font-weight:650; font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discovery-sub { font-size:.64rem; color:#8fa3b8; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discovery-actions { display:flex; gap:3px; flex-shrink:0; }
.discovery-actions .btn { width:28px; height:27px; padding:0; }
.discovery-item .voice-tag { font-size:.58rem; }
.discovery-empty { padding:15px 4px; text-align:center; color:#7f93a8; font-size:.72rem; }
.discovery-highlight { color:#ffd166; }

.favorite { display:flex; align-items:center; gap:6px; padding:7px 0; border-top:1px solid rgba(255,255,255,.065); }
.favorite:first-child { border-top:0; }
.favorite-main { flex:1; min-width:0; cursor:pointer; }
.favorite-name { font-weight:600; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.favorite-sub { font-size:.64rem; color:var(--muted); }
.favorite .btn { padding:2px 5px; }

.profile-modal { position:fixed; inset:0; z-index:2000; display:none; }
.profile-modal.show { display:block; }
.profile-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(3px); }
.profile-dialog { position:relative; width:min(440px,calc(100% - 30px)); margin:14vh auto 0; padding:18px; border-radius:14px; background:#151d32; border:1px solid var(--line); box-shadow:0 25px 80px rgba(0,0,0,.45); }
.profile-preview { padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.04); color:var(--muted); font-size:.74rem; }

@media (min-width:1200px) {
  .voice-card { position:sticky; top:12px; }
}

select.form-control option { background:#151d32; color:#f4f6ff; }
select.form-control option:checked { background:#6675f0; color:#fff; }
@media (max-width:767px) {
  .text-editor { min-height:230px; }
  .editor-tools { justify-content:space-between; }
  .voice-card { margin-top:0; }
}
@media (max-width:575px) {
  body { font-size:13px; }
  .topbar .status { display:none; }
  .text-editor { min-height:210px; }
  .voice-tab { font-size:.68rem; }
}