/* The resizer: a stage with the print on it, a settings panel, and the result screen. */

.editor { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 960px) {
  .page-app { height: 100dvh; overflow: hidden; }
  .editor { grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); }
}

/* Stage */
.stage {
  position: relative; display: grid; place-items: center; min-height: 56vh;
  padding: var(--s-7) var(--gutter) var(--s-6);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
  background-blend-mode: normal;
  overflow: hidden;
}
.stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 45%, var(--bg) 35%, transparent 100%); pointer-events: none; }
.stage > * { position: relative; }
@media (min-width: 960px) { .stage { min-height: 0; } }
[data-state='empty'] .stage { place-items: center; }

/* Empty state */
.drop {
  width: min(620px, 100%); padding: var(--s-7) var(--s-5) var(--s-5);
  border: 1.5px dashed var(--ink-500); border-radius: var(--r-lg); background: var(--surface);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.drop.is-over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); transform: scale(1.01); }
.drop__step { margin-bottom: var(--s-3); }
.drop__title { margin: 0 0 var(--s-3); font: 600 var(--fs-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.drop__hint { margin: 0 auto var(--s-5); max-width: 36ch; color: var(--text-muted); }
.drop__pick { cursor: pointer; }
.drop__pick:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.samples { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.samples__row { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.sample {
  width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-sunk);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.sample img { width: 100%; height: 100%; object-fit: cover; }
.sample:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ink-900); }
.sample:disabled { opacity: .5; cursor: progress; }
.drop__private { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: var(--s-5) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.drop__private svg { width: 14px; height: 14px; }

/* Loading a photo */
.loading { display: grid; gap: var(--s-3); justify-items: center; }
.loading__frame { width: min(360px, 70vw); aspect-ratio: 4 / 5; border-radius: var(--r-print); }

/* The print: canvas with crop marks and dimension labels */
.print { margin: 0; display: grid; place-items: center; max-width: 100%; max-height: 100%; }
.print__sheet { position: relative; padding: 22px; }
.print__sheet::before, .print__sheet::after {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  --m: 12px; --c: var(--ink-900);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--m) 1.5px, linear-gradient(var(--c), var(--c)) top left / 1.5px var(--m),
    linear-gradient(var(--c), var(--c)) top right / var(--m) 1.5px, linear-gradient(var(--c), var(--c)) top right / 1.5px var(--m),
    linear-gradient(var(--c), var(--c)) bottom left / var(--m) 1.5px, linear-gradient(var(--c), var(--c)) bottom left / 1.5px var(--m),
    linear-gradient(var(--c), var(--c)) bottom right / var(--m) 1.5px, linear-gradient(var(--c), var(--c)) bottom right / 1.5px var(--m);
  background-repeat: no-repeat;
}
.print__sheet::after { display: none; }
#out {
  width: auto; height: auto; max-width: min(100%, 760px);
  max-height: calc(56vh - 120px); border-radius: var(--r-print); box-shadow: var(--sh-pop);
  background: var(--checker); /* shows through a clear cutout */
}
@media (min-width: 960px) { #out { max-height: calc(100dvh - 200px); max-width: 100%; } }
.print__dim { position: absolute; font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: .04em; white-space: nowrap; }
.print__dim--w { top: -4px; left: 50%; transform: translateX(-50%); }
.print__dim--h { right: -6px; top: 50%; transform: translate(50%, -50%) rotate(90deg); }
.print.is-updating #out { opacity: .85; transition: opacity var(--t-fast); }

/* AI progress over the print */
.ai-veil {
  position: absolute; inset: 22px; display: grid; place-content: center; gap: var(--s-3); padding: var(--s-5);
  background: color-mix(in srgb, var(--ink-900) 62%, transparent); border-radius: var(--r-print);
  color: var(--text-inverse); text-align: center;
}
.ai-veil .label { color: var(--text-inverse); }
.ai-veil .meter { width: min(220px, 60vw); background: rgba(255, 255, 255, .2); }
.meter { height: 4px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--accent-fill); transition: width var(--t-base) var(--ease-out); }
.meter.is-indeterminate i { width: 35%; animation: slide 1.1s var(--ease-in-out) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

.stage__error { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: 3; width: max-content; max-width: calc(100% - 2 * var(--gutter)); }
.stage__close { position: absolute; top: var(--s-3); left: var(--gutter); z-index: 2; background: var(--surface); border: 1px solid var(--line); }

/* Panel */
.panel { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); background: var(--surface); }
.panel:focus { outline: none; }
@media (min-width: 960px) { .panel { border-top: 0; border-left: 1px solid var(--line); } }
.recipe-note { margin: var(--s-4) var(--s-4) 0; }

.tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); position: sticky; top: 57px; z-index: 5; background: var(--surface); }
@media (min-width: 960px) { .tabs { position: static; } }
.tab {
  display: grid; gap: 2px; justify-items: center; padding: var(--s-3) var(--s-1) var(--s-3);
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 600; transition: color var(--t-fast), border-color var(--t-fast);
}
.tab .mono { font-size: var(--fs-2xs); font-weight: 500; }
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--text); border-bottom-color: transparent; background: var(--accent-fill) bottom / 100% 2px no-repeat; }
.tab:focus-visible { outline-offset: -4px; }

.panes { flex: 1; min-height: 0; overflow: auto; }
.pane { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5) var(--s-4) var(--s-6); }
.pane:focus-visible { outline-offset: -3px; }
@media (min-width: 960px) { .pane { padding: var(--s-5); } }

/* Size */
.custom { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: var(--s-2); align-items: end; }
.custom__f { display: grid; gap: var(--s-1); min-width: 0; }
.custom__x { padding-bottom: 10px; color: var(--text-muted); }
.find .input { background: var(--surface-sunk); border-color: transparent; }
.group { display: grid; gap: var(--s-2); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); }
.tile {
  display: grid; grid-template-rows: 40px auto auto; justify-items: start; gap: 2px; padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.tile:hover:not(:disabled) { border-color: var(--ink-900); }
.tile[aria-pressed='true'] { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); background: var(--paper-100); }
.tile[aria-pressed='true'] .tile__glyph i { background: var(--accent); border-color: var(--accent); }
.tile:disabled { cursor: not-allowed; color: var(--text-disabled); }
.tile:disabled .tile__glyph i { border-color: var(--paper-300); }
.tile__glyph { display: grid; place-items: center; width: 32px; height: 32px; align-self: center; }
.tile__glyph i { display: block; border: 1.5px solid var(--ink-900); border-radius: 2px; transition: background var(--t-fast); }
.tile__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.tile__size { font: 500 var(--fs-2xs)/1.2 var(--font-mono); color: var(--text-muted); }

/* Frame */
.modes { display: grid; gap: var(--s-2); }
.mode {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); align-items: center; padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mode b { display: block; font-size: var(--fs-md); }
.mode small { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.mode:hover { border-color: var(--ink-900); }
.mode[aria-pressed='true'] { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.mode__glyph { position: relative; width: 44px; height: 44px; border: 1.5px solid var(--ink-900); border-radius: 3px; overflow: hidden; background: var(--paper-200); }
.mode__glyph i { position: absolute; border-radius: 2px; background: var(--ink-500); }
.mode__glyph--fill i { inset: -8px -16px; }
.mode__glyph--fit i { left: 0; right: 0; top: 11px; bottom: 11px; }
.mode[aria-pressed='true'] .mode__glyph i { background: var(--accent); }

.ai { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--paper-100); border: 1px solid var(--line); }
.ai__head { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.ai__head b { display: block; margin-bottom: 2px; }
.ai__badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--ink-900); color: var(--tm-cyan-dark); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; }
.ai__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ai[data-ai='done'] .ai__badge { background: var(--accent-fill); color: #FFFFFF; }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); transition: opacity var(--t-base); }
.swatches.is-muted { opacity: .55; }
.swatch { display: grid; gap: var(--s-1); justify-items: center; padding: var(--s-2) 0; border: 1px solid transparent; border-radius: var(--r-md); background: none; font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; position: relative; }
.swatch i { width: 100%; max-width: 52px; aspect-ratio: 1; border-radius: var(--r-sm); border: 1px solid var(--line); }
.swatch:hover:not(:disabled) { color: var(--text); }
.swatch:hover:not(:disabled) i { border-color: var(--ink-500); }
.swatch[aria-pressed='true'] { color: var(--text); font-weight: 600; }
.swatch[aria-pressed='true'] i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-900); }
.swatch:disabled { cursor: not-allowed; opacity: .4; }
.swatch--blur i { background: radial-gradient(circle at 30% 30%, #d7b9a1, #6c7b88 60%, #2c2a33); filter: blur(.4px); }
.swatch--clear i { background: repeating-conic-gradient(#D9DCE8 0 25%, #FFFFFF 0 50%) 0 0 / 10px 10px; }
.swatch--pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.swatch--pick i { background: conic-gradient(#e8552b, #e8c12b, #5fae6e, #3d8bd8, #9b5bd6, #e8552b); }
.swatch--pick:focus-within i { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Look */
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.look { display: grid; gap: var(--s-1); padding: 0; border: 0; background: none; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.look canvas { width: 100%; aspect-ratio: 1; border-radius: var(--r-sm); border: 2px solid transparent; transition: border-color var(--t-fast); }
.look:hover canvas { border-color: var(--ink-500); }
.look[aria-pressed='true'] { color: var(--text); font-weight: 600; }
.look[aria-pressed='true'] canvas { border-color: var(--ink-900); }
.slider { display: grid; gap: var(--s-1); }
.slider__top { display: flex; justify-content: space-between; align-items: baseline; }
.slider output { font-size: var(--fs-sm); }
.slider.is-off { opacity: .45; }

/* File */
.filename { display: flex; align-items: center; gap: var(--s-2); }
.filename .input { flex: 1; min-width: 0; }
.filename__ext { color: var(--text-muted); font-size: var(--fs-sm); }
.chip--input { padding-right: var(--s-3); }
.chip--input input { width: 52px; border: 0; background: none; padding: 0; font-size: var(--fs-xs); }
.chip--input input:focus { outline: none; }
.chip--input:focus-within { border-color: var(--ink-900); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.chip--input.is-on { background: var(--ink-900); color: var(--text-inverse); border-color: var(--ink-900); }

.multi { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.multi summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; min-height: 32px; }
.multi summary::-webkit-details-marker { display: none; }
.multi summary::after { content: '+'; font: 500 var(--fs-lg)/1 var(--font-mono); }
.multi[open] summary::after { content: '−'; }
.multi__count { margin-left: auto; margin-right: var(--s-3); font-size: var(--fs-xs); color: var(--accent-text); }
.multi[open] > * + * { margin-top: var(--s-3); }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s-3); max-height: 260px; overflow: auto; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.picks__group { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: var(--s-2) 0 0; font: 500 var(--fs-2xs)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.picks__all { border: 0; background: none; padding: 2px 4px; font: inherit; text-decoration: underline; color: var(--text); }
.pick { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; font-size: var(--fs-sm); cursor: pointer; }
.pick input { accent-color: var(--ink-900); width: 16px; height: 16px; }
.pick small { margin-left: auto; font: 500 var(--fs-2xs)/1 var(--font-mono); color: var(--text-muted); }

/* Dock: always-visible status and the main action */
.dock { position: sticky; bottom: 0; z-index: 6; display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
@media (min-width: 960px) { .dock { padding: var(--s-4) var(--s-5); } }
.dock__status { margin: 0; min-height: 2.6em; font-size: var(--fs-2xs); line-height: 1.3; color: var(--text-muted); letter-spacing: .02em; }
.dock__status b { color: var(--text); font-weight: 600; }

/* Result: the finished print on a dark light-table */
.result {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: radial-gradient(90% 70% at 35% 40%, #141A3D 0%, var(--table) 70%); color: var(--text-inverse);
  overflow: auto; animation: fade var(--t-slow) var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }
.result__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--gutter); }
.result__step { color: var(--text-inverse-muted); }
.result__body { flex: 1; display: grid; gap: var(--s-6); padding: var(--s-3) var(--gutter) var(--s-7); align-items: center; }
@media (min-width: 960px) { .result__body { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-8); padding-bottom: var(--s-6); } }
.result__table { display: grid; place-items: center; min-height: 40vh; }
.result__print { position: relative; padding: clamp(10px, 2vw, 18px); background: #fff; border-radius: var(--r-print); box-shadow: var(--sh-print); transform: rotate(-1.2deg); animation: drop var(--t-slow) var(--ease-out); }
@keyframes drop { from { transform: translateY(24px) rotate(-3deg); opacity: 0; } }
.result__print img { max-width: min(100%, 720px); max-height: 52vh; width: auto; height: auto; animation: develop var(--t-develop) var(--ease-out) both; animation-delay: 120ms; background: var(--checker); }
@media (min-width: 960px) { .result__print img { max-height: calc(100dvh - 200px); } }
@keyframes develop { from { filter: brightness(1.9) contrast(.4) saturate(0); } }
.result__kicker { color: var(--tm-cyan-dark); }
.result__title { margin: var(--s-2) 0 var(--s-5); font: 600 var(--fs-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-5); padding: var(--s-4) 0; border-block: 1px solid var(--night-line); font-size: var(--fs-sm); }
.specs dt { font: 500 var(--fs-2xs)/1.9 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-inverse-muted); }
.specs dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }
.delta { margin-bottom: var(--s-5); }
.delta__row { display: flex; justify-content: space-between; font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--text-inverse-muted); margin-bottom: var(--s-2); }
.delta__row b { color: var(--text-inverse); font-size: var(--fs-xl); font-weight: 500; }
.delta__bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--night-line); overflow: hidden; }
.delta__bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent-fill); border-radius: var(--r-pill); transform-origin: left; animation: grow var(--t-develop) var(--ease-out) both; animation-delay: 300ms; }
@keyframes grow { from { transform: scaleX(0); } }
.result__warn { margin-bottom: var(--s-4); }
.result__actions { display: grid; gap: var(--s-2); }
.result__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.result__note { margin: 0; min-height: 1.5em; font-size: var(--fs-sm); color: var(--text-inverse-muted); }
.result__note a { color: var(--text-inverse); }
.again { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.again .label { color: var(--text-inverse-muted); }
.again__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.again__row .chip { background: transparent; border-color: var(--night-line-2); color: var(--text-inverse); }
.again__row .chip:hover { border-color: var(--text-inverse); }
.result :focus-visible { outline-color: var(--accent); }
@media (max-width: 959px) { .page-app { --toast-lift: 132px; } }
.result .toast { --toast-lift: 0px; }
/* Compact tiles: glyph beside the name, two to a row */
#presets { display: grid; gap: var(--s-5); }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-3); row-gap: 2px; align-items: center; padding: var(--s-2) var(--s-3); min-height: 56px; }
.tile__glyph { grid-row: 1 / 3; }
.tile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tile__size { white-space: nowrap; }

/* Crop frame: the whole photo with a movable frame over it; outside the frame is dimmed */
.crop-open { justify-self: start; }
.crop { position: absolute; inset: var(--s-7) var(--gutter) 96px; overflow: hidden; touch-action: none; }
.crop__photo { position: absolute; display: block; border-radius: var(--r-print); }
.crop__box {
  position: absolute; cursor: move; touch-action: none;
  box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 9999px rgba(11, 13, 31, .62);
  background:
    linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .55) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .55) 0 calc(66.66% + .5px), transparent 0),
    linear-gradient(transparent calc(33.33% - .5px), rgba(255, 255, 255, .55) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .55) 0 calc(66.66% + .5px), transparent 0);
}
.crop__box:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.crop__box.is-dragging { cursor: grabbing; }
.crop__corner { position: absolute; width: 32px; height: 32px; }
.crop__corner::before { content: ''; position: absolute; width: 16px; height: 16px; border: 0 solid #FFFFFF; }
.crop__corner[data-corner="nw"] { left: -16px; top: -16px; cursor: nwse-resize; }
.crop__corner[data-corner="ne"] { right: -16px; top: -16px; cursor: nesw-resize; }
.crop__corner[data-corner="sw"] { left: -16px; bottom: -16px; cursor: nesw-resize; }
.crop__corner[data-corner="se"] { right: -16px; bottom: -16px; cursor: nwse-resize; }
.crop__corner[data-corner="nw"]::before { left: 13px; top: 13px; border-width: 3px 0 0 3px; }
.crop__corner[data-corner="ne"]::before { right: 13px; top: 13px; border-width: 3px 3px 0 0; }
.crop__corner[data-corner="sw"]::before { left: 13px; bottom: 13px; border-width: 0 0 3px 3px; }
.crop__corner[data-corner="se"]::before { right: 13px; bottom: 13px; border-width: 0 3px 3px 0; }
.crop-bar {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-5); z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-pop);
}
.crop-bar__help { margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); }
.crop-bar__actions { display: flex; gap: var(--s-2); flex: none; }
[data-cropping] .stage__close { display: none; }
@media (max-width: 959px) {
  .crop { inset: var(--s-4) var(--gutter) 120px; }
  .crop-bar { flex-wrap: wrap; }
}
.drop__batch { margin: var(--s-5) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* AI tab */
.ai-undo { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; justify-content: space-between; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.ai-undo .hint { flex: 1 1 180px; }
.tool .ai__badge { font-size: var(--fs-xs); }
.tool.is-done .ai__badge, .tool.is-busy .ai__badge { background: var(--accent-fill); color: #FFFFFF; }
.ai-prompt { min-height: 64px; padding: var(--s-2) var(--s-3); resize: vertical; line-height: 1.4; font-size: var(--fs-sm); }
.swap-pick { cursor: pointer; background: var(--surface); }
.swap-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.swap-pick span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-note { margin: 0; }
.tab .mono { letter-spacing: .02em; }
@media (max-width: 420px) { .tab { font-size: var(--fs-xs); } }

/* Eraser: paint over the photo; the mask shows in safelight-free spectrum violet */
.brush { position: absolute; inset: var(--s-7) var(--gutter) 96px; display: grid; place-items: center; touch-action: none; }
.brush__photo, .brush__mask { grid-area: 1 / 1; border-radius: var(--r-print); }
.brush__photo { box-shadow: var(--sh-pop); }
.brush__mask { cursor: crosshair; opacity: .6; }
.brush-bar { flex-wrap: wrap; }
.brush-bar__size { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 160px; }
.brush-bar__size input { max-width: 160px; accent-color: var(--accent); }
[data-erasing] .stage__close { display: none; }
@media (max-width: 959px) { .brush { inset: var(--s-4) var(--gutter) 150px; } }

/* SVG: the traced vector shown over the frame */
.vector { display: grid; gap: var(--s-2); }
.seg.is-muted button[aria-pressed='false'] { opacity: .7; }

/* Vectorize: an option you switch on, with a guide to what traces well */
.vec-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.vec-card__state { font-size: var(--fs-sm); font-weight: 600; }
.vec-card__info { margin-left: auto; font-size: var(--fs-sm); }
.vec-card__tag { margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; color: var(--accent-text); background: var(--accent-soft); }
.vec-card.is-on .ai__badge { background: var(--accent-fill); color: #FFFFFF; }
.switch {
  position: relative; width: 44px; height: 26px; flex: none; border: 0; padding: 0; border-radius: var(--r-pill);
  background: var(--paper-300); cursor: pointer; transition: background var(--t-fast);
}
.switch__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: var(--sh-raise); transition: transform var(--t-fast) var(--ease-out);
}
.switch[aria-checked='true'] { background: var(--accent-fill); }
.switch[aria-checked='true'] .switch__knob { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }

.vec-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0;
  border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--sh-pop);
}
.vec-dialog::backdrop { background: rgba(3, 3, 10, .62); backdrop-filter: blur(4px); }
.vec-dialog[open] { animation: vecIn var(--t-base) var(--ease-out); }
@keyframes vecIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.vec-dialog__inner { position: relative; display: grid; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); }
.vec-dialog__x { position: absolute; top: var(--s-3); right: var(--s-3); }
.vec-dialog__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.01em; }
.vec-dialog__lede { margin: 0; color: var(--text-muted); }
.vec-dialog__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.vec-dialog__col { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper-100); }
.vec-dialog__head { margin: 0 0 var(--s-2); font-weight: 700; font-size: var(--fs-sm); }
.vec-dialog__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--fs-sm); }
.vec-dialog__col li { position: relative; padding-left: 22px; }
.vec-dialog__col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.vec-dialog__col--good li::before { content: '✓'; color: var(--accent-text); }
.vec-dialog__col--poor li::before { content: '–'; color: var(--text-muted); }
.vec-dialog__fit { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--accent-soft); font-size: var(--fs-sm); }
.vec-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .vec-dialog[open] { animation: none; } }
.vec-view {
  position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px);
  border-radius: var(--r-print); background: var(--checker); pointer-events: none;
}
.vec-tag {
  position: absolute; left: 32px; top: 32px; padding: 3px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); letter-spacing: .04em; color: #fff; background: rgba(11, 13, 31, .72);
  backdrop-filter: blur(6px); pointer-events: none;
}

/* Plus: the generative tools' credits */
.gen-plan { display: grid; gap: var(--s-2); justify-items: start; }
.gen-plan .meter { width: 100%; }
.gen-plan__top { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); justify-content: space-between; width: 100%; font-size: var(--fs-sm); }

/* Tyeke's Media credit, under the main button */
.made-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: .01em; }
.made-mini__by { display: flex; align-items: center; gap: var(--s-2); color: inherit; text-decoration: none; }
.made-mini__legal { display: flex; gap: var(--s-3); }
.made-mini__legal a { color: var(--text-muted); }
.made-mini b { color: var(--text); font-weight: 600; }
.made-mini__chip { display: inline-flex; padding: 2px 6px; border-radius: var(--r-sm); background: var(--night-2); }
.made-mini__chip img { width: 40px; height: auto; display: block; }
.made-mini__by:hover b { color: var(--tm-cyan-dark); }
.made-mini__by:focus-visible { outline: 2px solid var(--tm-cyan-dark); outline-offset: 3px; border-radius: var(--r-sm); }

/* Face swap consent, and "Report this result" */
.swap-consent { margin: var(--s-1) 0 var(--s-2); color: var(--text-muted); }
.ai-report { margin: var(--s-2) 0 0; }
.report-dialog__reasons { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; }