:root {
  --bg-primary: #1e1e2e;
  --bg-secondary: #2a2a3e;
  --bg-tertiary: #353550;
  --text-primary: #cdd6f4;
  --text-secondary: #a6adc8;
  --text-muted: #6c7086;
  --accent: #89b4fa;
  --accent-hover: #74c7ec;
  --danger: #f38ba8;
  --success: #a6e3a1;
  --warning: #f9e2af;
  --border: #45475a;
  --clip-handle: #ffffff;
  --timeline-bg: #181825;
  --placeholder-gradient: linear-gradient(90deg, #2a2a3e 25%, #353550 50%, #2a2a3e 75%);
  --font-mono: 'SF Mono', 'Fira Code', monospace;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

button {
  cursor: pointer;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
}

button:hover {
  background: var(--accent);
  color: var(--bg-primary);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

input[type='text'] {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

input[type='text']:focus {
  border-color: var(--accent);
}