/* ============================================================
   Vamriko IMAGE CROPPER
   Internal tool styling only.
   Global site CSS remains untouched.
   ============================================================ */
#tool-root {
    width: 100%;
}
.crop-upload {
    min-height: 360px;
    border: 1px dashed rgba(129,120,255,.45);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(99,91,255,.12),
            transparent 45%
        ),
        rgba(255,255,255,.015);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
    padding:40px 24px;
}
.crop-upload.dragover {
    border-color:#8178ff;
    background:rgba(99,91,255,.10);
    transform:scale(1.01);
}
.upload-icon {
    width:68px;
    height:68px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    font-weight:300;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            rgba(99,91,255,.9),
            rgba(129,120,255,.45)
        );
    box-shadow:
        0 15px 45px rgba(99,91,255,.25);
    margin-bottom:22px;
}
.crop-upload h2 {
    margin:0 0 8px;
    font-size:25px;
}
.crop-upload p {
    margin:0 0 20px;
    opacity:.65;
}
.upload-note {
    margin-top:15px;
    font-size:12px;
    opacity:.45;
}
/* ------------------------------------------------------------
   EDITOR
   ------------------------------------------------------------ */
.crop-editor {
    width:100%;
}
.crop-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 0 18px;
    margin-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.crop-topbar strong {
    display:block;
    font-size:15px;
}
.crop-topbar span {
    display:block;
    margin-top:4px;
    font-size:12px;
    opacity:.5;
}
/* ------------------------------------------------------------
   WORKSPACE
   ------------------------------------------------------------ */
.crop-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:22px;
    align-items:stretch;
}
.crop-stage-wrap {
    min-width:0;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    overflow:hidden;
    background:
        linear-gradient(
            45deg,
            rgba(255,255,255,.035) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.035) 75%
        ),
        linear-gradient(
            45deg,
            rgba(255,255,255,.035) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.035) 75%
        );
    background-size:28px 28px;
    background-position:0 0,14px 14px;
    border:1px solid rgba(255,255,255,.07);
    position:relative;
}
.crop-stage {
    position:relative;
    max-width:96%;
    max-height:94%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
#cropCanvas {
    display:block;
    max-width:100%;
    max-height:100%;
    user-select:none;
    -webkit-user-drag:none;
}
/* ------------------------------------------------------------
   CROP BOX
   ------------------------------------------------------------ */
.crop-box {
    position:absolute;
    border:2px solid #fff;
    box-shadow:
        0 0 0 9999px rgba(0,0,0,.56),
        0 0 25px rgba(99,91,255,.3);
    cursor:move;
    touch-action:none;
}
.crop-grid {
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to right,
            transparent 32.9%,
            rgba(255,255,255,.5) 33%,
            transparent 33.2%,
            transparent 66.2%,
            rgba(255,255,255,.5) 66.4%,
            transparent 66.6%
        ),
        linear-gradient(
            to bottom,
            transparent 32.9%,
            rgba(255,255,255,.5) 33%,
            transparent 33.2%,
            transparent 66.2%,
            rgba(255,255,255,.5) 66.4%,
            transparent 66.6%
        );
    pointer-events:none;
}
.crop-handle {
    position:absolute;
    width:12px;
    height:12px;
    background:#fff;
    border:2px solid #635bff;
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.handle-nw {
    left:-7px;
    top:-7px;
    cursor:nwse-resize;
}
.handle-ne {
    right:-7px;
    top:-7px;
    cursor:nesw-resize;
}
.handle-sw {
    left:-7px;
    bottom:-7px;
    cursor:nesw-resize;
}
.handle-se {
    right:-7px;
    bottom:-7px;
    cursor:nwse-resize;
}
.handle-n {
    left:50%;
    top:-7px;
    transform:translateX(-50%);
    cursor:ns-resize;
}
.handle-s {
    left:50%;
    bottom:-7px;
    transform:translateX(-50%);
    cursor:ns-resize;
}
.handle-w {
    left:-7px;
    top:50%;
    transform:translateY(-50%);
    cursor:ew-resize;
}
.handle-e {
    right:-7px;
    top:50%;
    transform:translateY(-50%);
    cursor:ew-resize;
}
/* ------------------------------------------------------------
   CONTROLS
   ------------------------------------------------------------ */
.crop-controls {
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.01)
        );
    display:flex;
    flex-direction:column;
    gap:20px;
}
.control-section {
    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.control-section:last-of-type {
    border-bottom:0;
    padding-bottom:0;
}
.control-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
    font-size:13px;
    font-weight:700;
}
.control-title span {
    opacity:.5;
    font-weight:500;
}
/* ratios */
.ratio-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
}
.ratio-btn {
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
    color:inherit;
    padding:9px 4px;
    border-radius:9px;
    font-size:11px;
    cursor:pointer;
    transition:.2s ease;
}
.ratio-btn:hover {
    border-color:rgba(129,120,255,.6);
}
.ratio-btn.active {
    background:rgba(99,91,255,.2);
    border-color:#8178ff;
    color:#fff;
}
/* transform */
.transform-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.control-btn {
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
    color:inherit;
    padding:10px;
    border-radius:9px;
    cursor:pointer;
    font-size:11px;
    text-align:left;
    transition:.2s ease;
}
.control-btn:hover {
    border-color:rgba(129,120,255,.6);
    background:rgba(99,91,255,.1);
}
.control-btn:first-letter {
    font-size:17px;
}
/* sliders */
input[type="range"] {
    width:100%;
    accent-color:#8178ff;
    cursor:pointer;
}
/* output */
.output-grid {
    display:grid;
    gap:12px;
}
.output-grid label {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
}
.output-grid label > span {
    min-width:55px;
    opacity:.65;
}
.output-grid select {
    flex:1;
    background:#111827;
    color:#fff;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    padding:9px;
}
.output-grid input[type="range"] {
    flex:1;
}
.output-grid small {
    min-width:38px;
    text-align:right;
    opacity:.55;
}
/* size */
.crop-size {
    padding:12px 14px;
    border-radius:10px;
    background:rgba(99,91,255,.08);
    border:1px solid rgba(129,120,255,.15);
}
.crop-size > div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
}
.crop-size span {
    opacity:.55;
}
.crop-size strong {
    font-size:13px;
}
/* download */
.download-btn {
    width:100%;
    border:0;
    border-radius:11px;
    padding:14px 16px;
    background:
        linear-gradient(
            135deg,
            #635bff,
            #8178ff
        );
    color:#fff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:
        0 12px 30px rgba(99,91,255,.22);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}
.download-btn:hover {
    transform:translateY(-1px);
    box-shadow:
        0 16px 38px rgba(99,91,255,.32);
}
/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */
@media (max-width:1000px) {
    .crop-workspace {
        grid-template-columns:1fr;
    }
    .crop-stage-wrap {
        min-height:520px;
    }
    .crop-controls {
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:start;
    }
    .crop-controls .crop-size,
    .crop-controls .download-btn {
        grid-column:1 / -1;
    }
}
@media (max-width:650px) {
    .crop-upload {
        min-height:300px;
        padding:30px 18px;
    }
    .crop-topbar {
        align-items:flex-start;
        flex-direction:column;
    }
    .crop-stage-wrap {
        min-height:390px;
    }
    .crop-controls {
        display:flex;
    }
    .ratio-grid {
        grid-template-columns:repeat(4,1fr);
    }
    .transform-grid {
        grid-template-columns:1fr 1fr;
    }
    .control-btn span {
        font-size:10px;
    }
}