:root {
  color-scheme: light;

  --bg-color: #f8f9fa;
  --text-color: #000000;

  --panel-bg: lightgray;

  --flash-bg: darkred;
  --flash-text: #ffffff;

  --flash-notice-bg: #e6f4ea;
  --flash-notice-text: #1b5e20;
  --flash-notice-border: #66bb6a;

  --card-bg: #f8f9fa;
  --border-color: #cccccc;

  --ok-border: #28a745;
  --ok-bg: #eaf7ed;

  --fail-border: #e63946;
  --fail-bg: #fdeaea;

  --link-color: #007bff;

  --btn-primary-bg: #007bff;
  --btn-primary-hover: #0056b3;

  --btn-danger-bg: #e63946;
  --btn-danger-hover: #b02a37;

  --btn-copy-bg: #f8f1e9;
  --btn-copy-text: #5c4437;

  --code-bg: #2e2e2e;
  --code-border: #444444;
  --code-text: #eeeeee;

  --json-key-color: #b32d00;
}

/* #################################################################################################### */

.light-mode {
  color-scheme: only light;
}

.dark-mode {
  color-scheme: only dark;
}

/* #################################################################################################### */

.dark-mode {
  color-scheme: dark;

  --bg-color: #181a1b;
  --text-color: #d8d8d8;

  --panel-bg: #262a2c;

  --flash-bg: #d63939;
  --flash-text: #fff8f8;
  --flash-border: #ff4d4d;

  --flash-notice-bg: #203c34;
  --flash-notice-text: #c3edea;
  --flash-notice-border: #5ee1b9;

  --card-bg: #1e2122;
  --border-color: #3a3d3f;

  /* Success / OK */
  --ok-bg: #1b3224;
  --ok-border: #39d67d;

  --fail-border: #ff5c5c;
  --fail-bg: #3a1e21;

  --btn-primary-bg: #2b6cb0;
  --btn-primary-hover: #1e4e8c;

  --btn-danger-bg: #c53030;
  --btn-danger-hover: #9b2c2c;

  --btn-copy-bg: #2c3133;
  --btn-copy-text: #e4e0dc;

  --code-bg: #2a2d2e;
  --code-border: #404446;
  --code-text: #e0e0e0;

  --json-key-color: #ff9966;

  --link-color: #64b5f6;
  --link-hover-color: #90caf9;
  --link-active-color: #42a5f5;

  a {
    color: var(--link-color);
    text-decoration: underline;
    transition: color 0.15s ease;
  }

  a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
  }

  a:active,
  a:focus {
    color: var(--link-active-color);
    outline: none;
    text-decoration: underline;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --bg-color: #181a1b;
    --text-color: #d8d8d8;

    --panel-bg: #262a2c;

    --flash-bg: #d63939;
    --flash-text: #fff8f8;
    --flash-border: #ff4d4d;

    --flash-notice-bg: #203c34;
    --flash-notice-text: #c3edea;
    --flash-notice-border: #5ee1b9;

    --card-bg: #1e2122;
    --border-color: #3a3d3f;

    --ok-border: #37c26b;
    --ok-bg: #1c3223;

    --fail-border: #ff5c5c;
    --fail-bg: #3a1e21;

    --btn-primary-bg: #2b6cb0;
    --btn-primary-hover: #1e4e8c;

    --btn-danger-bg: #c53030;
    --btn-danger-hover: #9b2c2c;

    --btn-copy-bg: #2c3133;
    --btn-copy-text: #e4e0dc;

    --code-bg: #2a2d2e;
    --code-border: #404446;
    --code-text: #e0e0e0;

    --json-key-color: #ff9966;

    --link-color: #64b5f6;
    --link-hover-color: #90caf9;
    --link-active-color: #42a5f5;

    a {
      color: var(--link-color);
      text-decoration: none;
      transition: color 0.15s ease;
    }

    a:hover {
      color: var(--link-hover-color);
      text-decoration: underline;
    }

    a:active,
    a:focus {
      color: var(--link-active-color);
      outline: none;
      text-decoration: underline;
    }
  }
}

/* #################################################################################################### */

a {
  color: var(--link-color);
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 0;
  margin-bottom: 5rem;
}

h1, h2 {
  padding: 0.5rem 0.5rem;
  background-color: var(--panel-bg);
  vertical-align: baseline;
  align-content: baseline;
}

h2 small {
  vertical-align: baseline;
  font-size: small;
}

.flash-box {
  display: block;
  box-sizing: border-box;

  .flash {
    padding: 0.5rem 0.5rem;
    background-color: var(--flash-bg);
    color: var(--flash-text);
    margin-top: 3px;
  }

  .flash.notice {
    background-color: var(--flash-notice-bg);
    color: var(--flash-notice-text);
    border-left: 4px solid var(--flash-notice-border);
  }
}

.response-box {
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background-color: var(--card-bg);
}

.response-box.ok {
  border-color: var(--ok-border);
  background-color: var(--ok-bg);
}

.response-box.fail {
  border-color: var(--fail-border);
  background-color: var(--fail-bg);
}

.responses-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

button {
  background-color: var(--btn-primary-bg);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
}

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

button.red {
  background-color: var(--btn-danger-bg);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
}

button.red:hover {
  background-color: var(--btn-danger-hover);
}

button.copy-button {
  background-color: var(--btn-copy-bg);
  color: var(--btn-copy-text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 1rem;
  vertical-align: middle;
}

form {
  margin: 1rem 0;
  display: flex;
}

form input {
  margin-top: 8px;
  margin-bottom: 8px;
  width: 450px;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.mono {
  font-family: monospace;
  font-size: smaller
}

.mono.large {
  font-size: medium;
}

.pre-wrap pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.json.pre-wrap pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
  font-size: 0.9rem;
}

.json.key {
  color: var(--json-key-color);
  font-weight: bold;
}

.scroll-top {
  font-size: 0.8rem;
  line-height: 2;
  vertical-align: baseline;
  color: var(--link-color);
  text-decoration: none;
  margin-right: 1rem;
}

.scroll-top:hover {
  text-decoration: underline;
}

.sample-block {
  margin-bottom: 2rem;
}

.sample-header {
  justify-content: space-between;
  align-items: baseline;
  font-family: sans-serif;
  margin-bottom: 0.25rem;
}

pre.sample {
  margin: 0;
}

pre.sample code {
  display: block;
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 1rem;
  font-family: monospace;
  font-size: 0.8rem;
  white-space: pre;
  overflow-x: auto;
  color: var(--code-text);
}

.sample-block button.copy-button {
  background-color: #4a90e2; /* kept distinct for sample tool; add var if needed */
  color: #fff;
  border: none;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  margin-left: 0rem;
  margin-right: 1rem;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.sample-block button.copy-button:hover {
  background-color: #357ab8;
}

.form-block {
  margin-top: 1rem;
  display: block;
}

.block-label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.textarea {
  display: block;
  width: 100%;
  max-width: 800px;
  margin-bottom: 1rem;
}

.button.submit-button {
  display: block;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .responses-row,
  .button-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  form {
    flex-direction: column;
  }

  form input {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .textarea {
    max-width: 100%;
  }

  body {
    font-size: 0.8rem;
    box-sizing: content-box;
  }

  h1, h2 {
    font-size: 1.2rem;
  }

  button,
  .response-box,
  .scroll-top,
  .block-label,
  .textarea,
  pre.sample code {
    font-size: 0.9rem;
  }

  .hide-on-mobile {
    display: none !important;
  }

  .sample-block {
    display: none !important;
  }
}

.avatar {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  vertical-align: bottom;
  background: darkslategrey;
  border-radius: 5px;
}

/* #################################################################################################### */