.dapsr-app{
    --orange:#f97316;
    --orange-dark:#ea580c;
    --orange-soft:#fff7ed;
    --green:#067647;
    --green-soft:#ecfdf3;
    --blue:#175cd3;
    --blue-soft:#eff8ff;
    --red:#b42318;
    --red-soft:#fef3f2;
    --navy:#101828;
    --text:#344054;
    --muted:#667085;
    --border:#e4e7ec;
    --soft:#f8fafc;

    width:100%;
    max-width:800px;
    margin:28px auto;
    color:var(--navy);
    font-family:inherit;
    box-sizing:border-box;
}

.dapsr-app *,
.dapsr-app *::before,
.dapsr-app *::after{
    box-sizing:border-box;
}

.dapsr-card{
    padding:36px;
    background:#fff;
    border:1px solid #eaecf0;
    border-radius:20px;
    box-shadow:0 4px 10px rgba(16,24,40,.03),
               0 20px 45px rgba(16,24,40,.07);
}

/* Header */

.dapsr-header{
    margin-bottom:22px;
    text-align:center;
}

.dapsr-main-icon{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
    border-radius:18px;
    background:var(--orange-soft);
    color:var(--orange);
}

.dapsr-main-icon svg{
    width:30px;
    height:30px;
}

.dapsr-badge{
    display:inline-block;
    margin-bottom:8px;
    padding:5px 11px;
    border-radius:999px;
    background:var(--orange-soft);
    color:#c2410c;
    font-size:11px;
    font-weight:750;
}

.dapsr-header h2{
    margin:0;
    padding:0;
    color:var(--navy);
    font-size:30px;
    line-height:1.25;
    letter-spacing:-.4px;
}

.dapsr-header p{
    max-width:620px;
    margin:10px auto 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
}

/* Privacy */

.dapsr-privacy{
    display:flex;
    gap:11px;
    align-items:flex-start;
    padding:13px 15px;
    margin-bottom:25px;
    border:1px solid #abefc6;
    border-radius:11px;
    background:var(--green-soft);
}

.dapsr-privacy-icon{
    flex:0 0 30px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#dcfae6;
    color:var(--green);
}

.dapsr-privacy-icon svg{
    width:17px;
    height:17px;
}

.dapsr-privacy strong{
    display:block;
    margin-bottom:2px;
    color:var(--green);
    font-size:11.5px;
}

.dapsr-privacy p{
    margin:0;
    color:#475467;
    font-size:10.5px;
    line-height:1.55;
}

/* Sections */

.dapsr-section{
    padding:22px 0;
    border-top:1px solid #f2f4f7;
}

.dapsr-step-head{
    display:flex;
    gap:11px;
    align-items:flex-start;
    margin-bottom:17px;
}

.dapsr-step-head > span{
    flex:0 0 32px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--orange-soft);
    color:var(--orange-dark);
    font-size:12px;
    font-weight:800;
}

.dapsr-step-head h3{
    margin:0 0 3px;
    padding:0;
    color:var(--navy);
    font-size:17px;
}

.dapsr-step-head p{
    margin:0;
    color:var(--muted);
    font-size:11.5px;
    line-height:1.5;
}

/* Mode */

.dapsr-mode-switch{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.dapsr-mode{
    min-height:105px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:15px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
    color:var(--navy);
    font-family:inherit;
    cursor:pointer;
    transition:.2s ease;
}

.dapsr-mode:hover{
    border-color:#fdba74;
    background:#fffaf5;
}

.dapsr-mode.active{
    border-color:var(--orange);
    background:var(--orange-soft);
    box-shadow:0 0 0 2px rgba(249,115,22,.08);
}

.dapsr-mode-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:3px;
    color:var(--orange-dark);
}

.dapsr-mode-icon svg{
    width:27px;
    height:27px;
}

.dapsr-mode strong{
    font-size:13px;
}

.dapsr-mode small{
    color:var(--muted);
    font-size:9px;
}

/* Upload */

.dapsr-file-input{
    display:none !important;
}

.dapsr-upload-zone{
    width:100%;
    min-height:165px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:24px;
    border:2px dashed #d0d5dd;
    border-radius:13px;
    background:#fcfcfd;
    color:var(--navy);
    font-family:inherit;
    cursor:pointer;
    transition:.2s ease;
}

.dapsr-upload-zone:hover,
.dapsr-upload-zone.dapsr-dragging{
    border-color:var(--orange);
    background:var(--orange-soft);
}

.dapsr-upload-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:3px;
    border-radius:13px;
    background:var(--orange-soft);
    color:var(--orange);
}

.dapsr-upload-icon svg{
    width:23px;
    height:23px;
}

.dapsr-upload-zone strong{
    font-size:13px;
}

.dapsr-upload-zone small{
    color:var(--muted);
    font-size:10px;
}

/* Selected */

.dapsr-selected{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--soft);
}

.dapsr-selected[hidden]{
    display:none !important;
}

.dapsr-thumb{
    flex:0 0 70px;
    width:70px;
    height:70px;
    overflow:hidden;
    border-radius:9px;
    background:#fff;
}

.dapsr-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}

.dapsr-file-info{
    flex:1;
    min-width:0;
}

.dapsr-file-info strong{
    display:block;
    overflow:hidden;
    margin-bottom:4px;
    color:var(--navy);
    font-size:11.5px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.dapsr-file-info span{
    color:var(--muted);
    font-size:9.5px;
}

.dapsr-remove{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border:0;
    border-radius:8px;
    background:#fff;
    color:#667085;
    font-size:21px;
    cursor:pointer;
}

.dapsr-remove:hover{
    background:var(--red-soft);
    color:var(--red);
}

/* Dimensions */

.dapsr-dimensions{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:10px;
    align-items:end;
}

.dapsr-field label,
.dapsr-small-label,
.dapsr-custom-size label{
    display:block;
    margin-bottom:6px;
    color:var(--text);
    font-size:10.5px;
    font-weight:650;
}

.dapsr-input-unit{
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #d0d5dd;
    border-radius:9px;
    background:#fff;
}

.dapsr-input-unit:focus-within{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(249,115,22,.08);
}

.dapsr-input-unit input{
    width:100%;
    min-height:46px;
    padding:0 12px;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent;
    color:var(--navy);
    font-family:inherit;
}

.dapsr-input-unit span{
    padding-right:12px;
    color:var(--muted);
    font-size:10px;
}

.dapsr-dimension-x{
    padding-bottom:13px;
    color:#98a2b3;
    font-size:17px;
}

/* Ratio */

.dapsr-check{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    color:var(--text);
    font-size:10.5px;
    cursor:pointer;
}

.dapsr-check input{
    width:16px;
    height:16px;
    accent-color:var(--orange);
}

/* Methods */

.dapsr-resize-method{
    margin-top:17px;
}

.dapsr-method-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.dapsr-method{
    padding:12px;
    border:1px solid #d0d5dd;
    border-radius:9px;
    background:#fff;
    color:var(--navy);
    text-align:left;
    font-family:inherit;
    cursor:pointer;
}

.dapsr-method strong{
    display:block;
    margin-bottom:2px;
    font-size:11px;
}

.dapsr-method small{
    color:var(--muted);
    font-size:8.5px;
}

.dapsr-method.active{
    border-color:var(--orange);
    background:var(--orange-soft);
}

/* Size */

.dapsr-size-options{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
}

.dapsr-size-options button{
    min-height:65px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid #d0d5dd;
    border-radius:10px;
    background:#fff;
    color:var(--navy);
    font-family:inherit;
    cursor:pointer;
}

.dapsr-size-options button strong{
    font-size:15px;
}

.dapsr-size-options button span{
    color:var(--muted);
    font-size:9px;
}

.dapsr-size-options button.active{
    border-color:var(--orange);
    background:var(--orange-soft);
    color:var(--orange-dark);
}

.dapsr-custom-size{
    max-width:270px;
    margin-top:12px;
}

.dapsr-custom-size[hidden]{
    display:none !important;
}

/* Range */

.dapsr-range{
    margin-top:13px;
    border:1px solid var(--border);
    border-radius:10px;
}

.dapsr-range summary{
    padding:12px 14px;
    color:var(--text);
    font-size:10.5px;
    font-weight:650;
    cursor:pointer;
}

.dapsr-range[open] summary{
    border-bottom:1px solid var(--border);
}

.dapsr-range-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:14px 14px 8px;
}

.dapsr-range-grid input{
    width:100%;
    min-height:44px;
    padding:0 11px;
    border:1px solid #d0d5dd;
    border-radius:8px;
    outline:0;
    font-family:inherit;
}

.dapsr-range-grid input:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(249,115,22,.08);
}

.dapsr-range > p{
    margin:0;
    padding:0 14px 14px;
    color:var(--muted);
    font-size:9.5px;
}

/* Error */

.dapsr-error{
    padding:11px 13px;
    margin:6px 0 13px;
    border:1px solid #fecdca;
    border-radius:9px;
    background:var(--red-soft);
    color:var(--red);
    font-size:11px;
    line-height:1.55;
}

.dapsr-error[hidden]{
    display:none !important;
}

/* Action */

.dapsr-action{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 18px;
    border:0;
    border-radius:10px;
    background:var(--orange);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:750;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(249,115,22,.18);
}

.dapsr-action:hover{
    background:var(--orange-dark);
}

.dapsr-action:disabled{
    opacity:.65;
    cursor:wait;
}

.dapsr-spinner{
    width:17px;
    height:17px;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    border-radius:50%;
    animation:dapsr-spin .7s linear infinite;
}

.dapsr-spinner[hidden]{
    display:none !important;
}

@keyframes dapsr-spin{
    to{transform:rotate(360deg);}
}

/* Result */

.dapsr-result{
    padding-top:30px;
    margin-top:30px;
    border-top:1px solid var(--border);
}

.dapsr-result[hidden]{
    display:none !important;
}

.dapsr-result-header{
    margin-bottom:20px;
    text-align:center;
}

.dapsr-success{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 9px;
    border-radius:50%;
    background:var(--green-soft);
    color:var(--green);
    font-size:23px;
    font-weight:800;
}

.dapsr-result-header > span{
    color:#98a2b3;
    font-size:8.5px;
    font-weight:800;
    letter-spacing:1px;
}

.dapsr-result-header h3{
    margin:6px 0 3px;
    color:var(--navy);
    font-size:23px;
}

.dapsr-result-header p{
    margin:0;
    color:var(--muted);
    font-size:10.5px;
}

/* Before after */

.dapsr-before-after{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:10px;
    align-items:center;
    margin-bottom:12px;
}

.dapsr-before-after > div{
    padding:15px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--soft);
    text-align:center;
}

.dapsr-before-after small,
.dapsr-before-after span{
    display:block;
    color:var(--muted);
    font-size:9px;
}

.dapsr-before-after strong{
    display:block;
    margin:4px 0;
    color:var(--navy);
    font-size:18px;
}

.dapsr-before-after .dapsr-final-stat{
    border-color:#abefc6;
    background:var(--green-soft);
}

.dapsr-before-after .dapsr-final-stat strong{
    color:var(--green);
}

.dapsr-result-arrow{
    color:#98a2b3;
}

/* Details */

.dapsr-result-details{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-bottom:14px;
}

.dapsr-result-details > div{
    padding:12px;
    border:1px solid var(--border);
    border-radius:9px;
}

.dapsr-result-details span{
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:8.5px;
}

.dapsr-result-details strong{
    color:var(--navy);
    font-size:11px;
}

/* Preview */

.dapsr-output-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    overflow:hidden;
    padding:18px;
    margin-bottom:13px;
    border:1px solid var(--border);
    border-radius:11px;
    background:#f8fafc;
}

.dapsr-output-preview img{
    display:block;
    max-width:100%;
    max-height:400px;
    object-fit:contain;
}

/* Download */

.dapsr-download{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 16px;
    border-radius:10px;
    background:var(--green);
    color:#fff !important;
    text-decoration:none !important;
    font-size:13px;
    font-weight:750;
}

.dapsr-download:hover{
    background:#05603a;
    color:#fff !important;
}

.dapsr-download svg{
    width:18px;
    height:18px;
}

.dapsr-new{
    display:block;
    margin:13px auto 0;
    padding:5px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-family:inherit;
    font-size:10px;
    text-decoration:underline;
    cursor:pointer;
}

/* Notice */

.dapsr-notice{
    padding:12px 14px;
    margin-top:22px;
    border:1px solid #b2ddff;
    border-radius:9px;
    background:var(--blue-soft);
    color:#475467;
    font-size:9.5px;
    line-height:1.65;
}

.dapsr-notice strong{
    color:var(--blue);
}

.dapsr-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:15px;
    color:#98a2b3;
    text-align:center;
    font-size:8.5px;
}

.dapsr-footer svg{
    flex:0 0 14px;
    width:14px;
    height:14px;
}

/* Mobile */

@media(max-width:650px){

    .dapsr-card{
        padding:23px 16px;
        border-radius:15px;
    }

    .dapsr-header h2{
        font-size:24px;
    }

    .dapsr-header p{
        font-size:12.5px;
    }

    .dapsr-size-options{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:440px){

    .dapsr-mode-switch{
        grid-template-columns:1fr 1fr;
    }

    .dapsr-dimensions{
        grid-template-columns:1fr auto 1fr;
    }

    .dapsr-method-buttons{
        grid-template-columns:1fr;
    }

    .dapsr-size-options{
        grid-template-columns:repeat(2,1fr);
    }

    .dapsr-before-after{
        grid-template-columns:1fr;
    }

    .dapsr-result-arrow{
        transform:rotate(90deg);
        text-align:center;
    }

    .dapsr-result-details{
        grid-template-columns:1fr;
    }

}

@media(prefers-reduced-motion:reduce){
    .dapsr-app *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}