:root {
  --canvas: #000;
  --bg: #000;
  --blue: #3978ff;
  --blue-2: #1d5edc;
  --blue-soft: #182b52;
  --accent: #3978ff;
  --accent-rgb: 57 120 255;
  --accent-soft: #182b52;
  --line: #282a33;
  --line-bright: #414450;
  --field: #0b0c10;
  --surface: #111217;
  --surface-2: #191a21;
}
:root[data-accent="emerald"] {
  --blue: #28c889; --blue-2: #149c69; --blue-soft: #123629;
  --accent: #28c889; --accent-rgb: 40 200 137; --accent-soft: #123629;
}
:root[data-accent="violet"] {
  --blue: #a878ff; --blue-2: #7845db; --blue-soft: #30204b;
  --accent: #a878ff; --accent-rgb: 168 120 255; --accent-soft: #30204b;
}
:root[data-accent="amber"] {
  --blue: #ffb547; --blue-2: #dc8422; --blue-soft: #3f2c16;
  --accent: #ffb547; --accent-rgb: 255 181 71; --accent-soft: #3f2c16;
}

html, body { background-color: #000; }
body { background: #000 !important; }
.topbar { background: rgb(0 0 0 / 92%) !important; }
.accent-palette {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #090a0d;
}
.accent-swatch {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.accent-swatch::before {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--swatch-color), transparent 66%);
  content: "";
}
.accent-swatch[data-accent-choice="cobalt"] { --swatch-color: #3978ff; }
.accent-swatch[data-accent-choice="emerald"] { --swatch-color: #28c889; }
.accent-swatch[data-accent-choice="violet"] { --swatch-color: #a878ff; }
.accent-swatch[data-accent-choice="amber"] { --swatch-color: #ffb547; }
.accent-swatch[aria-pressed="true"] { border-color: var(--swatch-color); }
.accent-swatch[aria-pressed="true"]::before { box-shadow: 0 0 12px color-mix(in srgb, var(--swatch-color), transparent 25%); }
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch:focus-visible { outline: 2px solid var(--swatch-color); outline-offset: 2px; }

/* Keep the canvas black while reserving the selected hue for controls and selected states. */
.button.primary, .button-primary { border-color: var(--blue); background: linear-gradient(110deg,var(--blue),var(--blue-2)); }
.button.primary:hover, .button-primary:hover { border-color: color-mix(in srgb,var(--blue),white 20%); }
.category.active, .catalog-filter.active, .service-tab.active { border-color: color-mix(in srgb,var(--blue),transparent 35%); background: color-mix(in srgb,var(--blue),transparent 86%); }
.category.active .category-mark { background: var(--blue); }
.form-cell:focus-within, .dialog input:focus-visible, .dialog select:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 12%); }
.lot { animation: catalog-arrive .32s ease-out both; }
.lot:hover, .lot:focus-within { border-color: color-mix(in srgb,var(--blue),transparent 42%); box-shadow: 0 12px 32px rgb(var(--accent-rgb) / 9%); }
.service-row, .quick-purchase, .faq-section { background-color: #101116; }
.pill { background: color-mix(in srgb,var(--blue),transparent 78%); }
.faq-disclosure summary:after, .site-footer a:hover { color: var(--blue); }

/* Dashboard-specific neutral surfaces and accent-driven data visualization. */
.metric-primary { border-color: color-mix(in srgb,var(--accent),transparent 62%); background: linear-gradient(145deg,#111217,#090a0d 78%); }
.metric-primary strong { color: var(--text); }
.panel, .metric-card, .login-panel { background: #0b0c10; }
.chart-line { stroke: var(--accent); }
.chart-point, .chart-mark-profit { fill: var(--accent); }
.chart-detail-profit:before { background: var(--accent); }
.chart-hit:focus { fill: rgb(var(--accent-rgb) / 8%); stroke: var(--accent); }
.chart-legend i { background: var(--accent); }
.chart-area { fill: rgb(var(--accent-rgb) / 11%); }
.rank-row { border-color: #202127; }

@keyframes catalog-arrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .topbar-right { gap: 6px; }
  .accent-palette { gap: 2px; padding: 3px; }
}
@media (max-width: 600px) {
  .account { gap: 5px; }
  .account .accent-palette { gap: 1px; padding: 2px; }
  .accent-swatch { width: 19px; height: 19px; }
  .lot:nth-child(n) { animation-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  .lot { animation: none !important; }
  .accent-swatch { transition: none !important; }
}