/* ATRIUM TEST DESIGN 3.0 */

:root {
  color-scheme: dark;
  --at-bg: #171d2a;
  --at-panel: #252e3f;
  --at-panel-hover: #2d3950;
  --at-border: #38465e;
  --at-text: #f3f5fb;
  --at-muted: #aebbd1;
  --at-accent: #a99aff;
  --at-radius: 13px;
}

html {
  background: var(--at-bg);
}

body {
  background: var(--at-bg) !important;
  color: var(--at-text) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  line-height: 1.5;
}

*, *::before, *::after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
.card h1, .card h2, .card h3,
.panel h1, .panel h2, .panel h3 {
  color: var(--at-text) !important;
  letter-spacing: -.025em;
}

p, label, strong, td, th, summary {
  color: var(--at-text);
}

small, .muted, .subtitle, .intro {
  color: var(--at-muted) !important;
}

a {
  color: var(--at-accent);
}

a:hover {
  color: #c6bbff;
}

header {
  border-color: var(--at-border) !important;
}

.brand, .brand span {
  color: var(--at-text) !important;
}

.card, .panel {
  border-radius: var(--at-radius) !important;
  border-color: var(--at-border) !important;
}

button,
input[type="submit"],
input[type="button"] {
  border-radius: 9px !important;
  font-family: inherit !important;
  font-weight: 650 !important;
  transition: filter .15s ease, transform .15s ease;
}

button:hover:not(:disabled) {
  filter: brightness(1.09);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea {
  border-radius: 9px !important;
  border-color: var(--at-border) !important;
  color: var(--at-text) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--at-accent);
}

table {
  border-collapse: collapse;
}

th {
  color: #dce5f3 !important;
}

td {
  color: var(--at-text) !important;
}

th, td {
  border-color: var(--at-border) !important;
}

details {
  border-color: var(--at-border);
}

details > summary {
  cursor: pointer;
  color: var(--at-text) !important;
}

:focus-visible {
  outline: 3px solid rgba(169,154,255,.45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}