/* ============================================================
   image-cropper.css — 全屏图片编辑页 UI V3（稳定版）
   ============================================================ */

html.img-editor-open,
body.img-editor-open {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: #000 !important;
}

.img-editor-page {
    --editor-bg: #050505;
    --editor-panel: #111113;
    --editor-card: #1b1b1e;
    --editor-text: #fff;
    --editor-sub: rgba(255,255,255,.58);
    --editor-line: rgba(255,255,255,.09);
    --editor-accent: #f2ce8b;
    --editor-accent-text: #21180c;
    --crop-left: 0px;
    --crop-right: 0px;
    --crop-top: 0px;
    --crop-bottom: 0px;

    position: fixed;
    inset: 0;
    z-index: 2147483647;
    width: 100%;
    max-width: 100vw;
    height: var(--img-editor-vh, 100dvh);
    max-height: var(--img-editor-vh, 100dvh);
    overflow: hidden;

    display: grid;
    grid-template-rows:
        calc(58px + env(safe-area-inset-top, 0px))
        minmax(0, 1fr)
        calc(118px + env(safe-area-inset-bottom, 0px));

    background: var(--editor-bg);
    color: var(--editor-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.img-editor-page *,
.img-editor-page *::before,
.img-editor-page *::after {
    box-sizing: border-box;
}

/* 顶部：绝对定位左右按钮，彻底避免完成按钮被挤出屏幕 */
.img-editor-header {
    position: relative;
    padding-top: env(safe-area-inset-top, 0px);
    background: #080809;
    border-bottom: 1px solid var(--editor-line);
    overflow: hidden;
}

.img-editor-header-inner {
    position: relative;
    width: 100%;
    height: 58px;
    min-width: 0;
}

.img-editor-title {
    position: absolute;
    left: 82px;
    right: 82px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.img-editor-header-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 38px;
    min-width: 64px;
    max-width: 76px;
    padding: 0 13px;
    border: 0;
    border-radius: 19px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.img-editor-header-btn:active {
    opacity: .72;
}

.img-editor-cancel {
    left: max(10px, env(safe-area-inset-left, 0px));
    color: #fff;
    background: #1c1c1f;
}

.img-editor-done {
    right: max(10px, env(safe-area-inset-right, 0px));
    color: var(--editor-accent-text);
    background: var(--editor-accent);
}

.img-editor-done:disabled {
    opacity: .52;
}

/* 主编辑区 */
.img-editor-main {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    background: #000;
}

.img-editor-stage-wrap,
.img-editor-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

.img-editor-stage {
    touch-action: none;
}

.img-editor-stage canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
    image-rendering: auto;
}

.img-editor-stage canvas:active {
    cursor: grabbing;
}

.img-editor-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset var(--crop-left) 0 rgba(0,0,0,.56),
        inset calc(-1 * var(--crop-right)) 0 rgba(0,0,0,.56);
}

.img-editor-shade::before,
.img-editor-shade::after {
    content: "";
    position: absolute;
    left: var(--crop-left);
    right: var(--crop-right);
    background: rgba(0,0,0,.56);
}

.img-editor-shade::before {
    top: 0;
    height: var(--crop-top);
}

.img-editor-shade::after {
    bottom: 0;
    height: var(--crop-bottom);
}

.img-editor-crop-frame {
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.96);
    box-shadow: 0 0 0 .5px rgba(0,0,0,.45);
}

.img-editor-crop-frame .third-line {
    position: absolute;
    background: rgba(255,255,255,.22);
}

.img-editor-crop-frame .v1,
.img-editor-crop-frame .v2 {
    top: 0;
    bottom: 0;
    width: 1px;
}

.img-editor-crop-frame .v1 { left: 33.333%; }
.img-editor-crop-frame .v2 { left: 66.666%; }

.img-editor-crop-frame .h1,
.img-editor-crop-frame .h2 {
    left: 0;
    right: 0;
    height: 1px;
}

.img-editor-crop-frame .h1 { top: 33.333%; }
.img-editor-crop-frame .h2 { top: 66.666%; }

.img-editor-crop-frame .corner {
    position: absolute;
    width: 20px;
    height: 20px;
}

.img-editor-crop-frame .corner::before,
.img-editor-crop-frame .corner::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
}

.img-editor-crop-frame .corner::before { width: 20px; height: 3px; }
.img-editor-crop-frame .corner::after { width: 3px; height: 20px; }

.img-editor-crop-frame .tl { left: -2px; top: -2px; }
.img-editor-crop-frame .tr { right: -2px; top: -2px; transform: rotate(90deg); }
.img-editor-crop-frame .br { right: -2px; bottom: -2px; transform: rotate(180deg); }
.img-editor-crop-frame .bl { left: -2px; bottom: -2px; transform: rotate(270deg); }

/* 底部：简洁固定，不再使用容易挤压页面的大卡片 */
.img-editor-footer {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #0b0b0c;
    border-top: 1px solid var(--editor-line);
}

.img-editor-footer-panel {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.img-editor-ratios {
    width: 100%;
    height: 88px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.img-editor-ratios::-webkit-scrollbar {
    display: none;
}

.img-editor-ratio {
    flex: 0 0 68px;
    width: 68px;
    height: 72px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--editor-card);
    color: rgba(255,255,255,.7);
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.img-editor-ratio.active {
    color: var(--editor-accent);
    border-color: rgba(242,206,139,.4);
    background: rgba(242,206,139,.12);
}

.img-editor-ratio:active {
    transform: scale(.96);
}

.ratio-icon {
    display: block;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.ratio-free { width: 25px; height: 21px; border-style: dashed; }
.ratio-square { width: 23px; height: 23px; }
.ratio-landscape { width: 30px; height: 17px; }
.ratio-portrait { width: 16px; height: 29px; }
.ratio-four-three { width: 28px; height: 21px; }
.ratio-three-four { width: 21px; height: 28px; }

.img-editor-tip {
    height: 26px;
    padding: 2px 10px 6px;
    overflow: hidden;
    color: var(--editor-sub);
    text-align: center;
    font-size: 10px;
    line-height: 18px;
    white-space: nowrap;
}

/* 小屏 */
@media (max-width: 360px) {
    .img-editor-title {
        left: 72px;
        right: 72px;
        font-size: 16px;
    }

    .img-editor-header-btn {
        min-width: 58px;
        max-width: 64px;
        padding: 0 9px;
        font-size: 13px;
    }

    .img-editor-ratio {
        flex-basis: 62px;
        width: 62px;
    }
}

/* 横屏/低高度 */
@media (max-height: 560px) {
    .img-editor-page {
        grid-template-rows:
            calc(50px + env(safe-area-inset-top, 0px))
            minmax(0, 1fr)
            calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .img-editor-header-inner {
        height: 50px;
    }

    .img-editor-ratios {
        height: 78px;
    }

    .img-editor-ratio {
        height: 62px;
    }

    .img-editor-tip {
        display: none;
    }
}

/* 桌面端 */
@media (min-width: 800px) {
    .img-editor-header-inner {
        max-width: 1100px;
        margin: 0 auto;
    }

    .img-editor-stage-wrap {
        max-width: 1100px;
        margin: 0 auto;
    }

    .img-editor-ratios {
        justify-content: center;
    }
}