:root {
  --brand-accent: #8caaff;
  --brand-strong: #7895fa;
  --heading-font: "Space Grotesk", sans-serif;
}
:root[data-accent="teal"] {
  --brand-accent: #97d3c9;
  --brand-strong: #78bfb4;
}
:root[data-accent="violet"] {
  --brand-accent: #c5b2ee;
  --brand-strong: #b398e0;
}
:root[data-accent="rose"] {
  --brand-accent: #ebb7c5;
  --brand-strong: #d99fb2;
}
:root[data-accent="gold"] {
  --brand-accent: #e1c59b;
  --brand-strong: #cdb17f;
}
:root[data-tone="midnight"] {
  --bg: #080e1b;
  --surface: #101a2c;
}
:root[data-tone="slate"] {
  --bg: #19273b;
  --surface: #22344b;
}
:root[data-headings="clean"] {
  --heading-font: "DM Sans", sans-serif;
}
:root[data-accent] {
  --blue: var(--brand-accent);
}
[data-visible][hidden] {
  display: none !important;
}
html[data-headings] h1,
html[data-headings] h2,
html[data-headings] h3 {
  font-family: var(--heading-font);
}
html[data-accent] .primary {
  background: var(--brand-strong);
  color: #091423;
  border-color: var(--brand-strong);
}
html[data-accent] .primary:hover {
  background: var(--brand-accent);
}
html[data-accent] h1 > span:not(.hero-lead):not(.hero-second),
html[data-accent] h2 > span:not(.approach-lead),
html[data-accent] .hero h1 [data-content="heroAccent"] {
  color: var(--brand-accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}
html[data-accent] .desktop-nav a[aria-current="page"],
html[data-accent] .account-tabs a[aria-current="page"] {
  border-bottom-color: var(--brand-accent);
}
html[data-accent] .text-link,
html[data-accent] .text-action {
  color: var(--brand-accent);
}
html[data-tone] .account-panel {
  background: linear-gradient(120deg, var(--surface), var(--bg));
}
html[data-tone] .header {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
.brand .brand-name {
  font-weight: inherit;
  font-size: inherit;
  display: block;
  line-height: inherit;
}
.footer-brand > .brand-name {
  font: inherit;
}
.custom-brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand.has-custom-logo > svg {
  display: none;
}
.hero.hero-without-scene {
  grid-template-columns: 1fr;
  min-height: 650px;
}
.hero.hero-without-scene .hero-copy {
  max-width: 900px;
}
.editor-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.editor-label-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  color: #c8d5ef;
  background: #14233a;
  border: 1px solid #344764;
  border-radius: 9px;
  font-size: 12px;
}
.customization-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
#layout-form h3 {
  margin-top: 30px;
}
#appearance-form .full input[type="file"] {
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .editor-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:is(.editor-shell, .label-workspace) .button {
  border: 1px solid transparent;
  box-shadow: none;
}
:is(.editor-shell, .label-workspace) .button.secondary {
  background: #15253d;
  border-color: #3d5478;
  color: #dce7fb;
}
:is(.editor-shell, .label-workspace) .button.secondary:hover {
  background: #223753;
  border-color: var(--brand-accent);
}

.announcement {
  background: var(--announcement-bg, #162743);
  color: var(--announcement-text, #c5d4ef);
}
.announcement a {
  color: inherit;
}
.color-control > span {
  display: flex;
  gap: 10px;
  align-items: center;
}
input[type="color"] {
  width: 70px;
  min-height: 46px;
  padding: 5px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.color-control input[data-color-hex] {
  width: 130px;
}
#palette-fields,
#category-editor-list {
  margin: 22px 0;
}
.category-editor-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 80px auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}
.category-editor-row label {
  margin: 0;
}
.category-editor-actions {
  display: flex;
  gap: 7px;
  padding-bottom: 4px;
}
.category-editor-actions button {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 6px;
}
.category-editor-row [readonly] {
  opacity: 0.8;
}
#effects-form input[type="range"] {
  width: calc(100% - 50px);
  padding: 8px 0;
  accent-color: var(--brand-accent);
}
#effects-form output {
  display: inline-block;
  min-width: 40px;
  text-align: right;
}
.study-editor {
  padding: 18px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.study-editor summary {
  cursor: pointer;
  margin-bottom: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.research-candidate {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.research-candidate a {
  color: var(--brand-accent);
}
#research-candidates {
  max-height: 420px;
  overflow-y: auto;
  margin: 14px 0;
}
.material-research-panel {
  grid-column: 1 / -1;
  padding: 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.material-research-panel h3 {
  font-size: 25px;
  margin: 14px 0;
}
.published-study {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.published-study > a {
  font-weight: 600;
  line-height: 1.6;
  display: inline-block;
}
.published-study p {
  white-space: pre-line;
  line-height: 1.7;
}
.published-study dl {
  display: grid;
  gap: 10px;
  font-size: 13px;
}
.published-study dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) 1fr;
  gap: 20px;
}
.published-study dt,
.study-limitations {
  color: var(--muted);
}
.published-study dd {
  margin: 0;
}
.category {
  color: var(--category-accent, var(--text));
}
.category.active {
  background: color-mix(
    in srgb,
    var(--category-accent, var(--brand-accent)) 15%,
    var(--bg)
  );
  border-color: var(--category-accent, var(--brand-accent));
}
.product-card[class] .product-category {
  color: var(--category-accent);
  border-color: color-mix(in srgb, var(--category-accent) 45%, transparent);
  background: color-mix(in srgb, var(--category-accent) 9%, transparent);
}
html[data-custom-colors="true"] {
  color-scheme: dark light;
}
html[data-custom-colors="true"]
  :is(
    .header,
    .footer,
    .mobile-nav,
    .account-panel,
    .resource-card,
    .principle,
    .setup-details,
    .editor-label-link,
    .login-panel,
    .auth-card,
    .label-workspace,
    .checkout-summary,
    .research-block,
    .admin-panel
  ) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"]
  :is(dialog, .detail-info, .detail-molecule, .bag-dialog, .material-dialog) {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"]
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(
        [type="range"]
      ),
    select,
    textarea
  ) {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"]
  :is(.detail-visual, .detail-image, .product-image-button, .bag-monogram) {
  background: radial-gradient(
    ellipse at 80% 70%,
    color-mix(
      in srgb,
      var(--category-accent, var(--brand-accent)) 15%,
      var(--surface)
    ),
    var(--bg)
  );
  border-color: var(--line);
}
html[data-custom-colors="true"]
  :is(
    .button.secondary,
    .product-add,
    .editor-tabs button,
    .auth-tabs button,
    .specimen-tabs button,
    .molecule-controls button
  ) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"] .button.primary {
  background: var(--brand-strong);
  color: var(--button-text);
  border-color: var(--brand-strong);
}
html[data-custom-colors="true"]
  :is(
    .muted,
    .input-hint,
    .form-footnote,
    .detail-note,
    .detail-subtitle,
    .product-meta,
    .detail-specs dt,
    .account-panel p,
    .footer p,
    .catalog-preview-note p,
    .hero-copy > p,
    .approach-copy p,
    .label-help
  ) {
  color: var(--muted);
}
html[data-custom-colors="true"]
  :is(
    label,
    .detail-specs dd,
    .desktop-nav a,
    .account-tabs a,
    .brand,
    .product-price,
    .detail-price,
    .account-panel h2,
    .account-panel h3
  ) {
  color: var(--text);
}
html[data-custom-colors="true"]
  :is(.eyebrow, .panel-kicker, .section-number, .text-link, .text-action) {
  color: var(--brand-accent);
}
html[data-custom-colors="true"] .ambient {
  background: radial-gradient(
    ellipse at 80% 38%,
    color-mix(in srgb, var(--brand-accent) 9%, transparent),
    transparent 57%
  );
}
html[data-custom-colors="true"] .announcement {
  background: var(--announcement-bg);
  color: var(--announcement-text);
}
html[data-custom-colors="true"] :is(.account-panel, .detail-info) a {
  color: var(--brand-accent);
}
html[data-custom-colors="true"] a.button.primary {
  color: var(--button-text);
}
html[data-custom-colors="true"] input::placeholder,
html[data-custom-colors="true"] textarea::placeholder {
  color: var(--muted);
  opacity: 0.75;
}
@media (max-width: 650px) {
  .category-editor-row {
    grid-template-columns: minmax(0, 1fr) 74px;
  }
  .category-editor-actions {
    grid-column: 1/-1;
  }
  .published-study dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Let nested catalog and editor controls inherit the selected UI palette. */
html[data-custom-colors="true"]
  :is(
    .search-box,
    .study-editor,
    .research-candidate,
    .material-chemistry,
    .chemistry-match,
    .coa-row,
    .bag-preview,
    .order-card
  ) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"]
  :is(
    .catalog-results-bar p,
    .sort-label,
    .catalog-preview-note > span,
    .product-code,
    .product-image-footer,
    .molecule-status,
    .molecule-legend,
    .bag-item-info p
  ) {
  color: var(--muted);
}
html[data-custom-colors="true"]
  :is(
    .image-open,
    .dialog-close,
    .quantity-control button,
    .molecule-tabs button
  ) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"]
  :is(
    .detail-specs > div,
    .catalog-results-bar,
    .catalog-tools,
    .molecule-tabs button.active
  ) {
  border-color: var(--line);
}
html[data-custom-colors="true"] .molecule-tabs button.active {
  background: color-mix(in srgb, var(--brand-accent) 20%, var(--surface));
  border-color: var(--brand-accent);
}
html[data-custom-colors="true"] .search-box input {
  background: transparent;
}
html[data-custom-colors="true"]
  :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--brand-strong);
}
/* The visual and the card share a single gradient, including custom categories. */
html[data-accent] .detail-visual {
  background: radial-gradient(
    ellipse at 80% 70%,
    var(--category-bg),
    var(--bg) 90%
  );
}
html[data-accent] .detail-visual .detail-image {
  background: transparent;
}
.study-autofill-status {
  white-space: pre-line;
}
.study-source-abstract {
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--muted);
}
.study-source-preview {
  margin: 16px 0;
}
.delivery-rule {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 22px 0;
  padding: 22px;
  min-width: 0;
}
.delivery-rule legend {
  padding: 0 8px;
  color: var(--text);
}
#delivery-form h3 {
  margin-top: 34px;
}
.shipping-service-choice {
  margin-top: 24px;
}
html[data-custom-colors="true"]
  :is(.payment-option, .commerce-banner, .delivery-rule) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"] .payment-option:has(input:checked) {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 15%, var(--surface));
}
html[data-custom-colors="true"]
  :is(.summary-item, .checkout-totals > div, .payment-option strong) {
  color: var(--text);
  border-color: var(--line);
}
html[data-custom-colors="true"]
  :is(.payment-option small, .summary-item span, .checkout-totals dt) {
  color: var(--muted);
}

.research-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.research-columns:not(:has(.research-network)) {
  grid-template-columns: 1fr;
}
.research-notes {
  min-width: 0;
  padding: 32px 40px;
}
.research-network {
  min-width: 0;
  padding: 32px 40px;
  border-left: 1px solid var(--line);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.research-network .pathway-panel.database-pathway {
  margin: 0;
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pathway-panel.database-pathway {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: end;
  margin-left: auto;
  padding: 12px;
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--blue) 5%, transparent),
    transparent 75%
  );
}
.network-heading {
  position: relative;
  margin-bottom: 20px;
}
.network-heading .panel-kicker {
  margin: 0;
  padding-right: 128px;
}
.network-controls {
  position: absolute;
  right: 0;
  top: -5px;
  display: flex;
  gap: 6px;
}
.network-controls button {
  min-width: 26px;
  min-height: 26px;
  padding: 2px;
  color: var(--muted);
}
.pathway-panel.database-pathway h3 {
  font-size: 25px;
  margin: 14px 0;
}
.network-intro {
  margin: 0;
  min-height: 42px;
}
.network-search {
  display: block;
  margin: 16px 0 0;
}
.network-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.network-search input {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  width: 100%;
  font-size: 13px;
  min-height: 40px;
}
.network-search input:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 2px;
}
.database-network {
  touch-action: none;
  user-select: none;
  cursor: grab;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 300px;
  margin: 18px 0 10px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--blue) 7%, transparent),
    transparent 72%
  );
}
.database-network.is-dragging,
.database-network.is-dragging .network-node {
  cursor: grabbing;
}
.network-node.network-match text {
  fill: var(--text);
  font-weight: 600;
}
.network-edge {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.1;
  opacity: 0.6;
}
.network-node {
  --node-color: var(--blue);
  cursor: pointer;
  outline: none;
}
.network-node .node-hit {
  fill: transparent;
  stroke: none;
}
.network-node .node-dot {
  fill: var(--node-color);
  filter: drop-shadow(0 0 4px var(--node-color));
  stroke: var(--text);
  stroke-width: 0.4;
}
.network-node .node-halo {
  fill: var(--node-color);
  fill-opacity: 0.07;
  stroke: var(--blue);
  stroke-opacity: 0.2;
  stroke-width: 0.6;
}
.network-pathway .node-halo {
  opacity: 0.4;
}
.network-node text {
  fill: var(--muted);
  font-size: 11px;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2px;
}
.network-target,
.network-protein {
  --node-color: color-mix(in srgb, var(--blue) 45%, var(--text));
}
.network-pathway {
  --node-color: var(--muted);
}
.network-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 11px;
  margin: 0 0 16px;
}
.network-legend span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--node-color, var(--blue));
}
.network-node:is(:hover, :focus, [aria-pressed="true"]) text {
  opacity: 1;
  fill: var(--text);
}
.network-node:is(:focus, [aria-pressed="true"]) .node-halo {
  stroke-opacity: 1;
  fill-opacity: 0.2;
}
.network-dim {
  opacity: 0.13;
}
.network-selection {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  min-height: 36px;
  margin: 0 0 12px;
  overflow: hidden;
}
.network-sources summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.network-sources[open] {
  max-height: 220px;
  overflow: auto;
}
.network-sources ol {
  padding-left: 18px;
}
#pathway-preview .database-pathway {
  margin-top: 14px;
}
.research-sources {
  min-width: 0;
}
.published-study summary {
  cursor: pointer;
  padding: 16px 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.5;
}
.published-study[open] > a {
  display: inline-block;
  margin: 4px 0 14px;
}
.pathway-panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.pathway-panel h3 {
  font-size: 20px;
}
.pathway-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pathway-map line {
  stroke: var(--blue);
  stroke-width: 1.6;
  opacity: 0.65;
}
.pathway-map marker path {
  fill: var(--blue);
}
.pathway-map circle {
  fill: var(--surface);
  stroke: var(--blue);
  stroke-width: 1.5;
}
.pathway-map text {
  fill: var(--text);
  text-anchor: middle;
  font-size: 11px;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
}
.pathway-map .pathway-edge-number {
  fill: var(--blue);
  font-size: 13px;
}
.pathway-panel li {
  font-size: 12px;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
.pathway-panel li p {
  margin: 5px 0;
}
#pathway-editor fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 15px 0;
  padding: 15px;
}
@media (max-width: 760px) {
  .research-columns {
    grid-template-columns: 1fr;
  }
  .research-notes {
    padding: 24px;
  }
  .research-network {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 24px;
  }
  .shipping-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.detail-info .database-pathway {
  margin-top: 22px;
}