.crop-page {
    flex: 1 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tool-intro {
    padding: 34px 24px 12px;
    text-align: center;
}

.tool-intro h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: 0.01em;
}

.tool-intro p {
    margin: 0;
    color: #7a5c66;
    line-height: 1.7;
}

.upload-start {
    width: min(760px, calc(100% - 32px));
    margin: 18px auto 90px;
}

.drop-zone {
    min-height: 330px;
    padding: 44px 28px;
    border: 2px dashed #e8bcc9;
    border-radius: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    transition: 0.16s ease;
}

.drop-zone:hover,
.drop-zone:focus,
.drop-zone.is-dragover {
    border-color: var(--primary);
    background: #fff5f7;
    box-shadow: 0 12px 32px rgba(159, 18, 57, 0.12);
}

.drop-zone__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffe5ec;
    color: var(--primary);
    font-size: 26px;
}

.drop-zone p { margin: 14px 0 8px; color: #7a5c66; }
.drop-zone small { color: #9a7682; line-height: 1.6; }

.tool-unavailable {
    width: min(680px, calc(100% - 32px));
    margin: 34px auto 90px;
    padding: 42px;
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.editor-layout {
    position: relative;
    width: min(1600px, 100%);
    margin: 8px auto;
    flex: 1 0 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    border: 1px solid var(--border);
    background: var(--page-bg);
}

.editor-layout::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 320px;
    background: #fff;
    border-right: 1px solid var(--border);
    pointer-events: none;
}

.options-panel,
.image-workspace { position: relative; z-index: 1; }
.options-panel__sticky {
    position: sticky;
    top: var(--header-height);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding-bottom: 22px;
}

.options-panel h2 {
    margin: 0;
    padding: 22px 20px;
    text-align: center;
    font-size: 20px;
    border-bottom: 1px solid var(--border);
}

.mode-tabs {
    display: grid;
    border-bottom: 1px solid var(--border);
}
.mode-tabs--five { grid-template-columns: repeat(5, 1fr); }
.mode-tab {
    min-height: 86px;
    border: 0;
    background: #fff;
    color: #7f8795;
    cursor: pointer;
    font-weight: 700;
    position: relative;
    padding: 8px 4px;
}
.mode-tab + .mode-tab { border-left: 1px solid var(--border); }
.mode-tab.is-active { background: #fff5f7; color: #3b1020; }
.mode-tab.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary);
}

.option-section { background: #fff; }
.option-heading {
    padding: 17px 16px 12px;
    font-size: 13px;
    font-weight: 800;
    color: #6f4955;
    border-bottom: 1px solid var(--border);
}
.option-hint {
    padding: 12px 16px 14px;
    color: #7f6670;
    font-size: 12px;
    line-height: 1.6;
    border-bottom: 1px solid var(--border);
}

.field-row {
    min-height: 58px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    background: #fff;
}
.field-row input[type="number"] {
    width: 112px; height: 40px; padding: 0 10px; text-align: right;
    border: 1px solid #d7a2b0; border-radius: 7px; outline: none;
}
.field-row input[type="number"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(159,18,57,0.14);
}
.field-row--split { justify-content: space-between; }

.ratio-input-group {
    display: inline-flex; align-items: center; gap: 6px;
}
.ratio-input-group input[type="number"] { width: 62px; }

.preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.preset-grid--shape { grid-template-columns: repeat(2, 1fr); }
.preset-list {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.preset-list--stacked { grid-template-columns: 1fr; }
.preset-button {
    min-height: 42px;
    border: 1px solid #ead3da;
    border-radius: 9px;
    background: #fff;
    color: #6a4e58;
    cursor: pointer;
    font-weight: 700;
    padding: 8px 10px;
}
.preset-button.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.option-message {
    min-height: 42px;
    padding: 12px 16px 4px;
    color: var(--danger);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
}
.option-message.is-success { color: #0f766e; }

.process-button {
    width: calc(100% - 28px);
    min-height: 60px;
    margin: 14px;
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    font-size: 17px;
}

.image-workspace {
    min-width: 0;
    padding: 20px 24px 50px;
    background: var(--page-bg);
}
.workspace-toolbar {
    min-height: 50px;
    margin-bottom: 14px;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.workspace-toolbar strong { font-size: 18px; }
.workspace-toolbar__actions { display: flex; align-items: center; gap: 10px; }
.clear-all-button {
    padding: 10px 16px; border: 1px solid #dbcbd0; border-radius: 10px; background: #fff; color: #765964;
    cursor: pointer; font-weight: 700;
}
.clear-all-button:disabled { opacity: .45; cursor: not-allowed; }
.file-count { margin-left: 10px; color: var(--muted); font-size: 13px; font-weight: 600; }

.crop-stage-panel {
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.crop-stage-panel__header {
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border);
    background: #fffafc;
}
.crop-stage-panel__header small { color: #8b7280; }

.crop-stage {
    position: relative;
    height: min(62vh, 720px);
    min-height: 360px;
    background: #9f9f9f;
    overflow: hidden;
}
.crop-image-area {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.72);
    background-color: #f4f4f4;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.05) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    box-shadow: inset 0 0 0 1px rgba(95, 95, 95, 0.16);
    pointer-events: none;
}
.crop-stage img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.image-dim-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: rgba(0,0,0,0.42);
    mask-image: radial-gradient(circle at center, transparent 0, transparent 0);
}

.crop-overlay {
    position: absolute;
    border: 2px solid #4f8dff;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
    cursor: move;
    touch-action: none;
}
.crop-overlay.is-circle { border-radius: 50%; }
.crop-overlay.is-ellipse { border-radius: 50%; }
.crop-overlay.is-rounded { border-radius: 18px; }
.crop-overlay__label {
    position: absolute; left: 0; top: -30px;
    padding: 4px 8px; border-radius: 6px;
    background: rgba(36,40,47,0.82); color: #fff; font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.crop-handle {
    position: absolute; width: 14px; height: 14px;
    border: 2px solid #4f8dff; background: #fff; border-radius: 50%;
    padding: 0;
}
.crop-handle--nw { left: -8px; top: -8px; cursor: nwse-resize; }
.crop-handle--n { left: calc(50% - 7px); top: -8px; cursor: ns-resize; }
.crop-handle--ne { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-handle--e { right: -8px; top: calc(50% - 7px); cursor: ew-resize; }
.crop-handle--se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.crop-handle--s { left: calc(50% - 7px); bottom: -8px; cursor: ns-resize; }
.crop-handle--sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.crop-handle--w { left: -8px; top: calc(50% - 7px); cursor: ew-resize; }

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 12px;
}
.image-grid--crop { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.image-card {
    position: relative; min-width: 0; overflow: hidden;
    background: #fff; border: 1px solid #e4e8ef; border-radius: 10px;
}
.image-card.is-active { box-shadow: 0 0 0 2px rgba(159, 18, 57, 0.22); border-color: #dfb5c3; }
.image-card__preview {
    position: relative; height: 235px; display: flex; align-items: center; justify-content: center; padding: 12px;
    background: #707070;
}
.crop-thumb-image-area {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.68);
    background-color: #f2f2f2;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.05) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    box-shadow: inset 0 0 0 1px rgba(95,95,95,0.12);
    pointer-events: none;
}
.image-card__preview img { display:block; max-width:100%; max-height:100%; object-fit:contain; position: relative; z-index: 1; }
.image-card__remove {
    position:absolute; top:8px; right:8px; width:30px; height:30px; border:0; border-radius:50%;
    color:#fff; background:rgba(24,31,43,.72); cursor:pointer; font-size:18px; line-height:1;
}
.image-card__remove:hover { background:#c43d3d; }
.image-card__meta { padding: 10px 11px 12px; }
.image-card__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:12px; color:#485261; }
.image-card__sizes { margin-top:8px; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; font-size:11px; }
.size-badge { padding:3px 6px; border-radius:4px; color:#fff; background:#969dac; font-weight:700; }
.size-badge--after { background: var(--primary); }
.size-arrow { color:#7f8795; }
.crop-thumb-overlay {
    position: absolute;
    border: 2px dashed #4f8dff;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.18);
    pointer-events: none;
}
.crop-thumb-overlay.is-circle,
.crop-thumb-overlay.is-ellipse { border-radius: 50%; }
.crop-thumb-overlay.is-rounded { border-radius: 16px; }
.crop-thumb-overlay__label {
    position:absolute; left:4px; top:4px; padding:2px 6px; border-radius:4px;
    background: rgba(36,40,47,0.82); color:#fff; font-size:11px; font-weight:700;
}
.image-card__action {
    margin-top: 8px; width: 100%; border: 1px solid #e6d3d8; background: #fff7f9; color: var(--primary);
    border-radius: 8px; padding: 7px 10px; cursor: pointer; font-weight: 700; font-size: 12px;
}
.image-card__action.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

.upload-progress {
    margin-bottom: 15px; padding: 11px 13px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.upload-progress__bar { height: 6px; overflow: hidden; border-radius: 999px; background: #e9eef7; }
.upload-progress__bar span { display:block; width:0; height:100%; background: var(--primary); transition: width .15s ease; }
.upload-progress__text { margin-top: 6px; color: var(--muted); font-size: 12px; }

.upload-feedback {
    width: min(760px, calc(100% - 32px)); margin: 14px auto 0; border-radius: 14px; border: 1px solid #f2b5c5;
    background: #fff7f9; color: var(--danger); padding: 14px 16px; white-space: pre-line; line-height: 1.6;
}
.upload-feedback.is-success { border-color:#99d1c8; color:#0f766e; background:#f3fbf9; }

@media (max-width: 1100px) {
    .editor-layout { display:flex; flex-direction:column; border-left:0; border-right:0; }
    .editor-layout::before { display:none; }
    .options-panel { background:#fff; border-top:1px solid var(--border); order:2; }
    .image-workspace { order:1; }
    .options-panel__sticky { position: static; max-height: none; }
}
@media (max-width: 620px) {
    .tool-intro { padding: 24px 16px 8px; }
    .tool-intro p br { display:none; }
    .drop-zone { min-height: 285px; padding: 30px 16px; }
    .primary-button--large { min-width: 230px; }
    .image-workspace { padding: 14px 10px 34px; }
    .workspace-toolbar, .crop-stage-panel__header { flex-direction:column; align-items:flex-start; }
    .workspace-toolbar__actions { width:100%; }
    .workspace-toolbar__actions .secondary-button,
    .workspace-toolbar__actions .clear-all-button { flex:1; }
    .mode-tabs--five { grid-template-columns: repeat(3, 1fr); }
    .preset-grid { grid-template-columns: repeat(2, 1fr); }
    .crop-stage { min-height: 280px; height: 56vh; }
    .image-grid--crop { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .image-card__preview { height: 160px; }
}