/* Approved option 03. Decorative button art never replaces the live product canvases. */
#builder-view {
  --sculpt-surface: linear-gradient(165deg, #1c4c74 0%, #113553 23%, #09263e 65%, #061c2c 100%);
  --sculpt-mint: linear-gradient(155deg, #a9ffe1 0%, #6aebbf 25%, #45dcb1 80%, #25b89a 100%);
  --sculpt-edge: #397fa5;
}
#builder-view :is(.pack-upload, .pack-alternative, .product-edit > span, .pack-brand, .native-bar button, #close-paste, #apply-pack-roster, #review-pack, .pack-review-product) {
  border: 1px solid var(--sculpt-edge);
  border-radius: 16px;
  background: var(--sculpt-surface);
  box-shadow: inset 0 2px 2px #b2e5ff69, inset 0 -3px 5px #020f2470, 0 3px 6px #0005;
  color: #f7fbff;
  text-decoration: none;
  text-shadow: 0 1px 2px #00111f99;
  font-family: Inter, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  transition: border-color .16s, box-shadow .16s, filter .16s;
}
#builder-view :is(.pack-upload, .pack-alternative, .pack-brand, .native-bar button, #close-paste, #apply-pack-roster, #review-pack, .pack-review-product):hover:not(:disabled),
#builder-view .product-edit:hover > span {
  border-color: #7cdbff;
  box-shadow: inset 0 2px 3px #b2e5ff80, inset 0 -3px 5px #020f2470, 0 3px 9px #0005;
  filter: brightness(1.1);
}
#builder-view :is(button, a):focus-visible,
#builder-view .pack-upload:focus-within {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}
#builder-view :is(button, a):active:not(:disabled),
#builder-view .pack-upload:active { filter: brightness(.94); }
#builder-view button:disabled { opacity: .45; cursor: not-allowed; }

/* One transparent atlas keeps the generated icon family consistent and lightweight. */
#builder-view :is(.pack-upload, .pack-alternative, .product-edit > span, .pack-brand, #review-pack, #apply-pack-roster, #save-native, #close-paste, #cancel-native, #close-review)::before,
#builder-view #review-pack::after,
#builder-view .sculpt-icon {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: var(--icon-size, 36px);
  height: var(--icon-size, 36px);
  background-image: url('assets/soft-sculpted-icons-v1.png');
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: var(--icon-x, 0%) var(--icon-y, 0%);
}
.pack-upload:has(#pack-logo) { --icon-x: 0%; }
.pack-roster-file { --icon-x: 33.333333%; }
#paste-toggle { --icon-x: 66.666667%; }
.product-edit > span { --icon-x: 100%; }
#review-pack, #save-native, #apply-pack-roster { --icon-x: 0%; --icon-y: 50%; }
.pack-brand { --icon-x: 33.333333%; --icon-y: 50%; }
#close-paste, #cancel-native, #close-review { --icon-x: 66.666667%; --icon-y: 50%; }
.sculpt-icon[data-icon="board"] { --icon-x: 0%; --icon-y: 100%; }
.sculpt-icon[data-icon="tags"] { --icon-x: 33.333333%; --icon-y: 100%; }
.sculpt-icon[data-icon="chain"] { --icon-x: 66.666667%; --icon-y: 100%; }

#builder-view .pack-heading { gap: 10px; }
#builder-view .pack-brand { width: 44px; height: 44px; border-radius: 13px; --icon-size: 32px; }
#builder-view .pack-brand img { display: none; }
#builder-view .pack-inputs { gap: 10px 12px; margin-bottom: 8px; }
#builder-view .pack-upload {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 3px;
  min-height: 84px;
  padding: 12px 18px 12px 12px;
  --icon-size: 60px;
}
#builder-view .pack-upload::before { grid-row: 1 / 3; align-self: center; }
#builder-view .upload-title { grid-column: 2; align-self: end; font-size: 17px; }
#builder-view .upload-title > span:first-child { font-size: inherit; }
#builder-view .pack-upload small { grid-column: 2; align-self: start; max-width: 100%; font-size: 11px; color: #bdd7e5; font-weight: 400; }
#builder-view .pack-upload input { z-index: 1; }
#builder-view :is(#logo-mark, #roster-mark) { font-size: 16px; }
#builder-view .pack-alternative { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 8px; min-height: 44px; font-size: 12px; border-radius: 13px; --icon-size: 32px; }
#builder-view .pack-roster-primary { width: 100%; text-align: left; }
#builder-view .pack-roster-file { position: relative; cursor: pointer; margin: 0; grid-column: 2; }
#builder-view .pack-roster-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#builder-view .pack-roster-file:focus-within { outline: 3px solid var(--mint); outline-offset: 3px; }
#builder-view .pack-edit-hint { margin: 12px 0 10px; }
#builder-view .product-edit > span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; font-size: 12px; padding: 4px 15px 4px 7px; margin: 4px 0 10px; border-radius: 13px; --icon-size: 30px; }
#builder-view :is(#review-pack, #save-native, #apply-pack-roster) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 6px 16px 6px 8px;
  background: var(--sculpt-mint);
  color: #032331;
  border-color: #8af0d1;
  text-shadow: none;
  box-shadow: inset 0 2px 3px #e7fffab3, inset 0 -3px 5px #16897159, 0 3px 6px #0005;
}
#builder-view #review-pack { --icon-size: 38px; font-size: 14px; }
#builder-view #review-pack::after { --icon-x: 100%; --icon-y: 50%; --icon-size: 20px; margin-left: 4px; }
#builder-view :is(#close-paste, #cancel-native, #close-review) { display: inline-flex; align-items: center; justify-content: center; padding: 4px; width: 44px; height: 44px; min-height: 44px; min-width: 44px; font-size: 0; border-radius: 13px; --icon-size: 32px; }
#builder-view .native-bar { min-height: 76px; box-sizing: border-box; }
#builder-view .native-bar h2 { min-width: 0; }
#builder-view #save-native { font-size: 12px; min-height: 44px; --icon-size: 28px; }
#builder-view #apply-pack-roster { font-size: 13px; --icon-size: 30px; }
#builder-view #pack-review dl > div { align-items: center; }
#builder-view .pack-review-product { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 4px; min-height: 48px; text-align: left; font-size: 13px; border-radius: 13px; }
#builder-view .pack-review-product .sculpt-icon { --icon-size: 38px; }

@media (max-width: 760px) {
  #builder-view .pack-inputs { gap: 8px; }
  #builder-view .pack-upload { grid-template-columns: 42px minmax(0, 1fr); gap: 3px 5px; padding: 10px 8px 10px 4px; min-height: 78px; border-radius: 15px; --icon-size: 42px; }
  #builder-view .upload-title { font-size: 13px; gap: 3px; }
  #builder-view .pack-upload small { font-size: 10px; }
  #builder-view .pack-alternative { font-size: 11px; padding-right: 10px; gap: 4px; --icon-size: 28px; }
  #builder-view .product-edit > span { min-height: 44px; font-size: 11px; padding: 3px 11px 3px 5px; margin: 2px 0 7px; gap: 3px; --icon-size: 27px; }
  #builder-view #review-pack { min-width: 0; min-height: 48px; padding: 5px 10px 5px 4px; font-size: 12px; gap: 3px; --icon-size: 32px; }
  #builder-view #review-pack::after { --icon-size: 17px; margin-left: 1px; }
  #builder-view .native-bar { min-height: 68px; }
  #builder-view #save-native { padding: 5px 9px 5px 4px; gap: 4px; }
  #builder-view .native-bar:has(+ #native-status:empty) ~ #native-frame { height: calc(100% - 68px); }
  #builder-view .pack-review-product { font-size: 12px; padding-right: 8px; gap: 3px; }
}
@media (max-width: 350px) {
  #builder-view .pack-upload { grid-template-columns: 32px minmax(0, 1fr); column-gap: 3px; --icon-size: 32px; }
  #builder-view .upload-title { font-size: 12px; }
  #builder-view .pack-alternative { grid-column: 1 / -1; justify-self: end; }
  #builder-view #pack-review-content { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #builder-view :is(button, a, label, .product-edit > span) { transition: none; }
}