.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #0e0e0f;
  border: none; border-radius: 6px;
  padding: 8px 14px; font-family: 'DM Mono', monospace;
  font-size: .66rem; font-weight: 500; cursor: pointer;
  letter-spacing: .05em; text-transform: uppercase;
  transition: opacity .15s, transform .1s;
}
.btn:hover   { opacity: .88 }
.btn:active  { transform: scale(.97) }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none }

.btn.sec    { background: var(--s2); color: var(--text); border: 1px solid var(--border) }
.btn.danger { background: #f8717122; color: var(--error); border: 1px solid #f8717144 }
.btn.sm     { padding: 5px 10px; font-size: .6rem }
.btn.lg     { padding: 10px 22px; font-size: .72rem }

.start-bar {
  display: flex; align-items: center;
  justify-content: flex-end; gap: 10px; margin-top: 12px;
}

.theme-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .63rem; padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: border-color .2s, color .2s;
  color: var(--muted); font-family: 'DM Mono', monospace;
  white-space: nowrap; min-width: 120px;
}
.theme-btn:hover { border-color: var(--accent); color: var(--text) }

:root.light .btn        { color: #ffffff }
:root.light .btn.sec    { color: var(--text) }
:root.light .btn.danger { color: var(--error) }