/*
 * DeckLab × RØKT. visual system
 *
 * This layer intentionally sits after the historical DeckLab stylesheet. It
 * keeps the configurator behaviour isolated while making the public tool use
 * the same tokens, typography and component language as rokt-skate.fr.
 */

.decklab-app {
  --dl-rokt-navy: #142131;
  --dl-rokt-navy-deep: #101d2c;
  --dl-rokt-surface: #18293a;
  --dl-rokt-blue: #264b63;
  --dl-rokt-border: #477895;
  --dl-rokt-red: #a32020;
  --dl-rokt-red-hover: #bd2c2c;
  --dl-rokt-accent-text: #e46666;
  --dl-rokt-white: #f5f5f5;
  --dl-rokt-copy: #c7d2da;
  --dl-rokt-muted: #8e9aa5;
  --dl-font-brand: Montserrat, Arial, sans-serif;
  --dl-font-ui: Montserrat, Arial, sans-serif;
  --dl-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --dl-line: var(--dl-rokt-border);
  --dl-strong: rgba(199, 210, 218, .46);
  --dl-glow: rgba(163, 32, 32, .18);
  color: var(--dl-text, var(--dl-rokt-white));
  background: var(--dl-bg, var(--dl-rokt-navy));
  font-family: var(--dl-font-ui);
}

.decklab-app:not(.decklab-app--immersive) {
  border-radius: 0;
}

.decklab-app.decklab-app button {
  appearance: none;
  background-image: none;
  font-family: var(--dl-font-ui);
}

section.decklab-app.decklab-app[data-decklab-app] :where(
  button:not(:disabled):hover,
  button:not(:disabled):focus-visible,
  button:not(:disabled):active
) {
  color: #fff;
  background-color: var(--dl-rokt-blue);
  border-color: var(--dl-rokt-border);
  box-shadow: none;
}

.decklab-app.decklab-app input,
.decklab-app.decklab-app select,
.decklab-app.decklab-app textarea {
  font-family: var(--dl-font-ui);
}

.decklab-app.decklab-app button:focus-visible,
.decklab-app.decklab-app input:focus-visible,
.decklab-app.decklab-app select:focus-visible,
.decklab-app.decklab-app textarea:focus-visible,
.decklab-app.decklab-app [tabindex]:focus-visible {
  outline: 3px solid var(--dl-rokt-accent-text);
  outline-offset: 3px;
}

.decklab-app::before {
  background:
    linear-gradient(90deg, rgba(163, 32, 32, .09), transparent 18%),
    linear-gradient(180deg, rgba(38, 75, 99, .16), transparent 38%);
}

.decklab-app::after {
  background-image:
    linear-gradient(rgba(38, 75, 99, .24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 75, 99, .24) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .76) 72%, transparent 100%);
  opacity: .66;
}

.decklab-shell--immersive {
  background: linear-gradient(180deg, rgba(16, 29, 44, .96), rgba(10, 18, 27, .99));
}

.decklab-viewer {
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(163, 32, 32, .09) 50%, transparent 50.1%),
    linear-gradient(180deg, transparent 49.9%, rgba(38, 75, 99, .22) 50%, transparent 50.1%),
    linear-gradient(180deg, #101d2c 0%, #0b1520 100%);
}

/* Brand block */
.decklab-top-brand {
  gap: 8px;
  opacity: 1;
}

.decklab-top-brand::after {
  width: 52px;
  height: 3px;
  margin-top: 2px;
  content: "";
  background: var(--dl-rokt-red);
}

.decklab-top-brand img,
.decklab-menu-logo {
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .28));
}

.decklab-app .decklab-theme-logo--light {
  display: none;
}

.decklab-app .decklab-top-brand span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  color: #a32020;
  font-family: var(--dl-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
}

.decklab-top-brand span::before {
  width: 6px;
  height: 6px;
  content: "";
  background: var(--dl-rokt-red);
  border-radius: 50%;
}

/* Top actions */
.decklab-app.decklab-app .decklab-floating-pill,
.decklab-app.decklab-app .decklab-icon-btn,
.decklab-app.decklab-app .decklab-theme-toggle,
.decklab-app.decklab-app .decklab-price-chip,
.decklab-app.decklab-app .decklab-primary,
.decklab-app.decklab-app .decklab-bigbtn,
.decklab-app.decklab-app .decklab-ghost {
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}

.decklab-app.decklab-app .decklab-floating-pill {
  min-height: 42px;
  color: var(--dl-rokt-copy);
  background: rgba(20, 33, 49, .94);
  border-color: var(--dl-rokt-border);
  font-family: var(--dl-font-mono);
  letter-spacing: .14em;
}

.decklab-floating-pill span {
  width: 4px;
  height: 4px;
  background: var(--dl-rokt-red);
  border-radius: 0;
}

.decklab-app.decklab-app .decklab-floating-pill:hover,
.decklab-app.decklab-app .decklab-floating-pill:focus-visible,
.decklab-app.decklab-app .decklab-floating-pill:active,
.decklab-app.decklab-app .decklab-icon-btn:hover,
.decklab-app.decklab-app .decklab-icon-btn:focus-visible,
.decklab-app.decklab-app .decklab-icon-btn:active,
.decklab-app.decklab-app .decklab-ghost:hover,
.decklab-app.decklab-app .decklab-ghost:focus-visible,
.decklab-app.decklab-app .decklab-ghost:active {
  color: var(--dl-rokt-white);
  background: var(--dl-rokt-blue);
  border-color: var(--dl-rokt-border);
}

.decklab-app .decklab-floating-top--center {
  padding: 0;
  gap: 6px;
  background: transparent;
  border: 0;
}

.decklab-app .decklab-history-btn,
.decklab-app .decklab-floating-top--center .decklab-icon-btn {
  width: 42px;
  height: 42px;
  color: var(--dl-rokt-copy);
  background: rgba(16, 29, 44, .94);
  border: 1px solid var(--dl-rokt-border);
  border-radius: 50%;
}

.decklab-app .decklab-reset-design-mini {
  color: var(--dl-rokt-white);
  background: var(--dl-rokt-red);
}

.decklab-app.decklab-app .decklab-reset-design-mini:hover,
.decklab-app.decklab-app .decklab-reset-design-mini:focus-visible,
.decklab-app.decklab-app .decklab-reset-design-mini:active {
  color: #fff;
  background: var(--dl-rokt-red-hover);
}

.decklab-floating-top--right .decklab-price-chip,
.decklab-app .decklab-floating-top--right .decklab-price-chip {
  height: 44px;
  min-height: 44px;
  background: rgba(20, 33, 49, .96);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: none;
}

.decklab-app .decklab-price-chip small {
  color: var(--dl-rokt-copy);
  font-family: var(--dl-font-mono);
  font-size: 10px;
  font-weight: 500;
}

.decklab-app .decklab-price-chip strong,
.decklab-app .decklab-floating-top--right .decklab-price-chip strong {
  color: var(--dl-rokt-accent-text);
  font-family: var(--dl-font-mono);
}

.decklab-app.decklab-app .decklab-theme-toggle {
  width: 44px;
  height: 44px;
  color: var(--dl-rokt-copy);
  background: rgba(20, 33, 49, .96);
  border-color: var(--dl-rokt-border);
}

.decklab-app.decklab-app .decklab-theme-toggle:hover,
.decklab-app.decklab-app .decklab-theme-toggle:focus-visible,
.decklab-app.decklab-app .decklab-theme-toggle:active {
  color: #fff;
  background: var(--dl-rokt-blue);
  border-color: var(--dl-rokt-blue);
  box-shadow: none;
}

.decklab-app.decklab-app .decklab-primary,
.decklab-app.decklab-app .decklab-bigbtn,
.decklab-app.decklab-app .decklab-floating-top--right .decklab-final-chip {
  min-height: 44px;
  color: #fff;
  background: var(--dl-rokt-red);
  border: 1px solid var(--dl-rokt-red);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--dl-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.decklab-app.decklab-app .decklab-primary:hover,
.decklab-app.decklab-app .decklab-primary:focus-visible,
.decklab-app.decklab-app .decklab-primary:active,
.decklab-app.decklab-app .decklab-bigbtn:hover,
.decklab-app.decklab-app .decklab-bigbtn:focus-visible,
.decklab-app.decklab-app .decklab-bigbtn:active {
  color: #fff;
  background: var(--dl-rokt-red-hover);
  border-color: var(--dl-rokt-red-hover);
  box-shadow: none;
  transform: none;
}

/* Product status */
.decklab-app .decklab-stage-status {
  left: 28px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  color: var(--dl-rokt-copy);
  border-left: 0;
}

.decklab-app .decklab-stage-status .decklab-preview-badge {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  padding: 8px;
  color: #fff;
  background: var(--dl-rokt-red);
  border-radius: 50%;
  font-family: var(--dl-font-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .04em;
  text-align: center;
}

.decklab-app .decklab-stage-status small {
  color: var(--dl-rokt-copy);
  font-family: var(--dl-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
}

.decklab-app .decklab-loader {
  min-width: 260px;
  padding: 24px 30px;
  color: var(--dl-rokt-copy);
  background: rgba(20, 33, 49, .96);
  border: 1px solid var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: 12px 12px 0 rgba(16, 29, 44, .58);
}

.decklab-app .decklab-loader::before {
  border-color: var(--dl-rokt-border);
  border-top-color: var(--dl-rokt-red);
}

.decklab-app .decklab-loader b {
  color: var(--dl-rokt-white);
  font-family: var(--dl-font-ui);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.decklab-app .decklab-loader span {
  color: var(--dl-rokt-copy);
  font-family: var(--dl-font-mono);
}

/* Bottom category rail */
.decklab-app .decklab-bottom-builder {
  max-width: calc(100% - 40px);
  gap: 6px;
  padding: 6px;
  background: rgba(16, 29, 44, .97);
  border: 1px solid var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .34);
  backdrop-filter: none;
}

.decklab-app .decklab-bottom-builder button {
  min-width: 112px;
  height: 52px;
  padding: 8px 12px;
  color: var(--dl-rokt-copy);
  background: var(--dl-rokt-navy);
  border: 1px solid var(--dl-rokt-border);
  border-radius: 0;
  font-family: var(--dl-font-ui);
  box-shadow: none;
}

.decklab-app .decklab-bottom-builder button span {
  width: 20px;
  height: 20px;
  color: var(--dl-rokt-accent-text);
  background: transparent;
  border: 1px solid var(--dl-rokt-accent-text);
  border-radius: 0;
  font-family: var(--dl-font-mono);
}

.decklab-app .decklab-bottom-builder button b {
  font-family: var(--dl-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.decklab-app.decklab-app .decklab-bottom-builder button:not(.is-active):not(:disabled):hover,
.decklab-app.decklab-app .decklab-bottom-builder button:not(.is-active):not(:disabled):focus-visible,
.decklab-app.decklab-app .decklab-bottom-builder button:not(.is-active):not(:disabled):active {
  color: #fff;
  background: #142131;
  border-color: #a32020;
  transform: none;
}

.decklab-app.decklab-app .decklab-bottom-builder button.is-active,
.decklab-app.decklab-app .decklab-bottom-builder button.is-active:hover,
.decklab-app.decklab-app .decklab-bottom-builder button.is-active:focus-visible {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
  box-shadow: none;
}

.decklab-app .decklab-bottom-builder button.is-active span {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}

/* Drawers and cards */
.decklab-app .decklab-menu-drawer,
.decklab-app .decklab-config-drawer {
  color: var(--dl-rokt-white);
  background: var(--dl-rokt-navy);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: 18px 0 52px rgba(0, 0, 0, .36);
  backdrop-filter: none;
}

.decklab-app .decklab-config-drawer {
  box-shadow: -18px 18px 52px rgba(0, 0, 0, .36);
}

.decklab-app .decklab-drawer-head {
  position: relative;
  padding: 19px 20px 16px;
  background: var(--dl-rokt-navy-deep);
  border-bottom-color: var(--dl-rokt-border);
}

.decklab-app .decklab-drawer-head::after {
  position: absolute;
  bottom: -1px;
  left: 20px;
  width: 58px;
  height: 3px;
  content: "";
  background: var(--dl-rokt-red);
}

.decklab-app .decklab-drawer-head small {
  color: var(--dl-rokt-accent-text);
  font-family: var(--dl-font-mono);
  font-size: 10px;
}

.decklab-app .decklab-drawer-head h2 {
  color: var(--dl-rokt-white);
  font-family: var(--dl-font-ui);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.decklab-app .decklab-drawer-close {
  color: var(--dl-rokt-copy);
  background: transparent;
  border-color: var(--dl-rokt-border);
  border-radius: 0;
}

.decklab-app.decklab-app .decklab-drawer-close:hover,
.decklab-app.decklab-app .decklab-drawer-close:focus-visible,
.decklab-app.decklab-app .decklab-drawer-close:active {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app .decklab-drawer-scroll,
.decklab-app .decklab-menu-drawer {
  scrollbar-color: var(--dl-rokt-red) rgba(38, 75, 99, .25);
}

.decklab-app .decklab-drawer-scroll::-webkit-scrollbar-track,
.decklab-app .decklab-menu-drawer::-webkit-scrollbar-track {
  background: rgba(38, 75, 99, .25);
  border-radius: 0;
}

.decklab-app .decklab-drawer-scroll::-webkit-scrollbar-thumb,
.decklab-app .decklab-menu-drawer::-webkit-scrollbar-thumb {
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-navy);
  border-radius: 0;
}

.decklab-app .decklab-menu-block,
.decklab-app .decklab-option-card,
.decklab-app .decklab-summary-card,
.decklab-app .decklab-placement-tool,
.decklab-app .decklab-preflight-list li,
.decklab-app .decklab-artwork-action {
  color: var(--dl-rokt-copy);
  background: var(--dl-rokt-surface);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: none;
}

.decklab-app .decklab-panel-intro {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 50px;
  padding: 14px 16px;
  margin: 0 0 10px;
  gap: 14px;
  color: var(--dl-rokt-white);
  background: var(--dl-rokt-navy-deep);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
}

.decklab-app .decklab-panel-intro::before {
  display: none;
  content: none;
}

.decklab-app .decklab-panel-intro span {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  padding-right: 14px;
  color: var(--dl-rokt-accent-text);
  background: transparent;
  border-right: 1px solid var(--dl-rokt-border);
  border-radius: 0;
  font-family: var(--dl-font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .08em;
}

.decklab-app .decklab-panel-intro b {
  color: var(--dl-rokt-white);
  font-family: var(--dl-font-ui);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.decklab-app .decklab-card-kicker,
.decklab-app .decklab-field > span,
.decklab-app .decklab-summary-card dt,
.decklab-app .decklab-placement-tool-head span,
.decklab-app .decklab-price-breakdown-card > .decklab-card-kicker {
  color: var(--dl-rokt-accent-text);
  font-family: var(--dl-font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.decklab-app .decklab-card-kicker {
  font-size: 11px;
}

.decklab-app .decklab-field {
  color: var(--dl-rokt-copy);
  background: var(--dl-rokt-navy-deep);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
}

.decklab-app .decklab-field input[type="text"],
.decklab-app .decklab-field select,
.decklab-app .decklab-select-full,
.decklab-app .decklab-color-main,
.decklab-app .decklab-custom-select-trigger,
.decklab-app .decklab-custom-select-options {
  color: var(--dl-rokt-white);
  background: var(--dl-rokt-navy);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: none;
}

.decklab-app .decklab-custom-select-trigger {
  min-height: 48px;
  font-weight: 600;
}

.decklab-app .decklab-width-card .decklab-custom-select-trigger,
.decklab-app .decklab-width-card select {
  color: #f5f5f5;
}

.decklab-app.decklab-app .decklab-width-card .decklab-custom-select-label,
.decklab-app.decklab-app .decklab-width-card .decklab-custom-select-trigger:hover .decklab-custom-select-label,
.decklab-app.decklab-app .decklab-width-card .decklab-custom-select-trigger:focus-visible .decklab-custom-select-label,
.decklab-app.decklab-app .decklab-width-card .decklab-custom-select-trigger:active .decklab-custom-select-label,
.decklab-app.decklab-app .decklab-width-card .decklab-custom-select.is-open .decklab-custom-select-label {
  color: #f5f5f5;
}

.decklab-app.decklab-app .decklab-custom-select-trigger:hover,
.decklab-app.decklab-app .decklab-custom-select-trigger:focus-visible,
.decklab-app.decklab-app .decklab-custom-select-trigger:active,
.decklab-app.decklab-app .decklab-custom-select.is-open .decklab-custom-select-trigger {
  background: var(--dl-rokt-navy-deep);
  border-color: var(--dl-rokt-accent-text);
  box-shadow: none;
}

.decklab-app .decklab-custom-select-chevron {
  color: var(--dl-rokt-accent-text);
}

.decklab-app .decklab-custom-select-option {
  color: var(--dl-rokt-copy);
  border-radius: 0;
}

.decklab-app .decklab-custom-select-option::before {
  border-color: var(--dl-rokt-border);
  border-radius: 0;
}

.decklab-app.decklab-app .decklab-custom-select-option:hover,
.decklab-app.decklab-app .decklab-custom-select-option:focus-visible,
.decklab-app.decklab-app .decklab-custom-select-option:active {
  color: #fff;
  background: var(--dl-rokt-blue);
}

.decklab-app .decklab-custom-select-option.is-selected {
  color: #fff;
  background: var(--dl-rokt-red);
}

.decklab-app .decklab-custom-select-option.is-selected::before {
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

.decklab-app .decklab-choice-segment span {
  min-height: 46px;
  color: var(--dl-rokt-copy);
  background: var(--dl-rokt-navy);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
}

.decklab-app .decklab-choice-segment label {
  cursor: pointer;
}

.decklab-app .decklab-choice-segment input:checked + span {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
  box-shadow: none;
}

.decklab-app .decklab-choice-segment input:focus-visible + span {
  outline: 3px solid var(--dl-rokt-accent-text);
  outline-offset: 3px;
}

.decklab-app .decklab-swatchgrid button {
  height: 38px;
  background: var(--swatch);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
}

.decklab-app.decklab-app .decklab-swatchgrid button:hover,
.decklab-app.decklab-app .decklab-swatchgrid button:focus-visible,
.decklab-app.decklab-app .decklab-swatchgrid button:active {
  background: var(--swatch);
  border-color: var(--dl-rokt-accent-text);
}

.decklab-app .decklab-swatchgrid button.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--dl-rokt-red);
}

.decklab-app .decklab-covering-carousel button,
.decklab-app .decklab-covering-tile--custom-illu {
  background: var(--dl-rokt-navy-deep);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: none;
}

.decklab-app.decklab-app .decklab-covering-carousel button:hover,
.decklab-app.decklab-app .decklab-covering-carousel button:focus-visible,
.decklab-app.decklab-app .decklab-covering-carousel button:active {
  color: #fff;
  background: var(--dl-rokt-blue);
  border-color: var(--dl-rokt-border);
  box-shadow: none;
}

.decklab-app.decklab-app .decklab-covering-carousel button.is-active,
.decklab-app.decklab-app .decklab-covering-carousel button.is-active:hover,
.decklab-app.decklab-app .decklab-covering-carousel button.is-active:focus-visible {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
  box-shadow: none;
}

.decklab-app .decklab-covering-tile--upload::after {
  color: #fff;
  background: var(--dl-rokt-red);
  border-radius: 0;
}

.decklab-app .decklab-covering-tile--none::after {
  background: var(--dl-rokt-accent-text);
  border-radius: 0;
}

.decklab-app .decklab-help-note,
.decklab-app .decklab-safe-area-note,
.decklab-app .decklab-preflight-note {
  color: var(--dl-rokt-copy);
  background: rgba(38, 75, 99, .18);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
}

.decklab-app .decklab-preset-list--cards button,
.decklab-app .decklab-custom-presets button,
.decklab-app .decklab-language-switch button,
.decklab-app .decklab-stepper button {
  color: var(--dl-rokt-copy);
  background: var(--dl-rokt-navy-deep);
  border-color: var(--dl-rokt-border);
  border-radius: 0;
  box-shadow: none;
}

.decklab-app.decklab-app .decklab-preset-list--cards button:not(.is-active):not(:disabled):hover,
.decklab-app.decklab-app .decklab-preset-list--cards button:not(.is-active):not(:disabled):focus-visible,
.decklab-app.decklab-app .decklab-preset-list--cards button:not(.is-active):not(:disabled):active {
  color: #fff;
  background: #142131;
  border-color: #a32020;
}

.decklab-app.decklab-app .decklab-preset-list--cards button.is-active,
.decklab-app.decklab-app .decklab-preset-list--cards button.is-active:hover,
.decklab-app.decklab-app .decklab-preset-list--cards button.is-active:focus-visible,
.decklab-app.decklab-app .decklab-custom-presets button:hover,
.decklab-app.decklab-app .decklab-custom-presets button:focus-visible,
.decklab-app.decklab-app .decklab-custom-presets button:active,
.decklab-app.decklab-app .decklab-language-switch button:hover,
.decklab-app.decklab-app .decklab-language-switch button:focus-visible,
.decklab-app.decklab-app .decklab-language-switch button:active,
.decklab-app.decklab-app .decklab-language-switch button.is-active,
.decklab-app.decklab-app .decklab-stepper button:hover,
.decklab-app.decklab-app .decklab-stepper button:focus-visible,
.decklab-app.decklab-app .decklab-stepper button:active {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app .decklab-preset-copy strong,
.decklab-app .decklab-custom-presets span {
  color: var(--dl-rokt-white);
  font-family: var(--dl-font-ui);
  font-weight: 700;
  text-transform: uppercase;
}

.decklab-app .decklab-preset-list--cards button small,
.decklab-app .decklab-custom-presets small,
.decklab-app .decklab-empty-presets {
  color: var(--dl-rokt-copy);
  font-family: var(--dl-font-mono);
  font-size: 10px;
  line-height: 1.4;
}

.decklab-app .decklab-placement-tool-head svg,
.decklab-app .decklab-artwork-action-icon,
.decklab-app .decklab-field em,
.decklab-app .decklab-commerce-note[data-status="ready"] {
  color: var(--dl-rokt-accent-text);
}

.decklab-app .decklab-placement-range {
  background: var(--dl-rokt-blue);
  border-radius: 0;
}

.decklab-app .decklab-placement-range::-webkit-slider-thumb {
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-white);
  box-shadow: none;
}

.decklab-app .decklab-placement-range::-moz-range-thumb {
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-white);
  box-shadow: none;
}

.decklab-app .decklab-artwork-action-icon {
  background: rgba(163, 32, 32, .14);
  border-color: var(--dl-rokt-accent-text);
  border-radius: 0;
}

.decklab-app.decklab-app .decklab-safe-area-toggle.is-active,
.decklab-app.decklab-app .decklab-safe-area-toggle.is-active:hover,
.decklab-app.decklab-app .decklab-safe-area-toggle.is-active:focus-visible {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app .decklab-safe-area-toggle.is-active .decklab-artwork-action-icon {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}

.decklab-app.decklab-app .decklab-artwork-action:hover,
.decklab-app.decklab-app .decklab-artwork-action:focus-visible,
.decklab-app.decklab-app .decklab-artwork-action:active {
  color: var(--dl-rokt-white);
  background: var(--dl-rokt-blue);
  border-color: var(--dl-rokt-border);
  box-shadow: none;
  transform: none;
}

.decklab-app .decklab-summary-card dd,
.decklab-app .decklab-price-breakdown strong,
.decklab-app .decklab-placement-tool-head em {
  color: var(--dl-rokt-white);
}

.decklab-app .decklab-summary-card--final dd[data-dl-spec="price"] {
  color: var(--dl-rokt-accent-text);
  text-shadow: none;
}

.decklab-app [data-dl-preflight-badge],
.decklab-app .decklab-preflight-list li > span {
  color: #fff;
  background: var(--dl-rokt-red);
  border-radius: 0;
}

.decklab-app.decklab-app .decklab-preflight-list li[data-status="info"] > span {
  color: #fff;
  background: var(--dl-rokt-blue);
}

.decklab-app .decklab-final-actions {
  background: linear-gradient(180deg, rgba(20, 33, 49, 0), var(--dl-rokt-navy) 28%);
}

.decklab-app.decklab-app .decklab-cart-button:disabled,
.decklab-app.decklab-app .decklab-cart-button:disabled:hover,
.decklab-app.decklab-app .decklab-cart-button:disabled:focus-visible {
  color: var(--dl-rokt-copy);
  background: var(--dl-rokt-blue);
  border-color: var(--dl-rokt-blue);
  opacity: 1;
}

.decklab-app.decklab-app .decklab-backdrop,
.decklab-app.decklab-app .decklab-backdrop:hover,
.decklab-app.decklab-app .decklab-backdrop:focus-visible,
.decklab-app.decklab-app .decklab-backdrop:active,
.decklab-app.decklab-app .decklab-drawer-backdrop,
.decklab-app.decklab-app .decklab-drawer-backdrop:hover,
.decklab-app.decklab-app .decklab-drawer-backdrop:focus-visible,
.decklab-app.decklab-app .decklab-drawer-backdrop:active {
  color: transparent;
  background: rgba(0, 0, 0, .26);
  border: 0;
  box-shadow: none;
}

.decklab-app .decklab-viewer:focus-within {
  outline: 3px solid var(--dl-rokt-accent-text);
  outline-offset: -5px;
}

/*
 * Light mode is the direct light counterpart of the dark RØKT. system:
 * identical hierarchy and interaction states, with accessible pale surfaces.
 */
.decklab-app.decklab-app--viewer-light {
  --dl-light-canvas: #eef2f4;
  --dl-light-surface: #fff;
  --dl-light-surface-alt: #e1e8ec;
  --dl-light-text: #142131;
  --dl-light-copy: #52616e;
  --dl-light-border: #7b8f9d;
  --dl-light-border-strong: #52616e;
  --dl-bg: var(--dl-light-canvas);
  --dl-surface: var(--dl-light-surface);
  --dl-text: var(--dl-light-text);
  --dl-muted: var(--dl-light-copy);
  --dl-rokt-border: var(--dl-light-border-strong);
  --dl-rokt-accent-text: var(--dl-rokt-red);
  --dl-line: var(--dl-light-border);
  color: var(--dl-light-text);
  background: var(--dl-light-canvas);
}

.decklab-app.decklab-app--viewer-light::after {
  background-image:
    linear-gradient(rgba(38, 75, 99, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 75, 99, .1) 1px, transparent 1px);
  opacity: .44;
}

.decklab-app.decklab-app--viewer-light .decklab-shell--immersive,
.decklab-app.decklab-app--viewer-light .decklab-stage,
.decklab-app.decklab-app--viewer-light .decklab-viewer {
  background:
    radial-gradient(circle at 50% 34%, rgba(163, 32, 32, .07), transparent 34%),
    linear-gradient(180deg, #f8fafb 0%, var(--dl-light-canvas) 100%);
}

.decklab-app.decklab-app--viewer-light .decklab-theme-logo--dark {
  display: none;
}

.decklab-app.decklab-app--viewer-light .decklab-theme-logo--light {
  display: block;
  filter: drop-shadow(0 10px 22px rgba(20, 33, 49, .1));
}

.decklab-app.decklab-app--viewer-light .decklab-top-brand span,
.decklab-app.decklab-app--viewer-light .decklab-stage-status,
.decklab-app.decklab-app--viewer-light .decklab-stage-status small,
.decklab-app.decklab-app--viewer-light .decklab-price-chip small {
  color: var(--dl-light-copy);
}

.decklab-app.decklab-app--viewer-light .decklab-top-brand span {
  color: #a32020;
}

.decklab-app.decklab-app--viewer-light .decklab-stage-status span {
  color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-stage-status .decklab-preview-badge {
  color: #fff;
  background: var(--dl-rokt-red);
}

/* Neutral controls: white by default, navy on interaction, red when selected. */
.decklab-app.decklab-app--viewer-light .decklab-floating-pill,
.decklab-app.decklab-app--viewer-light .decklab-icon-btn,
.decklab-app.decklab-app--viewer-light .decklab-theme-toggle,
.decklab-app.decklab-app--viewer-light .decklab-price-chip,
.decklab-app.decklab-app--viewer-light .decklab-bottom-builder {
  color: var(--dl-light-text);
  background: rgba(255, 255, 255, .97);
  border-color: var(--dl-light-border-strong);
  box-shadow: none;
}

.decklab-app.decklab-app--viewer-light .decklab-price-chip strong {
  color: var(--dl-rokt-red);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-floating-pill:not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-floating-pill:not(:disabled):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-floating-pill:not(:disabled):active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-history-btn:not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-history-btn:not(:disabled):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-history-btn:not(:disabled):active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-theme-toggle:not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-theme-toggle:not(:disabled):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-theme-toggle:not(:disabled):active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-ghost:not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-ghost:not(:disabled):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-ghost:not(:disabled):active {
  color: #fff;
  background: var(--dl-light-text);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-reset-design-mini,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-reset-design-mini:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-reset-design-mini:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-reset-design-mini:active {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-reset-design-mini:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-reset-design-mini:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-reset-design-mini:active {
  background: var(--dl-rokt-red-hover);
  border-color: var(--dl-rokt-red-hover);
}

.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button {
  color: var(--dl-light-text);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border-strong);
}

.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button span {
  color: var(--dl-rokt-red);
  background: transparent;
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button:not(.is-active):hover,
.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button:not(.is-active):focus-visible,
.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button:not(.is-active):active {
  color: #fff;
  background: #142131;
  border-color: #a32020;
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button.is-active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button.is-active:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button.is-active:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button.is-active:active {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button.is-active span {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .58);
}

.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button:not(.is-active):hover span,
.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button:not(.is-active):focus-visible span,
.decklab-app.decklab-app--viewer-light .decklab-bottom-builder button:not(.is-active):active span {
  color: #fff;
  border-color: rgba(255, 255, 255, .58);
}

/* Drawers and surfaces use one shared hierarchy. */
.decklab-app.decklab-app--viewer-light .decklab-menu-drawer,
.decklab-app.decklab-app--viewer-light .decklab-config-drawer {
  color: var(--dl-light-text);
  background: var(--dl-light-canvas);
  border-color: var(--dl-light-border-strong);
  box-shadow: none;
}

.decklab-app.decklab-app--viewer-light .decklab-drawer-head {
  color: var(--dl-light-text);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border);
}

.decklab-app.decklab-app--viewer-light .decklab-drawer-head small,
.decklab-app.decklab-app--viewer-light .decklab-card-kicker,
.decklab-app.decklab-app--viewer-light .decklab-field > span,
.decklab-app.decklab-app--viewer-light .decklab-summary-card dt,
.decklab-app.decklab-app--viewer-light .decklab-placement-tool-head span,
.decklab-app.decklab-app--viewer-light .decklab-price-breakdown-card > .decklab-card-kicker {
  color: var(--dl-rokt-red);
  opacity: 1;
}

.decklab-app.decklab-app--viewer-light .decklab-drawer-head h2,
.decklab-app.decklab-app--viewer-light .decklab-summary-card dd,
.decklab-app.decklab-app--viewer-light .decklab-price-breakdown strong,
.decklab-app.decklab-app--viewer-light .decklab-placement-tool-head em,
.decklab-app.decklab-app--viewer-light .decklab-preflight-head strong,
.decklab-app.decklab-app--viewer-light .decklab-preflight-list strong,
.decklab-app.decklab-app--viewer-light .decklab-preset-copy strong,
.decklab-app.decklab-app--viewer-light .decklab-custom-presets span {
  color: var(--dl-light-text);
  opacity: 1;
}

.decklab-app.decklab-app--viewer-light .decklab-panel-intro {
  color: var(--dl-light-text);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border-strong);
}

.decklab-app.decklab-app--viewer-light .decklab-panel-intro span {
  color: var(--dl-rokt-red);
  border-right-color: var(--dl-light-border-strong);
}

.decklab-app.decklab-app--viewer-light .decklab-panel-intro b {
  color: var(--dl-light-text);
}

.decklab-app.decklab-app--viewer-light .decklab-menu-block,
.decklab-app.decklab-app--viewer-light .decklab-option-card,
.decklab-app.decklab-app--viewer-light .decklab-summary-card,
.decklab-app.decklab-app--viewer-light .decklab-placement-tool,
.decklab-app.decklab-app--viewer-light .decklab-preflight-list li,
.decklab-app.decklab-app--viewer-light .decklab-artwork-action,
.decklab-app.decklab-app--viewer-light .decklab-field {
  color: var(--dl-light-copy);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border);
  box-shadow: none;
}

/* Form controls and selection states. */
.decklab-app.decklab-app--viewer-light .decklab-field input[type="text"],
.decklab-app.decklab-app--viewer-light .decklab-field select,
.decklab-app.decklab-app--viewer-light .decklab-select-full,
.decklab-app.decklab-app--viewer-light .decklab-color-main,
.decklab-app.decklab-app--viewer-light .decklab-custom-select-trigger,
.decklab-app.decklab-app--viewer-light .decklab-custom-select-options,
.decklab-app.decklab-app--viewer-light .decklab-choice-segment span,
.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button,
.decklab-app.decklab-app--viewer-light .decklab-custom-presets button,
.decklab-app.decklab-app--viewer-light .decklab-language-switch button,
.decklab-app.decklab-app--viewer-light .decklab-stepper button,
.decklab-app.decklab-app--viewer-light .decklab-ghost {
  color: var(--dl-light-text);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border-strong);
  box-shadow: none;
}

.decklab-app.decklab-app--viewer-light .decklab-width-card .decklab-custom-select-trigger,
.decklab-app.decklab-app--viewer-light .decklab-width-card select {
  color: #0c0c0d;
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-width-card .decklab-custom-select-label,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-width-card .decklab-custom-select-trigger:hover .decklab-custom-select-label,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-width-card .decklab-custom-select-trigger:focus-visible .decklab-custom-select-label,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-width-card .decklab-custom-select-trigger:active .decklab-custom-select-label,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-width-card .decklab-custom-select.is-open .decklab-custom-select-label {
  color: #0c0c0d;
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-trigger:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-trigger:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-trigger:active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select.is-open .decklab-custom-select-trigger,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-choice-segment input:not(:checked) + span:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-choice-segment input:not(:checked) + span:active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button:not(.is-active):not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button:not(.is-active):not(:disabled):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-presets button:not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-presets button:not(:disabled):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-language-switch button:not(.is-active):not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-language-switch button:not(.is-active):not(:disabled):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-stepper button:not(:disabled):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-stepper button:not(:disabled):focus-visible {
  color: #fff;
  background: var(--dl-light-text);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-custom-select-chevron,
.decklab-app.decklab-app--viewer-light .decklab-placement-tool-head svg,
.decklab-app.decklab-app--viewer-light .decklab-artwork-action-icon,
.decklab-app.decklab-app--viewer-light .decklab-field em,
.decklab-app.decklab-app--viewer-light .decklab-commerce-note[data-status="ready"] {
  color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-custom-select-trigger:hover .decklab-custom-select-chevron,
.decklab-app.decklab-app--viewer-light .decklab-custom-select-trigger:focus-visible .decklab-custom-select-chevron,
.decklab-app.decklab-app--viewer-light .decklab-custom-select-trigger:active .decklab-custom-select-chevron,
.decklab-app.decklab-app--viewer-light .decklab-custom-select.is-open .decklab-custom-select-chevron {
  color: #fff;
}

.decklab-app.decklab-app--viewer-light .decklab-custom-select-option {
  color: var(--dl-light-copy);
}

.decklab-app.decklab-app--viewer-light .decklab-custom-select-option::before {
  border-color: var(--dl-light-border-strong);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-option:not(.is-selected):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-option:not(.is-selected):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-option:not(.is-selected):active {
  color: #fff;
  background: var(--dl-light-text);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-choice-segment input:checked + span,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-option.is-selected,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-option.is-selected:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-custom-select-option.is-selected:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button.is-active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button.is-active:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button.is-active:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-language-switch button.is-active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-language-switch button.is-active:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-language-switch button.is-active:focus-visible {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-custom-select-option.is-selected::before {
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button.is-active .decklab-preset-copy strong,
.decklab-app.decklab-app--viewer-light .decklab-language-switch button.is-active span {
  color: #fff;
}

.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button:not(.is-active):hover .decklab-preset-copy strong,
.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button:not(.is-active):focus-visible .decklab-preset-copy strong,
.decklab-app.decklab-app--viewer-light .decklab-custom-presets button:hover span,
.decklab-app.decklab-app--viewer-light .decklab-custom-presets button:focus-visible span {
  color: #fff;
}

.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button small,
.decklab-app.decklab-app--viewer-light .decklab-custom-presets small,
.decklab-app.decklab-app--viewer-light .decklab-empty-presets,
.decklab-app.decklab-app--viewer-light .decklab-preflight-list small,
.decklab-app.decklab-app--viewer-light .decklab-price-breakdown > div {
  color: var(--dl-light-copy);
  opacity: 1;
}

.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button.is-active small {
  color: #fff;
}

.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button:not(.is-active):hover small,
.decklab-app.decklab-app--viewer-light .decklab-preset-list--cards button:not(.is-active):focus-visible small,
.decklab-app.decklab-app--viewer-light .decklab-custom-presets button:hover small,
.decklab-app.decklab-app--viewer-light .decklab-custom-presets button:focus-visible small {
  color: #fff;
}

.decklab-app.decklab-app--viewer-light .decklab-swatchgrid button {
  border-color: var(--dl-light-border-strong);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-swatchgrid button:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-swatchgrid button:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-swatchgrid button:active {
  background: var(--swatch);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-swatchgrid button.is-active {
  border-color: var(--dl-light-text);
  box-shadow: 0 0 0 2px var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-covering-carousel button,
.decklab-app.decklab-app--viewer-light .decklab-covering-tile--custom-illu {
  color: var(--dl-light-text);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border-strong);
  box-shadow: none;
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-covering-carousel button:not(.is-active):hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-covering-carousel button:not(.is-active):focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-covering-carousel button:not(.is-active):active {
  color: #fff;
  background: var(--dl-light-text);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-covering-carousel button.is-active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-covering-carousel button.is-active:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-covering-carousel button.is-active:focus-visible {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-covering-tile--upload::after {
  color: #fff;
  background: var(--dl-rokt-red);
}

/* Guidance, placement and finalisation share the same component language. */
.decklab-app.decklab-app--viewer-light .decklab-help-note,
.decklab-app.decklab-app--viewer-light .decklab-safe-area-note,
.decklab-app.decklab-app--viewer-light .decklab-preflight-note {
  color: var(--dl-light-copy);
  background: var(--dl-light-surface-alt);
  border-color: var(--dl-light-border);
}

.decklab-app.decklab-app--viewer-light .decklab-placement-range {
  background: var(--dl-light-border);
}

.decklab-app.decklab-app--viewer-light .decklab-placement-range::-webkit-slider-thumb {
  background: var(--dl-rokt-red);
  border-color: var(--dl-light-surface);
}

.decklab-app.decklab-app--viewer-light .decklab-placement-range::-moz-range-thumb {
  background: var(--dl-rokt-red);
  border-color: var(--dl-light-surface);
}

.decklab-app.decklab-app--viewer-light .decklab-artwork-action-icon {
  background: rgba(163, 32, 32, .1);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-artwork-action:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-artwork-action:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-artwork-action:active {
  color: #fff;
  background: var(--dl-light-text);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-artwork-action:hover .decklab-artwork-action-icon,
.decklab-app.decklab-app--viewer-light .decklab-artwork-action:focus-visible .decklab-artwork-action-icon,
.decklab-app.decklab-app--viewer-light .decklab-artwork-action:active .decklab-artwork-action-icon {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .58);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-safe-area-toggle.is-active,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-safe-area-toggle.is-active:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-safe-area-toggle.is-active:focus-visible {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-safe-area-toggle.is-active .decklab-artwork-action-icon {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .58);
}

.decklab-app.decklab-app--viewer-light .decklab-price-breakdown-card {
  border-top-color: var(--dl-light-border);
}

.decklab-app.decklab-app--viewer-light .decklab-summary-card--final dd[data-dl-spec="price"] {
  color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light [data-dl-preflight-badge],
.decklab-app.decklab-app--viewer-light .decklab-preflight-list li > span {
  color: #fff;
  background: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light [data-dl-preflight-badge][data-status="warning"],
.decklab-app.decklab-app--viewer-light .decklab-preflight-list li[data-status="warning"] > span {
  color: #fff;
  background: #76501c;
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-preflight-list li[data-status="info"] > span {
  color: #fff;
  background: var(--dl-rokt-blue);
}

.decklab-app.decklab-app--viewer-light .decklab-final-actions {
  background: linear-gradient(180deg, rgba(238, 242, 244, 0), var(--dl-light-canvas) 28%);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-cart-button:disabled,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-cart-button:disabled:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-cart-button:disabled:focus-visible {
  color: var(--dl-light-copy);
  background: var(--dl-light-surface-alt);
  border-color: var(--dl-light-border-strong);
  opacity: 1;
}

.decklab-app.decklab-app--viewer-light button:disabled:not(.decklab-cart-button) {
  color: var(--dl-light-copy);
  background: var(--dl-light-surface-alt);
  border-color: var(--dl-light-border);
  cursor: not-allowed;
  opacity: .72;
}

.decklab-app.decklab-app--viewer-light .decklab-drawer-close {
  color: var(--dl-light-text);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border-strong);
}

.decklab-app.decklab-app.decklab-app--viewer-light .decklab-drawer-close:hover,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-drawer-close:focus-visible,
.decklab-app.decklab-app.decklab-app--viewer-light .decklab-drawer-close:active {
  color: #fff;
  background: var(--dl-rokt-red);
  border-color: var(--dl-rokt-red);
}

.decklab-app.decklab-app--viewer-light .decklab-drawer-scroll,
.decklab-app.decklab-app--viewer-light .decklab-menu-drawer {
  scrollbar-color: var(--dl-rokt-red) var(--dl-light-surface-alt);
}

.decklab-app.decklab-app--viewer-light .decklab-drawer-scroll::-webkit-scrollbar-track,
.decklab-app.decklab-app--viewer-light .decklab-menu-drawer::-webkit-scrollbar-track {
  background: var(--dl-light-surface-alt);
}

.decklab-app.decklab-app--viewer-light .decklab-drawer-scroll::-webkit-scrollbar-thumb,
.decklab-app.decklab-app--viewer-light .decklab-menu-drawer::-webkit-scrollbar-thumb {
  background: var(--dl-rokt-red);
  border-color: var(--dl-light-surface-alt);
}

.decklab-app.decklab-app--viewer-light .decklab-loader {
  color: var(--dl-light-copy);
  background: var(--dl-light-surface);
  border-color: var(--dl-light-border-strong);
  box-shadow: 12px 12px 0 rgba(38, 75, 99, .12);
}

.decklab-app.decklab-app--viewer-light .decklab-loader b {
  color: var(--dl-light-text);
}

@media (max-width: 1180px) {
  .decklab-app .decklab-bottom-builder button {
    min-width: 100px;
  }
}

@media (max-width: 820px) {
  .decklab-app .decklab-floating-top--left {
    left: 14px;
    top: 14px;
  }

  .decklab-app .decklab-floating-top--right {
    right: 14px;
    top: 14px;
  }

  .decklab-app .decklab-theme-toggle {
    display: grid;
    width: 42px;
    height: 42px;
  }

  .decklab-app .decklab-config-drawer {
    border-radius: 0;
    box-shadow: 0 -18px 52px rgba(0, 0, 0, .34);
  }

  .decklab-app .decklab-bottom-builder {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    border-radius: 0;
  }

  .decklab-app .decklab-bottom-builder button {
    min-width: 98px;
    height: 52px;
  }
}

@media (max-width: 540px) {
  .decklab-app .decklab-top-brand img {
    width: 116px;
  }

  .decklab-app .decklab-top-brand::after {
    width: 38px;
  }

  .decklab-app .decklab-floating-pill {
    min-width: 76px;
    min-height: 42px;
    padding: 0 10px;
  }

  .decklab-app .decklab-floating-top--right .decklab-final-chip {
    width: auto;
    min-width: 112px;
    min-height: 42px;
    padding: 0 13px;
  }

  .decklab-app .decklab-bottom-builder {
    padding: 5px;
  }

  .decklab-app .decklab-bottom-builder button {
    min-width: 88px;
    height: 50px;
    padding: 8px 10px;
  }

  .decklab-app .decklab-bottom-builder button b {
    font-size: 11px;
  }

  .decklab-app .decklab-drawer-head h2 {
    font-size: 24px;
  }
}