/* ==================================================
   SMARTTOOLKITS — IMAGE CROPPER
   PART 1: FOUNDATION + HERO
================================================== */


/* ==================================================
   RESET
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body,
button,
input{
    font-family:"Poppins",sans-serif;
}


/* ==================================================
   DESIGN SYSTEM
================================================== */

:root{

    /* Background */
    --bg:#070709;
    --bg-soft:#0d0d10;

    /* Surfaces */
    --surface:#121216;
    --surface-2:#18181d;
    --surface-3:#1e1e24;

    /* Red Brand */
    --primary:#ef4444;
    --primary-hover:#f05252;
    --primary-dark:#b91c1c;
    --primary-soft:rgba(239,68,68,.10);

    /* Text */
    --text:#f7f7f8;
    --text-soft:#a1a1aa;
    --text-muted:#71717a;

    /* Borders */
    --border:rgba(255,255,255,.075);
    --border-hover:rgba(239,68,68,.30);

    /* Shadows */
    --shadow-sm:
        0 8px 24px rgba(0,0,0,.22);

    --shadow-md:
        0 20px 60px rgba(0,0,0,.35);

    --shadow-red:
        0 20px 60px rgba(239,68,68,.12);

    /* Radius */
    --radius-sm:14px;
    --radius-md:20px;
    --radius-lg:28px;

    /* Motion */
    --ease:cubic-bezier(.2,.8,.2,1);
}


/* ==================================================
   PAGE
================================================== */

body{

    min-height:100vh;

    color:var(--text);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(239,68,68,.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #09090c 0%,
            var(--bg) 55%,
            #09090b 100%
        );

    overflow-x:hidden;

    position:relative;

}


/* ==================================================
   SUBTLE GRID TEXTURE
================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.7),
            transparent 75%
        );

}


/* ==================================================
   AMBIENT RED LIGHT
================================================== */

body::after{

    content:"";

    position:fixed;

    width:650px;
    height:650px;

    left:50%;
    top:-420px;

    transform:translateX(-50%);

    border-radius:50%;

    background:rgba(239,68,68,.14);

    filter:blur(130px);

    pointer-events:none;

    z-index:-1;

    animation:ambientBreath 8s var(--ease) infinite;

}


@keyframes ambientBreath{

    0%,
    100%{
        opacity:.55;
        transform:translateX(-50%) scale(1);
    }

    50%{
        opacity:.8;
        transform:translateX(-50%) scale(1.08);
    }

}


/* ==================================================
   MAIN CONTAINER
================================================== */

.container{

    width:min(1180px,92%);

    margin:0 auto;

    padding:90px 0 60px;

}


/* ==================================================
   GLOBAL SECTION SPACING
================================================== */

section{
    margin-bottom:64px;
}


/* ==================================================
   HERO
================================================== */

.hero{

    max-width:780px;

    margin:
        0 auto
        72px;

    text-align:center;

    animation:
        heroEnter .75s var(--ease) both;

}


/* Hero title */

.hero h1{

    position:relative;

    display:inline-block;

    font-size:
        clamp(3rem,7vw,5.3rem);

    font-weight:800;

    line-height:1;

    letter-spacing:-.055em;

    margin-bottom:24px;

    background:
        linear-gradient(
            180deg,
            #ffffff 5%,
            #f4f4f5 40%,
            #fca5a5 78%,
            #ef4444 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

}


/* Small red glow behind title */

.hero h1::before{

    content:"";

    position:absolute;

    width:60%;
    height:35%;

    left:20%;
    bottom:-5%;

    background:rgba(239,68,68,.22);

    filter:blur(45px);

    z-index:-1;

}


/* Hero description */

.hero p{

    max-width:620px;

    margin:0 auto;

    color:var(--text-soft);

    font-size:1.06rem;

    line-height:1.85;

}


/* ==================================================
   HERO ENTRY ANIMATION
================================================== */

@keyframes heroEnter{

    from{
        opacity:0;
        transform:translateY(22px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* ==================================================
   ACCESSIBILITY
================================================== */

button,
label{
    -webkit-tap-highlight-color:transparent;
}

button:focus-visible,
input:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:3px;

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

    }

}
/* ==================================================
   PART 2 — PREMIUM UPLOAD SECTION
================================================== */

.upload-section{

    display:flex;
    justify-content:center;
    align-items:center;

}


/* ==================================================
   UPLOAD CARD
================================================== */

.upload-card{

    position:relative;

    width:100%;
    max-width:760px;

    min-height:360px;

    padding:65px 40px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    border-radius:var(--radius-lg);

    background:
        linear-gradient(
            180deg,
            rgba(28,28,34,.96),
            rgba(17,17,21,.98)
        );

    border:1px solid var(--border);

    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255,255,255,.04);

    overflow:hidden;

    cursor:pointer;

    isolation:isolate;

    transition:
        transform .35s var(--ease),
        border-color .35s var(--ease),
        box-shadow .35s var(--ease);

}


/* ==================================================
   SOFT INNER RED LIGHT
================================================== */

.upload-card::before{

    content:"";

    position:absolute;

    width:420px;
    height:220px;

    left:50%;
    top:-170px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(239,68,68,.18) 0%,
            rgba(239,68,68,.06) 40%,
            transparent 72%
        );

    filter:blur(18px);

    pointer-events:none;

    z-index:-1;

    transition:
        opacity .35s var(--ease),
        transform .35s var(--ease);

}


/* ==================================================
   ANIMATED EDGE TRACER
================================================== */

.upload-card::after{

    content:"";

    position:absolute;

    width:170px;
    height:3px;

    top:0;
    left:-180px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(248,113,113,.35),
            #ef4444,
            #ffffff,
            #ef4444,
            transparent
        );

    box-shadow:
        0 0 12px rgba(239,68,68,.65),
        0 0 28px rgba(239,68,68,.28);

    pointer-events:none;

    animation:
        uploadTracer 4.8s ease-in-out infinite;

}


/* Tracer only travels across top edge */

@keyframes uploadTracer{

    0%{
        left:-180px;
        opacity:0;
    }

    8%{
        opacity:1;
    }

    48%{
        opacity:1;
    }

    58%{
        left:100%;
        opacity:0;
    }

    100%{
        left:100%;
        opacity:0;
    }

}


/* ==================================================
   CARD HOVER
================================================== */

.upload-card:hover{

    transform:translateY(-4px);

    border-color:
        rgba(239,68,68,.28);

    box-shadow:
        0 28px 80px rgba(0,0,0,.42),
        0 0 0 1px rgba(239,68,68,.06),
        0 20px 55px rgba(239,68,68,.09),
        inset 0 1px 0 rgba(255,255,255,.055);

}


.upload-card:hover::before{

    opacity:1;

    transform:
        translateX(-50%)
        scale(1.12);

}


/* ==================================================
   UPLOAD ICON
================================================== */

.upload-icon{

    position:relative;

    width:92px;
    height:92px;

    margin-bottom:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    color:#fff;

    font-size:2rem;

    background:
        linear-gradient(
            145deg,
            #f05252,
            #dc2626 55%,
            #991b1b
        );

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 16px 35px rgba(239,68,68,.20),
        inset 0 1px 0 rgba(255,255,255,.18);

    transition:
        transform .35s var(--ease),
        box-shadow .35s var(--ease);

}


/* Small highlight inside icon */

.upload-icon::before{

    content:"";

    position:absolute;

    inset:1px;

    border-radius:23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            transparent 42%
        );

    pointer-events:none;

}


/* Icon hover */

.upload-card:hover .upload-icon{

    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 20px 45px rgba(239,68,68,.30),
        inset 0 1px 0 rgba(255,255,255,.20);

}


/* ==================================================
   UPLOAD TEXT
================================================== */

.upload-card h2{

    position:relative;

    font-size:1.75rem;

    font-weight:700;

    letter-spacing:-.025em;

    margin-bottom:10px;

}


.upload-card p{

    max-width:470px;

    color:var(--text-soft);

    font-size:.98rem;

    line-height:1.7;

    margin-bottom:22px;

}


/* Format badge */

.upload-card span{

    display:inline-flex;

    align-items:center;

    min-height:38px;

    padding:8px 17px;

    border-radius:999px;

    color:#fca5a5;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.04em;

    background:
        rgba(239,68,68,.075);

    border:
        1px solid rgba(239,68,68,.16);

}


/* ==================================================
   CLICK FEEDBACK
================================================== */

.upload-card:active{

    transform:
        translateY(-1px)
        scale(.995);

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width:600px){

    .upload-card{

        min-height:320px;

        padding:50px 22px;

        border-radius:22px;

    }

    .upload-icon{

        width:80px;
        height:80px;

        border-radius:21px;

        font-size:1.75rem;

    }

    .upload-card h2{

        font-size:1.5rem;

    }

}
/* ==================================================
   PART 3 — CROP WORKSPACE
================================================== */

.workspace-section{

    position:relative;

    padding:30px;

    border-radius:var(--radius-lg);

    background:
        linear-gradient(
            180deg,
            rgba(24,24,29,.96),
            rgba(16,16,20,.98)
        );

    border:1px solid var(--border);

    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255,255,255,.035);

}


/* ==================================================
   WORKSPACE HEADER
================================================== */

.workspace-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:26px;

}


.workspace-header h2{

    font-size:1.55rem;

    font-weight:700;

    letter-spacing:-.025em;

    margin-bottom:6px;

}


.workspace-header p{

    color:var(--text-soft);

    font-size:.92rem;

    line-height:1.6;

}


/* ==================================================
   LIVE CROP BADGE
================================================== */

.workspace-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;

    padding:9px 14px;

    border-radius:999px;

    color:#fca5a5;

    background:
        rgba(239,68,68,.08);

    border:
        1px solid rgba(239,68,68,.17);

    font-size:.8rem;

    font-weight:600;

}


.workspace-badge i{

    color:var(--primary);

}


/* ==================================================
   ACTUAL CROP WORKSPACE
================================================== */

.crop-workspace{

    position:relative;

    width:100%;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:22px;

    border:
        1px solid rgba(255,255,255,.075);

    background-color:#0a0a0d;

    /* Editor-style subtle checkerboard */

    background-image:

        linear-gradient(
            45deg,
            rgba(255,255,255,.018) 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            rgba(255,255,255,.018) 25%,
            transparent 25%
        ),

        linear-gradient(
            45deg,
            transparent 75%,
            rgba(255,255,255,.018) 75%
        ),

        linear-gradient(
            -45deg,
            transparent 75%,
            rgba(255,255,255,.018) 75%
        );

    background-size:28px 28px;

    background-position:
        0 0,
        0 14px,
        14px -14px,
        -14px 0;

    box-shadow:
        inset 0 0 70px rgba(0,0,0,.32);

}


/* Soft editor spotlight */

.crop-workspace::before{

    content:"";

    position:absolute;

    width:70%;
    height:65%;

    left:15%;
    top:17%;

    border-radius:50%;

    background:
        rgba(239,68,68,.025);

    filter:blur(80px);

    pointer-events:none;

}


/* ==================================================
   SOURCE IMAGE
================================================== */

#cropImage{

    position:relative;

    z-index:2;

    display:none;

    max-width:100%;

    max-height:620px;

    width:auto;
    height:auto;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

}


/* ==================================================
   EMPTY WORKSPACE
================================================== */

.workspace-placeholder{

    position:relative;

    z-index:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    color:var(--text-muted);

}


.workspace-placeholder i{

    width:82px;
    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    border-radius:22px;

    font-size:2rem;

    color:#d4d4d8;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.07);

}


.workspace-placeholder h3{

    color:#d4d4d8;

    font-size:1.15rem;

    font-weight:600;

    margin-bottom:8px;

}


.workspace-placeholder p{

    color:var(--text-muted);

    font-size:.9rem;

}


/* ==================================================
   IMAGE INFORMATION
================================================== */

.image-info{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:14px;

    margin-top:18px;

}


/* Information card */

.info-item{

    position:relative;

    min-height:90px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:18px 20px;

    border-radius:16px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.065);

    transition:
        border-color .3s var(--ease),
        background .3s var(--ease);

}


.info-item:hover{

    background:
        rgba(255,255,255,.035);

    border-color:
        rgba(239,68,68,.18);

}


/* Information label */

.info-item span{

    color:var(--text-muted);

    font-size:.76rem;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.055em;

    margin-bottom:7px;

}


/* Information value */

.info-item strong{

    color:var(--text);

    font-size:1rem;

    font-weight:600;

}


/* ==================================================
   RESPONSIVE WORKSPACE
================================================== */

@media (max-width:768px){

    .workspace-section{

        padding:22px;

    }

    .workspace-header{

        align-items:flex-start;

    }

    .crop-workspace{

        min-height:390px;

    }

    #cropImage{

        max-height:500px;

    }

    .image-info{

        grid-template-columns:1fr;

    }

}


@media (max-width:520px){

    .workspace-section{

        padding:16px;

        border-radius:22px;

    }

    .workspace-header{

        flex-direction:column;

    }

    .crop-workspace{

        min-height:320px;

        border-radius:17px;

    }

    .workspace-placeholder{

        padding:25px 15px;

    }

}
/* ==================================================
   PART 4 — CROP SETTINGS
================================================== */

.controls-section{

    position:relative;

    padding:32px;

    border-radius:var(--radius-lg);

    background:
        linear-gradient(
            180deg,
            rgba(24,24,29,.96),
            rgba(16,16,20,.98)
        );

    border:1px solid var(--border);

    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255,255,255,.035);

    overflow:hidden;

}


/* Subtle red top accent */

.controls-section::before{

    content:"";

    position:absolute;

    width:280px;
    height:100px;

    top:-75px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        rgba(239,68,68,.10);

    filter:blur(45px);

    pointer-events:none;

}


/* ==================================================
   CONTROLS HEADER
================================================== */

.controls-header{

    position:relative;

    margin-bottom:32px;

}


.controls-header h2{

    font-size:1.55rem;

    font-weight:700;

    letter-spacing:-.025em;

    margin-bottom:7px;

}


.controls-header p{

    color:var(--text-soft);

    font-size:.92rem;

    line-height:1.65;

}


/* ==================================================
   RATIO SECTION
================================================== */

.ratio-section{

    position:relative;

    padding:24px;

    border-radius:20px;

    background:
        rgba(255,255,255,.022);

    border:
        1px solid rgba(255,255,255,.06);

}


/* Aspect Ratio label */

.control-label{

    display:block;

    color:#d4d4d8;

    font-size:.86rem;

    font-weight:600;

    margin-bottom:16px;

}


/* ==================================================
   RATIO BUTTON GRID
================================================== */

.ratio-buttons{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:12px;

}


/* ==================================================
   RATIO BUTTON
================================================== */

.ratio-btn{

    position:relative;

    min-height:54px;

    padding:10px 18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:9px;

    border-radius:14px;

    border:
        1px solid rgba(255,255,255,.075);

    background:
        rgba(8,8,11,.65);

    color:var(--text-soft);

    font-size:.9rem;

    font-weight:600;

    cursor:pointer;

    overflow:hidden;

    transition:
        color .25s var(--ease),
        background .25s var(--ease),
        border-color .25s var(--ease),
        transform .25s var(--ease),
        box-shadow .25s var(--ease);

}


/* Very subtle button highlight */

.ratio-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            transparent 45%
        );

    opacity:0;

    transition:
        opacity .25s var(--ease);

}


/* Hover */

.ratio-btn:hover{

    color:#fff;

    border-color:
        rgba(239,68,68,.24);

    background:
        rgba(239,68,68,.055);

    transform:
        translateY(-2px);

}


.ratio-btn:hover::before{

    opacity:1;

}


/* ==================================================
   ACTIVE RATIO
================================================== */

.ratio-btn.active{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.20),
            rgba(185,28,28,.10)
        );

    border-color:
        rgba(239,68,68,.50);

    box-shadow:
        0 8px 25px rgba(239,68,68,.10),
        inset 0 1px 0 rgba(255,255,255,.07);

}


/* Active indicator */

.ratio-btn.active::after{

    content:"";

    position:absolute;

    width:26px;
    height:3px;

    bottom:0;
    left:50%;

    transform:
        translateX(-50%);

    border-radius:
        10px 10px 0 0;

    background:
        var(--primary);

    box-shadow:
        0 0 12px rgba(239,68,68,.65);

}


/* Free icon */

.ratio-btn i{

    position:relative;

    z-index:1;

    font-size:.82rem;

}


/* ==================================================
   BUTTON CLICK FEEDBACK
================================================== */

.ratio-btn:active{

    transform:
        translateY(0)
        scale(.97);

}


/* ==================================================
   CROP DIMENSIONS
================================================== */

.crop-details{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:14px;

    margin-top:18px;

}


/* Individual dimension card */

.crop-detail{

    position:relative;

    min-height:92px;

    padding:18px 20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    border-radius:17px;

    background:
        rgba(255,255,255,.022);

    border:
        1px solid rgba(255,255,255,.065);

    transition:
        background .3s var(--ease),
        border-color .3s var(--ease);

}


.crop-detail:hover{

    background:
        rgba(255,255,255,.032);

    border-color:
        rgba(239,68,68,.17);

}


/* Dimension label */

.crop-detail span{

    color:var(--text-muted);

    font-size:.76rem;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.055em;

    margin-bottom:7px;

}


/* Dimension value */

.crop-detail strong{

    color:var(--text);

    font-size:1.15rem;

    font-weight:650;

    letter-spacing:-.015em;

}


/* Small red indicator */

.crop-detail::before{

    content:"";

    position:absolute;

    width:3px;
    height:28px;

    left:0;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:
        0 5px 5px 0;

    background:
        var(--primary);

    opacity:.45;

    transition:
        opacity .3s var(--ease),
        box-shadow .3s var(--ease);

}


.crop-detail:hover::before{

    opacity:1;

    box-shadow:
        0 0 12px rgba(239,68,68,.45);

}


/* ==================================================
   RESPONSIVE CONTROLS
================================================== */

@media (max-width:768px){

    .controls-section{

        padding:24px;

    }

    .ratio-buttons{

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media (max-width:480px){

    .controls-section{

        padding:18px;

        border-radius:22px;

    }

    .ratio-section{

        padding:17px;

    }

    .ratio-buttons{

        gap:9px;

    }

    .ratio-btn{

        min-height:50px;

        padding:9px 12px;

        font-size:.84rem;

    }

    .crop-details{

        grid-template-columns:1fr;

    }

}
/* ==================================================
   PART 5 — ACTION BUTTONS
================================================== */

.action-section{

    display:flex;

    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:-8px;

}


/* Common button */

.btn{

    min-width:210px;
    min-height:58px;

    padding:14px 26px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    border-radius:16px;

    border:1px solid transparent;

    font-size:.95rem;

    font-weight:650;

    cursor:pointer;

    transition:
        transform .25s var(--ease),
        background .25s var(--ease),
        border-color .25s var(--ease),
        box-shadow .25s var(--ease),
        opacity .25s var(--ease);

}


/* ==================================================
   PRIMARY CROP BUTTON
================================================== */

.btn-primary{

    position:relative;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #f05252 0%,
            #dc2626 55%,
            #b91c1c 100%
        );

    border-color:
        rgba(255,255,255,.09);

    box-shadow:
        0 12px 30px rgba(239,68,68,.20),
        inset 0 1px 0 rgba(255,255,255,.15);

    overflow:hidden;

}


/* Button shine */

.btn-primary::before{

    content:"";

    position:absolute;

    width:70px;
    height:180%;

    top:-40%;

    left:-100px;

    transform:rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:
        left .55s var(--ease);

}


.btn-primary:hover:not(:disabled)::before{

    left:calc(100% + 40px);

}


.btn-primary:hover:not(:disabled){

    transform:translateY(-3px);

    box-shadow:
        0 17px 40px rgba(239,68,68,.30),
        inset 0 1px 0 rgba(255,255,255,.18);

}


/* ==================================================
   SECONDARY / RESET BUTTON
================================================== */

.btn-secondary{

    color:#e4e4e7;

    background:
        rgba(255,255,255,.035);

    border-color:
        rgba(255,255,255,.085);

    box-shadow:
        var(--shadow-sm);

}


.btn-secondary:hover:not(:disabled){

    color:#fff;

    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(239,68,68,.24);

    transform:translateY(-3px);

}


/* ==================================================
   DISABLED BUTTONS
================================================== */

.btn:disabled{

    opacity:.38;

    cursor:not-allowed;

    box-shadow:none;

}


.btn:active:not(:disabled){

    transform:
        translateY(0)
        scale(.98);

}


/* ==================================================
   RESULT SECTION
================================================== */

.result-section{

    position:relative;

    padding:32px;

    border-radius:var(--radius-lg);

    background:
        linear-gradient(
            180deg,
            rgba(24,24,29,.96),
            rgba(15,15,19,.98)
        );

    border:
        1px solid var(--border);

    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255,255,255,.035);

    overflow:hidden;

}


/* Result top glow */

.result-section::before{

    content:"";

    position:absolute;

    width:350px;
    height:150px;

    top:-120px;
    right:8%;

    border-radius:50%;

    background:
        rgba(239,68,68,.10);

    filter:blur(55px);

    pointer-events:none;

}


/* ==================================================
   RESULT HEADER
================================================== */

.result-header{

    position:relative;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:26px;

}


.result-header h2{

    font-size:1.55rem;

    font-weight:700;

    letter-spacing:-.025em;

    margin-bottom:6px;

}


.result-header p{

    color:var(--text-soft);

    font-size:.92rem;

    line-height:1.6;

}


/* ==================================================
   READY BADGE
================================================== */

.result-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    flex-shrink:0;

    padding:9px 14px;

    border-radius:999px;

    color:#fca5a5;

    background:
        rgba(239,68,68,.075);

    border:
        1px solid rgba(239,68,68,.17);

    font-size:.8rem;

    font-weight:600;

}


.result-badge i{

    font-size:.72rem;

    color:var(--primary);

}


/* ==================================================
   RESULT PREVIEW
================================================== */

.result-preview{

    position:relative;

    width:100%;

    min-height:420px;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:22px;

    background-color:#09090c;

    background-image:

        linear-gradient(
            45deg,
            rgba(255,255,255,.017) 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            rgba(255,255,255,.017) 25%,
            transparent 25%
        ),

        linear-gradient(
            45deg,
            transparent 75%,
            rgba(255,255,255,.017) 75%
        ),

        linear-gradient(
            -45deg,
            transparent 75%,
            rgba(255,255,255,.017) 75%
        );

    background-size:28px 28px;

    background-position:
        0 0,
        0 14px,
        14px -14px,
        -14px 0;

    border:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        inset 0 0 60px rgba(0,0,0,.32);

}


/* Cropped image */

#croppedPreview{

    display:none;

    position:relative;

    z-index:2;

    max-width:100%;
    max-height:560px;

    width:auto;
    height:auto;

    object-fit:contain;

}


/* ==================================================
   RESULT PLACEHOLDER
================================================== */

.result-placeholder{

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    gap:16px;

    padding:35px;

    color:var(--text-muted);

}


.result-placeholder i{

    width:76px;
    height:76px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:20px;

    color:#d4d4d8;

    font-size:1.8rem;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.07);

}


.result-placeholder p{

    max-width:320px;

    font-size:.9rem;

    line-height:1.65;

}


/* ==================================================
   OUTPUT STATISTICS
================================================== */

.result-stats{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:14px;

    margin-top:18px;

}


.result-stat{

    min-height:94px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:17px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.065);

    transition:
        background .3s var(--ease),
        border-color .3s var(--ease);

}


.result-stat:hover{

    background:
        rgba(255,255,255,.037);

    border-color:
        rgba(239,68,68,.18);

}


/* Stat icon */

.result-stat > i{

    width:44px;
    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:13px;

    color:#fca5a5;

    background:
        rgba(239,68,68,.08);

    border:
        1px solid rgba(239,68,68,.13);

}


/* Stat text */

.result-stat span{

    display:block;

    color:var(--text-muted);

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.05em;

    margin-bottom:5px;

}


.result-stat strong{

    display:block;

    color:var(--text);

    font-size:.96rem;

    font-weight:600;

}


/* ==================================================
   DOWNLOAD BUTTON
================================================== */

.download-btn{

    position:relative;

    width:100%;

    min-height:60px;

    margin-top:18px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    border-radius:16px;

    border:
        1px solid rgba(239,68,68,.28);

    color:#fff;

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.18),
            rgba(185,28,28,.11)
        );

    font-size:.96rem;

    font-weight:650;

    cursor:pointer;

    overflow:hidden;

    transition:
        transform .25s var(--ease),
        background .25s var(--ease),
        border-color .25s var(--ease),
        box-shadow .25s var(--ease),
        opacity .25s var(--ease);

}


/* Download glow */

.download-btn::before{

    content:"";

    position:absolute;

    width:180px;
    height:100%;

    top:0;
    left:-200px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239,68,68,.10),
            rgba(255,255,255,.08),
            transparent
        );

    transition:
        left .6s var(--ease);

}


.download-btn:hover:not(:disabled)::before{

    left:100%;

}


.download-btn:hover:not(:disabled){

    transform:translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.26),
            rgba(185,28,28,.16)
        );

    border-color:
        rgba(239,68,68,.48);

    box-shadow:
        0 14px 35px rgba(239,68,68,.13);

}


.download-btn:disabled{

    opacity:.35;

    cursor:not-allowed;

    box-shadow:none;

}


/* ==================================================
   RESPONSIVE RESULT AREA
================================================== */

@media (max-width:768px){

    .result-section{

        padding:24px;

    }

    .result-stats{

        grid-template-columns:1fr;

    }

    .result-preview{

        min-height:360px;

    }

}


@media (max-width:520px){

    .action-section{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .result-section{

        padding:17px;

        border-radius:22px;

    }

    .result-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .result-preview{

        min-height:300px;

        border-radius:17px;

    }

}
/* ==================================================
   PART 6 — FOOTER
================================================== */

footer{

    width:100%;

    padding:32px 20px;

    text-align:center;

    border-top:
        1px solid rgba(255,255,255,.055);

    background:
        rgba(7,7,9,.55);

}


footer p{

    color:var(--text-muted);

    font-size:.84rem;

    line-height:1.6;

}


/* ==================================================
   SELECTION
================================================== */

::selection{

    color:#fff;

    background:
        rgba(239,68,68,.65);

}


/* ==================================================
   SCROLLBAR — DESKTOP
================================================== */

@media (hover:hover){

    ::-webkit-scrollbar{

        width:10px;

    }

    ::-webkit-scrollbar-track{

        background:#09090b;

    }

    ::-webkit-scrollbar-thumb{

        background:#27272a;

        border:2px solid #09090b;

        border-radius:999px;

    }

    ::-webkit-scrollbar-thumb:hover{

        background:#3f3f46;

    }

}


/* ==================================================
   TABLET — 900PX
================================================== */

@media (max-width:900px){

    .container{

        width:min(94%,760px);

        padding-top:70px;

    }

    section{

        margin-bottom:52px;

    }

    .hero{

        margin-bottom:58px;

    }

    .hero h1{

        letter-spacing:-.045em;

    }

    .crop-workspace{

        min-height:440px;

    }

    .result-preview{

        min-height:380px;

    }

}


/* ==================================================
   MOBILE — 700PX
================================================== */

@media (max-width:700px){

    .container{

        width:92%;

        padding:
            55px 0
            42px;

    }

    section{

        margin-bottom:44px;

    }


    /* Hero */

    .hero{

        margin-bottom:50px;

    }

    .hero h1{

        font-size:
            clamp(2.7rem,13vw,4rem);

        margin-bottom:18px;

    }

    .hero p{

        font-size:.94rem;

        line-height:1.75;

    }


    /* Upload */

    .upload-card{

        min-height:300px;

    }


    /* Workspace */

    .workspace-header{

        gap:14px;

    }

    .crop-workspace{

        min-height:360px;

    }


    /* Controls */

    .ratio-buttons{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    /* Result */

    .result-preview{

        min-height:330px;

    }

}


/* ==================================================
   SMALL MOBILE — 480PX
================================================== */

@media (max-width:480px){

    .container{

        width:94%;

        padding-top:42px;

    }


    /* --------------------------
       HERO
    -------------------------- */

    .hero{

        margin-bottom:42px;

    }

    .hero h1{

        font-size:2.55rem;

        letter-spacing:-.04em;

    }

    .hero p{

        font-size:.88rem;

    }


    /* --------------------------
       UPLOAD
    -------------------------- */

    .upload-card{

        min-height:280px;

        padding:
            42px 18px;

    }

    .upload-icon{

        width:74px;
        height:74px;

        margin-bottom:22px;

        font-size:1.55rem;

    }

    .upload-card h2{

        font-size:1.4rem;

    }

    .upload-card p{

        font-size:.87rem;

    }

    .upload-card span{

        font-size:.73rem;

        padding:
            8px 13px;

    }


    /* --------------------------
       WORKSPACE
    -------------------------- */

    .workspace-section{

        padding:15px;

    }

    .workspace-header h2{

        font-size:1.3rem;

    }

    .workspace-header p{

        font-size:.84rem;

    }

    .workspace-badge{

        padding:
            7px 11px;

        font-size:.72rem;

    }

    .crop-workspace{

        min-height:290px;

    }

    #cropImage{

        max-height:420px;

    }


    /* --------------------------
       ORIGINAL INFO
    -------------------------- */

    .image-info{

        gap:9px;

        margin-top:12px;

    }

    .info-item{

        min-height:76px;

        padding:
            14px 16px;

    }


    /* --------------------------
       CROP CONTROLS
    -------------------------- */

    .controls-section{

        padding:16px;

    }

    .controls-header{

        margin-bottom:24px;

    }

    .controls-header h2{

        font-size:1.3rem;

    }

    .ratio-section{

        padding:15px;

    }

    .ratio-buttons{

        gap:8px;

    }

    .ratio-btn{

        min-width:0;

        min-height:48px;

        padding:
            8px 9px;

    }

    .crop-details{

        gap:9px;

        margin-top:12px;

    }

    .crop-detail{

        min-height:78px;

        padding:
            14px 17px;

    }


    /* --------------------------
       ACTION BUTTONS
    -------------------------- */

    .action-section{

        gap:10px;

    }

    .btn{

        min-width:0;

        min-height:54px;

        font-size:.9rem;

    }


    /* --------------------------
       RESULT
    -------------------------- */

    .result-section{

        padding:15px;

    }

    .result-header h2{

        font-size:1.3rem;

    }

    .result-preview{

        min-height:280px;

    }

    .result-stat{

        min-height:82px;

        padding:14px;

    }

    .download-btn{

        min-height:55px;

        font-size:.88rem;

    }


    /* Footer */

    footer{

        padding:
            26px 16px;

    }

}


/* ==================================================
   VERY SMALL DEVICES
================================================== */

@media (max-width:350px){

    .hero h1{

        font-size:2.2rem;

    }

    .ratio-buttons{

        grid-template-columns:1fr;

    }

    .workspace-badge,
    .result-badge{

        display:none;

    }

}


/* ==================================================
   TOUCH DEVICES
   Avoid sticky hover effects
================================================== */

@media (hover:none){

    .upload-card:hover,
    .btn:hover,
    .ratio-btn:hover,
    .download-btn:hover{

        transform:none;

    }

}


/* ==================================================
   FINAL IMAGE SAFETY
================================================== */

img{

    max-width:100%;

}
/* ==================================================
   CROPPER — INTERACTIVE CROP BOX
================================================== */

.crop-box{

    position:absolute;

    z-index:10;

    border:2px solid #ef4444;

    box-shadow:
        0 0 0 9999px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,255,255,.12),
        0 0 22px rgba(239,68,68,.20);

    cursor:move;

    touch-action:none;

    user-select:none;

}


/* Rule of thirds grid */

.crop-box::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        linear-gradient(
            to right,
            transparent 33.1%,
            rgba(255,255,255,.35) 33.1%,
            rgba(255,255,255,.35) 33.5%,
            transparent 33.5%,
            transparent 66.3%,
            rgba(255,255,255,.35) 66.3%,
            rgba(255,255,255,.35) 66.7%,
            transparent 66.7%
        ),

        linear-gradient(
            to bottom,
            transparent 33.1%,
            rgba(255,255,255,.35) 33.1%,
            rgba(255,255,255,.35) 33.5%,
            transparent 33.5%,
            transparent 66.3%,
            rgba(255,255,255,.35) 66.3%,
            rgba(255,255,255,.35) 66.7%,
            transparent 66.7%
        );

}


/* ==================================================
   RESIZE HANDLES
================================================== */

.crop-handle{

    position:absolute;

    z-index:12;

    width:12px;
    height:12px;

    border-radius:3px;

    background:#fff;

    border:2px solid #ef4444;

    box-shadow:
        0 0 10px rgba(239,68,68,.45);

}


/* Corners */

.crop-handle-nw{

    top:-7px;
    left:-7px;

    cursor:nwse-resize;

}

.crop-handle-ne{

    top:-7px;
    right:-7px;

    cursor:nesw-resize;

}

.crop-handle-se{

    right:-7px;
    bottom:-7px;

    cursor:nwse-resize;

}

.crop-handle-sw{

    left:-7px;
    bottom:-7px;

    cursor:nesw-resize;

}


/* Top / Bottom */

.crop-handle-n{

    top:-7px;
    left:50%;

    transform:translateX(-50%);

    cursor:ns-resize;

}

.crop-handle-s{

    bottom:-7px;
    left:50%;

    transform:translateX(-50%);

    cursor:ns-resize;

}


/* Left / Right */

.crop-handle-w{

    left:-7px;
    top:50%;

    transform:translateY(-50%);

    cursor:ew-resize;

}

.crop-handle-e{

    right:-7px;
    top:50%;

    transform:translateY(-50%);

    cursor:ew-resize;

}


/* Mobile handles */

@media (max-width:600px){

    .crop-handle{

        width:15px;
        height:15px;

    }

}


/*
   IMPORTANT:
   Do not add CSS transform: scale()
   to #cropImage later.

   JavaScript will calculate crop coordinates
   using the image's rendered dimensions.
*/