:root{
  --base-clr: #202020;
  --line-clr: #c6c3b7;
  --hover-clr: rgba(255,255,255,0.055);
  --text-clr: rgb(155,155,155);
  --accent-clr: #939187;
  --secondary-text-clr: #c6c3b7;

  --mono-bg: #222;
  --mono-bg-light: #333;
  --mono-bg-lighter: #444;
  --mono-border: #555;
  --mono-text: #ececec;
  --mono-text-muted: #b0b0b0;
  --mono-accent: #fff;
  --mono-chip-bg: #444;
  --mono-chip-bg-hover: #555;
  --mono-chip-border: #888;
  --mono-chip-text: #ececec;
  --mono-chip-filter-bg: #222;
  --mono-chip-filter-border: #888;
  --mono-chip-filter-text: #ececec;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--base-clr);
  color: var(--mono-text);
}
.container{ max-width: 920px; margin:0 auto; padding:24px; }
.header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.header h1{ margin:0; font-size:22px; color: var(--mono-text); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted{ color: var(--mono-text-muted); }

.btn{
  padding:10px 14px;
  border-radius: 10px;
  background: var(--mono-bg-light);
  color: var(--mono-text);
  border: 1px solid var(--mono-border);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  text-decoration: none;
}
.btn:hover{ background: var(--mono-bg-lighter); border-color: var(--line-clr); }
.btn.primary{
  background: var(--accent-clr);
  color:#111;
  border-color: var(--line-clr);
}
.btn.ghost{
  background: transparent;
  color: var(--secondary-text-clr);
  border: 1px solid var(--mono-border);
}
.btn.circle{
  width:64px; height:64px; border-radius:50%;
  font-size:28px; line-height:0; display:inline-flex; align-items:center; justify-content:center;
}

/* Record (red) button keeps the red, but uses theme borders */
.btn.record{ background:#cf2b2b; color:#fff; border:1px solid #8a1b1b; }
.btn.record:hover{ background:#b62424; }

.card{
  background: var(--mono-bg);
  border: 1px solid var(--mono-border);
  border-radius: 14px;
  padding: 16px;
}

/* Stacked-table card list (Select page) */
.stack{ display:grid; gap:12px; }
.card-row{ 
  display:flex; 
  flex-direction: column;
  gap:28px; 
  align-items:flex-start; 
  padding: 28px 14px }
.card-row:hover{ background: var(--hover-clr); }
.card-title{ font-weight:600; color: var(--mono-accent); margin:0 0 6px 0; }
.card-script{ color: var(--text-clr); font-size:14px; line-height:1.6; }

/* Waveform area */
.wave-wrap{
  background: var(--mono-bg-light);
  border: 1px solid var(--mono-border);
  border-radius: 10px; overflow:hidden;
}
#wave{ width:100%; height:120px; display:block; }

/* Takes list */
.takes{ display:grid; gap:10px; margin-top:8px; }
.take{ display:flex; align-items:center; gap:10px; }
audio{ display:block; }

/* Upload progress */
.upload-status{ display:none; margin-top:10px; }
.progress-wrap{
  background: var(--mono-bg-light);
  border: 1px solid var(--mono-border);
  border-radius: 8px; height: 10px; overflow: hidden;
}
.progress-bar{ height:100%; width:0%;
  background: var(--accent-clr); transition: width .15s linear;
}
.progress-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.progress-text{ color: var(--secondary-text-clr); font-size: 12px; }
.progress-pct{ font-variant-numeric: tabular-nums; }