/* ═══ Phòng thu TDM ═══════════════════════════
   Bảng màu: mặt máy xanh mực · kim đo hổ phách
   Chữ: Bricolage Grotesque / Be Vietnam Pro / JetBrains Mono
   ══════════════════════════════════════════════ */

:root{
  --console:#12141f;
  --panel:#1a1e2d;
  --panel-hi:#222739;
  --hair:#2e3448;
  --paper:#e9e6dc;
  --muted:#8a90a6;
  --phosphor:#ffb627;
  --signal:#39d98a;
  --rec:#ff4d4d;

  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Be Vietnam Pro',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --gut:clamp(1rem,3vw,2rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--console);
  color:var(--paper);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.6;
  /* vệt sáng đèn trần rọi xuống mặt máy */
  background-image:radial-gradient(120% 60% at 50% -10%,rgba(255,182,39,.06),transparent 60%);
}

::selection{background:var(--phosphor);color:var(--console)}

:focus-visible{outline:2px solid var(--phosphor);outline-offset:3px}

/* ── Masthead ───────────────────────────────── */
.masthead{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.1rem var(--gut);
  border-bottom:1px solid var(--hair);
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-mark{
  width:11px;height:11px;border-radius:50%;
  background:var(--phosphor);
  box-shadow:0 0 0 3px rgba(255,182,39,.14),0 0 14px rgba(255,182,39,.5);
}
.brand-name{
  font-family:var(--f-display);font-weight:800;font-size:1.05rem;
  letter-spacing:-.02em;
}
.masthead-meta{font-size:.78rem;color:var(--muted);font-family:var(--f-mono)}

.state{color:var(--muted)}
.state--live{color:var(--signal)}
.state--down{color:var(--rec)}

/* ── Console grid ───────────────────────────── */
.console{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:0;
  align-items:stretch;
}
@media (max-width:900px){.console{grid-template-columns:1fr}}

/* ── Deck (kịch bản) ────────────────────────── */
.deck{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,4vw,2.75rem) var(--gut);
  border-right:1px solid var(--hair);
}
@media (max-width:900px){.deck{border-right:0;border-bottom:1px solid var(--hair)}}

.deck-head{margin-bottom:1.4rem;max-width:46ch}
.deck-title{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2rem,5.5vw,3.1rem);
  line-height:.95;
  letter-spacing:-.035em;
  margin-bottom:.5rem;
}
.deck-hint{font-size:.86rem;color:var(--muted)}
.deck-hint em{font-style:normal;color:var(--paper);font-weight:500}

.script{
  flex:1;min-height:15rem;width:100%;
  resize:vertical;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:3px;
  padding:1.15rem 1.25rem;
  color:var(--paper);
  font-family:var(--f-body);
  font-size:1.02rem;
  font-weight:300;
  line-height:1.85;
}
.script::placeholder{color:#5b6178}
.script:focus{border-color:rgba(255,182,39,.5);outline:none}

.script-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.7rem;
}
.counter{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.counter b{color:var(--paper);font-weight:500}
.counter.is-full b{color:var(--rec)}

/* ── Rack (giọng) ───────────────────────────── */
.rack{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,4vw,2.75rem) var(--gut);
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 30%);
}

.rack-tabs{display:flex;gap:.4rem;margin-bottom:1.3rem}
.rack-tab{
  flex:1;
  padding:.6rem .5rem;
  background:transparent;
  border:1px solid var(--hair);
  border-radius:3px;
  color:var(--muted);
  font-family:var(--f-body);font-size:.83rem;font-weight:500;
  cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.rack-tab:hover{color:var(--paper)}
.rack-tab.is-on{
  color:var(--console);background:var(--phosphor);border-color:var(--phosphor);
}

.rack-panel{flex:1;min-height:0}

/* danh sách giọng */
.voices{list-style:none;display:flex;flex-direction:column;gap:.3rem;max-height:24rem;overflow-y:auto}
.voices-loading{font-size:.83rem;color:var(--muted);padding:.6rem 0}

.voice{
  display:flex;align-items:center;gap:.8rem;
  width:100%;
  padding:.7rem .8rem;
  background:transparent;
  border:1px solid transparent;
  border-radius:3px;
  color:var(--paper);
  font-family:var(--f-body);
  text-align:left;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.voice:hover{background:var(--panel)}
.voice[aria-pressed="true"]{background:var(--panel-hi);border-color:rgba(255,182,39,.4)}
.voice-led{
  flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--hair);
  transition:background .15s,box-shadow .15s;
}
.voice[aria-pressed="true"] .voice-led{
  background:var(--phosphor);box-shadow:0 0 9px rgba(255,182,39,.75);
}
.voice-id{font-size:.9rem;font-weight:500}
.voice-tag{
  margin-left:auto;
  font-family:var(--f-mono);font-size:.68rem;color:var(--muted);
  letter-spacing:.04em;
}
@keyframes blink{50%{opacity:.15}}
.sample-note{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);margin-top:.35rem}

.field{display:block}
.field-label{display:block;font-size:.8rem;font-weight:500;margin-bottom:.35rem}
.field-input{
  width:100%;
  padding:.6rem .75rem;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:3px;
  color:var(--paper);
  font-family:var(--f-body);font-size:.87rem;
}
.field-input:focus{border-color:rgba(255,182,39,.5);outline:none}
.field-help{display:block;font-size:.72rem;color:var(--muted);margin-top:.3rem}

/* ── Núm chỉnh ──────────────────────────────── */
.tune{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:1.4rem;padding-top:1.3rem;
  border-top:1px solid var(--hair);
}
.knob{display:flex;flex-direction:column;gap:.35rem}
.knob-label{font-size:.75rem;color:var(--muted)}
.knob-val{font-family:var(--f-mono);font-size:.72rem;color:var(--phosphor)}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;background:var(--hair);border-radius:2px;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:none;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:none;cursor:pointer;
}

/* ── Transport ──────────────────────────────── */
.transport{
  border-top:1px solid var(--hair);
  background:#0d0f18;
}
.ribbon{display:block;width:100%;height:76px}

.transport-controls{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem var(--gut) 1.1rem;
}
.status{font-family:var(--f-mono);font-size:.75rem;color:var(--muted)}
.status.is-err{color:var(--rec)}
.status.is-ok{color:var(--signal)}

.transport-actions{display:flex;align-items:center;gap:.6rem}

.go{
  padding:.8rem 1.6rem;
  background:var(--phosphor);
  border:none;border-radius:3px;
  color:var(--console);
  font-family:var(--f-body);font-size:.9rem;font-weight:600;
  cursor:pointer;
  transition:filter .15s;
}
.go:hover{filter:brightness(1.1)}
.go:disabled{opacity:.4;cursor:not-allowed}

.ghost{
  padding:.55rem .95rem;
  background:transparent;
  border:1px solid var(--hair);border-radius:3px;
  color:var(--muted);
  font-family:var(--f-body);font-size:.8rem;
  text-decoration:none;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.ghost:hover{color:var(--paper);border-color:var(--muted)}
.ghost--disabled{opacity:.35;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── Kho giọng lớn ──────────────────────────── */
.voice-search{margin-bottom:.5rem}
.voice-count{
  font-family:var(--f-mono);font-size:.66rem;color:var(--muted);
  margin-bottom:.5rem;
}
.voice-group{
  position:sticky;top:0;z-index:1;
  padding:.4rem .8rem .3rem;
  background:var(--console);
  font-family:var(--f-mono);font-size:.64rem;
  color:var(--phosphor);letter-spacing:.08em;text-transform:uppercase;
}
.voice--eleven .voice-led{background:#7c5cff}
.voice--eleven[aria-pressed="true"] .voice-led{
  background:#7c5cff;box-shadow:0 0 9px rgba(124,92,255,.75);
}

/* ── Đầu rack (thay cho tab) ────────────────── */
.rack-head{margin-bottom:1.3rem;padding-bottom:.7rem;border-bottom:1px solid var(--hair)}
.rack-title{
  font-family:var(--f-display);font-weight:600;font-size:.95rem;
  letter-spacing:-.01em;
}