#cosmetic-editor, #cosmetic-bulk-editor { max-width: 1120px; }
#cosmetic-editor:has(> #editor-workspace[hidden]), #cosmetic-bulk-editor:has(> #bulk-form[hidden]) { max-width: 480px; }
#editor-workspace { scroll-margin-top: 145px; }
.editor-note { color: var(--text-muted); font-size: .9rem; }
.editor-note:empty { display: none; }
.editor-choice-message { pointer-events: none; }
.editor-panel { padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); margin: 16px 0; }
.editor-panel h2 { margin: 0 0 14px; font-size: 1.5rem; }
.editor-connection, .editor-connection-form { display: grid; gap: 16px; }
.editor-connection h2, .editor-connection-form p { margin: 0; }
.editor-connection-form > :is(.checkbox, .button) { justify-self: start; }
.editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.editor-actions .button, .editor-heading .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--action-icon-gap); }
.editor-actions .button img, .editor-heading .button img, .editor-button-icon { width: var(--action-icon-size); height: var(--action-icon-size); flex: none; }
.editor-actions .button img.editor-cancel-icon, .button .editor-button-icon.editor-cancel-icon, .editor-button-icon.editor-cancel-icon { width: 12px; height: 12px; margin: 3px; }
.editor-actions .button img, .editor-heading .button img, .editor-button-icon { filter: brightness(0) invert(1); }
.editor-category-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px 8px; margin: 20px 0; container-type: inline-size; }
.editor-category-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.9rem; cursor: pointer; }
.editor-category-toggle:hover { color: var(--text); }
.editor-category-toggle::after { content: ''; width: 7px; height: 7px; margin: -4px 3px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.editor-category-toggle[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(225deg); }
.editor-categories { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; grid-row: 1; gap: 8px; }
.editor-category-toggle { grid-column: 1 / -1; justify-self: start; align-self: center; }
.editor-categories.is-collapsed + .editor-category-toggle { grid-column: 2 / -1; grid-row: 1; margin-left: 12px; }
.editor-categories .tabber__tab { width: 100%; min-width: 0; min-height: 72px; white-space: normal; text-align: center; border: 0; border-radius: var(--control-radius); }
.editor-categories [aria-pressed="true"] { color: var(--black); background: var(--text); }
.editor-categories .editor-category--image {
  background-image: var(--category-background);
  background-size: cover;
  background-position: center;
  color: var(--white);
  text-shadow: 0 1px 4px var(--black);
  box-shadow: inset 0 0 0 999px #000b;
  transition: box-shadow .15s ease;
}
.editor-categories .editor-category--image:hover,
.editor-categories .editor-category--image:focus-visible { box-shadow: inset 0 0 0 999px #0008; }
.editor-categories .editor-category--image[aria-pressed="true"] {
  outline: 2px solid var(--white);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 999px #0007;
  color: var(--white);
}
.editor-categories .editor-category--image[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 999px #0005; }
.editor-categories .editor-category--image:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.editor-categories .editor-category--top { background-position: center top; }
.editor-details { min-width: 0; margin: 0; padding: 0; border: 0; transition: opacity .15s ease; }
.editor-details:disabled { opacity: .4; filter: grayscale(1); }
.editor-details > #editor-fields > .editor-step:first-child .editor-panel:first-child { margin-top: 0; }
.editor-guided-toggle { margin: 14px auto 20px; }
.editor-panel-note { margin: -4px 0 16px; }
#editor-fields { position: relative; display: flow-root; }
.is-guided #editor-fields { overflow: clip; overflow-anchor: none; }
.is-guided #editor-fields.editor-fields--complete { overflow: visible; }
.editor-step { min-width: 0; margin-bottom: 16px; scroll-margin-top: 145px; }
.editor-step-content { min-width: 0; outline: none; }
.editor-step-content > .editor-panel { margin: 0; }
.editor-step-content > .editor-panel + .editor-panel { margin-top: 16px; }
.editor-upcoming-overlay { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.editor-upcoming-overlay::before, .editor-upcoming-overlay::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.editor-upcoming-overlay::before {
  backdrop-filter: blur(8px);
  mask-image: linear-gradient(transparent, var(--black) 169px);
}
.editor-upcoming-overlay::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--background) 65%, transparent),
    color-mix(in srgb, var(--background) 85%, transparent) 104px,
    var(--background) 208px);
}
.editor-step-actions { position: relative; z-index: 3; justify-content: center; margin: 0 0 24px; }
.is-guided .editor-details:disabled { opacity: 1; filter: none; }
.editor-step-core > .editor-step-content { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); }
.editor-step-core .editor-panel { margin: 0; border: 0; background: none; }
.editor-step-core .editor-panel + .editor-panel { margin-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .editor-category-row { transition: none; }
}
.editor-fields-grid, .editor-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.editor-field-row { grid-column: 1 / -1; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.editor-core-panel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; gap: 24px; }
.editor-core-details { display: grid; grid-template-rows: repeat(3, auto) minmax(72px, 1fr); align-self: stretch; min-width: 0; gap: 18px; }
.editor-core-details .editor-field--wide { display: flex; flex-direction: column; }
#editor-field-Description, #editor-screenshot-field-Description { min-height: 0; flex: none; }
.editor-core-icon { min-width: 0; }
.editor-field input:not([type="checkbox"]), .editor-field .search-select-trigger { height: 42px; min-height: 42px; }
.editor-panel input[type="date"] { text-transform: uppercase; cursor: pointer; }
.editor-panel input[type="date"]::-webkit-datetime-edit { text-transform: uppercase; cursor: text; }
.editor-panel input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
.editor-panel input[type="number"]:not(#editor-field-TwitchDropSubs) { appearance: textfield; -moz-appearance: textfield; }
.editor-panel input[type="number"]:not(#editor-field-TwitchDropSubs)::-webkit-inner-spin-button,
.editor-panel input[type="number"]:not(#editor-field-TwitchDropSubs)::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.editor-field { position: relative; min-width: 0; }
.editor-autofill-trace { position: absolute; z-index: 2; pointer-events: none; fill: none; }
.editor-autofill-trail { stroke: var(--text); }
.editor-autofill-spark { stroke: var(--text); }
#editor-field-Name { text-transform: uppercase; }
.editor-field label {
  display: block; color: var(--text-muted); margin-bottom: 6px;
  font: 700 1rem/1 "Saira Extra Condensed", "Arial Narrow", sans-serif;
  letter-spacing: normal; text-transform: uppercase;
}
.editor-field label.editor-field-label--hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.editor-field--checkbox { align-self: end; }
.editor-field label.checkbox { display: flex; align-items: center; gap: var(--checkbox-label-gap); min-height: 42px; margin: 0; padding: 8px 11px; font: inherit; line-height: 24px; text-transform: none; border: 1px solid var(--border-strong); border-radius: var(--control-radius); background: var(--surface-inset); color: var(--text); cursor: pointer; }
.editor-field .search-select-trigger { font: inherit; text-transform: none; }
.editor-field--wide { grid-column: 1 / -1; }
.editor-merch-products, .editor-merch-rows { display: grid; gap: 10px; }
.editor-merch-product { display: flex; align-items: start; gap: 8px; }
.editor-merch-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); flex: 1; min-width: 0; }
.editor-merch-pair input { min-width: 0; }
.editor-merch-pair input:first-child { border-radius: var(--control-radius) 0 0 var(--control-radius); }
.editor-merch-pair input:last-child { border-radius: 0 var(--control-radius) var(--control-radius) 0; margin-left: -1px; width: calc(100% + 1px); }
.editor-merch-pair input:focus { position: relative; z-index: 1; }
.editor-merch-add, .editor-merch-remove { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.editor-merch-add { justify-self: start; }
.editor-merch-remove { width: 42px; flex: none; padding: 0; }
.editor-merch-add img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.editor-merch-remove img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.editor-help-control { --editor-field-actions-width: 0px; --editor-field-arrow-width: 0px; position: relative; min-width: 0; }
.editor-help-control:has(> .editor-field-help:not(.editor-field-inherit)), .editor-help-control--inherit { --editor-field-actions-width: 34px; }
.editor-help-control--inherit:has(> .editor-field-help:not(.editor-field-inherit)) { --editor-field-actions-width: 68px; }
.editor-help-control--arrow { --editor-field-arrow-width: 26px; }
.editor-field .editor-help-control > :is(input, textarea, label.checkbox, .search-select-trigger) { padding-right: calc(12px + var(--editor-field-actions-width) + var(--editor-field-arrow-width)); }
.editor-help-toggle {
  position: absolute; top: 1px; right: 1px; display: grid; place-items: center;
  width: 34px; height: 40px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--text-muted); cursor: default;
}
.editor-help-control--arrow .editor-help-toggle { right: 27px; }
.editor-help-toggle:hover, .editor-help-toggle:focus-visible { color: var(--text); }
.editor-help-icon { width: 16px; height: 16px; background: currentColor; mask: url('/assets/icons/help.svg') center / contain no-repeat; }
.button.editor-inherit-button { position: absolute; top: 5px; right: calc(5px + var(--editor-field-arrow-width)); display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; color: var(--text-muted); }
.editor-help-control:has(> .editor-field-help:not(.editor-field-inherit)) .editor-inherit-button { right: calc(36px + var(--editor-field-arrow-width)); }
.editor-inherit-button:hover { color: var(--text); }
.editor-inherit-icon { width: 16px; height: 16px; background: currentColor; mask: url('/assets/icons/download.svg') center / contain no-repeat; }
.editor-inherit-value { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto; }
.editor-help-popup { left: auto; right: 0; z-index: 26; width: min(280px, 100%); }
.editor-help-popup--above { top: auto; bottom: calc(100% + 8px); transform: translateY(6px) scale(.992); transform-origin: bottom right; }
.editor-help-popup--above::before { inset: auto 0 -9px; }
.editor-field-help:not(.is-dismissed):is(:hover, :has(button:focus-visible)) .editor-help-popup {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) { .editor-help-popup { transition: none; } }
.editor-field-error { margin: 6px 0 0; color: var(--danger); font-size: .85rem; }
.editor-field [aria-invalid="true"] { border-color: var(--danger); }
.editor-field textarea { min-height: 90px; }
.editor-field .search-filter-control { width: 100%; }
.editor-file-choice input { padding-right: 32px; }
.editor-file-input-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.editor-file-input-row > .editor-choice { flex: 1; min-width: 0; }
.editor-wand-icon { width: var(--action-icon-size); height: var(--action-icon-size); background: currentColor; mask: url('/assets/icons/wand.svg') center / contain no-repeat; }
.editor-file-choice::after {
  content: ''; position: absolute; top: 50%; right: 11px; width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: transform 140ms ease;
}
.editor-file-choice:has(input[aria-expanded="true"])::after { transform: translateY(-25%) rotate(225deg); }
.editor-relation-option { display: flex; align-items: center; gap: 8px; }
.editor-relation-option img { width: 24px; height: 24px; flex: none; object-fit: contain; border-radius: 3px; }
.editor-relation-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.editor-selected-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.editor-selected-items:empty { display: none; }
.editor-selected-relation { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
.button.editor-autofill-button { display: inline-flex; align-items: center; gap: var(--action-icon-gap); }
.editor-autofill-button .editor-wand-icon { flex: none; }
.editor-selected-item { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface-soft); color: var(--text); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.editor-selected-item::after { content: ''; flex: 0 0 12px; width: 12px; height: 12px; background: var(--text-muted); mask: url('/assets/icons/cross.svg') center / contain no-repeat; }
.editor-selected-item img { width: 30px; height: 30px; flex: none; object-fit: contain; border-radius: 3px; }
.editor-selected-item span { min-width: 0; }
.editor-image-upload { height: 220px; margin-bottom: 10px; padding: 14px; }
.editor-core-icon .editor-image-upload { height: auto; aspect-ratio: 1; }
.editor-image-upload img { min-height: 0; flex: 1; object-fit: contain; border-radius: 6px; }
.editor-image-upload span { flex: none; font-size: .85rem; }
.editor-image-upload .editor-upload-label--mobile { display: none; }
@media (max-width: 760px) {
  .editor-image-upload .editor-upload-label--desktop { display: none; }
  .editor-image-upload .editor-upload-label--mobile { display: inline; }
}
.editor-upload-content { display: flex; flex-direction: column; gap: 14px; }
.editor-upload-content p { margin: 0; }
.editor-screenshot-field { position: relative; }
.editor-screenshot-field .editor-image-upload { height: auto; min-height: 72px; flex: 1; margin: 0; padding-inline: 40px; }
.editor-screenshot-settings-toggle { --control-size: 32px; position: absolute; top: 4px; right: 4px; color: var(--text-muted); }
.editor-screenshot-settings-panel { position: fixed; inset: auto; }
.editor-upload-matches { display: grid; gap: 12px; }
.editor-upload-match { min-width: 0; overflow-wrap: anywhere; text-align: left; }
button.editor-upload-match { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--control-radius);
  background: var(--surface-inset); color: var(--text-muted); font: inherit; cursor: pointer; }
button.editor-upload-match:is(:hover, [aria-pressed="true"]) { background: var(--surface-soft); color: var(--text); border-color: var(--border-strong); }
#editor-upload-preview { width: 100%; height: 200px; object-fit: contain; border-radius: var(--radius); background: var(--surface); }
.editor-upload-link { display: inline-block; margin-top: 6px; font-size: .8rem; }
.editor-panel > summary { cursor: pointer; color: var(--text-muted); font-weight: 600; }
.editor-panel[open] > summary { margin-bottom: 16px; }
.editor-more { grid-column: 1 / -1; min-width: 0; }
.editor-more > summary { color: var(--text-muted); cursor: pointer; }
.editor-more[open] > summary { margin-bottom: 16px; }
.editor-panel > summary, .editor-more > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.editor-panel > summary::-webkit-details-marker, .editor-more > summary::-webkit-details-marker { display: none; }
.editor-panel > summary::after, .editor-more > summary::after { content: ''; flex: 0 0 18px; width: 18px; height: 18px;
  background: currentColor; mask: url('/assets/icons/chevron-down.svg') center / contain no-repeat;
  transform: rotate(-90deg); transition: transform 200ms ease-in-out; }
:is(.editor-panel, .editor-more)[open]:not(.is-collapsing) > summary::after { transform: rotate(0); }
:is(.editor-panel, .editor-more).is-animating { overflow: clip; }
@media (prefers-reduced-motion: reduce) {
  .editor-panel > summary::after, .editor-more > summary::after { transition: none; }
}
.editor-save { justify-content: center; }
.editor-price-input { position: relative; }
.editor-price-prefix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: grid; place-items: center; line-height: 1; pointer-events: none; }
.editor-price-input input { padding-left: 37px; }
.info-dialog.editor-dialog { width: min(680px, calc(100vw - 32px)); }
.editor-dialog-content { padding: 18px; max-height: 70vh; overflow: auto; }
.editor-review-dialog { max-height: calc(100dvh - 32px); overflow: hidden; }
.editor-review-dialog[open] { display: flex; flex-direction: column; }
.editor-review-dialog > .info-dialog__header { flex-shrink: 0; }
.editor-review-dialog > .editor-dialog-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.editor-review-dialog > .editor-dialog-content > :not(.editor-review-scroll) { flex-shrink: 0; }
.editor-review-scroll { min-height: 0; overflow-y: auto; }
#editor-screenshot-dialog { width: min(520px, calc(100vw - 32px)); text-align: left; }
#editor-screenshot-dialog .editor-dialog-content { gap: 18px; max-height: none; }
.editor-screenshot-results { display: grid; gap: 18px; }
.editor-screenshot-preview { position: relative; width: 100%; }
.editor-screenshot-preview img { display: block; width: 100%; border-radius: 2px; }
.editor-screenshot-preview .tier-item-maximize { display: grid; opacity: 1; pointer-events: auto; }
#editor-screenshot-image-dialog { --image-preview-width: 1100px; --image-preview-height: 800px; }
#editor-screenshot-changes:empty { display: none; }
#editor-screenshot-changes { display: grid; gap: 14px; }
.editor-screenshot-captured { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
#editor-screenshot-status { margin: 0; }
#editor-review-dialog .field { margin-bottom: 16px; }
#editor-changes { margin-bottom: 18px; }
.editor-change { border-bottom: 1px solid var(--border); padding: 12px 0; overflow-wrap: anywhere; }
.editor-change:first-child { padding-top: 0; }
.editor-change h3 { font-size: 1rem; margin: 0 0 6px; text-transform: none; }
.editor-change del, .editor-change ins { display: grid; grid-template-columns: 1em minmax(0, 1fr); gap: 6px; white-space: pre-wrap; text-decoration: none; }
.editor-change del::before { content: '−'; color: #f0757f; font-weight: 600; }
.editor-change ins::before { content: '+'; color: #74cf96; font-weight: 600; }
.editor-change del { color: var(--text-muted); }
.editor-change ins { color: var(--text); }
.editor-change-captured { color: var(--text-muted); white-space: pre-wrap; }
.editor-change-chevron { display: inline-block; width: 1em; height: 1em; margin-inline: .2em; vertical-align: -.15em; color: var(--text-muted); background: currentColor; mask: url('/assets/icons/chevron-right.svg') center / contain no-repeat; }
.editor-change-unmatched { margin: 4px 0 0; }
@container (max-width: 307px) {
  .editor-categories.is-collapsed + .editor-category-toggle { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
}
@media (max-width: 640px) {
  .editor-merch-pair { grid-template-columns: minmax(0, 1fr); }
  .editor-merch-pair input:first-child { border-radius: var(--control-radius) var(--control-radius) 0 0; }
  .editor-merch-pair input:last-child { border-radius: 0 0 var(--control-radius) var(--control-radius); margin: -1px 0 0; width: 100%; }
  .editor-fields-grid, .editor-field-row, .editor-core-panel { grid-template-columns: minmax(0, 1fr); }
  .editor-field-row { grid-auto-flow: row; }
  .editor-panel { padding: 14px; }
}