#editor-app {
  --ke-ink: var(--ink, #1d1d1f);
  --ke-muted: var(--muted, #6e6e73);
  --ke-line: var(--line, #dedee2);
  --ke-accent: var(--accent, #303034);
  --ke-surface: var(--white, #fff);
  --ke-stage: var(--surface, #f5f5f7);
  color: var(--ke-ink);
  width: min(100%, 1080px);
  margin-inline: auto;
}
#editor-app *, #editor-app *::before, #editor-app *::after { box-sizing: border-box; }
#editor-app [hidden] { display: none !important; }
#editor-app button, #editor-app input { font: inherit; }
#editor-app button { -webkit-tap-highlight-color: transparent; }
#editor-app button:not(:disabled) { cursor: pointer; }
#editor-app :is(button, canvas, input):focus-visible { outline: 2px solid var(--ke-accent); outline-offset: 4px; }
#editor-app :is(h3, h4, p) { margin: 0; }

.ke-editor { --ke-dock-gutter: 18px; }
.ke-entry { position: relative; }
.ke-entry.ke-drag-over::after { content: ''; position: absolute; pointer-events: none; inset: -.5rem; border: 2px dashed var(--ke-accent); border-radius: .75rem; }
.ke-summary { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.ke-summary h3, .ke-review-heading h3 { font-size: clamp(1.42rem, 2.7vw, 2.2rem); line-height: 1.15; letter-spacing: -.039em; font-weight: 720; }
.ke-product-title { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.ke-product-size { color: var(--ke-muted); font-size: clamp(.82rem, 1.7vw, 1rem); font-weight: 690; white-space: nowrap; }
.ke-summary p, .ke-review-heading p { margin-top: .36rem !important; color: var(--ke-muted); line-height: 1.45; font-size: .88rem; }
.ke-summary strong { font-size: clamp(1.15rem, 2.7vw, 1.62rem); line-height: 1.28; font-weight: 750; white-space: nowrap; }
.ke-price { text-align: right; }
.ke-price p { font-size: .74rem; }
.ke-pack-control { min-width: 0; width: min(100%, 23rem); margin-top: .9rem; }
.ke-pack-control :is(.ke-pack-label, label) { display: block; margin: 0 0 .42rem; color: var(--ke-muted); font-size: .81rem; font-weight: 710; }
.ke-pack-buttons { display: grid; grid-template-columns: 3.15rem minmax(0, 1fr) 3.15rem; align-items: stretch; gap: .34rem; padding: .26rem; border: 1px solid transparent; border-radius: 13px; background: var(--ke-stage); }
.ke-pack-buttons button { display: grid; place-items: center; min-height: 43px; border: 1px solid transparent; border-radius: 9px; background: #fff; color: var(--ke-ink); font-weight: 760 !important; font-size: .9rem !important; transition: background .17s ease, color .17s ease, border-color .17s ease; }
.ke-pack-buttons [data-ke=pack-minus] { grid-column: 1; grid-row: 1; }
.ke-pack-buttons [data-ke=pack-plus] { grid-column: 3; grid-row: 1; }
.ke-pack-buttons [data-ke=pack-minus]:not(:disabled):hover { border-color: var(--ke-line); background: #ececef; }
#editor-app .ke-pack-buttons [data-ke=pack-plus]:not(:disabled):is(:hover, :focus-visible, :active) { border-color: #bfd7ba; background: #e3f0df; color: #2e5731; outline-color: #46724a; }
.ke-pack-buttons button:disabled { background: transparent; color: #86868b; }
.ke-pack-buttons output { grid-column: 2; grid-row: 1; display: grid; place-items: center; min-width: 0; padding-inline: .15rem; text-align: center; font-size: clamp(.96rem, 2.4vw, 1.16rem); font-weight: 770; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ke-upgrade { display: flex; align-items: center; justify-content: space-between; gap: .5rem .85rem; margin-top: .9rem; padding: .28rem .85rem; min-height: 2.9rem; border-radius: 11px; background: var(--ke-stage); color: var(--ke-muted); }
.ke-upgrade p { font-size: .84rem; font-weight: 660; line-height: 1.35; }
.ke-upgrade .ke-text-button { color: var(--ke-ink); text-decoration: underline; text-underline-offset: .21em; }
.ke-upload-row { display: flex; flex-direction: column; align-items: end; min-width: 0; margin-top: .9rem; }
.ke-upload-row .ke-status { max-width: 25rem; }
.ke-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .85rem; }
.ke-primary, .ke-secondary, .ke-text-button { display: inline-flex; align-items: center; justify-content: center; gap: .47rem; min-height: 42px; padding: .55rem .95rem; border: 1px solid transparent; border-radius: 999px; font-size: .83rem !important; font-weight: 720 !important; line-height: 1.24; text-align: center; transition: background-color .17s ease, border-color .17s ease, color .17s ease; }
.ke-primary { background: var(--ke-accent); color: #fff; border-color: var(--ke-accent); }
.ke-primary:not(:disabled):hover { background: var(--accent-dark, #1d1d1f); border-color: var(--accent-dark, #1d1d1f); }
.ke-primary:disabled { color: var(--ke-muted); background: var(--ke-stage); border-color: var(--ke-stage); }
.ke-secondary { color: var(--ke-ink); background: var(--ke-stage); }
.ke-secondary:not(:disabled):hover { background: #ebebee; }
.ke-text-button { padding-inline: .2rem; color: var(--ke-ink); background: transparent; border-radius: .35rem; }
.ke-text-button:not(:disabled):hover { color: var(--ke-accent); text-decoration: underline; text-underline-offset: .2em; }
.ke-text-button:disabled, .ke-secondary:disabled { opacity: .6; }
.ke-continue { width: 100%; min-height: 47px; }

.ke-workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); grid-template-areas: 'stage slots' 'stage actions'; grid-template-rows: auto 1fr; gap: 1.3rem clamp(1.15rem, 5vw, 4.3rem); align-items: start; margin-top: 1.4rem; padding-top: 1.55rem; border-top: 1px solid var(--ke-line); }
.ke-workspace-empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'slots' 'actions'; grid-template-rows: auto auto; }
.ke-workspace-empty :is(.ke-selection, .ke-next-step) { width: min(100%, 29rem); justify-self: center; }
.ke-selection { grid-area: slots; min-width: 0; }
.ke-selection h4, .ke-stage-top h4 { font-size: .97rem; font-weight: 760; line-height: 1.25; }
.ke-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: .68rem; margin: .72rem -4px 0; padding: 4px; max-height: 30rem; overflow-y: auto; }
.ke-photo-card { min-width: 0; }
.ke-slot { position: relative; display: block; min-width: 0; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--magnet-radius, 3.5%); background: var(--ke-stage); }
.ke-slot[aria-pressed="true"] { outline: 2px solid var(--ke-accent); outline-offset: 2px; }
.ke-slot canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }
.ke-pack-mobile { display: none; }
.ke-slot-empty { display: grid; place-items: center; border: 1px dashed #c9c9ce; border-radius: 9px; background: var(--ke-stage); color: var(--ke-muted); }
.ke-slot-empty svg { width: 1.4rem; height: 1.4rem; }
.ke-slot-empty:not(:disabled):hover { border-color: var(--ke-accent); background: #ececef; color: var(--ke-accent); }
.ke-stepper { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); min-width: 0; align-items: center; text-align: center; margin-top: .34rem; background: var(--ke-stage); border-radius: 8px; }
.ke-stepper button { display: grid; place-items: center; min-width: 0; min-height: 40px; border: 0; padding: 0; border-radius: 7px; color: var(--ke-ink); background: transparent; }
.ke-stepper button:not(:disabled):hover { color: var(--ke-accent); background: #e9e9ed; }
.ke-stepper button:disabled { color: #9b9ba1; }
.ke-stepper output { padding: 0 .19rem; font-size: .91rem; font-weight: 750; font-variant-numeric: tabular-nums; }

.ke-visual { --ke-dimension-rail: 1.55rem; --ke-dimension-gap: .36rem; grid-area: stage; min-width: 0; }
.ke-stage-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .63rem; }
.ke-stage-top span { font-size: .75rem; color: var(--ke-muted); }
.ke-stage, .ke-crop-view { width: 100%; }
.ke-crop-view { display: grid; grid-template-columns: var(--ke-dimension-rail) minmax(0, 1fr); grid-template-rows: auto 1.42rem; grid-template-areas: 'vertical image' '. horizontal'; gap: var(--ke-dimension-gap); }
.ke-frame { position: relative; grid-area: image; width: 100%; min-width: 0; }
.ke-frame canvas { display: block; width: 100%; aspect-ratio: 1; }
.ke-frame [data-ke=canvas] { position: relative; z-index: 1; border-radius: var(--magnet-radius, 3.5%); touch-action: none; }
.ke-frame:not(.ke-crop-mesh) [data-ke=canvas] { box-shadow: 0 0 0 1px #1d1d1f26, 0 3px 10px #1d1d1f24, 0 12px 22px -10px #1d1d1f4d; }
.ke-frame [data-ke=canvas]:is([data-pan="x"], [data-pan="y"], [data-pan="xy"]) { cursor: grab; }
.ke-frame.ke-panning [data-ke=canvas] { cursor: grabbing; }
.ke-crop-model { position: absolute; inset: 0; pointer-events: none; visibility: hidden; filter: drop-shadow(0 1px .8px #1d1d1f30) drop-shadow(1px 7px 8px #1d1d1f38); }
.ke-crop-mesh .ke-crop-model { visibility: visible; }
.ke-crop-mesh [data-ke=canvas] { opacity: 0; }
#editor-app .ke-frame.ke-crop-mesh:has([data-ke=canvas]:focus-visible) { border-radius: var(--magnet-radius, 3.5%); outline: 2px solid var(--ke-accent); outline-offset: 4px; }
.ke-pan-hint { position: absolute; z-index: 2; bottom: .8rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .45rem; width: max-content; max-width: calc(100% - 1.4rem); padding: .46rem .72rem; border-radius: .9rem; color: var(--ke-ink); background: var(--ke-surface); box-shadow: 0 1px 8px #1d1d1f26; font-size: .76rem; font-weight: 680; line-height: 1.25; pointer-events: none; }
.ke-pan-hint svg { flex: none; animation: ke-pan-nudge .7s .22s both; }
.ke-pan-hint[data-axis="x"] { --ke-nudge-x: 4px; }
.ke-pan-hint[data-axis="y"] { --ke-nudge-y: 4px; }
.ke-pan-hint[data-axis="xy"] { --ke-nudge-x: 3px; --ke-nudge-y: 3px; }
@keyframes ke-pan-nudge {
  28% { transform: translate(var(--ke-nudge-x, 0px), var(--ke-nudge-y, 0px)); }
  64% { transform: translate(calc(-1 * var(--ke-nudge-x, 0px)), calc(-1 * var(--ke-nudge-y, 0px))); }
}
.ke-dimension { position: relative; display: grid; place-items: center; color: var(--ke-muted); font-size: .74rem; font-weight: 730; line-height: 1; pointer-events: none; }
.ke-dimension span { z-index: 1; padding: 0 .33rem; white-space: nowrap; background: var(--ke-surface); }
.ke-dimension::before, .ke-dimension::after { content: ''; position: absolute; width: 6px; height: 6px; border-top: 1px solid #86868b; border-left: 1px solid #86868b; }
.ke-dimension-v { grid-area: vertical; background: linear-gradient(#86868b,#86868b) center / 1px calc(100% - 7px) no-repeat; }
.ke-dimension-v span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.ke-dimension-v::before { top: 4px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.ke-dimension-v::after { bottom: 4px; left: 50%; transform: translateX(-50%) rotate(225deg); }
.ke-dimension-h { grid-area: horizontal; background: linear-gradient(#86868b,#86868b) center / calc(100% - 7px) 1px no-repeat; }
.ke-dimension-h::before { left: 4px; top: 50%; transform: translateY(-50%) rotate(-45deg); }
.ke-dimension-h::after { right: 4px; top: 50%; transform: translateY(-50%) rotate(135deg); }
.ke-zoom { min-width: 0; margin-top: .45rem; margin-inline-start: calc(var(--ke-dimension-rail) + var(--ke-dimension-gap)); }
.ke-zoom-heading { display: flex; align-items: center; gap: .7rem; font-size: .85rem; font-weight: 690; }
.ke-zoom-heading output { margin-left: auto; color: var(--ke-muted); font-variant-numeric: tabular-nums; }
.ke-zoom input { display: block; width: 100%; margin: 0; min-height: 29px; accent-color: var(--ke-accent); cursor: pointer; }
.ke-photo-info { display: flex; justify-content: flex-end; }
.ke-file-actions { display: flex; flex: none; gap: .28rem; }
.ke-photo-info button { min-height: 34px; flex: none; font-size: .75rem !important; }
.ke-quality, .ke-status { border-radius: 6px; padding: .55rem .65rem; margin-top: .46rem !important; font-size: .75rem; line-height: 1.45; }
.ke-quality { background: var(--ke-stage); color: var(--ke-muted); }
.ke-status { background: var(--ke-stage); color: var(--ke-muted); overflow-wrap: anywhere; }
.ke-status.ke-error { background: var(--error-surface); color: var(--error-ink); }
.ke-next-step { grid-area: actions; align-self: start; }

.ke-review { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); grid-template-areas: 'product .' 'product text' 'product actions' 'product .'; grid-template-rows: 1fr auto auto 1fr; gap: 1rem clamp(1.15rem,5vw,4.3rem); align-items: end; margin-top: 1.4rem; padding-top: 1.55rem; border-top: 1px solid var(--ke-line); }
.ke-review-heading { grid-area: text; }
.ke-review-heading .ke-review-summary { color: var(--ke-ink); font-weight: 760; }
.ke-review-visual { grid-area: product; min-width: 0; align-self: stretch; display: grid; place-items: center; background: var(--ke-stage); border-radius: 18px; padding: clamp(1rem, 3.5vw, 2.45rem); overflow: hidden; }
.ke-fridge-list { display: grid; width: 100%; min-width: 0; justify-items: center; padding-bottom: .3rem; }
.ke-fridge { position: relative; isolation: isolate; width: min(100%, 420px); padding: clamp(2.5rem, 5.8vw, 3.9rem) 9% clamp(1.4rem, 3.7vw, 2.6rem); border-radius: 17px; border: 1px solid #ceced3; background: var(--fridge-face, #e8e8eb); box-shadow: 3px 5px 0 #d1d1d6, 8px 12px 22px #1d1d1f1e; }
.ke-fridge-line { position: absolute; left: 0; top: clamp(1.55rem, 4.1vw, 2.65rem); width: 100%; height: 2px; background: #c8c8ce; }
.ke-fridge-handle { position: absolute; right: 4.15%; top: clamp(2.6rem, 6.3vw, 4.15rem); width: 2.25%; height: min(28%, 74px); border-radius: 999px; background: #b1b1b8; box-shadow: 2px 2px 2px #1d1d1f32; }
.ke-fridge-magnets { display: grid; grid-template-columns: repeat(var(--ke-columns, 4), minmax(0, 1fr)); gap: clamp(.33rem, 1.12vw, .65rem); }
.ke-fridge-magnets button { position: relative; display: block; min-width: 0; width: 100%; aspect-ratio: 1; border: 0; padding: 0; transform: rotate(var(--ke-tilt)); transition: transform .2s ease; }
.ke-fridge-magnets button:nth-child(4n+1) { --ke-tilt: -4deg; }
.ke-fridge-magnets button:nth-child(4n+2) { --ke-tilt: 3deg; }
.ke-fridge-magnets button:nth-child(4n+3) { --ke-tilt: 2deg; }
.ke-fridge-magnets button:nth-child(4n+4) { --ke-tilt: -3deg; }
.ke-fridge-magnets button:hover { transform: rotate(0); z-index: 1; }
.ke-fridge-magnets button canvas { display: block; width: 100%; }
.ke-fridge-magnets .ke-magnet-rendered { background: transparent; box-shadow: none; }
.ke-fridge-magnets .ke-magnet-rendered::after { display: none; }
.ke-fridge-magnets button:not(.ke-magnet-rendered) { box-shadow: none; filter: url(#magnet-shadow-door); }
.ke-fridge-magnets .ke-magnet-rendered .ke-magnet-render { position: absolute; inset: -5%; width: 110%; height: 110%; max-width: none; pointer-events: none; filter: url(#magnet-shadow-door); }
.ke-review-actions { grid-area: actions; display: flex; flex-direction: column; align-items: center; gap: .2rem; align-self: start; }
.ke-next-step .ke-order-status, .ke-review-actions .ke-order-status { color: var(--ke-ink); font-size: .93rem; font-weight: 730; line-height: 1.35; text-align: center; margin-top: .67rem !important; }
.ke-review-actions .ke-order-status { margin-bottom: .18rem !important; }
.ke-review-availability { color: var(--ke-muted); font-size: .9rem; line-height: 1.45; text-align: center; }
.ke-dock { display: none; }

@media (min-width: 850px) {
  .ke-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-areas: 'summary summary' 'packs uploads'; align-items: end; gap: .9rem 1.15rem; }
  .ke-summary { grid-area: summary; }
  .ke-pack-control { grid-area: packs; margin-top: 0; }
  .ke-upload-row { grid-area: uploads; margin-top: 0; }
}

@media (max-width: 680px) {
  .ke-price { display: none; }
  .ke-pack-control { width: 100%; margin-top: .85rem; }
  .ke-pack-buttons { grid-template-columns: 3.05rem minmax(0, 1fr) 3.05rem; }
  .ke-pack-buttons button { min-height: 44px; }
  .ke-upload-row { align-items: start; margin-top: .75rem; }
  .ke-actions { gap: .18rem .6rem; }
  .ke-actions :is(.ke-upload, .ke-text-button) { min-height: 43px; }
  .ke-actions .ke-upload { padding-inline: .72rem; }
  .ke-workspace { grid-template-columns: minmax(0,1fr); grid-template-areas: 'stage' 'packs' 'slots'; grid-template-rows: auto; gap: 1.05rem; }
  .ke-workspace-empty { grid-template-areas: 'packs' 'slots'; }
  .ke-selection, .ke-pack-mobile { width: min(100%, 29rem); justify-self: center; }
  .ke-pack-mobile { grid-area: packs; display: block; }
  .ke-pack-mobile .ke-pack-control { margin-top: 0; }
  .ke-photos { gap: .46rem; max-height: none; overflow: visible; }
  .ke-photo-card .ke-stepper { grid-template-columns: minmax(24px, 1fr) minmax(0, auto) minmax(24px, 1fr); margin-top: .25rem; }
  .ke-photo-card .ke-stepper button { min-height: 44px; }
  .ke-photo-card .ke-stepper button svg { width: 14px; height: 14px; }
  .ke-photo-card .ke-stepper output { min-width: 0; padding: 0; font-size: clamp(.65rem, 3.2vw, .81rem); letter-spacing: -.02em; }
  .ke-visual { --ke-dimension-rail: 1.23rem; --ke-dimension-gap: .28rem; }
  .ke-dimension { font-size: .69rem; }
  .ke-zoom input { min-height: 36px; }
  .ke-file-actions { flex-wrap: wrap; max-width: 100%; gap: .4rem; }
  .ke-photo-info button { min-height: 44px; }
  .ke-review { grid-template-columns: minmax(0,1fr); grid-template-areas: 'text' 'product' 'actions'; grid-template-rows: auto auto auto; gap: .9rem; }
  .ke-fridge { width: min(100%, 325px); padding-inline: 9.5%; }
  .ke-next-step, .ke-review-actions :is([data-ke=checkout], .ke-order-status, [data-ke=checkout-status]), .ke-editor > .ke-upgrade { display: none; }
  .ke-dock {
    position: sticky;
    z-index: 8;
    bottom: 0;
    display: grid;
    gap: .38rem;
    margin: 1.18rem calc(-1 * var(--ke-dock-gutter)) 0;
    padding: .58rem var(--ke-dock-gutter) calc(.58rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ke-line);
    background: var(--ke-surface);
    box-shadow: 0 -5px 18px #1d1d1f0b;
  }
  .ke-dock-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .62rem; }
  .ke-dock-upgrade { margin-top: 0; min-height: auto; padding: 0 .55rem 0 .65rem; gap: .36rem; }
  .ke-dock-upgrade p { font-size: .74rem; }
  .ke-dock-upgrade .ke-text-button { flex: none; min-height: 44px; font-size: .71rem !important; }
  .ke-dock .ke-status { margin-top: 0 !important; }
  .ke-dock-price { color: var(--ke-ink); font-weight: 790; font-size: clamp(.98rem, 4.4vw, 1.22rem); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ke-dock-cta { min-width: 0; min-height: 45px; width: 100%; padding-inline: .52rem; }
  .ke-dock-cta svg { flex: none; width: 1.02rem; }
  .ke-dock .ke-dock-status { color: var(--ke-muted); text-align: center; font-size: .78rem; font-weight: 740; line-height: 1.35; }
  .ke-editor :is(.ke-visual, .ke-stage-top h4, .ke-frame, .ke-zoom, .ke-file-actions button, .ke-stepper button, .ke-slot, .ke-fridge-list, .ke-review-heading, .ke-pack-buttons button) { scroll-margin-bottom: calc(var(--ke-dock-height, calc(6rem + env(safe-area-inset-bottom, 0px))) + .85rem); }
}
@media (max-width: 375px) {
  .ke-price p { max-width: 11ch; margin-left: auto !important; }
  .ke-product-title { gap: .12rem .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ke-pan-hint svg { animation: none; }
  .ke-fridge-magnets button, .ke-primary, .ke-secondary, .ke-text-button, .ke-pack-buttons button { transition: none; }
}