/* Generated by npm run build. Edit src/styles/pages/collect.css. */
/* Hallmark · project: Comp Master · scope: existing UI polish · 2026-11-13
   Critique: hierarchy and legibility before decorative surfaces; locked brand retained. */
/* Comp Master / Atelier Signature — configurator, scoped to this page.
   Loaded after shared theme/mobile styles; surfaces inherit Stage 1 tokens. */
body.atelier-configurator {
  --atelier-accent: #a78bfa;
  --atelier-neon: #8b5cf6;
  --atelier-gradient: linear-gradient(120deg, #8b5cf6, #7c3aed 62%, #6546ed);
  --atelier-accent-strong: #8b5cf6;
  --atelier-accent-soft: rgba(139, 92, 246, 0.16);
  --atelier-cyan: #22d3ee;
  --atelier-border: rgba(139, 92, 246, 0.55);
  --atelier-panel: var(--bg-glass-card);
  --atelier-option: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  --fps-low: var(--danger);
  --fps-mid: #a78bfa;
  --fps-high: #2dd4bf;
  --atelier-shadow: var(--shadow-card);
}
body.atelier-configurator .collect-main {
  padding: 64px 0 80px;
}
body.atelier-configurator .collect-title-block {
  text-align: left;
  margin-bottom: 44px;
  max-width: 850px;
}
body.atelier-configurator .collect-title-block .section-kicker {
  text-align: left;
  color: var(--text-muted);
  letter-spacing: normal;
}
body.atelier-configurator .collect-title-block h1 {
  font: 600 clamp(30px, 3.8vw, 48px)/1.15 var(--font-display);
  letter-spacing: -0.045em;
  margin: 12px 0 20px;
}
body.atelier-configurator .section-subtitle {
  margin: 0;
  text-align: left;
  max-width: 610px;
  font-size: 16px;
}
body.atelier-configurator .collect-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: start;
  gap: 30px;
}
body.atelier-configurator .collect-options {
  min-width: 0;
}
body.atelier-configurator .atelier-surface,
body.atelier-configurator .collect-step-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.atelier-configurator .collect-summary-card {
  background: var(--bg-surface);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
body.atelier-configurator .atelier-eyebrow {
  font: 600 14px/1.5 var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  margin: 0 0 8px;
}
body.atelier-configurator .atelier-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
body.atelier-configurator :is(.atelier-section-heading, .blueprint-heading, .unboxing-heading) h2 {
  font: 600 clamp(20px, 2.1vw, 26px)/1.2 var(--font-display);
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 0;
}
body.atelier-configurator .atelier-intro {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 12px 0 22px;
}
body.atelier-configurator .atelier-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.atelier-status > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--atelier-cyan);
  box-shadow: 0 0 10px var(--glow-cyan);
}
/* Gaming telemetry: persistent DOM rows let numbers and fills interpolate. */
body.atelier-configurator .gaming-telemetry {
  padding: 28px;
  margin: 40px 0 0;
}
.telemetry-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.telemetry-resolutions {
  display: inline-flex;
  gap: 3px;
  padding: 5px;
  background: var(--atelier-option);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.telemetry-resolutions button {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 14px var(--font-body);
  padding: 9px 17px;
  min-height: 40px;
  cursor: pointer;
  transition: none;
}
.telemetry-resolutions button:hover {
  color: var(--text-primary);
  border-color: var(--atelier-border);
}
.telemetry-resolutions button.is-active {
  background: var(--atelier-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 4px 18px var(--glow-strong),
    0 0 18px -8px var(--glow-cyan);
}
.telemetry-preset {
  color: var(--text-muted);
  font-size: 14px;
}
.gaming-fps-list {
  display: grid;
  gap: 21px;
}
.gaming-fps-row {
  --fps-color: var(--fps-mid);
}
.gaming-fps-row[data-performance='low'] {
  --fps-color: var(--fps-low);
}
.gaming-fps-row[data-performance='high'] {
  --fps-color: var(--fps-high);
}
.fps-row-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
body.atelier-configurator .fps-row-heading h3 {
  font: 600 14px/1.4 var(--font-display);
  color: var(--text-primary);
  margin: 0;
}
.fps-row-heading h3 > i {
  color: var(--atelier-cyan);
  width: 18px;
  margin-right: 6px;
  text-shadow: 0 0 15px var(--glow-cyan);
}
.fps-row-heading > div > span {
  font-size: 14px;
  color: var(--text-muted);
}
.fps-readout {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--fps-color);
  transition: none;
}
.fps-readout [data-fps-number] {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.fps-readout small {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.gaming-fps-track {
  height: 6px;
  border-radius: 8px;
  background: var(--border-glass);
}
.gaming-fps-fill {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6 0%, var(--fps-color) 58%, #22d3ee 100%);
  box-shadow:
    0 0 9px color-mix(in srgb, var(--fps-color) 65%, transparent),
    0 0 22px rgba(6, 182, 212, 0.3);
  transition: none;
}
.gaming-fps-fill::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 22px;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65));
}
.fps-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
  margin: 22px 0 14px;
}
.fps-legend > span:last-child {
  margin-left: auto;
}
.fps-key::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--fps-mid);
}
.fps-key-low::before {
  background: var(--fps-low);
}
.fps-key-high::before {
  background: var(--fps-high);
}
.telemetry-disclaimer {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  border-top: 1px solid var(--border-glass);
  padding-top: 14px;
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Component Blueprint / selection cards. */
.blueprint-heading {
  margin: 0 0 24px;
}
.blueprint-heading > p:last-child {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 10px;
}
body.atelier-configurator .collect-step-card {
  padding: 0;
  margin-bottom: 36px;
}
body.atelier-configurator .step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
body.atelier-configurator .step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  border: 0;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
body.atelier-configurator .step-header h3 {
  font: 600 16px/1.35 var(--font-display);
  color: var(--text-primary);
  margin: 0 0 5px;
}
.step-header p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
body.atelier-configurator .collect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.collect-opt-label {
  display: block;
  position: relative;
  cursor: pointer;
  min-width: 0;
}
.collect-opt-label input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
body.atelier-configurator .opt-content {
  position: relative;
  height: 100%;
  padding: 22px;
  border: 1px solid transparent;
  background: var(--bg-surface);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.25s;
  display: flex;
  flex-direction: column;
}
.opt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.opt-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-muted);
  background: none;
  font-size: 18px;
}
.opt-selection {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: transparent;
  font-size: 14px;
  transition: none;
}
body.atelier-configurator .collect-opt-label:hover .opt-content {
  transform: translateY(-2px);
  border-color: var(--border-glass);
}
body.atelier-configurator .collect-opt-label input:checked + .opt-content {
  transform: none;
  background: var(--bg-surface);
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 8px 24px -16px var(--glow-strong);
}
.collect-opt-label input:checked + .opt-content .opt-selection {
  background: var(--atelier-gradient);
  border-color: var(--atelier-accent);
  color: #fff;
  box-shadow: 0 0 14px var(--glow-strong);
}
body.atelier-configurator .opt-name {
  font: 600 16px/1.5 var(--font-display);
  color: var(--text-primary);
  margin: 0 0 7px;
  overflow-wrap: anywhere;
}
body.atelier-configurator .opt-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}
body.atelier-configurator .opt-price {
  margin-top: auto;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.atelier-configurator :is(button, a, input):focus-visible {
  outline: 2px solid var(--atelier-cyan);
  outline-offset: 4px;
}
.collect-opt-label input:focus-visible + .opt-content {
  outline: 2px solid var(--atelier-cyan);
  outline-offset: 4px;
}
html[data-theme='light'] .collect-opt-label:has(input:focus-visible) {
  border-radius: var(--radius-md);
  outline: 2px solid var(--atelier-cyan);
  outline-offset: 4px;
}
body.atelier-configurator .platform-blueprint {
  padding: 24px;
}
.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.blueprint-card {
  min-width: 0;
  border-left: 1px solid var(--atelier-border);
  padding-left: 14px;
}
.blueprint-card > .blueprint-icon {
  display: block;
  width: 24px;
  height: 24px;
  font-size: 19px;
  color: var(--atelier-cyan);
  margin-bottom: 18px;
  text-shadow: 0 0 15px var(--glow-cyan);
}
.blueprint-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
body.atelier-configurator .blueprint-card h3 {
  font: 600 14px/1.65 var(--font-display);
  color: var(--text-primary);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.blueprint-card > span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* Compact summary: primary actions remain above expandable details. */
body.atelier-configurator .collect-summary-panel {
  min-width: 0;
  align-self: start;
}
body.atelier-configurator .collect-summary-card {
  padding: 22px;
  text-align: left;
}
.summary-topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.summary-topline .atelier-eyebrow {
  font-size: 14px;
  letter-spacing: normal;
}
.summary-edition {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: normal;
}
.summary-identity {
  display: flex;
  gap: 14px;
  align-items: center;
}
body.atelier-configurator .collect-preview-img-wrap {
  flex: 0 0 85px;
  width: 85px;
  height: 102px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse, var(--atelier-accent-soft), transparent 70%);
}
.collect-preview-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.3));
}
body.atelier-configurator .collect-preview-badge {
  display: block;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
  margin-bottom: 6px;
}
body.atelier-configurator .collect-summary-card h2 {
  font: 600 16px/1.5 var(--font-display);
  color: var(--text-primary);
  margin: 0;
}
.preview-caption {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 6px;
}
body.atelier-configurator .collect-guarantee {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 14px 0 18px;
}
.collect-guarantee i {
  color: var(--success);
  margin-right: 5px;
}
body.atelier-configurator .collect-telemetry {
  padding: 12px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: 16px;
}
.telemetry-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.telemetry-item strong {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  text-align: right;
}
body.atelier-configurator .collect-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 14px;
}
.collect-price-row small {
  font-size: 14px;
  color: var(--text-muted);
}
body.atelier-configurator .collect-total-price {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.06em;
  white-space: nowrap;
}
body.atelier-configurator .btn-collect-order,
body.atelier-configurator .btn-collect-consult {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 10px;
  font: 600 14px var(--font-body);
  cursor: pointer;
  text-decoration: none;
  padding: 12px;
  transition: transform 0.25s;
}
body.atelier-configurator .btn-collect-order {
  background: var(--atelier-gradient);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 7px 24px -10px var(--glow-strong),
    0 0 20px -12px var(--glow-cyan);
  margin-bottom: 8px;
}
body.atelier-configurator .btn-collect-consult {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-glass);
  margin-bottom: 18px;
}
body.atelier-configurator .btn-collect-order:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 32px -10px var(--glow-strong),
    0 0 26px -8px var(--glow-cyan);
}
.summary-details {
  border-top: 1px solid var(--border-glass);
}
.summary-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}
.summary-details summary::-webkit-details-marker {
  display: none;
}
.summary-details[open] summary > i {
  transform: rotate(45deg);
}
body.atelier-configurator .collect-specs-list {
  background: none;
  border: 0;
  padding: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
}
.collect-specs-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.collect-specs-list span {
  flex-shrink: 0;
  color: var(--text-muted);
}
.collect-specs-list strong {
  font-weight: 400;
  text-align: right;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.collect-compat {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.compat-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.compat-row > i {
  padding-top: 3px;
  color: var(--atelier-cyan);
}
.compat-warn {
  border-color: var(--atelier-border);
  background: var(--atelier-accent-soft);
}
.compat-ok > i {
  color: var(--success);
}
.compat-fix-btn {
  display: block;
  margin-top: 8px;
  padding: 7px 9px;
  color: var(--text-primary);
  font: 500 14px var(--font-body);
  background: var(--atelier-option);
  border: 1px solid var(--atelier-border);
  border-radius: 6px;
  cursor: pointer;
}
body.atelier-configurator .collect-tools {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-glass);
}
body.atelier-configurator .collect-tool-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  min-height: 36px;
  background: var(--atelier-option);
  color: var(--text-secondary);
  cursor: pointer;
  font: 400 14px var(--font-body);
}
@media (min-width: 993px) {
  body.atelier-configurator .collect-summary-panel {
    position: sticky;
    top: 100px;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 22px;
  }
}
/* Three dimensional delivery objects: CSS surfaces, bevels and cast neon light. */
.unboxing-experience {
  margin-top: 68px;
  padding-top: 40px;
  border-top: 1px solid var(--atelier-border);
}
.unboxing-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 30px;
}
.unboxing-heading > p {
  max-width: 350px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.unboxing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.unboxing-card {
  --object-neon: #06b6d4;
  --object-ink: #67e8f9;
  --object-caption: #a3b5cb;
  --object-cover-ground: #152128;
  --object-metal-top: #414c61;
  --object-metal-bottom: #111824;
  min-width: 0;
  text-align: left;
}
.unboxing-card:nth-child(2) {
  --object-neon: #8b5cf6;
  --object-ink: #c4b5fd;
}
.unboxing-card:nth-child(3) {
  --object-neon: #10b981;
  --object-ink: #6ee7b7;
}
.unboxing-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 210px;
  margin-bottom: 22px;
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, var(--glass-highlight), transparent 45%), var(--atelier-panel);
  box-shadow: var(--atelier-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  perspective: 850px;
  transition: none;
}
.unboxing-stage::before {
  content: '';
  position: absolute;
  width: 190px;
  height: 65px;
  bottom: 26px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--object-neon) 40%, transparent),
    transparent 70%
  );
  filter: blur(14px);
  transform: rotate(-8deg);
  z-index: -1;
  transition: opacity 0.3s;
  opacity: 0.8;
}
.unboxing-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.unboxing-card:hover .unboxing-stage {
  border-color: var(--object-neon);
  box-shadow:
    var(--atelier-shadow),
    0 0 25px -12px var(--object-neon);
}
.unboxing-card:hover .unboxing-stage::before {
  opacity: 1;
}
.delivery-object {
  position: relative;
  transform-style: preserve-3d;
  transform: var(--object-pose);
  animation: deliveryFloat 6s ease-in-out infinite;
  will-change: transform;
}
.unboxing-card:nth-child(2) .delivery-object {
  animation-delay: -2s;
}
.unboxing-card:nth-child(3) .delivery-object {
  animation-delay: -4s;
}
.object-wordmark {
  font: 700 10px/1.3 var(--font-display);
  letter-spacing: 0.1em;
  color: var(--object-ink);
  text-shadow: 0 0 12px color-mix(in srgb, var(--object-neon) 55%, transparent);
}
.delivery-case {
  --object-pose: rotateX(13deg) rotateY(-18deg) rotateZ(-8deg);
  width: 166px;
  height: 106px;
  border-radius: 9px;
  border: 2px solid #758297;
  background: linear-gradient(140deg, var(--object-metal-top), var(--object-metal-bottom) 80%);
  box-shadow:
    inset 0 0 0 5px #222d3f,
    inset 0 0 0 6px rgba(255, 255, 255, 0.14),
    4px 5px 0 #111827,
    7px 9px 0 #080d16,
    12px 24px 24px rgba(0, 0, 0, 0.5),
    0 0 24px -12px var(--object-neon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-handle {
  position: absolute;
  width: 44px;
  height: 15px;
  top: -17px;
  left: 59px;
  border: 3px solid #74839a;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  box-shadow:
    inset 1px 1px 0 #b6c8dd,
    2px 0 0 #121a27;
}
.case-rib {
  position: absolute;
  height: 51px;
  width: 5px;
  top: 26px;
  border-radius: 2px;
  background: linear-gradient(90deg, #123044, var(--object-ink), #126075);
  box-shadow: 0 0 10px -2px var(--object-neon);
}
.case-rib--left {
  left: 16px;
}
.case-rib--right {
  right: 16px;
}
.case-lock {
  position: absolute;
  width: 15px;
  height: 7px;
  top: -3px;
  border-radius: 2px;
  background: linear-gradient(#c0cdda, #526277);
  border: 1px solid #17202f;
}
.case-lock--left {
  left: 25px;
}
.case-lock--right {
  right: 25px;
}
.case-serial {
  position: absolute;
  bottom: 15px;
  font: 500 5px var(--font-body);
  letter-spacing: 0.15em;
  color: var(--object-caption);
}
.delivery-usb {
  --object-pose: rotateX(18deg) rotateY(-18deg) rotateZ(-23deg);
  width: 172px;
  height: 53px;
}
.usb-shell {
  position: absolute;
  right: 0;
  width: 137px;
  height: 53px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px 9px 9px 5px;
  border: 1px solid #7b86a0;
  background: linear-gradient(145deg, var(--object-metal-top), var(--object-metal-bottom));
  box-shadow:
    inset 0 1px 1px #b2bfd1,
    inset 0 -3px 0 #111725,
    2px 4px 0 #1c2433,
    4px 7px 0 #0a0d16,
    10px 24px 22px rgba(0, 0, 0, 0.5);
}
.usb-connector {
  position: absolute;
  top: 8px;
  left: 0;
  width: 42px;
  height: 36px;
  border: 1px solid #a8bdce;
  background: repeating-linear-gradient(90deg, #4b5e71 0 3px, #b7c7d6 4px 11px);
  box-shadow: 0 4px 0 #344356;
}
.usb-connector > span {
  position: absolute;
  width: 7px;
  height: 5px;
  top: 13px;
  background: #172131;
  box-shadow: 0 1px 0 #e7f4ff;
}
.usb-connector > span:first-child {
  left: 9px;
}
.usb-connector > span:last-child {
  right: 9px;
}
.usb-detail {
  font: 500 5px var(--font-body);
  letter-spacing: 0.13em;
  color: var(--object-caption);
}
.usb-led {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--object-ink);
  box-shadow: 0 0 10px 2px var(--object-neon);
}
.delivery-passport {
  --object-pose: rotateX(12deg) rotateY(-18deg) rotateZ(8deg);
  width: 94px;
  height: 132px;
}
.passport-pages {
  position: absolute;
  inset: 4px -5px -4px 5px;
  border-radius: 2px 5px 5px 2px;
  background: repeating-linear-gradient(0deg, #94b7b3 0 1px, #dae9e7 1px 3px);
  box-shadow: 5px 20px 24px rgba(0, 0, 0, 0.45);
}
.passport-cover {
  position: absolute;
  inset: 0;
  padding: 16px 12px 12px 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #69968d;
  border-radius: 3px 5px 5px 3px;
  color: var(--object-ink);
  background: linear-gradient(100deg, #101f28 0 5px, #465a67 6px, #1b2e38 10px, #152128 100%);
  background-color: var(--object-cover-ground);
  box-shadow:
    inset 0 0 0 3px #172b32,
    inset 0 0 0 4px rgba(16, 185, 129, 0.32),
    inset 0 1px 0 #c2dbd2;
}
.passport-brand {
  font: 700 5px var(--font-display);
  letter-spacing: 0.1em;
}
.passport-title {
  margin-top: 21px;
  font: 800 11px/1.4 var(--font-display);
  letter-spacing: 0.03em;
  text-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
}
.passport-rule {
  height: 1px;
  width: 25px;
  background: var(--object-neon);
  margin: 9px 0 7px;
  box-shadow: 0 0 8px var(--object-neon);
}
.passport-edition {
  font: 500 4px/1.7 var(--font-body);
  letter-spacing: 0.1em;
}
.unboxing-number {
  display: block;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--text-muted);
}
body.atelier-configurator .unboxing-card h3 {
  font: 600 17px var(--font-display);
  color: var(--text-primary);
  margin: 9px 0 12px;
}
.unboxing-card > p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
  max-width: 350px;
}
html[data-theme='light'] .unboxing-card {
  --object-ink: var(--text-primary);
  --object-caption: var(--text-primary);
  --object-metal-top: #c7d4e4;
  --object-metal-bottom: #8296af;
}
html[data-theme='light'] .passport-cover {
  --object-ink: var(--text-on-accent);
}
html[data-theme='light'] :is(.object-wordmark, .passport-title) {
  text-shadow: none;
}
html[data-theme='light'] .unboxing-stage {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), transparent 50%), var(--bg-glass-card);
}
html[data-theme='light'] .unboxing-stage::before {
  opacity: 0.45;
  background: radial-gradient(ellipse, var(--shadow-ink), transparent 70%);
}
@keyframes deliveryFloat {
  0%,
  100% {
    transform: translateY(0) var(--object-pose);
  }
  50% {
    transform: translateY(-7px) var(--object-pose);
  }
}
@keyframes atelierPreview {
  from {
    opacity: 0.3;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.collect-preview-img-wrap img.is-swapping {
  animation: atelierPreview 0.45s var(--ease);
}
.collect-opt-label.is-flash .opt-content {
  outline: 2px solid var(--atelier-cyan);
  outline-offset: 2px;
}
@media (max-width: 1100px) and (min-width: 993px) {
  body.atelier-configurator .collect-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
  }
  body.atelier-configurator .collect-step-card,
  body.atelier-configurator .gaming-telemetry {
    padding: 20px;
  }
}
@media (max-width: 992px) {
  body.atelier-configurator .collect-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body.atelier-configurator .collect-summary-panel {
    position: static;
  }
  body.atelier-configurator .cm-drawer .collect-summary-card {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 8px 22px calc(22px + var(--safe-bottom));
    overflow-y: auto;
    backdrop-filter: none;
  }
  body.atelier-configurator .cm-drawer-handle__cta {
    background: var(--atelier-gradient);
    color: #fff;
    box-shadow: 0 5px 18px -8px var(--glow-strong);
  }
  body.atelier-configurator.has-cm-drawer .cma-root .cma-launcher {
    bottom: calc(92px + var(--safe-bottom));
  }
  html[data-theme='light'] body.atelier-configurator .cm-drawer-handle__cta {
    color: white;
  }
  body.atelier-configurator .cm-drawer-handle__price {
    color: var(--text-primary);
  }
}
@media (max-width: 600px) {
  body.atelier-configurator .collect-main {
    padding: 38px 0 48px;
  }
  body.atelier-configurator .collect-title-block {
    margin-bottom: 30px;
  }
  body.atelier-configurator .collect-title-block .section-kicker {
    font-size: 14px;
  }
  body.atelier-configurator .gaming-telemetry,
  body.atelier-configurator .collect-step-card,
  body.atelier-configurator .platform-blueprint {
    padding: 20px 16px;
    border-radius: 16px;
  }
  body.atelier-configurator .atelier-section-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  body.atelier-configurator .collect-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.atelier-configurator .opt-content {
    padding: 16px;
  }
  .opt-card-top {
    margin-bottom: 12px;
  }
  .telemetry-resolutions {
    width: 100%;
  }
  .telemetry-resolutions button {
    flex: 1;
  }
  .blueprint-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .unboxing-heading {
    flex-direction: column;
    align-items: start;
    gap: 16px;
  }
  .unboxing-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .unboxing-experience {
    margin-top: 42px;
  }
  .fps-legend {
    gap: 9px;
  }
  .fps-legend > span:last-child {
    margin-left: 0;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.atelier-configurator *,
  body.atelier-configurator *::before,
  body.atelier-configurator *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Saturated neon remains distinct from the neutral shared surface palette. */
html[data-theme='light'] body.atelier-configurator {
  --atelier-accent: var(--accent);
  --atelier-cyan: var(--accent-cyan);
  --atelier-accent-soft: var(--accent-tint);
  --fps-mid: var(--accent);
  --fps-high: var(--success);
}
body.atelier-configurator .blueprint-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.atelier-configurator .btn-collect-order,
body.atelier-configurator .telemetry-resolutions button.is-active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 22px rgba(139, 92, 246, 0.38),
    0 0 22px -8px rgba(6, 182, 212, 0.48);
}

/* Scrollbar colors, 6px geometry and motion preferences are owned by theme.css. */

/* Export action: loading is local to the button; configuration remains editable. */
body.atelier-configurator .collect-tools .collect-tool-btn {
  min-height: 52px;
}
body.atelier-configurator .setup-share-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.atelier-configurator .setup-share-button:disabled {
  opacity: 0.75;
  cursor: progress;
}
.setup-share-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 4px;
  position: relative;
}
.setup-share-icon::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  top: 3px;
  right: 3px;
}
:is(.setup-share-button, .setup-share-action)[aria-busy='true'] .setup-share-icon {
  border-radius: 50%;
  border-color: var(--border-strong);
  border-top-color: var(--accent-cyan);
  animation: setupPassportSpin 0.8s linear infinite;
}
:is(.setup-share-button, .setup-share-action)[aria-busy='true'] .setup-share-icon::after {
  display: none;
}
.setup-share-label {
  line-height: 1.5;
}
body.atelier-configurator .setup-share-status {
  min-height: 3em;
  margin: 10px 0 0;
  font: 400 14px/1.5 var(--font-body);
  color: var(--text-secondary);
}
body.atelier-configurator .setup-share-status[data-state='error'] {
  color: var(--danger);
}
body.atelier-configurator .setup-share-status[data-state='success'] {
  color: var(--success);
}
@keyframes setupPassportSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.setup-share-button, .setup-share-action)[aria-busy='true'] .setup-share-icon {
    animation: none;
  }
}
/* A fixed dark print material, independent of the surrounding UI theme.
   html2canvas supports these gradients/borders. Avoid filter, object-fit,
   color-mix, backdrop-filter and box-shadow inside the exported subtree. */
#setup-card-template {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 540px;
  height: 960px;
  box-sizing: border-box;
  padding: 34px 36px 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: #0b0d12;
  background-image:
    linear-gradient(90deg, rgba(103, 223, 239, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(103, 223, 239, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 0 0, rgba(112, 64, 219, 0.18), transparent 65%);
  background-size:
    30px 30px,
    30px 30px,
    540px 960px;
  border: 1px solid #277f92;
  color: #f5f7ff;
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 1.4;
  color-scheme: dark;
  pointer-events: none;
}
#setup-card-template *,
#setup-card-template *::before,
#setup-card-template *::after {
  box-sizing: border-box;
  animation: none !important;
  transition: none !important;
}
#setup-card-template[data-font-fallback='true'],
#setup-card-template[data-font-fallback='true'] * {
  font-family: Arial, sans-serif !important;
}
#setup-card-template .setup-passport-frame {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(103, 223, 239, 0.2);
  border-radius: 16px;
}
#setup-card-template .setup-passport-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  flex-shrink: 0;
  margin-bottom: 20px;
}
#setup-card-template .setup-passport-header img {
  display: block;
  width: 122px;
  height: auto;
}
#setup-card-template .setup-passport-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#setup-card-template .setup-passport-mark > span:first-child {
  color: #8eafc2;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.8px;
}
#setup-card-template .setup-passport-class {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border: 1px solid #67549c;
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(112, 64, 219, 0.23), rgba(103, 223, 239, 0.08));
}
#setup-card-template .setup-passport-class small {
  color: #b4c0d6;
  font-size: 8px;
}
#setup-card-template .setup-passport-class strong {
  color: #c6a6ff;
  font-size: 10px;
  font-weight: 600;
}
#setup-card-template .setup-passport-title {
  color: #f5f7ff;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.02;
  margin: 0;
}
#setup-card-template .setup-passport-byline {
  color: #b4c0d6;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  margin: 10px 0 0;
}
#setup-card-template .setup-passport-visual {
  position: relative;
  height: 244px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 18px;
}
#setup-card-template .setup-passport-halo {
  position: absolute;
  width: 440px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(112, 64, 219, 0.27),
    rgba(103, 223, 239, 0.06) 50%,
    transparent 72%
  );
}
#setup-card-template .setup-passport-visual img {
  display: block;
  position: relative;
  flex-shrink: 0;
}
#setup-card-template .setup-passport-visual > span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #93a4bd;
  font:
    400 9px/1.5 'Roboto',
    Arial,
    sans-serif;
  text-align: center;
}
#setup-card-template .setup-passport-components {
  flex-shrink: 0;
}
#setup-card-template .setup-passport-components > div {
  padding: 12px 0;
  border-top: 1px solid #283444;
}
#setup-card-template .setup-passport-components span {
  display: block;
  color: #8eafc2;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.6px;
  line-height: 1.5;
  margin-bottom: 6px;
}
#setup-card-template .setup-passport-components strong {
  display: block;
  color: #f5f7ff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: break-word;
}
#setup-card-template .setup-passport-performance {
  flex-shrink: 0;
  padding: 15px 16px 12px;
  margin-top: 14px;
  border: 1px solid #277f92;
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(38, 75, 90, 0.35), rgba(112, 64, 219, 0.16));
}
#setup-card-template .setup-matrix-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
#setup-card-template .setup-matrix-heading strong {
  font-size: 9px;
  color: #c3d3e7;
  font-weight: 600;
  letter-spacing: 1.2px;
}
#setup-card-template .setup-matrix-heading > span {
  font-size: 9px;
  color: #67dfef;
}
#setup-card-template .setup-matrix-columns {
  display: flex;
}
#setup-card-template .setup-matrix-column {
  width: 33.333%;
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid #35465e;
}
#setup-card-template .setup-matrix-column:first-child {
  border-left: 0;
  padding-left: 0;
}
#setup-card-template .setup-matrix-column:last-child {
  padding-right: 0;
}
#setup-card-template .setup-matrix-column > span {
  display: block;
  color: #bdc7dc;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}
#setup-card-template .setup-matrix-column > strong {
  display: block;
  margin: 9px 0 7px;
  color: #67dfef;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -0.5px;
}
#setup-card-template .setup-matrix-column:nth-child(2) > strong {
  color: #c6a6ff;
}
#setup-card-template .setup-matrix-column:nth-child(3) > strong {
  color: #f5f7ff;
}
#setup-card-template .setup-matrix-column > small {
  display: block;
  color: #9fb0c6;
  font-size: 8px;
  line-height: 1.5;
}
#setup-card-template .setup-matrix-note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid #283444;
  color: #93a4bd;
  font:
    400 8px/1.5 'Roboto',
    Arial,
    sans-serif;
}
#setup-card-template .setup-passport-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #283444;
}
#setup-card-template .setup-passport-price > span {
  color: #9fb0c6;
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: 1px;
}
#setup-card-template .setup-passport-price strong {
  color: #f5f7ff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
#setup-card-template .setup-passport-footer {
  margin-top: auto;
  padding-top: 16px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #93a4bd;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 1px;
}

/* The native top layer places sharing above the existing mobile summary drawer. */
.setup-share-dialog {
  position: fixed;
  inset: 0;
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: var(--cm-comms-glass);
  color: var(--text-primary);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow-y: auto;
}
.setup-share-dialog::backdrop {
  background: var(--cm-overlay);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.setup-share-dialog[open] {
  animation: setupShareReveal 0.25s var(--ease) both;
}
.setup-share-panel {
  position: relative;
  padding: 32px;
  background: radial-gradient(ellipse at 0 0, var(--accent-tint), transparent 65%);
}
.setup-share-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.setup-share-close:hover {
  transform: rotate(6deg);
  color: var(--text-primary);
}
.setup-share-kicker {
  color: var(--accent-cyan);
  margin: 0 34px 14px 0;
  font: 600 14px/1.5 var(--font-body);
  letter-spacing: normal;
}
.setup-share-panel h2 {
  margin: 0;
  max-width: 18ch;
  color: var(--text-primary);
  font: 600 29px/1.16 var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.setup-share-intro {
  margin: 16px 0 24px;
  color: var(--text-secondary);
  font: 400 14px/1.7 var(--font-body);
}
.setup-share-actions {
  display: grid;
  gap: 12px;
}
.setup-share-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 94px;
  padding: 18px;
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  background: linear-gradient(115deg, var(--accent-tint), transparent), var(--bg-glass);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: transform 0.25s var(--ease);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.setup-share-action:hover:not(:disabled) {
  transform: translateY(-3px);
}
.setup-share-action:disabled {
  cursor: progress;
  opacity: 0.7;
}
.setup-share-action--link {
  border-color: color-mix(in srgb, var(--accent-cyan) 50%, var(--border-glass));
  background: linear-gradient(115deg, var(--glow-cyan), transparent), var(--bg-glass);
}
.setup-share-action > span:nth-child(2) {
  min-width: 0;
}
.setup-share-action .setup-share-label {
  display: block;
  color: var(--text-primary);
  font: 600 15px/1.5 var(--font-body);
}
.setup-share-action small {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  font: 400 14px/1.6 var(--font-body);
}
.setup-share-action .setup-share-action-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--accent-bright);
}
.setup-share-action .setup-share-icon::after {
  width: 7px;
  height: 7px;
  top: 10px;
  right: 10px;
}
.setup-share-action--png:not([aria-busy='true']) .setup-share-icon::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.setup-share-action--png:not([aria-busy='true']) .setup-share-icon::after {
  top: 15px;
  right: 8px;
  width: 12px;
  height: 8px;
  transform: rotate(-45deg);
}
.setup-copy-link-icon {
  position: relative;
}
.setup-copy-link-icon::before,
.setup-copy-link-icon::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 5px;
  transform: rotate(-40deg);
}
.setup-copy-link-icon::before {
  top: 9px;
  left: 5px;
}
.setup-copy-link-icon::after {
  top: 13px;
  right: 5px;
}
.setup-share-action--link .setup-share-action-icon {
  color: var(--accent-cyan);
}
.setup-share-arrow {
  margin-left: auto;
  color: var(--accent-bright);
  font-size: 20px;
}
body.atelier-configurator .setup-share-panel .setup-share-status {
  margin-top: 16px;
  min-height: 3em;
  font-size: 14px;
}
.setup-share-manual {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-glass);
}
.setup-share-manual[hidden] {
  display: none;
}
.setup-share-manual label,
.setup-share-manual small {
  display: block;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.setup-share-manual input {
  width: 100%;
  min-width: 0;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 16px;
}
body.setup-share-open {
  overflow: hidden;
}
body.setup-share-open .cma-launcher {
  opacity: 0;
  pointer-events: none;
}
@keyframes setupShareReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 400px) {
  .setup-share-panel {
    padding: 28px 20px 22px;
  }
  .setup-share-panel h2 {
    font-size: 26px;
  }
  .setup-share-action {
    padding: 16px 13px;
    gap: 10px;
  }
  .setup-share-action .setup-share-label {
    font-size: 14px;
  }
  .setup-share-action small {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .setup-share-dialog[open] {
    animation: none;
  }
  .setup-share-dialog button {
    transition: none;
  }
}

/* Daylight tools keep one frosted outer surface; choices stay on a quieter inset. */
html[data-theme='light']
  body.atelier-configurator
  :is(.blueprint-card, .collect-preview-card, .collect-summary-card) {
  background: var(--bg-glass);
  border-color: var(--daylight-glass-edge);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
  box-shadow: var(--shadow-card);
}
html[data-theme='light'] body.atelier-configurator .blueprint-card {
  padding: var(--space-5);
  border: 1px solid var(--daylight-glass-edge);
  border-radius: var(--radius-md);
}
html[data-theme='light'] body.atelier-configurator .blueprint-icon {
  position: static;
  display: block !important;
  visibility: visible !important;
  color: var(--accent-cyan) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-theme='light'] body.atelier-configurator .opt-content::after {
  box-shadow: var(--shadow-card);
}
html[data-theme='light'] body.atelier-configurator .gaming-fps-fill {
  box-shadow: none;
}
html[data-theme='light'] body.atelier-configurator .collect-preview-img-wrap img {
  filter: drop-shadow(0 18px 20px var(--shadow-ink));
}
html[data-theme='light'] body.atelier-configurator :is(.btn-collect-order, .cm-drawer-handle__cta) {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-primary);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: var(--daylight-transition);
}
html[data-theme='light']
  body.atelier-configurator
  :is(.btn-collect-order, .cm-drawer-handle__cta):hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--shadow-primary-hover);
  transform: translate3d(0, var(--daylight-lift), 0);
}
html[data-theme='light'] body.atelier-configurator :is(.btn-collect-consult, .collect-tool-btn) {
  background: transparent;
  border-color: var(--daylight-secondary-edge);
  color: var(--text-primary);
  box-shadow: none;
  transition: var(--daylight-transition);
}
html[data-theme='light'] body.atelier-configurator :is(.btn-collect-consult, .collect-tool-btn):hover {
  background: var(--daylight-secondary-hover);
}
html[data-theme='light'] .setup-share-dialog {
  border-color: var(--daylight-glass-edge);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
}