:root {
  color-scheme: dark;
  --smq-bg: #252526;
  --smq-bg-deep: #1e1e1e;
  --smq-panel: #333333;
  --smq-panel-soft: #2b2c2f;
  --smq-border: #454856;
  --smq-border-strong: #6a6d70;
  --smq-text: #d4d4d4;
  --smq-text-strong: #ffffff;
  --smq-text-muted: #aeb4bb;
  --smq-green: #69c575;
  --smq-green-soft: #82c98c;
  --smq-yellow: #ffd12b;
  --smq-yellow-soft: #ffe27a;
  --smq-red: #ff6f6f;
  --smq-blue: #69a7ff;
  --smq-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
  --smq-radius: 8px;
  --smq-font: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--smq-bg);
  scrollbar-color: var(--smq-border-strong) var(--smq-bg);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--smq-text);
  background: var(--smq-bg);
  font-family: var(--smq-font);
}

a {
  color: var(--smq-yellow);
  text-decoration: none;
}

a:visited {
  color: var(--smq-yellow);
}

a:hover,
a:focus {
  color: var(--smq-yellow-soft);
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
}

pre,
.admin-output {
  max-width: min(1180px, calc(100vw - 32px));
  min-height: calc(100vh - 32px);
  margin: 16px auto;
  padding: 18px 20px;
  overflow: auto;
  color: var(--smq-text);
  background: var(--smq-bg-deep);
  border: 1px solid var(--smq-border);
  border-radius: var(--smq-radius);
  box-shadow: var(--smq-shadow);
  font: 13px/1.55 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

::selection {
  color: #102315;
  background: var(--smq-green);
}

@media (max-width: 700px) {
  pre,
  .admin-output {
    max-width: calc(100vw - 16px);
    min-height: calc(100vh - 16px);
    margin: 8px;
    padding: 14px;
  }
}