:root {
    --crop-space-1: 4px;
    --crop-space-2: 8px;
    --crop-space-3: 12px;
    --crop-space-4: 16px;
    --crop-space-5: 24px;
    --crop-control-text: 14px;
    --crop-meta-text: 13px;
    --crop-ruler-text: 11px;
    --crop-ruler-size: 28px;
    --crop-ruler-surface: var(--brooklyn-blue-soft);
    --crop-ruler-disabled-surface: #f7f9fa;
    --crop-ruler-disabled-ink: #b8c1cb;
    --crop-guide-color: var(--brooklyn-blue);
    --crop-guide-draft-color: var(--brooklyn-yellow);
    --crop-rule: rgba(24, 54, 95, .22);
    --crop-panel-rule: rgba(24, 54, 95, .36);
    --crop-soft-surface: rgba(255, 255, 255, .58);
    --crop-tool-rail-width: 166px;
    --crop-export-rail-width: 288px;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { min-height: 100vh; margin: 0; }
button,
input { font: inherit; }
button,
a,
input { -webkit-tap-highlight-color: transparent; }
#toolApp button:not(:disabled),
#toolApp label:has(input[type="radio"]),
#toolApp label:has(input[type="checkbox"]) { cursor: pointer; }
h1,
h2,
h3,
p,
fieldset { margin: 0; }
fieldset { min-width: 0; padding: 0; border: 0; }
[hidden] { display: none !important; }

main.tool-shell {
    margin-inline: auto;
}

.visually-hidden {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.status-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--crop-space-3);
    text-align: center;
}
.status-panel h2 { font-size: 24px; line-height: 1.35; }
.status-panel p { color: var(--brooklyn-ink-soft); }
.status-panel .button { margin-top: var(--crop-space-3); }
.status-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(24, 54, 95, .18);
    border-top-color: var(--brooklyn-blue);
    border-radius: 50%;
    animation: crop-spin .8s linear infinite;
}
@keyframes crop-spin { to { rotate: 360deg; } }

#toolApp .mode-switch {
    width: 100%;
    margin-bottom: var(--crop-space-4);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#toolApp .mode-switch button,
#toolApp .segmented-control button {
    min-width: 0;
    padding: 0 14px;
    color: var(--brooklyn-ink-soft);
    background: transparent;
    border: 0;
    font-size: var(--crop-control-text);
    font-weight: 800;
    cursor: pointer;
}
#toolApp .mode-switch button[aria-selected="true"],
#toolApp .segmented-control button[aria-selected="true"] { color: var(--brooklyn-ink); }

#toolApp .source-card {
    min-width: 0;
    margin-bottom: var(--crop-space-5);
    padding: 28px;
    transition: background-color .16s ease;
}
.source-home:empty { display: none; }
#toolApp .source-card.is-dragging { background: var(--brooklyn-blue-soft); }
.source-empty {
    min-height: 224px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--crop-space-3);
    text-align: center;
}
.source-loaded { min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; }
.source-copy { min-width: 0; }
.source-empty h2,
.source-loaded h2 { color: var(--brooklyn-ink); font-size: 18px; line-height: 1.4; }
.source-empty p,
.source-loaded p { margin-top: var(--crop-space-1); color: var(--brooklyn-ink-soft); font-size: var(--crop-meta-text); line-height: 1.55; }
.source-loaded img {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    object-fit: cover;
    background: var(--brooklyn-paper-strong);
    border: 2px solid rgba(24, 54, 95, .3);
    border-radius: 10px;
}
.source-copy h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-upload-illustration {
    width: 78px;
    height: 66px;
    position: relative;
}
.source-image-sheet {
    width: 48px;
    height: 40px;
    position: absolute;
    display: block;
    background: var(--brooklyn-paper-strong);
    border: 2px solid var(--brooklyn-ink);
    border-radius: 9px;
}
.source-image-sheet::before {
    position: absolute;
    right: 7px;
    bottom: 7px;
    left: 7px;
    height: 15px;
    content: "";
    background: linear-gradient(135deg, transparent 42%, var(--brooklyn-blue) 43% 68%, transparent 69%), linear-gradient(45deg, var(--brooklyn-blue-soft) 0 54%, transparent 55%);
}
.source-image-sheet-back { top: 4px; left: 7px; rotate: -7deg; opacity: .65; }
.source-image-sheet-front { top: 15px; left: 18px; }
.source-upload-illustration b {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 1px;
    bottom: 2px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--brooklyn-blue);
    border: 2px solid var(--brooklyn-paper);
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
}
.source-error { margin-top: var(--crop-space-3); }
.field-error { color: #a9342e; font-size: var(--crop-meta-text); line-height: 1.5; }

/* The loaded source moves into the active export column and keeps the same width. */
.source-slot:empty { display: none; }
#toolApp .source-card.is-ready {
    width: 100%;
    height: 82px;
    min-height: 0;
    margin: 0 0 var(--crop-space-3);
    padding: 10px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(24, 54, 95, .3);
    border-radius: 12px;
    box-shadow: none;
    border-style: solid;
}
#toolApp .source-card.is-ready .source-loaded {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 5px;
    height: 60px;
    align-items: center;
}
#toolApp .source-card.is-ready .source-loaded img { width: 44px; height: 44px; align-self: center; }
#toolApp .source-card.is-ready .source-copy { min-width: 0; align-self: center; }
#toolApp .source-card.is-ready .source-loaded h2 { font-size: 14px; line-height: 18px; }
#toolApp .source-card.is-ready .source-meta { margin-top: 1px; font-size: 12px; line-height: 15px; }
#toolApp .source-card.is-ready .source-meta span { display: block; min-width: 0; }
#toolApp .source-card.is-ready .source-dimensions { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toolApp .source-card.is-ready .source-file-size { white-space: nowrap; }
#toolApp .source-card.is-ready .source-loaded .button { min-height: 40px; padding-inline: 7px; align-self: center; font-size: 13px; cursor: pointer; white-space: nowrap; }
#toolApp .source-card.is-ready .source-loaded .button:hover { background: var(--brooklyn-blue-soft); }

.split-layout {
    height: 700px;
    min-height: 700px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--crop-export-rail-width);
    grid-template-rows: minmax(0, 1fr) 80px;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    background: var(--brooklyn-paper);
    border: 2px solid var(--brooklyn-ink);
    border-radius: var(--brooklyn-radius);
    box-shadow: var(--brooklyn-shadow);
}
#toolApp .split-workspace {
    min-width: 0;
    min-height: 0;
    height: 100%;
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: var(--crop-tool-rail-width) minmax(0, 1fr);
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.split-tool-rail {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255, 250, 240, .72);
    border-right: 1px solid var(--crop-panel-rule);
}
.split-controls { padding: 16px 14px; display: grid; gap: 16px; }
.orientation-control { min-width: 0; }
.orientation-control h3 {
    margin-bottom: 8px;
    color: var(--brooklyn-ink);
    font-size: 15px;
    line-height: 1.4;
}
#toolApp .orientation-tabs[data-sliding-tabs] {
    height: 42px;
    min-height: 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#toolApp .orientation-tabs button {
    min-width: 0;
    min-height: 40px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: var(--brooklyn-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
}
#toolApp .orientation-tabs button[aria-selected="true"] {
    color: var(--brooklyn-blue-dark);
    background: transparent;
    border: 0;
}
.clear-guides-button { width: 100%; min-height: 40px; margin-top: 8px; }
.inline-control { min-width: 0; display: grid; gap: 7px; }
.inline-control label { color: var(--brooklyn-ink-soft); font-size: 13px; font-weight: 800; line-height: 1.4; }
.control-action-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.unit-input { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.unit-input span { color: var(--brooklyn-ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.inline-control input { width: 100%; min-width: 0; min-height: 40px; padding: 0 9px; border: 1px solid rgba(24, 54, 95, .36); border-radius: 9px; }
#guideCoordinate { padding-inline: 6px; }
#guideCoordinate::placeholder { font-size: 12px; }
.inline-control .button { min-height: 40px; padding-inline: 10px; }
.split-tool-rail .history-actions,
.mask-tools .history-actions {
    margin-top: auto;
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid var(--crop-rule);
}
.split-tool-rail .history-actions .icon-text-button,
.mask-tools .history-actions .icon-text-button { height: 40px; min-height: 40px; }
.split-editor-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }

.editor-stage {
    position: relative;
    overflow: auto;
    background-color: #dfe6e8;
    background-image:
        linear-gradient(45deg, rgba(24, 54, 95, .06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(24, 54, 95, .06) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(24, 54, 95, .06) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(24, 54, 95, .06) 75%);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}
.split-stage {
    width: 100%;
    min-height: 0;
    height: 100%;
    max-height: none;
    padding: 14px;
    display: grid;
    place-items: start;
    contain: layout paint;
    scrollbar-gutter: stable both-edges;
    overscroll-behavior: contain;
}
.mask-stage {
    min-height: 620px;
    max-height: 680px;
    padding: 14px;
    display: grid;
    place-items: start;
    scrollbar-gutter: stable both-edges;
    overscroll-behavior: contain;
}
.split-image-wrapper,
.mask-image-wrapper { position: relative; flex: 0 0 auto; }
.split-image-wrapper::before,
.mask-image-wrapper::before {
    width: var(--crop-ruler-size);
    height: var(--crop-ruler-size);
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    content: "";
    background: var(--crop-ruler-surface);
    border: 1px solid rgba(24, 54, 95, .25);
}
.editor-image { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.split-image {
    position: absolute;
    top: var(--crop-ruler-size);
    left: var(--crop-ruler-size);
    background: var(--brooklyn-paper-strong);
    box-shadow: 0 0 0 1px rgba(24, 54, 95, .25);
}
.mask-image { position: absolute; top: var(--crop-ruler-size); left: var(--crop-ruler-size); }
.editor-overlay { position: absolute; touch-action: none; user-select: none; }
.split-overlay { top: var(--crop-ruler-size); left: var(--crop-ruler-size); }
.mask-overlay { top: var(--crop-ruler-size); left: var(--crop-ruler-size); }
.ruler {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    color: var(--crop-ruler-disabled-ink);
    background-color: var(--crop-ruler-disabled-surface);
    border: 1px solid rgba(24, 54, 95, .25);
    font-size: var(--crop-ruler-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: not-allowed;
    opacity: 1;
    touch-action: none;
    user-select: none;
}
.ruler.is-active { color: var(--brooklyn-ink); background-color: var(--crop-ruler-surface); opacity: 1; }
.ruler-top.is-active { cursor: ns-resize; }
.ruler-left.is-active { cursor: ew-resize; }
.ruler-top { top: 0; left: var(--crop-ruler-size); width: calc(100% - var(--crop-ruler-size)); height: var(--crop-ruler-size); }
.ruler-left { top: var(--crop-ruler-size); left: 0; width: var(--crop-ruler-size); height: calc(100% - var(--crop-ruler-size)); }
.ruler-tick,
.ruler-label { position: absolute; pointer-events: none; }
.ruler-tick { display: block; background: currentColor; opacity: .55; }
.ruler-tick.is-major { opacity: .95; }
.ruler-top .ruler-tick { bottom: 0; width: 1px; height: 7px; transform: translateX(-.5px); }
.ruler-top .ruler-tick.is-mid { height: 10px; }
.ruler-top .ruler-tick.is-major { height: 11px; }
.ruler-left .ruler-tick { right: 0; width: 7px; height: 1px; transform: translateY(-.5px); }
.ruler-left .ruler-tick.is-mid { width: 10px; }
.ruler-left .ruler-tick.is-major { width: 11px; }
.ruler-label {
    color: currentColor;
    font-size: var(--crop-ruler-text);
    line-height: 1;
    white-space: nowrap;
}
.ruler-top .ruler-label { top: 2px; transform: translateX(-50%); }
.ruler-top .ruler-label.is-origin { transform: translateX(1px); }
.ruler-left .ruler-label {
    left: 1px;
    max-width: calc(var(--crop-ruler-size) - 2px);
    padding-right: 1px;
    overflow: hidden;
    background: var(--crop-ruler-disabled-surface);
    text-align: left;
    text-overflow: clip;
    letter-spacing: -.35px;
    transform: translateY(calc(-100% - 2px));
}
.ruler-left.is-active .ruler-label { background: var(--crop-ruler-surface); }
.ruler-left .ruler-label.is-origin { transform: translateY(2px); }
.guide-visible,
.guide-draft { stroke: var(--crop-guide-color); vector-effect: non-scaling-stroke; }
.guide-draft { stroke: var(--crop-guide-draft-color); stroke-dasharray: 7 5; }
.guide-hit { stroke: transparent; cursor: ns-resize; }
.vertical-guides .guide-hit { cursor: ew-resize; }
.guide-label-bg { fill: var(--crop-guide-color); }
.guide-label { fill: #fff; font-weight: 800; pointer-events: none; }
.guide-label-bg.is-draft { fill: var(--crop-guide-draft-color); }
.guide-label.is-draft { fill: var(--brooklyn-ink); }

.editor-toolbar {
    min-height: 60px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr);
    align-items: center;
    gap: 12px;
    background: rgba(255, 250, 240, .82);
    border-bottom: 1px solid var(--crop-rule);
}
.zoom-control { font-size: var(--crop-meta-text); font-weight: 800; white-space: nowrap; }
.zoom-control output { color: var(--brooklyn-blue-dark); font-variant-numeric: tabular-nums; }
.editor-toolbar input[type="range"] { min-width: 0; }

.guide-section {
    min-height: 0;
    padding: 14px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid var(--crop-rule);
}
.section-heading,
.compact-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { font-size: 18px; line-height: 1.4; }
.compact-heading h3,
.guide-section h3 { font-size: 14px; line-height: 1.4; }
.section-heading p,
.compact-heading span,
.compact-heading p { margin-top: 2px; color: var(--brooklyn-ink-soft); font-size: 12px; line-height: 1.45; }
.guide-list {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 7px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.guide-empty { padding: 8px 0; color: var(--brooklyn-ink-soft); font-size: 12px; line-height: 1.5; }
.guide-row {
    min-width: 0;
    min-height: 62px;
    padding: 7px;
    display: grid;
    grid-template-columns: minmax(42px, 1fr) auto auto;
    align-items: center;
    gap: 5px;
    background: var(--crop-soft-surface);
    border: 1px solid var(--crop-rule);
    border-radius: 9px;
    color: var(--brooklyn-ink-soft);
    font-size: 12px;
}
.guide-row label { grid-column: 1 / -1; color: var(--brooklyn-ink); font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.guide-row input { width: 100%; min-width: 0; height: 36px; padding: 0 6px; appearance: textfield; border: 1px solid rgba(24, 54, 95, .3); border-radius: 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.guide-row input::-webkit-inner-spin-button,
.guide-row input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.guide-row .text-action { min-width: 40px; min-height: 36px; padding-inline: 5px; font-size: 12px; }

.icon-text-button,
.text-action,
.download-icon-button {
    min-height: 38px;
    padding: 0 11px;
    color: var(--brooklyn-ink);
    background: var(--brooklyn-paper-strong);
    border: 1px solid rgba(24, 54, 95, .35);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.icon-text-button:disabled,
.text-action:disabled { cursor: not-allowed; opacity: .5; }

#toolApp .split-preview {
    min-width: 0;
    height: auto;
    max-height: none;
    padding: 16px;
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--crop-panel-rule);
    border-radius: 0;
    box-shadow: none;
}
.split-preview .source-slot { min-width: 0; flex: 0 0 auto; }
.output-settings {
    min-height: 0;
    padding-bottom: 12px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--crop-rule);
}
.output-setting-title { color: var(--brooklyn-ink); font-size: 13px; font-weight: 800; white-space: nowrap; }
.output-settings > .segmented-control { min-width: 0; }
.format-tabs,
.mask-format-tabs { display: grid; }
.format-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mask-format-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.format-tabs label,
.mask-format-tabs label { min-width: 0; cursor: pointer; }
.format-tabs input,
.mask-format-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.format-tabs span,
.mask-format-tabs span { padding-inline: 3px; display: grid; place-items: center; color: var(--brooklyn-ink-soft); font-size: 12px; font-weight: 800; white-space: nowrap; }
.format-tabs input:checked + span,
.mask-format-tabs input:checked + span { color: var(--brooklyn-ink); }
.range-field { margin-top: 12px; }
.output-settings > .range-field {
    margin-top: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 58px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
}
.output-settings > .range-field .range-label-row { display: contents; }
.output-settings > .range-field .range-label-row label { grid-column: 1; grid-row: 1; white-space: nowrap; }
.output-settings > .range-field .range-label-row output { grid-column: 3; grid-row: 1; text-align: right; }
.output-settings > .range-field input[type="range"] { grid-column: 2; grid-row: 1; margin-top: 0; }
.output-settings > .background-field { grid-column: 1 / -1; }
.range-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 800; }
.range-label-row output { color: var(--brooklyn-blue-dark); font-variant-numeric: tabular-nums; }
.range-field input[type="range"] { width: 100%; margin-top: 4px; }

.slice-list-heading { min-height: 33px; padding-top: 12px; display: flex; align-items: center; flex: 0 0 auto; }
.slice-list-heading strong { color: var(--brooklyn-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.slice-list { min-height: 0; margin-top: 8px; padding-right: 6px; display: grid; align-content: start; gap: 8px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.slice-row,
.mask-result-row {
    min-width: 0;
    padding: 9px;
    display: grid;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--crop-rule);
    border-radius: 11px;
}
.slice-row { grid-template-columns: 18px 72px minmax(0, 1fr); grid-template-rows: auto auto; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
.slice-row:hover { background: rgba(230, 241, 252, .72); }
.slice-row.is-selected { background: rgba(230, 241, 252, .48); border-color: var(--crop-rule); }
.slice-row > input { grid-column: 1; grid-row: 1 / 3; }
.slice-visual { min-width: 0; grid-column: 2; grid-row: 1 / 3; align-self: center; }
.slice-row canvas { width: 72px; height: 54px; display: block; object-fit: contain; background: #fff; border: 1px solid rgba(24, 54, 95, .18); border-radius: 8px; }
.slice-estimate { margin-top: 4px; display: block; color: var(--brooklyn-ink-soft); font-size: 12px; line-height: 1.35; text-align: center; white-space: nowrap; }
.slice-row .slice-copy { grid-column: 3; grid-row: 1; align-self: end; }
.slice-row .download-icon-button { width: 100%; min-height: 40px; grid-column: 3; grid-row: 2; align-self: start; }
.slice-copy,
.mask-result-row > div { min-width: 0; }
.slice-copy strong,
.slice-copy span,
.mask-result-row strong,
.mask-result-row span { display: block; }
.slice-copy strong,
.mask-result-row strong { overflow: hidden; color: var(--brooklyn-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.slice-copy span,
.mask-result-row span { margin-top: 2px; color: var(--brooklyn-ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.download-icon-button { min-width: 52px; padding: 0 8px; }
.empty-list { margin-top: 12px; padding: 14px 10px; color: var(--brooklyn-ink-soft); background: rgba(255, 255, 255, .46); border: 1px dashed rgba(24, 54, 95, .3); border-radius: 11px; font-size: 12px; line-height: 1.55; text-align: center; }

#toolApp .split-batch-bar {
    min-width: 0;
    grid-column: 2;
    grid-row: 2;
    background: rgba(255, 250, 240, .82);
    border: 0;
    border-top: 1px solid var(--crop-rule);
    border-left: 1px solid var(--crop-panel-rule);
    border-radius: 0;
    box-shadow: none;
}
.export-batch-bar {
    height: 80px;
    min-height: 80px;
    padding: 8px 16px 14px;
    display: grid;
    grid-template-rows: 18px 40px;
    align-content: end;
    box-sizing: border-box;
}
.export-batch-bar .batch-actions { width: 100%; height: 40px; display: grid; }
.export-batch-bar .batch-actions .button { width: 100%; height: 40px; min-width: 0; min-height: 40px; }
.download-status { min-height: 20px; color: var(--brooklyn-ink-soft); font-size: 12px; line-height: 1.45; }
.export-batch-bar .download-status {
    height: 18px;
    min-height: 18px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mask mode uses the same independent mode switch and continuous workbench card. */
#toolApp .mask-layout {
    height: 700px;
    min-height: 700px;
    max-height: 700px;
    display: grid;
    grid-template-columns: var(--crop-tool-rail-width) minmax(0, 1fr) var(--crop-export-rail-width);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    background: var(--brooklyn-paper);
    border: 2px solid var(--brooklyn-ink);
    border-radius: var(--brooklyn-radius);
    box-shadow: var(--brooklyn-shadow);
}
#toolApp .mask-layout > .control-card,
#toolApp .mask-layout > .workspace-card,
#toolApp .mask-layout > .preview-card {
    min-width: 0;
    margin: 0;
    position: relative;
    top: auto;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#toolApp .mask-layout > .mask-tools {
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--crop-panel-rule);
}
.mask-controls { min-height: 0; padding: 14px; display: flex; flex-direction: column; }
.shape-options { display: grid; gap: 8px; }
.shape-options button {
    min-height: 58px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brooklyn-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.shape-options button:hover { background: rgba(255, 255, 255, .62); }
.shape-options button[aria-pressed="true"] { color: var(--brooklyn-blue-dark); background: var(--brooklyn-blue-soft); border: 2px solid var(--brooklyn-blue); }
.shape-icon { width: 24px; height: 24px; flex: 0 0 auto; display: inline-grid; place-items: center; border: 2px solid var(--brooklyn-ink); }
.shape-circle { border-radius: 50%; }
.shape-ellipse { width: 27px; height: 18px; border-radius: 50%; }
.shape-square { border-radius: 1px; }
.shape-rounded { border-radius: 7px; }
.shape-pen { border: 0; }
.shape-pen svg { width: 27px; height: 27px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shape-pen circle { fill: currentColor; stroke: none; }
.tool-hint { margin-top: 10px; color: var(--brooklyn-ink-soft); font-size: 12px; line-height: 1.5; }
.close-path-button { width: 100%; margin-top: 10px; }
.shape-options > .shape-detail {
    margin: -1px 0 2px;
    padding: 9px 10px 8px;
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--crop-rule);
    border-radius: 9px;
}
.shape-options > .shape-detail .range-label-row { font-size: 12px; }
.mask-rotation-field { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--crop-rule); }
.mask-rotation-heading { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--brooklyn-ink); font-size: 12px; font-weight: 800; }
.mask-rotation-heading > label { white-space: nowrap; }
.rotation-number { width: 76px; height: 40px; min-width: 76px; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; overflow: hidden; background: var(--brooklyn-paper-strong); border: 1px solid rgba(24, 54, 95, .36); border-radius: 9px; }
#toolApp .rotation-number input[type="number"] { width: 100%; min-width: 0; height: 38px; padding: 0 2px 0 10px; appearance: textfield; color: var(--brooklyn-ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
#toolApp .rotation-number input[type="number"]::-webkit-inner-spin-button,
#toolApp .rotation-number input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; }
.rotation-number > span { color: var(--brooklyn-ink-soft); font-size: 13px; }
#toolApp .mask-workspace {
    min-height: 0;
    height: 100%;
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: rgba(255, 255, 255, .2);
}
#toolApp .mask-workspace .mask-stage { height: 100%; min-height: 0; max-height: none; }
.mask-shade { fill: rgba(12, 26, 46, .58); pointer-events: all; }
.mask-outline { stroke: #fff; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.mask-hit { cursor: move; }
.mask-rotation-stem { stroke: #fff; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.mask-rotation-center { fill: var(--brooklyn-paper-strong); stroke: var(--brooklyn-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.mask-rotation-handle { fill: var(--brooklyn-yellow); stroke: var(--brooklyn-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: grab; }
.mask-rotation-handle:active { cursor: grabbing; }
.mask-resize-handle,
.pen-anchor { fill: var(--brooklyn-blue); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: pointer; }
.mask-resize-handle[data-resize-corner="nw"],
.mask-resize-handle[data-resize-corner="se"] { cursor: nwse-resize; }
.mask-resize-handle[data-resize-corner="ne"],
.mask-resize-handle[data-resize-corner="sw"] { cursor: nesw-resize; }
.pen-anchor.is-selected { fill: var(--brooklyn-yellow); stroke: var(--brooklyn-ink); }
.pen-control { fill: var(--brooklyn-paper-strong); stroke: var(--brooklyn-blue); stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: crosshair; }
.pen-handle-line { stroke: #fff; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.pen-delete-control { cursor: pointer; }
.pen-delete-hit { fill: transparent; pointer-events: all; }
.pen-delete-bg { fill: var(--brooklyn-red); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pen-delete-icon { fill: none; stroke: #fff; stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.mask-guide-visible,
.mask-guide-draft { stroke: var(--crop-guide-color); vector-effect: non-scaling-stroke; }
.mask-guide-draft { stroke: var(--crop-guide-draft-color); stroke-dasharray: 7 5; }
.mask-guide-hit { stroke: transparent; }
.mask-guide-group[data-guide-orientation="horizontal"] .mask-guide-hit { cursor: ns-resize; }
.mask-guide-group[data-guide-orientation="vertical"] .mask-guide-hit { cursor: ew-resize; }
.mask-guide-label-bg { fill: var(--crop-guide-color); }
.mask-guide-label { fill: #fff; font-weight: 800; pointer-events: none; }
.mask-guide-label-bg.is-draft { fill: var(--crop-guide-draft-color); }
.mask-guide-label.is-draft { fill: var(--brooklyn-ink); }

#toolApp .mask-preview {
    height: 100%;
    max-height: none;
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--crop-panel-rule);
}
#toolApp .mask-layout > .mask-preview { border-left: 1px solid var(--crop-panel-rule); }
.background-field {
    min-width: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    cursor: default;
}
.background-field-title { font-size: 13px; font-weight: 800; white-space: nowrap; }
.background-color-control { width: 140px; min-width: 0; min-height: 40px; padding: 4px 10px 4px 4px; display: flex; align-items: center; justify-self: end; gap: 8px; background: var(--brooklyn-paper-strong); border: 1px solid rgba(24, 54, 95, .3); border-radius: 9px; cursor: pointer; }
.background-field input { width: 42px; height: 32px; padding: 2px; border: 0; background: transparent; cursor: pointer; }
.background-field output { color: var(--brooklyn-ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.size-section {
    min-height: 0;
    margin-top: 12px;
    flex: 0 0 auto;
    overflow: hidden;
}
.size-section .compact-heading { margin-bottom: 9px; }
.size-options-scroll {
    width: 100%;
    padding: 6px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}
.size-options { width: max-content; min-width: 100%; display: flex; gap: 7px; }
.size-option { width: 54px; min-width: 0; min-height: 40px; position: relative; flex: 0 0 54px; cursor: pointer; }
.size-option > input { position: absolute; opacity: 0; pointer-events: none; }
.size-option > span { height: 40px; display: grid; place-items: center; background: rgba(255, 255, 255, .62); border: 1px solid rgba(24, 54, 95, .25); font-size: 12px; font-weight: 800; }
.custom-size-remove { width: 20px; height: 20px; padding: 0; position: absolute; top: -6px; right: -6px; z-index: 2; display: grid; place-items: center; color: #fff; background: var(--brooklyn-red); border: 1px solid var(--brooklyn-ink); border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; }
.custom-size-control { margin-top: 9px; }
.custom-size-control > label { display: block; margin-bottom: 6px; color: var(--brooklyn-ink-soft); font-size: 12px; font-weight: 800; }
.custom-size-control > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.custom-size-control input { min-width: 0; min-height: 40px; padding: 0 9px; border: 1px solid rgba(24, 54, 95, .32); border-radius: 9px; }
.custom-size-control .button { min-height: 40px; padding-inline: 12px; }
.size-section .field-error { margin-top: 7px; }
.mask-results-frame {
    min-height: 0;
    margin-top: 13px;
    padding: 12px 0;
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    border-top: 1px solid var(--crop-rule);
    border-bottom: 1px solid var(--crop-rule);
}
.mask-result-list {
    min-height: 0;
    margin: 0;
    padding-right: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.mask-results-frame > #maskResultEmpty {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 16px;
    display: grid;
    place-items: center;
    color: var(--brooklyn-ink-soft);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.mask-result-row { padding: 8px; position: relative; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; gap: 7px 9px; }
.mask-result-row canvas {
    width: 88px;
    height: 70px;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    object-fit: contain;
    background-color: #fff;
    background-image: linear-gradient(45deg, #e6ebee 25%, transparent 25%), linear-gradient(-45deg, #e6ebee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6ebee 75%), linear-gradient(-45deg, transparent 75%, #e6ebee 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    border: 1px solid rgba(24, 54, 95, .18);
    border-radius: 8px;
}
.mask-result-row > div { grid-column: 2; grid-row: 1; align-self: end; }
.mask-result-row strong { overflow: visible; text-overflow: clip; }
.mask-result-row .download-icon-button { width: 100%; min-width: 0; min-height: 40px; padding-inline: 5px; grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; }
.mask-batch-bar {
    width: calc(100% + 32px);
    margin-inline: -16px;
    flex: 0 0 80px;
    background: rgba(255, 250, 240, .82);
}

.tool-toast {
    max-width: min(440px, calc(100% - 32px));
    min-height: 42px;
    padding: 10px 16px;
    position: fixed;
    z-index: 1200;
    left: 50%;
    top: 50%;
    color: var(--brooklyn-ink);
    background: var(--brooklyn-paper);
    border: 2px solid var(--brooklyn-ink);
    border-radius: 12px;
    box-shadow: var(--brooklyn-shadow-small);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    translate: -50% calc(-50% + 8px);
    transition: opacity .16s ease, translate .16s ease;
}
.tool-toast.is-visible { opacity: 1; translate: -50% -50%; }

button:focus-visible,
input:focus-visible,
[role="tab"]:focus-visible,
.guide-row:focus-visible,
.slice-row:focus-visible,
.size-options-scroll:focus-visible {
    outline: 3px solid rgba(47, 127, 218, .38);
    outline-offset: 2px;
}

@media (max-width: 1080px) {
    #toolApp .mask-preview { padding-inline: 12px; }
    .mask-batch-bar { width: calc(100% + 24px); margin-inline: -12px; }
}

@media (max-width: 860px) {
    .split-layout { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); }
    #toolApp .split-workspace { height: 700px; grid-column: 1; grid-row: 1; }
    #toolApp .split-preview { height: auto; max-height: none; }
    #toolApp .split-preview { grid-column: 1; grid-row: 2; border-top: 1px solid var(--crop-rule); border-left: 0; }
    #toolApp .split-batch-bar { grid-column: 1; grid-row: 3; border-left: 0; }
    .slice-list { max-height: 460px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slice-row { grid-template-columns: 18px 76px minmax(0, 1fr); }
    .slice-row canvas { width: 76px; height: 54px; }
    #toolApp .mask-layout { height: auto; min-height: 0; max-height: none; grid-template-columns: minmax(0, 1fr); }
    #toolApp .mask-layout > .mask-tools { border-right: 0; border-bottom: 1px solid var(--crop-rule); }
    .shape-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #toolApp .mask-workspace { height: 700px; min-height: 700px; }
    #toolApp .mask-workspace .mask-stage { height: 640px; min-height: 640px; max-height: 640px; }
    .shape-options button { min-height: 64px; padding: 6px; flex-direction: column; justify-content: center; text-align: center; }
    #toolApp .mask-layout > .mask-preview { height: auto; max-height: none; border-top: 1px solid var(--crop-rule); border-left: 0; }
    .mask-tools .history-actions { margin-top: 12px; }
    .mask-results-frame { max-height: 486px; flex: none; }
    .mask-result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    #toolApp .mode-switch { width: 100%; }
    #toolApp .source-card.is-ready {
        width: 100%;
        margin: 0 0 14px;
        padding: 10px;
    }
    #toolApp .source-card.is-ready .source-loaded .button { width: 100%; }
    .source-empty { min-height: 200px; }
    .source-empty .button { width: 100%; }
    .source-upload-illustration { scale: .9; }

    #toolApp .split-workspace { min-height: 0; height: auto; grid-template-columns: minmax(0, 1fr); }
    .split-tool-rail { border-right: 0; border-bottom: 1px solid var(--crop-rule); }
    .split-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .orientation-control { grid-column: 1 / -1; }
    #toolApp .orientation-tabs[data-sliding-tabs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .equal-control,
    .coordinate-control { align-self: start; }
    .guide-section { max-height: 260px; padding-top: 0; }
    .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split-tool-rail .history-actions { margin-top: 0; }
    .split-editor-column { height: 536px; }
    .split-stage { min-height: 0; height: 100%; max-height: none; padding: 10px; }
    .editor-toolbar { padding: 10px 12px; grid-template-columns: auto minmax(0, 1fr); }
    .slice-list { grid-template-columns: minmax(0, 1fr); }
    .slice-row { grid-template-columns: 18px 72px minmax(0, 1fr); }
    .slice-row canvas { width: 72px; }
    #toolApp .mask-layout { border-radius: var(--brooklyn-radius); }
    .shape-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #toolApp .mask-workspace { height: 536px; min-height: 536px; }
    #toolApp .mask-workspace .mask-stage { height: 476px; min-height: 476px; max-height: 476px; padding: 10px; }
    .mask-result-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .status-spinner { animation-duration: .001ms; animation-iteration-count: 1; }
    #toolApp .source-card { transition: none; }
    .tool-toast { transition: none; }
}