/* Dark is the default; theme.js sets data-theme="light" when chosen in the Managed Hub settings. */
:root {
  --bg: #0f1115; --panel: #1a1d23; --input: #14171c; --text: #f5f6f8; --muted: #9aa1ad; --line: #2e333c;
  --accent: #5b8cff; --accent-soft: rgba(91,140,255,.14); --warn-bg: rgba(255,176,32,.12); --warn: #ffc65c;
  --tip-bg: rgba(91,140,255,.12); --tip-text: #b9cdff; --error-bg: rgba(255,90,82,.12); --error-text: #ff8a84;
  --viewer: #121418; --switch-off: #3b414c; --checker: #2a2f38; --shadow: rgba(0,0,0,.4);
  color-scheme: dark;
}
:root[data-theme=light] {
  --bg: #f4f5f7; --panel: #fff; --input: #fff; --text: #1c1f24; --muted: #6b7280; --line: #e3e5e9;
  --accent: #1f6feb; --accent-soft: #e7f0ff; --warn-bg: #fff7e0; --warn: #8a6100;
  --tip-bg: #f0f7ff; --tip-text: #24527a; --error-bg: #fde8e8; --error-text: #9b1c1c;
  --viewer: #e9ebef; --switch-off: #cfd3da; --checker: #dcdfe4; --shadow: rgba(0,0,0,.12);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
header { padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.embedded header { display: none; }
header h1 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
header h1 img { width: 26px; height: 26px; }
header span { color: var(--muted); }
.head-actions { margin-left: auto; display: flex; gap: 8px; }
.head-btn { height: 34px; min-width: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--input);
  color: var(--text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.head-btn:hover { border-color: var(--accent); }
/* The page scrolls as a whole; the preview stays in view (no scrollbars inside the panels). */
main { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; padding: 16px 20px; align-items: start; }
@media (max-width: 1050px) { main { grid-template-columns: 300px minmax(0, 1fr); gap: 12px; padding: 12px; } }
@media (max-width: 700px) { main { grid-template-columns: minmax(0, 1fr); padding: 12px; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
#controls { counter-reset: step; }
#controls section { margin-bottom: 18px; }
h2 { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
/* Step numbers count only visible sections, so hiding one never leaves a gap. */
h2 i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; display: grid; place-items: center; counter-increment: step; }
h2 i::before { content: counter(step); }

#drop { border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; cursor: pointer; color: var(--muted); transition: .15s; }
#drop.over, #drop:hover { border-color: var(--accent); background: var(--accent-soft); }
#drop.has { padding: 10px; font-size: 13px; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modes label { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; cursor: pointer; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.modes label b { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }
.modes input { display: none; }
.modes label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.modes label b em { white-space: nowrap; display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }

/* extensions that are not booked / announced features */
.locked, .soon-tile { opacity: .55; border-style: dashed !important; }
.panel-top { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.reset-all { border: 1px solid var(--line); background: var(--input); color: var(--text); border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.reset-all:hover { border-color: var(--accent); color: var(--accent); }
.handover { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.handover span { flex-basis: 100%; }
.handover button { border: 1px solid var(--accent); background: none; color: var(--accent); border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 13px; }
.handover button:hover:not(:disabled) { background: var(--accent-soft); }
.handover button:disabled { opacity: .45; cursor: default; }
.open-tile b em { color: var(--accent) !important; border-color: var(--accent) !important; }
.locked b::after { content: " 🔒"; font-size: 11px; }
.tools button.locked::after { content: " 🔒"; font-size: 11px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; max-width: min(520px, calc(100% - 32px));
  background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.toast .link { color: inherit; font-size: 14px; margin-left: 4px; font-weight: 600; }
.gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(4px); }
.gate > div { max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px; text-align: center; }
.gate h2 { justify-content: center; font-size: 19px; }
.gate p { color: var(--muted); }

.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.field input[type=number], .field select { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--text); background: var(--input); }
.field input.auto { color: var(--muted); border-style: dashed; }  /* shows the original size, not a fixed measure */
.field input[type=color] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); }
.field input[type=range] { accent-color: var(--accent); }
.val { color: var(--text); float: right; font-variant-numeric: tabular-nums; }
.scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.hint { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; line-height: 1.45; }
.tip { font-size: 12.5px; background: var(--tip-bg); color: var(--tip-text); padding: 8px 10px; border-radius: 6px; margin: 0 0 6px; }
.sub { border-left: 2px solid var(--accent-soft); padding-left: 12px; margin: 8px 0 4px; }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hidden { display: none !important; }

/* only the switch itself reacts – a click next to it must not flip it by accident */
.switch { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: 4px; pointer-events: none; }
.switch input { display: none; }
.switch span { pointer-events: auto; cursor: pointer; }
.switch span { width: 36px; height: 20px; border-radius: 10px; background: var(--switch-off); position: relative; transition: .15s; flex: none; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { left: 18px; }

.empty-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 8px 10px; }

button { font: inherit; cursor: pointer; }
.primary { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; }
.primary:disabled { opacity: .5; cursor: default; }
#downloads { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
#downloads a { padding: 9px 12px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); text-decoration: none; }
#downloads a:hover { background: var(--accent-soft); }

.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.preset { border: 1px solid var(--line); border-radius: 8px; padding: 5px; cursor: pointer; font-size: 12px; text-align: center; background: var(--input); }
.preset.active { border-color: var(--accent); background: var(--accent-soft); }
.preset .thumb { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.preset img { max-width: 100%; max-height: 100%; }
.preset b { display: block; font-size: 12.5px; }
.preset small { color: var(--muted); line-height: 1.3; display: block; }
.presets .loading { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; padding: 6px 0; }

/* Original and result side by side, sized to the window and kept in view while scrolling the settings. */
#workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; position: sticky; top: 16px; min-width: 0; }
.pane { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; }
.pane .viewer { height: clamp(300px, calc(100vh - 270px), 680px); flex: none; }
@media (max-width: 1250px) {
  #workspace { grid-template-columns: minmax(0, 1fr); }
  .pane .viewer { height: clamp(240px, calc(50vh - 110px), 480px); }
}
@media (max-width: 700px) { #workspace { position: static; } }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pane-foot { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pane-foot:empty { display: none; }
.tools { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tools button { border: 1px solid var(--line); background: var(--input); color: var(--text); border-radius: 6px; padding: 4px 9px; font-size: 13px; }
.tools button.active { border-color: var(--accent); background: var(--accent-soft); }
.tools .swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; cursor: pointer; position: relative; flex: none; }
.tools .swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tools .swatch input { position: absolute; inset: -6px; width: 40px; height: 40px; border: 0; padding: 0; cursor: pointer; }
.muted { color: var(--muted); font-size: 13px; }

.viewer { position: relative; overflow: hidden; touch-action: none; user-select: none; background: var(--viewer); }
.viewer .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.viewer .stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.viewer .stage img { display: block; pointer-events: none; image-rendering: auto; }
.viewer .zoombar { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px; z-index: 5; box-shadow: 0 4px 14px var(--shadow); }
.viewer .zoombar button { border: 0; background: none; color: var(--text); padding: 3px 8px; border-radius: 5px; font-size: 13px; }
.viewer .zoombar button:hover { background: var(--bg); }
.viewer .zoombar .pct { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.viewer .busy { position: absolute; left: 10px; top: 10px; background: rgba(28,31,36,.8); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; z-index: 5; }
.bg-checker .stage { background: repeating-conic-gradient(#fff 0 25%, #dcdfe4 0 50%) 0 0 / 16px 16px; }
.bg-white .stage { background: #fff; }
.bg-black .stage { background: #111; }
#srcViewer:not([data-tool]), .viewer[data-tool=""], .viewer.result { cursor: grab; }
.viewer.panning { cursor: grabbing !important; }
.viewer[data-tool=crop] { cursor: crosshair; }
.viewer[data-tool=wand] { cursor: cell; }
.overlay { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
/* before / after: the original covers the result left of the divider (sizes stay the same at every zoom via --s) */
.cmp-before { position: absolute; inset: 0; background: var(--viewer); clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); z-index: 1; pointer-events: none; }
.cmp-inner { position: absolute; overflow: hidden; }
.cmp-inner img { position: absolute; max-width: none; }
.cmp-divider { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 0; cursor: ew-resize; z-index: 3; }
.cmp-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1px / var(--s, 1)); width: calc(2px / var(--s, 1)); background: #fff;
  box-shadow: 0 0 0 calc(1px / var(--s, 1)) rgba(0,0,0,.25); }
.cmp-divider span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #222; display: grid; place-items: center; font-weight: 800; font-size: 15px; box-shadow: 0 2px 10px rgba(0,0,0,.3); letter-spacing: -2px; }
.cmp-label { position: absolute; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12.5px; font-weight: 600;
  pointer-events: none; z-index: 4; }
.cmp-label.left { left: 10px; } .cmp-label.right { right: 10px; }
.cmp-toggle { border: 1px solid var(--line); background: none; color: var(--text); border-radius: 6px; padding: 3px 10px; font-size: 13px; margin-right: auto; }
.cmp-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.overlay path { fill: none; stroke: #e6007e; /* cut line stays magenta: industry convention for CutContour */ stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

.crop-rect { position: absolute; outline: calc(1.5px / var(--s)) solid #fff; box-shadow: 0 0 0 99999px rgba(0,0,0,.5); cursor: move; }
.crop-rect .h { position: absolute; width: calc(14px / var(--s)); height: calc(14px / var(--s)); background: #fff; border: calc(2px / var(--s)) solid var(--accent); border-radius: calc(3px / var(--s)); }
.crop-rect .h[data-c=nw] { left: calc(-7px / var(--s)); top: calc(-7px / var(--s)); cursor: nwse-resize; }
.crop-rect .h[data-c=ne] { right: calc(-7px / var(--s)); top: calc(-7px / var(--s)); cursor: nesw-resize; }
.crop-rect .h[data-c=sw] { left: calc(-7px / var(--s)); bottom: calc(-7px / var(--s)); cursor: nesw-resize; }
.crop-rect .h[data-c=se] { right: calc(-7px / var(--s)); bottom: calc(-7px / var(--s)); cursor: nwse-resize; }
.wand-dot.keep { background: #16a34a; }
.wand-dot.drop { background: #dc2626; }
.viewer[data-tool=subject] { cursor: pointer; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 8px; }
.seg label { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; cursor: pointer; font-size: 12px; color: var(--muted); line-height: 1.3; }
.seg label b { display: block; color: var(--text); font-size: 13.5px; }
.seg input { display: none; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wand-dot { position: absolute; width: calc(14px / var(--s)); height: calc(14px / var(--s)); margin: calc(-7px / var(--s)) 0 0 calc(-7px / var(--s)); border-radius: 50%; background: var(--accent); border: calc(2px / var(--s)) solid #fff; pointer-events: none; }

.warn { background: var(--warn-bg); color: var(--warn); padding: 6px 10px; border-radius: 6px; font-size: 12.5px; width: 100%; }
.error { background: var(--error-bg); color: var(--error-text); padding: 6px 10px; border-radius: 6px; font-size: 12.5px; width: 100%; }
.link { border: 0; background: none; color: var(--accent); padding: 0; text-decoration: underline; font-size: 13px; }