@layer components, pages;
  @layer components {
    .qp-character-slot {
      --qp-character-speed: 1s;
      --qp-character-intensity: 1;
      --qp-character-scale: 1;
      --qp-character-delay: 0s;
      display: inline-grid;
      place-items: center;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      transform-origin: 50% 70%;
      vertical-align: middle;
      contain: layout style;
      position: relative;
    }
    .qp-character-slot.qp-character-has-image {
      color: transparent;
      background-image: none !important;
      text-shadow: none;
    }
    .qp-character-slot > .qp-character-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100% !important;
      height: 100% !important;
      min-width: 1em;
      min-height: 1em;
      max-width: 100%;
      max-height: 100%;
      padding: 0;
      border: 0;
      border-radius: inherit;
      background: transparent;
      object-fit: contain !important;
      object-position: center !important;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      transition: opacity 120ms ease;
    }
    .qp-character-slot.qp-character-media-ready > .qp-character-media { opacity: 1; }
    .qp-character-slot.qp-character-has-image > :not(.qp-character-media):not(input):not(i):not(.qp-sr-only) {
      visibility: hidden;
    }
    .qp-character-slot.qp-character-has-image > input,
    .qp-character-slot.qp-character-has-image > i,
    .qp-character-slot.qp-character-has-image > .qp-sr-only { z-index: 1; }
    .qp-character-slot > svg { width: 100%; height: 100%; overflow: visible; }
    .qp-character-offscreen { animation-play-state: paused !important; }
    .qp-character-preset-float { animation: qp-character-float calc(var(--qp-character-speed) * 3) ease-in-out var(--qp-character-delay) infinite; }
    .qp-character-preset-bounce { animation: qp-character-bounce calc(var(--qp-character-speed) * 1.3) ease-in-out var(--qp-character-delay) infinite; }
    .qp-character-preset-pulse { animation: qp-character-pulse calc(var(--qp-character-speed) * 2) ease-in-out var(--qp-character-delay) infinite; }
    .qp-character-preset-wiggle { animation: qp-character-wiggle calc(var(--qp-character-speed) * 1.5) ease-in-out var(--qp-character-delay) infinite; }
    .qp-character-preset-breathe { animation: qp-character-breathe calc(var(--qp-character-speed) * 3.4) ease-in-out var(--qp-character-delay) infinite; }
    .qp-character-preset-hover { animation: qp-character-hover calc(var(--qp-character-speed) * 2.4) ease-in-out var(--qp-character-delay) infinite; }
    .qp-character-preset-celebrate { animation: qp-character-celebrate calc(var(--qp-character-speed) * 1.1) ease-out var(--qp-character-delay) infinite; }
    .qp-character-preset-jump { animation: qp-character-jump calc(var(--qp-character-speed) * 1.6) ease-in-out var(--qp-character-delay) infinite; }
    .qp-character-preset-shake { animation: qp-character-shake calc(var(--qp-character-speed) * .7) linear var(--qp-character-delay) infinite; }
    .qp-character-preset-entrance { animation: qp-character-entrance calc(var(--qp-character-speed) * .8) ease-out var(--qp-character-delay) both; }
    @keyframes qp-character-float { 0%,100% { transform: translate3d(0,0,0) scale(var(--qp-character-scale)); } 50% { transform: translate3d(0,calc(-5px * var(--qp-character-intensity)),0) scale(var(--qp-character-scale)); } }
    @keyframes qp-character-bounce { 0%,100% { transform: translate3d(0,0,0) scale(var(--qp-character-scale)); } 45% { transform: translate3d(0,calc(-9px * var(--qp-character-intensity)),0) scale(var(--qp-character-scale)); } 60% { transform: translate3d(0,0,0) scale(var(--qp-character-scale),calc(var(--qp-character-scale) * .94)); } }
    @keyframes qp-character-pulse { 0%,100% { transform: scale(var(--qp-character-scale)); } 50% { transform: scale(calc(var(--qp-character-scale) + .05 * var(--qp-character-intensity))); } }
    @keyframes qp-character-wiggle { 0%,100% { transform: rotate(0) scale(var(--qp-character-scale)); } 30% { transform: rotate(calc(-3deg * var(--qp-character-intensity))) scale(var(--qp-character-scale)); } 70% { transform: rotate(calc(3deg * var(--qp-character-intensity))) scale(var(--qp-character-scale)); } }
    @keyframes qp-character-breathe { 0%,100% { transform: scale(var(--qp-character-scale)); } 50% { transform: scale(calc(var(--qp-character-scale) + .025 * var(--qp-character-intensity))); } }
    @keyframes qp-character-hover { 0%,100% { transform: translate3d(0,0,0) scale(var(--qp-character-scale)); } 50% { transform: translate3d(calc(2px * var(--qp-character-intensity)),calc(-3px * var(--qp-character-intensity)),0) scale(var(--qp-character-scale)); } }
    @keyframes qp-character-celebrate { 0%,100% { transform: translate3d(0,0,0) rotate(0) scale(var(--qp-character-scale)); } 35% { transform: translate3d(0,calc(-8px * var(--qp-character-intensity)),0) rotate(-5deg) scale(var(--qp-character-scale)); } 65% { transform: translate3d(0,calc(-5px * var(--qp-character-intensity)),0) rotate(5deg) scale(var(--qp-character-scale)); } }
    @keyframes qp-character-jump { 0%,100% { transform: translate3d(0,0,0) scale(var(--qp-character-scale)); } 45% { transform: translate3d(0,calc(-13px * var(--qp-character-intensity)),0) scale(var(--qp-character-scale)); } }
    @keyframes qp-character-shake { 0%,100% { transform: translateX(0) scale(var(--qp-character-scale)); } 25% { transform: translateX(calc(-3px * var(--qp-character-intensity))) scale(var(--qp-character-scale)); } 75% { transform: translateX(calc(3px * var(--qp-character-intensity))) scale(var(--qp-character-scale)); } }
    @keyframes qp-character-entrance { from { opacity: 0; transform: translate3d(0,12px,0) scale(calc(var(--qp-character-scale) * .8)); } to { opacity: 1; transform: translate3d(0,0,0) scale(var(--qp-character-scale)); } }

    .qp-custom-title {
      display: inline-flex;
      align-items: center;
      gap: .35em;
      padding: .25em .65em;
      color: var(--qp-title-color, var(--qpt-text));
      border: var(--qp-title-border-width, 0) solid var(--qp-title-border, transparent);
      border-radius: var(--qp-title-radius, 999px);
      background: linear-gradient(135deg, var(--qp-title-gradient-from, transparent), var(--qp-title-gradient-to, transparent)), var(--qp-title-background, transparent);
      font-size: var(--qp-title-font-size, 1em);
      font-weight: var(--qp-title-font-weight, 800);
      box-shadow: 0 calc(var(--qp-title-shadow, 0) * 1px) calc(var(--qp-title-shadow, 0) * 2px) color-mix(in srgb, var(--qpt-text) 18%, transparent), 0 0 calc(var(--qp-title-glow, 0) * 1px) var(--qp-title-color, transparent);
      line-height: 1.2;
    }
    .qp-title-font-serif { font-family: Georgia, 'Times New Roman', serif; }
    .qp-title-font-mono { font-family: ui-monospace, 'Cascadia Code', monospace; }
    .qp-title-font-rounded { font-family: 'Trebuchet MS', sans-serif; }
    .qp-title-font-display { font-family: inherit; letter-spacing: .02em; text-transform: uppercase; }
    .qp-title-animation-pulse { animation: qp-character-pulse 2s ease-in-out infinite; }
    .qp-title-animation-float { animation: qp-character-float 3s ease-in-out infinite; }
  }

@layer components {
  @media (prefers-reduced-motion: reduce) {
    .qp-character-slot, .qp-custom-title { animation: none !important; transform: none !important; }
  }
}

@layer pages {
  .qp-cosmetics-admin-body,.qp-cosmetic-editor {
    --qpt-background: var(--qp-ws-canvas, var(--qp-bg));
    --qpt-surface: var(--qp-ws-surface, var(--qp-surface));
    --qpt-surface-alt: var(--qp-ws-surface-muted, var(--qp-soft));
    --qpt-text: var(--qp-ws-ink, var(--qp-text));
    --qpt-muted: var(--qp-ws-muted, var(--qp-muted));
    --qpt-border: var(--qp-ws-line, var(--qp-border));
    --qpt-primary: var(--qp-ws-accent, var(--qp-purple));
    --qpt-primary-text: #fff;
    --qpt-success: var(--qp-green);
    --qpt-danger: var(--qp-red);
    --qpt-warning: var(--qp-yellow);
    --qpt-info: var(--qp-blue);
    --qpt-control-radius: var(--qp-radius);
    --qpt-card-radius: var(--qp-card-radius);
    --qpt-focus-width: 3px;
    --qpt-text-muted: var(--qpt-muted);
    --qpt-surface-muted: var(--qpt-surface-alt);
    --qpt-primary-contrast: var(--qpt-primary-text);
    --qpt-radius-md: var(--qpt-control-radius);
    --qpt-radius-lg: var(--qpt-card-radius);
    --qpt-radius-xl: calc(var(--qpt-card-radius) * 1.35);
    --qpt-radius-pill: 999px;
    --qpt-shadow-sm: var(--qp-shadow-soft);
    --qpt-shadow-md: var(--qp-card-shadow);
    --qpt-shadow-lg: var(--qp-card-shadow-hover);
    --qpt-motion-fast: .18s ease;
    --qpt-focus-ring: 0 0 0 var(--qpt-focus-width) color-mix(in srgb,var(--qpt-primary) 32%,transparent);
    --qpt-space-1: .25rem;
    --qpt-space-2: .5rem;
    --qpt-space-3: .75rem;
    --qpt-space-4: 1rem;
    --qpt-space-5: 1.5rem;
  }
  .qp-cosmetics-admin-body [hidden] { display: none !important; }
  .qp-cosmetics-eyebrow { display: block; color: var(--qpt-primary); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .qp-cosmetics-top-actions { display: flex; align-items: center; gap: var(--qpt-space-2); }
  .qp-cosmetics-admin { display: grid; gap: var(--qpt-space-5); }
  .qp-cosmetics-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--qpt-space-3); }
  .qp-cosmetics-summary article { display: grid; gap: var(--qpt-space-1); min-width: 0; padding: var(--qpt-space-4); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-lg); background: var(--qpt-surface); box-shadow: var(--qpt-shadow-sm); }
  .qp-cosmetics-summary span,.qp-cosmetics-summary small { color: var(--qpt-text-muted); font-weight: 750; }
  .qp-cosmetics-summary strong { color: var(--qpt-text); font-size: clamp(1.5rem,3vw,2.35rem); }
  .qp-cosmetics-toolbar { display: grid; grid-template-columns: auto minmax(14rem,1fr) auto; align-items: center; gap: var(--qpt-space-3); padding: var(--qpt-space-3); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-lg); background: var(--qpt-surface); box-shadow: var(--qpt-shadow-sm); }
  .qp-cosmetics-tabs { display: flex; gap: var(--qpt-space-1); overflow-x: auto; }
  .qp-cosmetics-tabs button,.qp-cosmetic-type-switch button,.qp-cosmetic-contexts button { min-height: 2.5rem; padding: var(--qpt-space-2) var(--qpt-space-3); border: 0; border-radius: var(--qpt-radius-md); color: var(--qpt-text-muted); background: transparent; font: inherit; font-weight: 850; cursor: pointer; white-space: nowrap; }
  .qp-cosmetics-tabs button.active,.qp-cosmetic-type-switch button.active,.qp-cosmetic-contexts button.active { color: var(--qpt-primary-contrast); background: var(--qpt-primary); }
  .qp-cosmetics-search { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: var(--qpt-space-2); min-height: 2.75rem; padding-inline: var(--qpt-space-3); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-md); background: var(--qpt-surface-muted); }
  .qp-cosmetics-search input,.qp-cosmetics-toolbar select { width: 100%; min-height: 2.65rem; border: 0; outline: 0; color: var(--qpt-text); background: transparent; font: inherit; }
  .qp-cosmetics-toolbar select { padding-inline: var(--qpt-space-3); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-md); }
  .qp-cosmetics-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--qpt-space-4); }
  .qp-cosmetic-card { display: grid; grid-template-rows: auto 10rem auto auto auto; min-width: 0; overflow: hidden; border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-lg); background: var(--qpt-surface); box-shadow: var(--qpt-shadow-sm); transition: transform var(--qpt-motion-fast),box-shadow var(--qpt-motion-fast),border-color var(--qpt-motion-fast); }
  .qp-cosmetic-card:hover,.qp-cosmetic-card:focus-within { transform: translateY(-.2rem); border-color: var(--qpt-primary); box-shadow: var(--qpt-shadow-md); }
  .qp-cosmetic-card.is-archived { opacity: .72; }
  .qp-cosmetic-card-status { display: flex; justify-content: space-between; gap: var(--qpt-space-2); padding: var(--qpt-space-3) var(--qpt-space-3) 0; }
  .qp-cosmetic-card-status span { padding: .25rem .55rem; border-radius: var(--qpt-radius-pill); color: var(--qpt-text-muted); background: var(--qpt-surface-muted); font-size: .68rem; font-weight: 900; text-transform: capitalize; }
  .qp-cosmetic-card-status .is-published { color: var(--qpt-success); background: color-mix(in srgb,var(--qpt-success) 12%,var(--qpt-surface)); }
  .qp-cosmetic-card-visual { display: grid; place-items: center; margin: var(--qpt-space-2) var(--qpt-space-3); border-radius: var(--qpt-radius-lg); background: linear-gradient(145deg,color-mix(in srgb,var(--qpt-primary) 10%,var(--qpt-surface-muted)),var(--qpt-surface-muted)); }
  .qp-cosmetic-card-character { width: 7rem; height: 7rem; font-size: 4.5rem; }
  .qp-cosmetic-card-visual .qp-custom-title { max-width: calc(100% - var(--qpt-space-4)); }
  .qp-cosmetic-card-copy { min-width: 0; padding: 0 var(--qpt-space-4); }
  .qp-cosmetic-card-copy small { color: var(--qpt-primary); font-weight: 850; }
  .qp-cosmetic-card-copy h3 { overflow: hidden; margin: var(--qpt-space-1) 0; color: var(--qpt-text); font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
  .qp-cosmetic-card-copy p { display: -webkit-box; min-height: 2.7em; overflow: hidden; margin: 0; color: var(--qpt-text-muted); font-size: .8rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .qp-cosmetic-card-meta { display: flex; flex-wrap: wrap; gap: var(--qpt-space-2); padding: var(--qpt-space-3) var(--qpt-space-4); color: var(--qpt-text-muted); font-size: .72rem; font-weight: 800; }
  .qp-cosmetic-card footer { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--qpt-space-2); padding: var(--qpt-space-3); border-top: 1px solid var(--qpt-border); }
  .qp-cosmetic-card footer .qp-btn { min-width: 0; padding-inline: .35rem; font-size: .72rem; white-space: nowrap; }
  .qp-cosmetics-empty { grid-column: 1/-1; min-height: 20rem; }

  .qp-cosmetic-editor { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: stretch end; }
  .qp-cosmetic-editor-backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in srgb,var(--qpt-text) 48%,transparent); backdrop-filter: blur(.2rem); }
  .qp-cosmetic-editor > section { position: relative; width: min(76rem,calc(100vw - 2rem)); height: 100%; overflow: hidden; border-inline-start: 1px solid var(--qpt-border); background: var(--qpt-background); box-shadow: var(--qpt-shadow-lg); }
  .qp-cosmetic-editor > section > header { display: flex; align-items: center; justify-content: space-between; gap: var(--qpt-space-4); min-height: 5rem; padding: var(--qpt-space-3) var(--qpt-space-5); border-bottom: 1px solid var(--qpt-border); background: var(--qpt-surface); }
  .qp-cosmetic-editor header span { color: var(--qpt-primary); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
  .qp-cosmetic-editor header h2 { margin: .2rem 0 0; color: var(--qpt-text); }
  .qp-cosmetic-editor header > button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-md); color: var(--qpt-text); background: var(--qpt-surface-muted); font-size: 1.6rem; cursor: pointer; }
  .qp-cosmetic-editor-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(20rem,.75fr); height: calc(100% - 5rem); }
  .qp-cosmetic-form { display: grid; align-content: start; gap: var(--qpt-space-4); overflow-y: auto; padding: var(--qpt-space-5); }
  .qp-cosmetic-form > label,.qp-cosmetic-form fieldset label { display: grid; gap: var(--qpt-space-2); color: var(--qpt-text-muted); font-size: .78rem; font-weight: 850; }
  .qp-cosmetic-form fieldset { display: grid; gap: var(--qpt-space-3); margin: 0; padding: var(--qpt-space-4); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-lg); background: var(--qpt-surface); }
  .qp-cosmetic-form legend { padding-inline: var(--qpt-space-2); color: var(--qpt-text); font-weight: 900; }
  .qp-cosmetic-type-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--qpt-space-1); padding: var(--qpt-space-1); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-md); background: var(--qpt-surface); }
  .qp-cosmetic-upload { position: relative; display: grid; justify-items: center; gap: var(--qpt-space-2); padding: var(--qpt-space-5); border: .12rem dashed var(--qpt-border); border-radius: var(--qpt-radius-lg); color: var(--qpt-text-muted); background: var(--qpt-surface-muted); text-align: center; }
  .qp-cosmetic-upload:focus-within { border-color: var(--qpt-primary); box-shadow: var(--qpt-focus-ring); }
  .qp-cosmetic-upload input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
  .qp-cosmetic-upload strong { color: var(--qpt-text); }
  .qp-cosmetic-upload small { max-width: 34rem; line-height: 1.5; }
  .qp-cosmetic-upload span { padding: .35rem .7rem; border-radius: var(--qpt-radius-pill); color: var(--qpt-primary); background: color-mix(in srgb,var(--qpt-primary) 10%,var(--qpt-surface)); font-size: .72rem; font-weight: 850; }
  .qp-cosmetic-fields-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--qpt-space-3); }
  .qp-cosmetic-fields-row.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .qp-cosmetic-range-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--qpt-space-3); }
  .qp-cosmetic-range-grid label { grid-template-columns: minmax(0,1fr) auto !important; }
  .qp-cosmetic-range-grid input { grid-column: 1/-1; width: 100%; accent-color: var(--qpt-primary); }
  .qp-cosmetic-color-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--qpt-space-2); }
  .qp-cosmetic-color-grid input { width: 100%; min-height: 2.75rem; padding: .2rem; border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-md); background: var(--qpt-surface-muted); }
  .qp-cosmetic-toggles { display: flex; flex-wrap: wrap; gap: var(--qpt-space-3); }
  .qp-cosmetic-toggles label { display: flex !important; grid-template-columns: none !important; align-items: center; min-height: 2.75rem; padding: 0 var(--qpt-space-3); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-md); background: var(--qpt-surface-muted); }
  .qp-cosmetic-toggles input { width: 1.1rem; height: 1.1rem; accent-color: var(--qpt-primary); }
  .qp-cosmetic-form-actions { position: sticky; bottom: calc(var(--qpt-space-5) * -1); display: flex; justify-content: flex-end; gap: var(--qpt-space-2); padding: var(--qpt-space-3); border-top: 1px solid var(--qpt-border); background: var(--qpt-surface); }
  .qp-cosmetic-preview-panel { display: grid; grid-template-rows: auto minmax(20rem,1fr) auto; gap: var(--qpt-space-4); min-width: 0; padding: var(--qpt-space-5); border-inline-start: 1px solid var(--qpt-border); background: var(--qpt-surface-muted); }
  .qp-cosmetic-preview-panel > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--qpt-space-3); color: var(--qpt-text); font-weight: 900; }
  .qp-cosmetic-contexts { display: flex; gap: var(--qpt-space-1); }
  .qp-cosmetic-contexts button { min-height: 2.1rem; padding: var(--qpt-space-1) var(--qpt-space-2); font-size: .7rem; }
  .qp-cosmetic-preview-stage { display: grid; place-items: center; min-width: 0; overflow: hidden; border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-xl); background: radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--qpt-primary) 12%,var(--qpt-surface)),var(--qpt-surface)); box-shadow: var(--qpt-shadow-md); }
  .qp-cosmetic-preview-stage.is-header { min-height: 9rem; align-self: start; }
  .qp-cosmetic-preview-stage.is-podium { background: linear-gradient(160deg,color-mix(in srgb,var(--qpt-warning) 14%,var(--qpt-surface)),var(--qpt-surface)); }
  .qp-cosmetic-live-character { width: min(18rem,70%); height: min(18rem,70%); font-size: clamp(5rem,12vw,11rem); }
  .qp-cosmetic-live-character img { width: 100%; height: 100%; object-fit: contain; }
  .qp-cosmetic-preview-stage.is-header .qp-cosmetic-live-character { width: 5rem; height: 5rem; font-size: 3.5rem; }
  .qp-cosmetic-preview-stage.is-podium .qp-cosmetic-live-character { animation-name: qp-character-celebrate; }
  .qp-cosmetic-preview-placeholder { color: var(--qpt-text-muted); font-weight: 800; }
  .qp-cosmetic-preview-panel dl { display: grid; gap: var(--qpt-space-2); margin: 0; }
  .qp-cosmetic-preview-panel dl div { display: flex; justify-content: space-between; gap: var(--qpt-space-3); padding: var(--qpt-space-2) var(--qpt-space-3); border: 1px solid var(--qpt-border); border-radius: var(--qpt-radius-md); background: var(--qpt-surface); }
  .qp-cosmetic-preview-panel dt { color: var(--qpt-text-muted); }
  .qp-cosmetic-preview-panel dd { margin: 0; color: var(--qpt-text); font-weight: 800; text-align: end; }

  @media (max-width: 78rem) { .qp-cosmetics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .qp-cosmetic-editor-layout { grid-template-columns: minmax(0,1fr) minmax(18rem,.65fr); } }
  @media (max-width: 62rem) { .qp-cosmetics-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .qp-cosmetics-toolbar { grid-template-columns: 1fr auto; } .qp-cosmetics-tabs { grid-column: 1/-1; } .qp-cosmetics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .qp-cosmetic-editor-layout { grid-template-columns: 1fr; overflow-x: hidden; overflow-y: auto; } .qp-cosmetic-form { overflow: visible; } .qp-cosmetic-preview-panel { order: -1; width: 100%; min-width: 0; box-sizing: border-box; grid-template-rows: auto 20rem auto; border-inline-start: 0; border-bottom: 1px solid var(--qpt-border); } }
  @media (max-width: 42rem) { .qp-cosmetics-top-actions .qp-btn:first-child { display: none; } .qp-cosmetics-summary { gap: var(--qpt-space-2); } .qp-cosmetics-summary article { padding: var(--qpt-space-3); } .qp-cosmetics-toolbar { grid-template-columns: 1fr; } .qp-cosmetics-tabs,.qp-cosmetics-search { grid-column: auto; } .qp-cosmetics-grid { grid-template-columns: 1fr; } .qp-cosmetic-editor > section { width: 100vw; } .qp-cosmetic-editor-layout { display: block; } .qp-cosmetic-preview-panel { padding: var(--qpt-space-3); } .qp-cosmetic-form { padding: var(--qpt-space-3); } .qp-cosmetic-fields-row,.qp-cosmetic-fields-row.three,.qp-cosmetic-range-grid { grid-template-columns: 1fr; } .qp-cosmetic-color-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .qp-cosmetic-contexts { overflow-x: auto; } }
}