:root{
  --accent-yellow: #ffd700;
  --bg-header: linear-gradient(90deg, #1b1b1b 0%, #3f3f3f 50%, #1b1b1b 100%);
  --bg-sidebar:  #2b2a2a;
  --text-light: #f0f0f0;
  --muted: #bdbdbd;
  --header-h: 60px;
}

* {
    box-sizing:border-box
}

html, body {
    height: 100%;
    margin: 0;
    font-family: Segoe UI, system-ui, Arial, sans-serif;
    color: var(--text-light);
    background: #121212
}

h3 { color: var(--accent-yellow) }

button{
  padding: 10px 14px;
  border: 0;
  border-radius: 4px;
  background: var(--accent-yellow);
  color: #000;
  font-weight: 700;
  cursor: pointer
}

button:hover{
    background: #ffe36e
}

button.edit-toggle.active {
  background: #c7a800;     /* iets donkerder dan var(--accent-yellow) */
  color: #000;
  font-weight: 700;
}

button.edit-toggle.active:hover {
  background: #d6bb12;     /* lichtere hover op actieve knop */
}