:root {
  /* Main colors */
  --bg-main:                  #000;
  --color-main:               #fff;
  --bg-canvas:                #222;
  /* Inputs */
  --bg-input:                 #222;
  --color-input:              #eee;
  --color-border-input:       #444;
  /* Buttons */
  --color-button:             #6f6;
  --color-cancel:             #f66;
  --bg-button:                #222;
  --bg-button-hover:          #333;
  --bg-button-disabled:       #111;
  --color-button-disabled:    #444;
  /* Status colors */
  --color-status-ok:          #8f8;
  --color-status-error:       #f66;
}

/* reset */
html, body {
  margin: 0;
  padding: 0;
}

/* page base */
body {
  background: var(--bg-main);
  color: var(--color-main);
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 1rem;
}

/* heading + version */
h1 {
  margin-bottom: 0.5em;
  font-size: 1.5rem;
}
#version {
    font-size: 40%;
}

/* controls row */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.controls label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.controls label.disabled {
  color: var(--color-button-disabled);
}

/* number inputs */
input[type="number"] {
  background: var(--bg-input);
  color: var(--color-input);
  border: 1px solid var(--color-border-input);
  border-radius: 4px;
  width: 2.5em;
  padding: 0.2em 0.4em;
}

/* buttons */
button {
  background: var(--bg-button);
  color: var(--color-button);
  border: none;
  border-radius: 6px;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background 0.2s;
}
button#cancel {
  color: var(--color-cancel);
}
button:hover:not(:disabled) {
  background: var(--bg-button-hover);
}
button:disabled {
  color: var(--color-button-disabled) !important;
  background: var(--bg-button-disabled);
  cursor: default;
}

/* description */
.description {
  font-size: 0.9rem;
}

/* drawing contains svg */
.drawing {
    display: block; /* keep it a block so margin:auto centres it */
    width: fit-content; /* shrink to the SVG’s intrinsic width  */
    margin: 0.5rem auto;
    background: var(--bg-canvas);
    border-radius: var(--snake-radius, 8px);
}
/* remove inline baseline gap by making the injected SVG a block*/
.drawing svg {
    display: block;
}

/* status line */
#status {
  min-height: 1.2em;
  color: var(--color-status-ok);
}
#status.error {
  color: var(--color-status-error);
}