/* =====================================================
   RAGO PDF STUDIO
   STEP 02
   SOFTWARE SKELETON
===================================================== */

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

html,
body{

    width:100%;
    height:100%;

}

body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:#111827;

    color:#fff;

}



/* =====================================================
   SOFTWARE WINDOW
===================================================== */

.rago-pdf-studio{

    width:100%;

    min-height:100vh;

    padding:15px;

}



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

.studio-header{

    width:100%;

    height:70px;

    margin-bottom:15px;

}



/* =====================================================
   TOOLBAR
===================================================== */

.studio-toolbar{

    width:100%;

    height:55px;

    margin-bottom:15px;

}



/* =====================================================
   MAIN WORKSPACE
===================================================== */
.studio-workspace{

    display:grid;

    grid-template-columns:

        260px
        1fr
        320px;

    gap:15px;

    align-items:start;

}



.studio-right{

    display:flex;

    flex-direction:column;

    gap:15px;

}








/* =====================================================
   LEFT PANEL
===================================================== */

.studio-left{

    min-height:1020px;

}



/* =====================================================
   IMAGE MONITOR
===================================================== */

.image-monitor{

    min-height:850px;

}



/* =====================================================
   PDF MONITOR
===================================================== */

.pdf-monitor{

    flex:none;

    height:350px;

}



/* =====================================================
   RIGHT PANEL
===================================================== */

.studio-right{

    min-height:700px;

}



/* =====================================================
   TIMELINE
===================================================== */

.studio-timeline{

    width:100%;

    height:160px;

    margin-bottom:15px;

}



/* =====================================================
   STATUS BAR
===================================================== */

.studio-status{

    width:100%;

    height:40px;

}



/* =====================================================
   ONLY BORDER
===================================================== */

.studio-header,
.studio-toolbar,
.studio-left,
.image-monitor,
.pdf-monitor,
.studio-right,
.studio-timeline,
.studio-status{

    border:1px solid #555;

}



/* =====================================================
   PANEL TITLE
===================================================== */

.panel-title{

    height:45px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 15px;

    border-bottom:1px solid #555;

}



/* =====================================================
   PANEL BODY
===================================================== */

.panel-body,
.monitor-body,
.timeline-body{

    padding:15px;

}



/* =====================================================
   LEFT PANEL BODY
===================================================== */

.folders{

    height:180px;

    border-bottom:1px solid #555;

    margin-bottom:15px;

    padding:10px;

}

.images{

    min-height:450px;

    padding:10px;

}





.export-wrapper{

    flex:1;

    display:flex;

    flex-direction:column;

}








/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:1400px){

.studio-workspace{

    grid-template-columns:

    220px
    1fr
    280px;

}

}



@media(max-width:1100px){

.studio-workspace{

grid-template-columns:

1fr;

}

}



@media(max-width:768px){

.rago-pdf-studio{

padding:10px;

}

}








/* ==========================================
PDF MONITOR ONLY
========================================== */

.pdf-monitor .monitor-body{

    height:210px;

    min-height:210px;

    max-height:210px;

}










/* =====================================================
   STEP 03
   RAGO PDF STUDIO HEADER
===================================================== */

.studio-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 22px;

    background:#161d2b;

    border:1px solid #293244;

    border-radius:14px;

}



/* LEFT */

.header-left{

    display:flex;

    align-items:center;

    gap:18px;

}



/* LOGO */

.studio-logo{

    width:52px;

    height:52px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#ff4d4d,#d92f2f);

    color:#fff;

    font-size:22px;

}



/* TITLE */

.studio-title h2{

    font-size:28px;

    font-weight:700;

    margin-bottom:3px;

}

.studio-title p{

    color:#94a3b8;

    font-size:13px;

}



/* RIGHT */

.header-right{

    display:flex;

    gap:12px;

}



/* ICON BUTTON */

.header-right button{

    width:44px;

    height:44px;

    border:none;

    border-radius:12px;

    background:#243247;

    color:#d8dee8;

    cursor:pointer;

    transition:.25s;

}

.header-right button:hover{

    background:#3b82f6;

    color:#fff;

}





/* =====================================================
   TOOLBAR
===================================================== */

.studio-toolbar{

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 15px;

    background:#161d2b;

    border-radius:14px;

    border:1px solid #293244;

}



/* TOOL BUTTON */

.studio-toolbar button{

    height:40px;

    padding:0 16px;

    border:none;

    border-radius:10px;

    background:#243247;

    color:#d8dee8;

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    transition:.25s;

    font-size:13px;

}



/* HOVER */

.studio-toolbar button:hover{

    background:#2563eb;

    color:#fff;

}



/* EXPORT BUTTON */

#exportBtn{

    margin-left:auto;

    background:#16a34a;

    color:#fff;

}

#exportBtn:hover{

    background:#22c55e;

}






/* =====================================================
   STEP 04
   PANEL UI
===================================================== */

.studio-left,
.image-monitor,
.pdf-monitor,
.studio-right{

    background:#151d2b;

    border:1px solid #2b364a;

    border-radius:12px;

    overflow:hidden;

}



/* ==========================================
   PANEL TITLE
========================================== */

.panel-title{

    height:46px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 16px;

    background:#1d2636;

    border-bottom:1px solid #2b364a;

    font-size:14px;

    font-weight:600;

}

.panel-title i{

    color:#60a5fa;

}



/* ==========================================
   PANEL BODY
========================================== */

.panel-body,
.monitor-body{

    height:calc(100% - 46px);

    padding:18px;

}



/* ==========================================
   LEFT PANEL
========================================== */

.folders{

    height:170px;

    border:1px dashed #334155;

    border-radius:8px;

    margin-bottom:18px;

    padding:12px;

}



.images{

    height:calc(100% - 190px);

    border:1px dashed #334155;

    border-radius:8px;

    padding:12px;

}



/* ==========================================
   MONITOR
========================================== */

.monitor-body{

    display:flex;

    justify-content:center;

    align-items:center;

    color:#64748b;

    font-size:18px;

}



/* ==========================================
   RIGHT PANEL
========================================== */

.studio-right .panel-body{

    display:flex;

    justify-content:center;

    align-items:center;

    color:#64748b;

}



/* ==========================================
   PANEL HOVER
========================================== */

.studio-left:hover,
.image-monitor:hover,
.pdf-monitor:hover,
.studio-right:hover{

    border-color:#3b82f6;

    transition:.25s;

}

















/* =====================================================
   STEP 05
   IMAGE MONITOR
===================================================== */

/* ==========================================
   IMAGE MONITOR
========================================== */

.image-monitor{

    display:flex;

    flex-direction:column;

}



/* ==========================================
   MONITOR HEADER
========================================== */

.image-monitor .panel-title{

    justify-content:space-between;

}



/* ==========================================
   IMAGE VIEWPORT
========================================== */

.image-monitor .monitor-body{

    position:relative;

    flex:1;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(45deg,#202938 25%,transparent 25%),

    linear-gradient(-45deg,#202938 25%,transparent 25%),

    linear-gradient(45deg,transparent 75%,#202938 75%),

    linear-gradient(-45deg,transparent 75%,#202938 75%);

    background-size:30px 30px;

    background-position:

    0 0,

    0 15px,

    15px -15px,

    -15px 0;

}









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

.image-monitor img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}



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

.image-monitor:hover{

    box-shadow:

    inset 0 0 0 1px #3b82f6;

}














/* =====================================================
   STEP 06
   PDF MONITOR
===================================================== */

.pdf-monitor{

    display:flex;

    flex-direction:column;

}



/* ==========================================
   PDF VIEW
========================================== */

.pdf-monitor .monitor-body{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#222b39;

    overflow:auto;

}






/* ==========================================
   PDF ICON
========================================== */

.pdf-monitor .monitor-body::after{

    content:"PDF Preview";

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    color:#94a3b8;

    font-size:14px;

}



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

.pdf-monitor:hover{

    box-shadow:

    inset 0 0 0 1px #ef4444;

}



















/* =====================================================
   STEP 07
   MONITOR TOOLBAR
===================================================== */

.monitor-toolbar{

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:0 12px;

    background:#1d2636;

    border-bottom:1px solid #2b364a;

}

.monitor-toolbar span{

    color:#cbd5e1;

    font-size:13px;

    font-weight:600;

}

.monitor-toolbar button{

    width:32px;

    height:32px;

    border:none;

    border-radius:8px;

    background:#273548;

    color:#d1d5db;

    cursor:pointer;

    transition:.25s;

}

.monitor-toolbar button:hover{

    background:#3b82f6;

    color:#fff;

}

.monitor-toolbar button i{

    font-size:13px;

}



/* Monitor body height */

.image-monitor .monitor-body,

.pdf-monitor .monitor-body{

    height:calc(100% - 88px);

}

















/* =====================================================
   STEP 09
   SIDEBARS
===================================================== */


/* ==========================================
   IMAGE BIN
========================================== */

.image-tools{

    display:flex;

    gap:8px;

    padding:14px;

    border-bottom:1px solid #293244;

}



.image-tools button{

    height:36px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

}



#uploadImages{

    flex:1;

    background:#2563eb;

    color:#fff;

}



#clearImages{

    width:38px;

    background:#ef4444;

    color:#fff;

}



.image-tools button:hover{

    opacity:.90;

}



/* ==========================================
   TABS
========================================== */

.image-tabs{

    display:flex;

    border-bottom:1px solid #293244;

}



.image-tabs button{

    flex:1;

    height:40px;

    border:none;

    background:transparent;

    color:#94a3b8;

    cursor:pointer;

}



.image-tabs .active{

    background:#1d2636;

    color:#fff;

    border-bottom:2px solid #3b82f6;

}



/* ==========================================
   FOLDERS
========================================== */

.folders{

    height:150px;

    margin:14px;

    padding:12px;

    border:1px dashed #3a475e;

    border-radius:10px;

    overflow:auto;

}



/* ==========================================
   IMAGE LIST
========================================== */

.images{

    height:calc(100% - 270px);

    margin:14px;

    padding:12px;

    border:1px dashed #3a475e;

    border-radius:10px;

    overflow:auto;

}



/* ==========================================
   EXPORT PANEL
========================================== */

.setting-group{

    margin-bottom:14px;

    border:1px solid #2d3748;

    border-radius:10px;

    overflow:hidden;

}



.setting-group h4{

    height:42px;

    display:flex;

    align-items:center;

    padding:0 15px;

    background:#1d2636;

    color:#fff;

    font-size:14px;

    font-weight:600;

}



/* ==========================================
   EXPORT BUTTON
========================================== */

#exportPDF{

    width:100%;

    height:48px;

    border:none;

    border-radius:10px;

    background:#16a34a;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    margin-top:15px;

}



#exportPDF:hover{

    background:#22c55e;

}



/* ==========================================
   SCROLLBAR
========================================== */

.folders::-webkit-scrollbar,

.images::-webkit-scrollbar{

    width:8px;

}



.folders::-webkit-scrollbar-thumb,

.images::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:20px;

}






























/* =====================================================
   STEP 11
   PROFESSIONAL EXPORT PANEL
===================================================== */

.export-panel{

    padding:15px;

    display:flex;

    flex-direction:column;

    gap:15px;

}



/* CARD */

.export-card{

    background:#1d2636;

    border:1px solid #2b364a;

    border-radius:10px;

    overflow:hidden;

}



/* TITLE */

.export-card-title{

    height:44px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 14px;

    background:#253247;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

}



/* ICON */

.export-card-title i{

    color:#60a5fa;

}



/* BODY */

.export-card-body{

    padding:15px;

    min-height:55px;

    color:#94a3b8;

    font-size:13px;

}



/* EXPORT BUTTON */

#exportPDF{

    margin-top:auto;

    height:35px;

    border:none;

    border-radius:10px;
    
    margin-top:-10px !important;
    
    background:linear-gradient(

        135deg,

        #16a34a,

        #15803d

    );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}



#exportPDF i{

    margin-right:8px;

}



#exportPDF:hover{

    transform:translateY(-2px);

    background:linear-gradient(

        135deg,

        #22c55e,

        #16a34a

    );

}





















/* =====================================================
   STEP 13
   STATUS BAR
===================================================== */

.studio-status{

    height:42px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 15px;

    background:#151d2b;

    border:1px solid #2b364a;

    border-radius:10px;

}



/* LEFT */

.status-left{

    display:flex;

    align-items:center;

    gap:15px;

}



/* CENTER */

.status-center{

    display:flex;

    gap:25px;

}



/* RIGHT */

.status-right{

    color:#64748b;

    font-size:12px;

}



/* ITEMS */

.status-left span,

.status-center span{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:13px;

    color:#cbd5e1;

}



/* ICONS */

.status-left i{

    color:#22c55e;

}



.status-center i{

    color:#60a5fa;

}



/* VALUE */

.status-center b{

    color:#ffffff;

}


















/* =====================================================
   STEP 14
   IMAGE BIN (FINAL V2)
===================================================== */

/* ==========================================
UPLOAD ACTIONS
========================================== */

.upload-box{

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px;

}

/* ADD IMAGE */

#uploadImages{

    flex:1;

    height:38px;

    padding:0 10px;

    border:none;

    border-radius:8px;

    background:#2563eb;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

}
#uploadImages:hover{

    background:#3b82f6;

}

/* REMOVE IMAGE */

#removeImageBtn{

    min-width:70px;

    height:38px;

    padding:0 10px;

    border:none;

    border-radius:8px;

    background:#dc2626;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

}

/* =====================================================
   REMOVE BUTTON - DARK RED
===================================================== */

#removeImageBtn{
    background:#991b1b;
    color:#ffffff;
    border:1px solid #b91c1c;
}

#removeImageBtn i{
    color:#fecaca;
}

#removeImageBtn:hover{
    background:#b91c1c;
    border-color:#dc2626;
    color:#ffffff;
}


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

.folder-section,

.image-section{

    padding:0 15px 15px;

}

.section-title{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:#cbd5e1;

    font-size:13px;

    font-weight:600;

}



/* ==========================================
FOLDER
========================================== */

.folder-item{

    padding:11px 12px;

    border-radius:10px;

    background:#1d2636;

    cursor:pointer;

    transition:.25s;

}

.folder-item:hover{

    background:#273548;

}

.folder-item.active{

    background:#2563eb;

}



/* ==========================================
IMAGE LIST
========================================== */

.image-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    max-height:330px;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:2px;

}



/* ==========================================
IMAGE ITEM
========================================== */

.image-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px;

    border-radius:10px;

    background:#1d2636;

    cursor:pointer;

    transition:.25s;

    border:1px solid transparent;

}

.image-item:hover{

    background:#273548;

    border-color:#3b82f6;

}

.image-item.active{

    border-color:#22c55e;

    background:#2b426c;

}



/* ==========================================
THUMB
========================================== */

.thumb{

    width:54px;

    height:54px;

    border-radius:8px;

    background:#334155;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    flex-shrink:0;

}

.thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* ==========================================
INFO
========================================== */

.image-info{

    flex:1;

    min-width:0;

}

.image-name{

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.image-size{

    margin-top:4px;

    color:#94a3b8;

    font-size:11px;

}



/* ==========================================
FOOTER
========================================== */

.image-footer{

    margin-top:auto;

    padding:12px 15px;

    border-top:1px solid #2b364a;

    color:#94a3b8;

    font-size:13px;

    background:#1c2635;

}










/* =====================================================
   STEP 15
   PROFESSIONAL TOOLBAR
===================================================== */

.studio-toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:10px 16px;

    gap:18px;

    background:#161d2b;

}



.toolbar-group{

    display:flex;

    align-items:center;

    gap:8px;

    padding-right:18px;

    border-right:1px solid #2b364a;

}



.toolbar-group:last-child{

    border-right:none;

}



.group-title{

    font-size:11px;

    color:#64748b;

    text-transform:uppercase;

    margin-right:6px;

}



.toolbar-group button{

    height:38px;

    padding:0 14px;

    border:none;

    border-radius:8px;

    background:#243247;

    color:#d8dee8;

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    transition:.25s;

    font-size:13px;

}



.toolbar-group button:hover{

    background:#2563eb;

}



.toolbar-group button i{

    font-size:14px;

}



/* EXPORT */

.toolbar-export{

    margin-left:auto;

}



#exportBtn{

    background:#16a34a;

    color:#fff;

}



#exportBtn:hover{

    background:#22c55e;

}














/* =====================================================
   STEP 16
   PROFESSIONAL VIEWERS
===================================================== */

.viewer-toolbar{

    height:42px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 14px;

    background:#1b2433;

    border-bottom:1px solid #2b364a;

}

.viewer-left{

    display:flex;

    align-items:center;

    gap:8px;

}

.viewer-left button{

    width:30px;

    height:30px;

    border:none;

    border-radius:6px;

    background:#273548;

    color:#ffffff;

    cursor:pointer;

    transition:.25s;

}

.viewer-left button:hover{

    background:#2563eb;

}

.viewer-left span,

.viewer-right{

    font-size:13px;

    color:#cbd5e1;

}



.image-monitor,

.pdf-monitor{

    display:flex;

    flex-direction:column;

}



.monitor-body{

    height:420px;

    min-height:420px;

    max-height:420px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1b2433;

}



.viewer-status{

    height:36px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 14px;

    border-top:1px solid #2b364a;

    background:#1b2433;

    font-size:12px;

    color:#94a3b8;

}



/* IMAGE CANVAS */

.image-canvas{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#94a3b8;

    background:

    linear-gradient(45deg,#222c3b 25%,transparent 25%),

    linear-gradient(-45deg,#222c3b 25%,transparent 25%),

    linear-gradient(45deg,transparent 75%,#222c3b 75%),

    linear-gradient(-45deg,transparent 75%,#222c3b 75%);

    background-size:28px 28px;

    background-position:

    0 0,

    0 14px,

    14px -14px,

    -14px 0;

}



/* PDF */

.pdf-paper{

    position:relative;

    width:50%;

    height:auto;

    aspect-ratio:794 / 1123;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border-radius:2px;

    max-height:95%;

}














/* =====================================================
   STEP 17
   FINAL PROFESSIONAL POLISH
===================================================== */


/* ==========================================
   ROOT COLORS
========================================== */

:root{

    --bg:#0f1724;

    --panel:#182232;

    --panel2:#202c3d;

    --border:#2f3c52;

    --hover:#2c3d57;

    --blue:#3b82f6;

    --green:#22c55e;

    --text:#ffffff;

    --muted:#94a3b8;

}



/* ==========================================
   BODY
========================================== */

body{

    background:var(--bg);

}



/* ==========================================
   SOFTWARE WINDOW
========================================== */

.rago-pdf-studio{

    padding:18px;

}



/* ==========================================
   PANELS
========================================== */

.studio-header,

.studio-toolbar,

.studio-left,

.image-monitor,

.pdf-monitor,

.studio-right,

.studio-timeline,

.studio-status{

    background:var(--panel);

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

    border-radius:14px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.18);

}



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

.studio-left:hover,

.image-monitor:hover,

.pdf-monitor:hover,

.studio-right:hover{

    border-color:var(--blue);

    box-shadow:

    0 0 0 1px rgba(59,130,246,.35),

    0 15px 35px rgba(0,0,0,.25);

}



/* ==========================================
   PANEL TITLE
========================================== */

.panel-title{

    background:var(--panel2);

    font-weight:600;

}



.panel-title i{

    color:#60a5fa;

}



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

button{

    transition:.25s;

}



button:hover{

    transform:translateY(-1px);

}



button:active{

    transform:scale(.97);

}



/* ==========================================
   TOOLBAR
========================================== */

.toolbar-group{

    padding-right:22px;

}



.toolbar-group button{

    box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.04);

}



/* ==========================================
   IMAGE LIST
========================================== */

.image-item{

    border:1px solid transparent;

}



.image-item:hover{

    border-color:var(--blue);

}



/* ==========================================
   ACTIVE IMAGE
========================================== */

.image-item.active{

    background:#213654;

}



/* ==========================================
   TIMELINE
========================================== */

.timeline-item{

    transition:.25s;

}



.timeline-thumb{

    box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.05);

}



.timeline-item:hover{

    transform:translateY(-3px);

}



/* ==========================================
   MONITOR
========================================== */

.image-canvas,

.pdf-paper{

    transition:.25s;

}



/* ==========================================
   STATUS
========================================== */

.studio-status{

    padding:0 18px;

}



/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:9px;

    height:9px;

}



::-webkit-scrollbar-track{

    background:#151d2b;

}



::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

    background:#475569;

}



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

::selection{

    background:#2563eb;

    color:#fff;

}












/* =====================================================
IMAGE BIN
===================================================== */

.image-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    overflow-y:auto;

}



.image-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px;

    border-radius:10px;

    background:#1d2636;

    cursor:pointer;

    transition:.25s;

}



.image-item:hover{

    background:#26354b;

}



.thumb{

    width:58px;

    height:58px;

    overflow:hidden;

    border-radius:8px;

    flex-shrink:0;

    background:#111827;

}



.thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.image-info{

    flex:1;

}



.image-name{

    color:#fff;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



.image-size{

    margin-top:5px;

    color:#94a3b8;

    font-size:12px;

}














/* =====================================================
PREVIEW IMAGE
===================================================== */

.preview-image{

    display:none;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

.preview-placeholder{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:80px;

    z-index:5;

}

.preview-placeholder i{

    font-size:48px;

    opacity:.35;

    margin-bottom:12px;
      marg-bottom:12px;
    
}

.image-item.active{

    background:#2d4f87;

    border-left:3px solid #22c55e;

}

















/* =====================================================
MULTI SELECT
===================================================== */

.image-item.selected{

    border:2px solid #3b82f6;

    background:#22395c;

    box-shadow:0 0 12px rgba(59,130,246,.35);

}





























/* =====================================================
DRAG ENGINE
===================================================== */

.drag-layer{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:99999;

}

.drag-badge{

    position:absolute;

    display:none;

    padding:12px 20px;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-weight:600;

    box-shadow:

    0 12px 35px rgba(0,0,0,.35);

}








.timeline-item.active{

    border:2px solid #22c55e;

    box-shadow:0 0 15px rgba(34,197,94,.4);

}













.pdf-paper{

    position:relative;
     

}

.pdf-preview-image{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    display:none;

}

.pdf-placeholder{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}















/* =====================================================
TOOL LIST
===================================================== */

.tool-list{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:12px;

    margin-top:50px;
    
    
   

    border-top:1px solid #2b364a;

}


/* =====================================================
TOOL BUTTON
===================================================== */

.tool-item{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    padding:10px 12px;

    background:#202c3d;

    border:1px solid #2b364a;

    border-radius:8px;

    color:#cbd5e1;

    font-size:13px;

    cursor:pointer;

    transition:.25s;

}


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

.tool-item i{

    width:18px;

    text-align:center;

    color:#60a5fa;

    font-size:14px;

}


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

.tool-item span{

    flex:1;

    text-align:left;

}


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

.tool-item:hover{

    background:#2b3b54;

    border-color:#3b82f6;

    color:#ffffff;

}


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

.tool-item.active{

    background:#2563eb;

    border-color:#3b82f6;

    color:#ffffff;

}

.tool-item.active i{

    color:#ffffff;

}

















/* =====================================================
TOOLBOX LAYOUT
===================================================== */

.toolbox-layout{

    display:block;

    width:100%;

}


/* =====================================================
LEFT TOOL LIST
===================================================== */

.tool-list{

    padding:12px;

    border-right:1px solid #2b364a;

    display:flex;

    flex-direction:column;

    gap:8px;

    background:#1b2433;

}
















/* =====================================================
RIGHT CONTROL AREA
===================================================== */
.tool-controls{

    width:100%;

    padding:20px;

    min-height:320px;

    overflow-y:auto;

}


/* =====================================================
ALL PANELS
===================================================== */

.tool-panel{

    display:none;

    animation:fadePanel .25s ease;

}


/* =====================================================
ACTIVE PANEL
===================================================== */

.tool-panel.active-panel{

    display:block;

}


/* =====================================================
PANEL TITLE
===================================================== */

.tool-panel h3{

    margin:0 0 18px;

    font-size:18px;

    color:#ffffff;

    font-weight:600;

}


/* =====================================================
DESCRIPTION
===================================================== */

.tool-panel p{

    margin:0;

    color:#8ea7c8;

    font-size:13px;

    line-height:1.6;

}


/* =====================================================
ANIMATION
===================================================== */

@keyframes fadePanel{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

























/*=====================================================
CROP PANEL
=====================================================*/

.tool-section{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.tool-heading{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:600;

    color:#ffffff;

    padding-bottom:10px;

    border-bottom:1px solid #2b364a;

}

.tool-group{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.tool-group label{

    font-size:12px;

    color:#8ea7c8;

}

.tool-group input[type=number],
.tool-group select{

    width:100%;

    height:36px;

    background:#20293a;

    border:1px solid #31405a;

    color:#fff;

    border-radius:8px;

    padding:0 10px;

}

.tool-group input[type=range]{

    width:100%;

}

.check-row{

    display:flex;

    align-items:center;

    gap:10px;

    color:#d7e6ff;

    font-size:13px;

}

.tool-actions{

    display:flex;

    gap:12px;

    margin-top:10px;

}

.btn-primary{

    flex:1;

    height:40px;

    border:none;

    background:#2f6bff;

    color:#fff;

    border-radius:8px;

    cursor:pointer;

}

.btn-secondary{

    width:100px;

    border:none;

    background:#2a3448;

    color:#fff;

    border-radius:8px;

    cursor:pointer;

}



















/* ==========================================
TOOL CONTROL PANEL
========================================== */

.tool-controls{

    position:relative;

    width:100%;

    height:100%;

}

/* ==========================================
ALL PANELS
========================================== */

.tool-panel{

    display:none;

    width:100%;

}

/* ==========================================
ACTIVE PANEL
========================================== */

.tool-panel.active-panel{

    display:block;

}







.slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:6px;

    font-size:12px;

    color:#8ea7c8;

}

.slider-value strong{

    color:#4ea1ff;

}

.quick-buttons{

    display:flex;

    gap:10px;

    margin-top:8px;

}

.tool-btn{

    flex:1;

    height:38px;

    border:1px solid #31405a;

    background:#20293a;

    color:#ffffff;

    border-radius:8px;

    cursor:pointer;

    transition:.2s;

}

.tool-btn:hover{

    background:#2f6bff;

    border-color:#2f6bff;

}











/* ==========================================
RESIZE PANEL
========================================== */

#resizePanel .tool-group{

    margin-bottom:18px;

}

#resizePanel input[type="number"],
#resizePanel select{

    width:100%;

}

#resizePanel input[type="range"]{

    width:100%;

}

#resizePanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

    font-size:12px;

    color:#8ea7c8;

}

#resizePanel .slider-value strong{

    color:#4ea1ff;

    font-size:13px;

    font-weight:600;

}

#resizePanel .tool-actions{

    display:flex;

    gap:12px;

    margin-top:24px;

}

#resizePanel .tool-actions button{

    flex:1;

}















/* ==========================================
BRIGHTNESS PANEL
========================================== */

#brightnessPanel .tool-group{

    margin-bottom:18px;

}

#brightnessPanel input[type="range"]{

    width:100%;

}

#brightnessPanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

    font-size:12px;

    color:#8ea7c8;

}

#brightnessPanel .slider-value strong{

    color:#4ea1ff;

    font-size:13px;

    font-weight:600;

}

#brightnessPanel .tool-actions{

    display:flex;

    gap:12px;

    margin-top:24px;

}

#brightnessPanel .tool-actions button{

    flex:1;

}
















/* ==========================================
CONTRAST PANEL
========================================== */

#contrastPanel .tool-group{

    margin-bottom:18px;

}

#contrastPanel input[type="range"]{

    width:100%;

}

#contrastPanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

    font-size:12px;

    color:#8ea7c8;

}

#contrastPanel .slider-value strong{

    color:#4ea1ff;

    font-size:13px;

    font-weight:600;

}

#contrastPanel .tool-actions{

    display:flex;

    gap:12px;

    margin-top:24px;

}

#contrastPanel .tool-actions button{

    flex:1;

}


























/* ==========================================
COLOR PANEL
========================================== */

#colorPanel .tool-group{

    margin-bottom:18px;

}

#colorPanel input[type="range"]{

    width:100%;

}

#colorPanel select{

    width:100%;

}

#colorPanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

    font-size:12px;

    color:#8ea7c8;

}

#colorPanel .slider-value strong{

    color:#4ea1ff;

    font-size:13px;

    font-weight:600;

}

#colorPanel .tool-actions{

    display:flex;

    gap:12px;

    margin-top:24px;

}

#colorPanel .tool-actions button{

    flex:1;

}






















/* ==========================================
   PDF WORKSPACE
========================================== */

.image-canvas{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


.safe-guide{

    position:absolute;

    inset:10px;

    border:2px dashed #22c55e;

    pointer-events:none;

}

.guard-guide{

    position:absolute;

    inset:0px;

    border:2px dashed #f59e0b;

    pointer-events:none;

    opacity:.8;

}

.page-center{

    position:absolute;

    left:50%;

    top:50%;

    width:18px;

    height:18px;

    margin-left:-9px;

    margin-top:-9px;

    border:2px solid rgba(255,255,255,.45);

    border-radius:50%;

    pointer-events:none;

}

.page-center::before{

    content:"";

    position:absolute;

    left:50%;

    top:-30px;

    width:1px;

    height:78px;

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

}

.page-center::after{

    content:"";

    position:absolute;

    top:50%;

    left:-30px;

    width:78px;

    height:1px;

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

}

.preview-image{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    transform-origin:center center;

    max-width:none;

    max-height:none;

    user-select:none;

    pointer-events:none;

}

















/* ==========================================
   PREVIEW CANVAS
========================================== */

.preview-canvas{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    display:block;

    z-index:100;

}














.pdf-workspace{

    position:relative;

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}






.page-guide{

    position:relative;

    flex:none;

    transition:.25s;

}

/* Portrait */

.page-guide.portrait{

    width:297px;

    height:420px;

    aspect-ratio:794 / 1123;

}

/* Landscape */

.page-guide.landscape{

    width:420px;

    height:297px;

    aspect-ratio:1123 / 794;

}










.preview-canvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    z-index:100;

}

.preview-placeholder{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}













/* =====================================================
   RAGO SLIDER PRO
===================================================== */

input[type="range"]{

    -webkit-appearance:none;

    appearance:none;

    width:100%;

    height:3px;

    background:transparent;

    cursor:pointer;

    outline:none;

}


/* =====================================================
   TRACK
===================================================== */

input[type="range"]::-webkit-slider-runnable-track{

    height:2px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        #2d8cff,

        #7d5cff,

        #a45cff

    );

    box-shadow:

        0 0 3px rgba(74,144,255,.6),

        0 0 8px rgba(74,144,255,.25);

}


input[type="range"]::-moz-range-track{

    height:2px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        #2d8cff,

        #7d5cff,

        #a45cff

    );

}


/* =====================================================
   THUMB
===================================================== */

input[type="range"]::-webkit-slider-thumb{

    -webkit-appearance:none;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ffffff;

    border:2px solid #4d8dff;

    margin-top:-4px;

    box-shadow:

        0 0 5px #4d8dff,

        0 0 10px rgba(77,141,255,.8),

        0 0 18px rgba(77,141,255,.4);

    transition:.15s;

}


input[type="range"]:hover::-webkit-slider-thumb{

    transform:scale(1.15);

}


input[type="range"]::-moz-range-thumb{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#fff;

    border:2px solid #4d8dff;

    box-shadow:

        0 0 5px #4d8dff,

        0 0 10px rgba(77,141,255,.8);

}


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

input[type="range"]:active::-webkit-slider-thumb{

    transform:scale(1.25);

    box-shadow:

        0 0 8px #4d8dff,

        0 0 16px #4d8dff,

        0 0 24px rgba(77,141,255,.5);

}





















/* =====================================================
   ROTATION PANEL - ULTRA COMPACT
===================================================== */

#rotatePanel .tool-section{

    padding:4px 6px;

}

#rotatePanel .tool-heading{

    margin-bottom:4px;

    padding-bottom:4px;

}

#rotatePanel .tool-group{

    margin:2px 0;

    padding:0;

}

#rotatePanel .tool-group label{

    display:block;

    margin:0 0 2px;

    font-size:10px;

    line-height:1;

}

#rotatePanel input[type="range"]{

    width:100%;

    height:10px;

    margin:-2px 0;

    padding:0;

}

#rotatePanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:-2px 0 0;

    padding:0;

    font-size:8px;

    line-height:1;

}

#rotatePanel .tool-actions{

    margin-top:6px;

}

#rotatePanel .tool-row{

    display:flex;

    gap:6px;

    margin:4px 0;

}

#rotatePanel .tool-row .tool-btn{

    height:36px;

    padding:0 12px;

    font-size:12px;

}

#rotatePanel .btn-secondary,

#rotatePanel .btn-primary{

    height:40px;

}



#rotatePanel .tool-group + .tool-group{

    margin-top:4px;

}

#rotatePanel .tool-btn{

    min-height:34px;

}

#rotatePanel .tool-heading span{

    font-size:18px;

}

















/* =====================================================
   POSITION & SCALE - ULTRA COMPACT
===================================================== */

#resizePanel .tool-section{

    padding:4px 6px;

}

#resizePanel .tool-heading{

    margin-bottom:2px;

    padding-bottom:4px;

}

#resizePanel .tool-group{

    margin:0;

    padding:0;

}

#resizePanel .tool-group + .tool-group{

    margin-top:2px;

}

#resizePanel .tool-group label{

    display:block;

    margin:0;

    padding:0;

    font-size:8px;

    line-height:10px;

}

#resizePanel input[type="range"]{

    width:100%;

    height:10px;

    margin:-3px 0;

    padding:0;

}

#resizePanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:-2px 0 0;

    padding:0;

    font-size:7px;

    line-height:9px;

}

#resizePanel .tool-actions{

    margin-top:4px;

}


























/* =====================================================
   BRIGHTNESS PANEL - ULTRA COMPACT
===================================================== */

#brightnessPanel .tool-section{

    padding:4px 6px;

}

#brightnessPanel .tool-heading{

    margin-bottom:4px;

    padding-bottom:4px;

}

#brightnessPanel .tool-group{

    margin:2px 0;

    padding:0;

}

#brightnessPanel .tool-group label{

    display:block;

    margin:0 0 2px;

    font-size:10px;

    line-height:1;

}

#brightnessPanel input[type="range"]{

    width:100%;

    height:10px;

    margin:-2px 0;

    padding:0;

}

#brightnessPanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:-2px 0 0;

    padding:0;

    font-size:8px;

    line-height:1;

}

#brightnessPanel .tool-actions{

    margin-top:6px;

}

#brightnessPanel .tool-check{

    margin:4px 0;

}

#brightnessPanel .tool-check label{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:12px;

    margin:0;

}

#brightnessPanel .btn-secondary,

#brightnessPanel .btn-primary{

    height:40px;

}














#brightnessPanel .tool-group + .tool-group{

    margin-top:3px;

}

#brightnessPanel .tool-check{

    margin:2px 0;

}

#brightnessPanel .tool-heading span{

    font-size:18px;

}
























/* =====================================================
   COLOR PANEL (COMPACT)
===================================================== */

#colorPanel .tool-section{

    padding:6px 8px;

}

#colorPanel .tool-heading{

    margin-bottom:4px;

}

#colorPanel .tool-group{

    margin:2px 0;

}

#colorPanel .tool-group label{

    display:block;

    margin:0;

    padding:0;

    font-size:8px;

    line-height:1;

}

#colorPanel input[type="range"]{

    margin:0;

}

#colorPanel .slider-value{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:0;

    padding:0;

    font-size:7px;

    line-height:1;

}

#colorPanel .check-row{

    margin:4px 0;

    font-size:11px;

}

#colorPanel .tool-actions{

    margin-top:6px;

}








#colorPanel .tool-group{

    margin:0;

}

#colorPanel input[type="range"]{

    margin:-2px 0;

}

#colorPanel .slider-value{

    margin-top:-3px;

}


























/* =====================================================
   RAGO TIMELINE V3
   PART 01
   CONTAINER
===================================================== */

.studio-timeline{

    display:flex;

    flex-direction:column;

    background:#182232;

    border:1px solid #2f3c52;

    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.20);

}


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

.timeline-header{

    height:52px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 16px;

    background:#202c3d;

    border-bottom:1px solid #2f3c52;

}


/* ---------- LEFT ---------- */

.timeline-title{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:14px;

    font-weight:600;

}

.timeline-title i{

    color:#60a5fa;

}


/* ---------- COUNT ---------- */

.timeline-count{

    margin-left:10px;

    padding:4px 10px;

    border-radius:20px;

    background:#273548;

    color:#8fb7ff;

    font-size:11px;

    font-weight:600;

}


/* ---------- TOOLBAR ---------- */

.timeline-toolbar{

    display:flex;

    gap:8px;

}

.timeline-toolbar button{

    width:34px;

    height:34px;

    border:none;

    border-radius:8px;

    background:#273548;

    color:#ffffff;

    cursor:pointer;

    transition:.20s;

}

.timeline-toolbar button:hover{

    background:#2563eb;

}


/* =====================================================
   BODY
===================================================== */

.timeline-body{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px;

    min-height:150px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

}


/* =====================================================
   SCROLLBAR
===================================================== */

.timeline-body::-webkit-scrollbar{

    height:8px;

}

.timeline-body::-webkit-scrollbar-track{

    background:#182232;

}

.timeline-body::-webkit-scrollbar-thumb{

    background:#43556f;

    border-radius:20px;

}

.timeline-body::-webkit-scrollbar-thumb:hover{

    background:#5d7394;

}




















/* =====================================================
   RAGO TIMELINE V3
   PART 02
   PREMIUM CARD
===================================================== */

.timeline-item{

    position:relative;

    flex:0 0 105px;

    width:105px;

    height:118px;

    background:#1b2432;

    border:1px solid #324258;

    border-radius:14px;

    overflow:hidden;

    cursor:pointer;

    transition:.25s ease;

    box-sizing:border-box;

}


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

.timeline-item:hover{

    transform:translateY(-4px);

    border-color:#3b82f6;

    box-shadow:

        0 8px 24px rgba(0,0,0,.35),

        0 0 0 1px rgba(59,130,246,.25);

}


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

.timeline-item.active{

    border-color:#22c55e;

    box-shadow:

        0 0 0 2px rgba(34,197,94,.25),

        0 8px 24px rgba(0,0,0,.35);

}


/* ==========================================
   FILE NAME
========================================== */

.timeline-name{

    position:absolute;

    top:6px;

    left:6px;

    right:6px;

    height:14px;

    line-height:14px;

    text-align:center;

    font-size:9px;

    font-weight:600;

    color:#ffffff;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    z-index:20;

    pointer-events:none;

}


/* ==========================================
   THUMB
========================================== */

.timeline-thumb{

    position:absolute;

    top:22px;

    left:0;

    right:0;

    bottom:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px;

    box-sizing:border-box;

}


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

.timeline-thumb img{

    width:auto;

    height:auto;

    max-width:90%;

    max-height:90%;

    object-fit:contain;

    image-rendering:auto;

    display:block;

}


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

.timeline-number{

    position:absolute;

    top:4px;

    left:4px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:rgba(0,0,0,.75);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

    font-weight:700;

}


/* ==========================================
   FILE TYPE
========================================== */

.timeline-type{

    position:absolute;

    top:4px;

    right:4px;

    padding:2px 6px;

    border-radius:10px;

    background:#2563eb;

    color:#ffffff;

    font-size:8px;

    font-weight:700;

    letter-spacing:.3px;

}


/* ==========================================
   IMAGE SHADOW
========================================== */

.timeline-thumb img:hover{

    transform:scale(1.05);

    transition:.20s;

}


/* ==========================================
   GLASS OVERLAY
========================================== */

.timeline-thumb::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(255,255,255,.03),

        transparent 30%,

        rgba(0,0,0,.08)

    );

    pointer-events:none;

}
















/* =====================================================
   RAGO TIMELINE V3
   PART 03
   PREMIUM EFFECTS
===================================================== */


/* ==========================================
   ACTIVE GLOW
========================================== */

.timeline-item.active{

    transform:translateY(-2px);

    border-color:#22c55e;

    box-shadow:

        0 0 0 2px rgba(34,197,94,.30),

        0 12px 28px rgba(0,0,0,.35);

}


/* ==========================================
   HOVER IMAGE
========================================== */

.timeline-item:hover .timeline-thumb img{

    transform:scale(1.06);

    transition:transform .20s ease;

}


/* ==========================================
   IMAGE ANIMATION
========================================== */

.timeline-thumb img{

    transition:

        transform .20s ease,

        filter .20s ease;

}


/* ==========================================
   SELECT ANIMATION
========================================== */

.timeline-item{

    transition:

        transform .20s ease,

        box-shadow .20s ease,

        border-color .20s ease;

}


/* ==========================================
   DRAG READY
========================================== */

.timeline-item.dragging{

    opacity:.45;

    transform:scale(.96);

}


.timeline-item.drag-over{

    border-color:#3b82f6;

    box-shadow:

        0 0 0 2px rgba(59,130,246,.30);

}


/* ==========================================
   CURSOR
========================================== */

.timeline-thumb{

    cursor:pointer;

}


/* ==========================================
   SMOOTH SCROLL
========================================== */

.timeline-body{

    scroll-behavior:smooth;

    scroll-padding-left:20px;

}


/* ==========================================
   SCROLLBAR
========================================== */

.timeline-body::-webkit-scrollbar{

    height:8px;

}


.timeline-body::-webkit-scrollbar-track{

    background:#172130;

    border-radius:20px;

}


.timeline-body::-webkit-scrollbar-thumb{

    background:#41536d;

    border-radius:20px;

}


.timeline-body::-webkit-scrollbar-thumb:hover{

    background:#5d7394;

}


/* ==========================================
   EMPTY STATE
========================================== */

.timeline-body:empty::before{

    content:"Drop Images Here";

    width:100%;

    text-align:center;

    color:#6b7b95;

    font-size:14px;

    padding-top:40px;

}



















/* =====================================================
   RAGO TIMELINE V3
   PART 04
   DRAG & DROP READY
===================================================== */


/* ==========================================
   DRAGGING CARD
========================================== */

.timeline-item.dragging{

    opacity:.45;

    transform:scale(.96);

    cursor:grabbing;

    z-index:999;

}


/* ==========================================
   DROP TARGET
========================================== */

.timeline-item.drag-over{

    border-color:#3b82f6;

    box-shadow:

        0 0 0 2px rgba(59,130,246,.35),

        0 10px 24px rgba(0,0,0,.35);

}


/* ==========================================
   INSERT LINE
========================================== */

.timeline-item.drag-over::before{

    content:"";

    position:absolute;

    left:-3px;

    top:8px;

    bottom:8px;

    width:4px;

    background:#3b82f6;

    border-radius:20px;

}


/* ==========================================
   DROP AREA
========================================== */

.timeline-body.drag-active{

    background:rgba(37,99,235,.05);

    transition:.20s;

}


/* ==========================================
   CURSOR
========================================== */

.timeline-item{

    cursor:grab;

}

.timeline-item:active{

    cursor:grabbing;

}


/* ==========================================
   SELECT EFFECT
========================================== */

.timeline-item.selected{

    border-color:#f59e0b;

    box-shadow:

        0 0 0 2px rgba(245,158,11,.30),

        0 8px 20px rgba(0,0,0,.30);

}


/* ==========================================
   TRANSITIONS
========================================== */

.timeline-item,

.timeline-thumb,

.timeline-thumb img{

    transition:

        all .20s ease;

}


/* ==========================================
   DISABLE IMAGE DRAG
========================================== */

.timeline-thumb img{

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

}


/* ==========================================
   NICE SCROLL SNAP
========================================== */

.timeline-body{

    scroll-snap-type:x proximity;

}

.timeline-item{

    scroll-snap-align:start;

}


/* ==========================================
   READY FOR JS
========================================== */

.timeline-item.reordering{

    transition:none;

}























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

.setting-group{

    display:flex;
    flex-direction:column;
    gap:12px;

    margin-bottom:8px;

    padding:12px;



    border-radius:12px;

}

/* ==========================================
   LABEL
========================================== */

.setting-group label{

    font-size:12px;

    font-weight:600;

    color:#dbeafe;

}


/* ==========================================
   SELECT
========================================== */

.setting-group select{

    width:100%;

    height:40px;

    padding:0 12px;

    border:1px solid #34445c;

    border-radius:8px;

    background:#1b2638;

    color:#ffffff;

    font-size:13px;

    outline:none;

    transition:.20s;

}

.setting-group select:hover{

    border-color:#4f8cff;

}

.setting-group select:focus{

    border-color:#3b82f6;

    box-shadow:

        0 0 0 3px rgba(59,130,246,.18);

}


/* ==========================================
   ORIENTATION BUTTONS
========================================== */

.option-buttons{

    display:flex;

    gap:10px;

}


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

.option-btn{

    flex:1;

    height:42px;

    border:none;

    border-radius:10px;

    background:#253247;

    color:#cbd5e1;

    font-size:13px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    cursor:pointer;

    transition:.20s;

}


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

.option-btn i{

    font-size:15px;

}


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

.option-btn:hover{

    background:#32517d;

    color:#ffffff;

}


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

.option-btn.active{

    background:#2563eb;

    color:#ffffff;

    box-shadow:

        0 0 0 2px rgba(37,99,235,.25);

}


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

@media(max-width:768px){

    .option-buttons{

        flex-direction:column;

    }

}


































/* ==========================================
VIEWER ORIENTATION BUTTONS
========================================== */

.viewer-mode-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-width:110px;

    height:32px;

    padding:0 14px;

    border:none;

    border-radius:8px;

    background:#2b364a;

    color:#d7e4ff;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

    cursor:pointer;

    transition:.25s;

}

.viewer-mode-btn:hover{

    background:#355fe8;

}

.viewer-mode-btn.active{

    background:#2f67f6;

    color:#ffffff;

}


























/* =====================================================
EXPORT LOADER
===================================================== */

.export-loader{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.75);

    backdrop-filter:blur(5px);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999999;

}

.export-loader.show{

    display:flex;

}

.export-box{

    width:420px;

    padding:35px;

    background:#1e293b;

    border-radius:14px;

    text-align:center;

    color:#fff;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.export-spinner{

    width:65px;

    height:65px;

    margin:0 auto 20px;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid #3b82f6;

    border-radius:50%;

    animation:ragoSpin .8s linear infinite;

}

#exportStatus{

    color:#cbd5e1;

    margin-top:10px;

}

@keyframes ragoSpin{

    to{

        transform:rotate(360deg);

    }

}













/* =====================================================
   PDF SIZE ESTIMATOR
===================================================== */

.compression-estimate{

   margin-top:-5px !important;

    padding:16px;

    border-radius:12px;

    background:#20293a;

    border:1px solid #34415c;

    transition:.25s;

}

.compression-estimate:hover{

    border-color:#4d7cff;

    box-shadow:0 0 0 1px rgba(77,124,255,.15);

}

.estimate-title{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:600;

    color:#dfe8ff;

    margin-bottom:14px;

}

.estimate-title i{

    color:#4d7cff;

}

.estimate-size{

    font-size:18px;

    font-weight:700;

    color:#ffffff;

    line-height:1.2;

    margin-bottom:8px;

    word-break:break-word;

}

.estimate-original{

    font-size:13px;

    color:#9fb2d6;

    margin-bottom:6px;

}

.estimate-saving{

    display:inline-flex;

    align-items:center;

    padding:5px 10px;

    border-radius:30px;

    background:#143524;

    color:#57d287;

    font-size:12px;

    font-weight:600;

    border:1px solid rgba(87,210,135,.25);

}












/* =====================================================
RAGO IMAGE CONTEXT MENU
===================================================== */

.rago-context-menu{
    position: fixed;
    display: none;

    min-width: 180px;
    padding: 8px;

    background: #172235;
    border: 1px solid #34445f;
    border-radius: 10px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.45);

    z-index: 999999;
}

.rago-context-menu.show{
    display: block;
}

.rago-context-menu button{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #e8f0ff;

    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.rago-context-menu button:hover{
    background: #263754;
}

.rago-context-menu button i{
    width: 18px;
    color: #58a6ff;
}

.rago-context-menu button[data-action="delete"] i{
    color: #ff5d6c;
}

.context-divider{
    height: 1px;
    margin: 6px 4px;
    background: #34445f;
}













/* =====================================================
   RAGO PREVIEW CANVAS
   INTERACTION PASS-THROUGH FIX
===================================================== */

.preview-canvas,
#previewCanvas{

    pointer-events:none !important;

}









/* =====================================================
   RAGO PDF STUDIO
   SEND TOOLBAR FIT FIX
===================================================== */


/* =====================================================
   PARENT TOOLBAR
===================================================== */

.studio-toolbar{
    display:flex;
    align-items:center;

    justify-content:flex-start;

    gap:8px;

    padding-left:10px;
    padding-right:12px;

    overflow:hidden;

    box-sizing:border-box;
}


/* =====================================================
   ALL TOOLBAR GROUPS
===================================================== */

.toolbar-group{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:6px;

    min-width:0;

    padding-right:10px;

    box-sizing:border-box;
}


/* =====================================================
   DOWNLOAD GROUP
===================================================== */

.toolbar-download{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:6px;

    margin-left:0;
    margin-right:0;

    padding-right:10px;

    min-width:0;
}


/* Download title compact */

.toolbar-download .group-title{
    flex:0 0 auto;

    margin-right:2px;

    white-space:nowrap;
}


/* Download button compact */

.toolbar-download button{
    flex:0 0 auto;

    height:38px;

    padding:0 12px;

    min-width:0;

    gap:6px;

    white-space:nowrap;

    box-sizing:border-box;
}


/* =====================================================
   SEND GROUP
   PUSH TO RIGHT + SAFE EDGE SPACE
===================================================== */

.toolbar-send{
    flex:0 0 auto;

    margin-left:auto;
    margin-right:0;

    padding-left:8px;
    padding-right:4px;

    border-right:none;

    display:flex;
    align-items:center;

    gap:6px;

    min-width:0;

    box-sizing:border-box;
}


/* =====================================================
   SEND TITLE
===================================================== */

.toolbar-send .group-title{
    flex:0 0 auto;

    margin-right:2px;

    white-space:nowrap;
}


/* =====================================================
   SEND BUTTONS
===================================================== */

.toolbar-send button{
    flex:0 0 auto;

    height:38px;

    padding:0 9px;

    min-width:0;

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

    gap:5px;

    white-space:nowrap;

    font-size:12px;

    box-sizing:border-box;
}


/* =====================================================
   SEND ICONS
===================================================== */

.toolbar-send button i{
    flex:0 0 auto;

    font-size:14px;
}


/* =====================================================
   LAST BUTTON SAFE RIGHT SPACE
===================================================== */

.toolbar-send button:last-child{
    margin-right:2px;
}


/* =====================================================
   MEDIUM DESKTOP FIT
===================================================== */

@media(max-width:1200px){

    .studio-toolbar{
        gap:6px;

        padding-left:8px;
        padding-right:10px;
    }


    .toolbar-group{
        gap:5px;

        padding-right:7px;
    }


    .toolbar-download{
        gap:5px;

        padding-right:7px;
    }


    .toolbar-download button{
        padding-left:10px;
        padding-right:10px;
    }


    .toolbar-send{
        gap:5px;

        padding-left:5px;
        padding-right:2px;
    }


    .toolbar-send button{
        padding-left:8px;
        padding-right:8px;

        gap:4px;

        font-size:11px;
    }

}








/* =====================================================
   RAGO PDF STUDIO
   TOOLBAR PREMIUM BUTTON COLORS
===================================================== */

/* =========================
   IMAGES - BLUE
========================= */

#addImagesBtn{
    background:#1e3a5f;
    color:#dbeafe;
    border:1px solid rgba(59,130,246,.45);
}

#addImagesBtn i{
    color:#60a5fa;
}

#addImagesBtn:hover{
    background:#2563eb;
    color:#ffffff;
}


/* =========================
   FOLDER - GOLD / AMBER
========================= */

#folderBtn{
    background:#493817;
    color:#fef3c7;
    border:1px solid rgba(245,158,11,.45);
}

#folderBtn i{
    color:#fbbf24;
}

#folderBtn:hover{
    background:#d97706;
    color:#ffffff;
}


/* =========================
   CAMERA - PURPLE
========================= */

#cameraBtn{
    background:#35245f;
    color:#ede9fe;
    border:1px solid rgba(139,92,246,.45);
}

#cameraBtn i{
    color:#a78bfa;
}

#cameraBtn:hover{
    background:#7c3aed;
    color:#ffffff;
}


/* =========================
   CLEAR ALL - RED
========================= */

#clearAllBtn{
    background:#4a2028;
    color:#fee2e2;
    border:1px solid rgba(239,68,68,.45);
}

#clearAllBtn i{
    color:#fb7185;
}

#clearAllBtn:hover{
    background:#dc2626;
    color:#ffffff;
}


/* =========================
   WHATSAPP - BRAND GREEN
========================= */

#sendWhatsAppBtn{
    background:#123c2c;
    color:#dcfce7;
    border:1px solid rgba(37,211,102,.45);
}

#sendWhatsAppBtn i{
    color:#25D366;
}

#sendWhatsAppBtn:hover{
    background:#25D366;
    color:#ffffff;
}

#sendWhatsAppBtn:hover i{
    color:#ffffff;
}


/* =========================
   TELEGRAM - BRAND BLUE
========================= */

#sendTelegramBtn{
    background:#17384c;
    color:#e0f2fe;
    border:1px solid rgba(36,161,222,.45);
}

#sendTelegramBtn i{
    color:#24A1DE;
}

#sendTelegramBtn:hover{
    background:#24A1DE;
    color:#ffffff;
}

#sendTelegramBtn:hover i{
    color:#ffffff;
}


/* =========================
   EMAIL - CLEAN WHITE
========================= */

#sendEmailBtn{
    background:#243247;
    color:#ffffff;
    border:1px solid #475569;
}

#sendEmailBtn i{
    color:#ffffff;
}

#sendEmailBtn:hover{
    background:#334155;
    color:#ffffff;
    border-color:#64748b;
}

#sendEmailBtn:hover i{
    color:#ffffff;
}






























/* =====================================================
   RAGO PDF STUDIO
   RIGHT PANEL COMPACT HEIGHT FIX
   FINAL OVERRIDE
===================================================== */

/* Right column ko content height par rakho */
.studio-right{
    min-height:0 !important;
    height:auto !important;
    align-self:start !important;
}

/* Export settings ko compact karo */
.export-panel{
    padding:10px !important;
    gap:8px !important;
}

/* Export cards ke beech extra height kam */
.export-card{
    margin:0 !important;
}

/* Card title compact */
.export-card-title{
    height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    font-size:12px !important;
}

/* Card body compact */
.export-card-body{
    padding:10px !important;
    min-height:0 !important;
}

/* Settings groups compact */
.setting-group{
    gap:8px !important;
    margin-bottom:6px !important;
    padding:9px !important;
}

/* Estimate box compact */
.compression-estimate{
    margin-top:0 !important;
    padding:10px !important;
}

/* Export + Print row compact */
.export-action-row{
    margin-top:0 !important;
    padding:6px 0 0 !important;
    gap:8px !important;
}

/* Buttons slightly compact */
.export-action-row #exportPDF,
.export-action-row #printPDFBtn{
    height:38px !important;
}





/* =====================================================
   RAGO PDF STUDIO
   LEFT + RIGHT EQUAL HEIGHT
   FINAL OVERRIDE
===================================================== */

/* Grid ke dono side panels equal row height lenge */
.studio-workspace{
    align-items:stretch !important;
}

/* LEFT */
.studio-left{
    height:auto !important;
    min-height:1020px !important;
    align-self:stretch !important;
}

/* RIGHT */
.studio-right{
    height:auto !important;
    min-height:1020px !important;
    align-self:stretch !important;
}

/* Right side internal layout */
.studio-right{
    display:flex !important;
    flex-direction:column !important;
}

/* Export content normal rahe */
.export-panel{
    flex:1 !important;
}







/* =====================================================
   IMAGE PREVIEW VISUAL AREA
   STOP ONLY MONITOR BODY STRETCH
===================================================== */

.image-monitor .monitor-body{
    flex:0 0 460px !important;
    height:460px !important;
    min-height:460px !important;
    max-height:460px !important;
}

/* Lower editor/settings area ko compress mat karo */
.image-monitor .monitor-controls{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:max-content !important;
}
















/* =====================================================
   RAGO PDF STUDIO
   FUTURISTIC SAFE + GUARD GUIDES
   VISUAL ONLY
===================================================== */

/* OUTER GUARD GUIDE */
.guard-guide{
    border:1px solid rgba(56, 189, 248, 0.32) !important;
    border-radius:3px;

    box-shadow:
        0 0 5px rgba(56, 189, 248, 0.10),
        inset 0 0 5px rgba(56, 189, 248, 0.04);

    opacity:0.78;
}

/* INNER SAFE GUIDE */
.safe-guide{
    border:1px dashed rgba(34, 211, 238, 0.42) !important;
    border-radius:3px;

    box-shadow:
        0 0 6px rgba(34, 211, 238, 0.12),
        inset 0 0 6px rgba(34, 211, 238, 0.04);

    opacity:0.82;
}


/* =====================================================
   SAFE + GUARD GUIDE
   SMALL UPWARD POSITION FIX
===================================================== */

.guard-guide,
.safe-guide{
    transform:translateY(0px) !important;
}


































/* =====================================================
   EXPORT + PRINT ACTION ROW
   FINAL NO-OVERLAP FIX
===================================================== */

.export-action-row{
    display:flex !important;
    align-items:center !important;

    width:100% !important;
    padding:8px !important;
    margin-top:8px !important;

    gap:10px !important;

    box-sizing:border-box !important;
}

/* BOTH BUTTONS */
.export-action-row > #exportPDF,
.export-action-row > #printPDFBtn{
    flex:1 1 0 !important;

    width:0 !important;
    min-width:0 !important;
    max-width:none !important;

    height:42px !important;

    margin:0 !important;
    padding:0 8px !important;

    box-sizing:border-box !important;

    position:relative !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;
}

/* EXPORT PDF */
.export-action-row > #exportPDF{
    border-radius:8px !important;
}

/* PRINT */
.export-action-row > #printPDFBtn{
    border:1px solid #475569 !important;
    border-radius:8px !important;

    background:#243247 !important;
    color:#ffffff !important;

    font-size:13px !important;
    font-weight:700 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    cursor:pointer !important;
}

.export-action-row > #printPDFBtn:hover{
    background:#334155 !important;
    border-color:#64748b !important;
}

.export-action-row > #printPDFBtn i{
    color:#ffffff !important;
}






































/* =====================================================
   RAGO PDF STUDIO
   TABLET + MOBILE RESPONSIVE HEADER / TOOLBAR
   DESKTOP SAFE
===================================================== */


/* =====================================================
   TABLET
   769px - 1024px
===================================================== */

@media (min-width:769px) and (max-width:1024px){

    /* HEADER */
    .studio-header{
        height:auto !important;
        min-height:88px !important;

        padding:14px 16px !important;

        display:flex !important;
        align-items:center !important;

        gap:12px !important;
    }

    /* Logo */
    .studio-logo{
        flex:0 0 auto !important;
    }

    /* Title area */
    .studio-title,
    .studio-brand,
    .studio-header-content{
        min-width:0 !important;
    }

    .studio-header h1{
        font-size:26px !important;
        line-height:1.1 !important;

        white-space:nowrap !important;
        margin:0 !important;
    }

    .studio-header p{
        font-size:12px !important;
        line-height:1.3 !important;

        white-space:nowrap !important;
        margin-top:5px !important;
    }

    /* TOOLBAR */
    .studio-toolbar{
        display:flex !important;
        flex-wrap:wrap !important;

        justify-content:flex-start !important;
        align-items:center !important;

        gap:8px !important;

        height:auto !important;
        min-height:0 !important;

        padding:10px !important;

        overflow:visible !important;
    }

    .toolbar-group{
        flex:0 0 auto !important;

        padding-right:8px !important;
        gap:6px !important;
    }

    .toolbar-group button{
        padding:0 10px !important;
        min-width:0 !important;
    }

    .toolbar-send{
        margin-left:0 !important;
    }
}


/* =====================================================
   MOBILE
   0px - 768px
===================================================== */

@media (max-width:768px){

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

    .studio-header{
        height:auto !important;
        min-height:0 !important;

        padding:12px !important;

        display:grid !important;
        grid-template-columns:auto minmax(0, 1fr) auto !important;

        align-items:center !important;

        gap:10px !important;
    }

    /* Logo compact */
    .studio-logo{
        width:48px !important;
        height:48px !important;

        min-width:48px !important;
        flex:0 0 48px !important;
    }

    /* Brand/title container */
    .studio-title,
    .studio-brand,
    .studio-header-content{
        min-width:0 !important;
        width:auto !important;
    }

    /* RAGO PDF Studio one line */
    .studio-header h1{
        font-size:20px !important;
        line-height:1.1 !important;

        white-space:nowrap !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;

        margin:0 !important;
    }

    /* Subtitle */
    .studio-header p{
        font-size:10px !important;
        line-height:1.25 !important;

        white-space:nowrap !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;

        margin:4px 0 0 !important;
    }

    /* Header right buttons */
    .studio-header-actions,
    .header-actions{
        display:flex !important;
        align-items:center !important;

        gap:6px !important;

        flex:0 0 auto !important;
    }

    .studio-header-actions button,
    .header-actions button{
        width:38px !important;
        height:38px !important;

        min-width:38px !important;

        padding:0 !important;
    }


    /* ==========================================
       TOOLBAR
    ========================================== */

    .studio-toolbar{
        display:flex !important;
        flex-wrap:wrap !important;

        justify-content:flex-start !important;
        align-items:center !important;

        gap:8px !important;

        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        padding:10px !important;

        overflow:visible !important;

        box-sizing:border-box !important;
    }

    /* Every toolbar section */
    .toolbar-group{
        display:flex !important;
        align-items:center !important;

        flex:0 0 auto !important;

        width:auto !important;
        min-width:0 !important;

        padding-right:8px !important;

        gap:6px !important;
    }

    /* Remove desktop push */
    .toolbar-send{
        margin-left:0 !important;
    }

    /* Group title compact */
    .group-title{
        font-size:9px !important;
        margin-right:2px !important;
    }

    /* Toolbar buttons compact */
    .toolbar-group button{
        width:auto !important;
        min-width:0 !important;

        height:40px !important;

        padding:0 10px !important;

        font-size:12px !important;

        gap:5px !important;

        white-space:nowrap !important;
    }
}


/* =====================================================
   SMALL MOBILE
   <= 480px
===================================================== */

@media (max-width:480px){

    /* Header even tighter */
    .studio-header{
        padding:10px !important;
        gap:8px !important;
    }

    .studio-logo{
        width:42px !important;
        height:42px !important;

        min-width:42px !important;
    }

    .studio-header h1{
        font-size:17px !important;
    }

    .studio-header p{
        font-size:9px !important;
    }

    /* Toolbar groups become clean rows */
    .studio-toolbar{
        gap:7px !important;
        padding:8px !important;
    }

    .toolbar-group{
        max-width:100% !important;
        padding-right:0 !important;
        border-right:none !important;
    }

    .toolbar-group button{
        height:38px !important;

        padding:0 9px !important;

        font-size:11px !important;
    }

    /* Hide section labels on tiny screens */
    .group-title{
        display:none !important;
    }
}



















/* =====================================================
   MOBILE HEADER ACTION BUTTON FIX
   HELP + SETTINGS INSIDE HEADER
===================================================== */

/* =====================================================
   MOBILE HEADER ACTION BUTTON FIX
   HELP + SETTINGS INSIDE HEADER
===================================================== */

@media (max-width:768px){

    /* Help + Settings wrapper */
    .studio-header-actions,
    .header-actions{
        position:static !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;

        gap:5px !important;

        width:auto !important;
        min-width:0 !important;
        max-width:74px !important;

        margin:0 !important;
        padding:0 !important;

        flex:0 0 auto !important;

        transform:none !important;
        right:auto !important;
        left:auto !important;
        top:auto !important;
    }

    /* Help + Settings buttons */
    .studio-header-actions button,
    .header-actions button{
        width:32px !important;
        height:32px !important;

        min-width:32px !important;
        max-width:32px !important;

        padding:0 !important;
        margin:0 !important;

        flex:0 0 32px !important;
    }
}


/* =====================================================
   MOBILE HEADER RIGHT BUTTON FIX
   ACTUAL HTML CLASS: .header-right
===================================================== */

@media (max-width:768px){

    /* Header grid */
    .studio-header{
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        gap:8px !important;
    }

    /* Left side: Logo + Title */
    .header-left{
        min-width:0 !important;

        display:flex !important;
        align-items:center !important;

        gap:10px !important;
    }

    /* Title area shrink allow */
    .studio-title{
        min-width:0 !important;
    }

    /* Actual right buttons wrapper */
    .header-right{
        position:static !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;

        gap:5px !important;

        width:auto !important;
        min-width:auto !important;

        margin:0 !important;
        padding:0 !important;

        flex:0 0 auto !important;

        transform:none !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
    }

    /* Help + Settings */
    .header-right #headerHelp,
    .header-right #headerSettings{
        width:32px !important;
        height:32px !important;

        min-width:32px !important;
        max-width:32px !important;

        padding:0 !important;
        margin:0 !important;

        flex:0 0 32px !important;
    }
}


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

@media (max-width:480px){

    .studio-header{
        padding:10px !important;
        gap:6px !important;
    }

    .header-left{
        gap:8px !important;
    }

    .header-right{
        gap:4px !important;
    }

    .header-right #headerHelp,
    .header-right #headerSettings{
        width:28px !important;
        height:28px !important;

        min-width:28px !important;
        max-width:28px !important;

        flex-basis:28px !important;
    }
}
























/* =====================================================
   RAGO MONITOR OVERFLOW
   FINAL STACK + DRAG IN/OUT FIX
===================================================== */

/* Main image monitor panel ko clip karne do,
   sirf actual monitor body drawing area control kare */
.image-monitor{
    position:relative !important;
}

/* Full visible monitor area */
.image-monitor .monitor-body{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
}








/* Existing workspace */
/* =====================================================
   RAGO VIEWER PAN
   PAPER + OVERFLOW IMAGE TOGETHER
===================================================== */

.image-monitor .pdf-workspace,
.image-monitor #ragoOverflowCanvas{
    transform:
        translate3d(
            var(--rago-pan-x, 0px),
            var(--rago-pan-y, 0px),
            0
        ) !important;

    will-change:transform !important;
    transition:none !important;
}

.image-monitor .pdf-workspace{
    position:relative !important;
    overflow:visible !important;
}




/* Existing clipped PDF/A4 preview canvas */
.image-monitor .preview-canvas,
.image-monitor #previewCanvas{
    z-index:30 !important;
    pointer-events:none !important;
}

/* Full monitor overflow image canvas
   MUST stay above previewCanvas */
.image-monitor #ragoOverflowCanvas{
    z-index:40 !important;
    pointer-events:none !important;
}

/* Safe + Guard guide always visible */
.image-monitor .guard-guide,
.image-monitor .safe-guide{
    z-index:50 !important;
    pointer-events:none !important;
}

/* Center cross */
.image-monitor .page-center{
    z-index:55 !important;
    pointer-events:none !important;
}

/* Drag selection handles topmost */
.image-monitor .rago-layer-selection{
    z-index:80 !important;
    pointer-events:auto !important;
}



















/* =====================================================
   PDF PREVIEW PAPER
   FIT INSIDE MONITOR
===================================================== */

.pdf-monitor .pdf-paper{
    position:relative !important;

    width:auto !important;
    height:90% !important;

    max-width:90% !important;
    max-height:90% !important;

    aspect-ratio:794 / 1123 !important;

    flex:0 0 auto !important;

    overflow:hidden !important;
}




























/* =====================================================
   RAGO PDF STUDIO
   TIMELINE CONTEXT MENU
===================================================== */

.rago-timeline-context-menu{
    position:fixed;

    z-index:999999;

    width:220px;

    padding:7px;

    display:none;

    background:
        linear-gradient(
            180deg,
            rgba(30,41,59,.98),
            rgba(15,23,42,.99)
        );

    border:1px solid rgba(100,116,139,.45);

    border-radius:10px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.025);

    backdrop-filter:blur(16px);

    overflow:hidden;
}


/* Menu Button */

.rago-timeline-context-menu button{
    width:100%;
    height:36px;

    padding:0 10px;

    border:none;
    border-radius:6px;

    background:transparent;

    color:#e5edf8;

    display:grid;

    grid-template-columns:
        22px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:8px;

    text-align:left;

    cursor:pointer;

    font-size:12px;

    transition:
        background .15s ease,
        color .15s ease;
}


/* Icon */

.rago-timeline-context-menu button i{
    width:18px;

    text-align:center;

    color:#60a5fa;

    font-size:12px;
}


/* Text */

.rago-timeline-context-menu button span{
    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
}


/* Shortcut */

.rago-timeline-context-menu button small{
    color:#7f8da3;

    font-size:10px;

    font-weight:500;
}


/* Hover */

.rago-timeline-context-menu button:hover{
    background:
        rgba(59,130,246,.16);

    color:#ffffff;
}


/* Hover Icon */

.rago-timeline-context-menu button:hover i{
    color:#93c5fd;
}


/* Separator */

.rago-context-separator{
    height:1px;

    margin:5px 4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100,116,139,.45),
            transparent
        );
}


/* Danger */

.rago-timeline-context-menu button.danger{
    color:#fca5a5;
}


.rago-timeline-context-menu button.danger i{
    color:#ef4444;
}


.rago-timeline-context-menu button.danger:hover{
    background:
        rgba(239,68,68,.16);

    color:#fecaca;
}


/* Disabled */

.rago-timeline-context-menu button:disabled{
    opacity:.32;

    cursor:not-allowed;

    pointer-events:none;
}


/* Mobile */

@media (max-width:768px){

    .rago-timeline-context-menu{
        width:200px;
    }

    .rago-timeline-context-menu button{
        height:38px;

        font-size:12px;
    }

}





















/* =====================================================
   RAGO PDF STUDIO
   IMAGE BIN CONTEXT MENU
===================================================== */

.rago-image-bin-context-menu{
    position:fixed;
    display:none;

    min-width:285px;
    max-width:340px;

    padding:8px;

    background:
        linear-gradient(
            180deg,
            rgba(27,31,38,0.98),
            rgba(15,18,23,0.99)
        );

    border:1px solid
        rgba(255,255,255,0.10);

    border-radius:12px;

    box-shadow:
        0 18px 50px rgba(0,0,0,0.55),
        0 0 0 1px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.04);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    z-index:999999;

    overflow:hidden;

    user-select:none;
    -webkit-user-select:none;
}


/* =====================================================
   MENU ITEM
===================================================== */

.rago-image-bin-context-menu
.rago-bin-menu-item{
    width:100%;

    display:flex;
    align-items:center;

    gap:11px;

    min-height:38px;

    padding:8px 11px;

    margin:0;

    border:none;
    outline:none;

    border-radius:8px;

    background:transparent;

    color:#e9edf3;

    font-size:13px;
    font-weight:500;

    line-height:1.25;

    text-align:left;

    cursor:pointer;

    transition:
        background 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}


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

.rago-image-bin-context-menu
.rago-bin-menu-item i{
    width:18px;

    flex:0 0 18px;

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

    color:#8f9baa;

    font-size:13px;

    transition:
        color 0.16s ease,
        transform 0.16s ease;
}


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

.rago-image-bin-context-menu
.rago-bin-menu-item span{
    flex:1;

    min-width:0;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


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

.rago-image-bin-context-menu
.rago-bin-menu-item:hover{
    background:
        linear-gradient(
            90deg,
            rgba(40,167,69,0.20),
            rgba(40,167,69,0.07)
        );

    color:#ffffff;

    transform:
        translateX(2px);
}


.rago-image-bin-context-menu
.rago-bin-menu-item:hover i{
    color:#55d878;

    transform:
        scale(1.08);
}


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

.rago-image-bin-context-menu
.rago-bin-menu-item:active{
    transform:
        translateX(2px)
        scale(0.985);

    background:
        rgba(40,167,69,0.28);
}


/* =====================================================
   SEPARATOR
===================================================== */

.rago-image-bin-context-menu
.rago-bin-menu-separator{
    height:1px;

    margin:6px 7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12),
            transparent
        );
}


/* =====================================================
   DANGER ITEM
===================================================== */

.rago-image-bin-context-menu
.rago-bin-menu-danger{
    color:#ffb2b2;
}


.rago-image-bin-context-menu
.rago-bin-menu-danger i{
    color:#e66b6b;
}


.rago-image-bin-context-menu
.rago-bin-menu-danger:hover{
    background:
        linear-gradient(
            90deg,
            rgba(220,53,69,0.24),
            rgba(220,53,69,0.07)
        );

    color:#ffffff;
}


.rago-image-bin-context-menu
.rago-bin-menu-danger:hover i{
    color:#ff6b76;
}


/* =====================================================
   FOCUS
===================================================== */

.rago-image-bin-context-menu
.rago-bin-menu-item:focus-visible{
    box-shadow:
        inset 0 0 0 1px
        rgba(85,216,120,0.65);

    background:
        rgba(40,167,69,0.14);
}


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

@media(max-width:768px){

    .rago-image-bin-context-menu{
        min-width:250px;
        max-width:calc(100vw - 20px);

        padding:7px;

        border-radius:11px;
    }


    .rago-image-bin-context-menu
    .rago-bin-menu-item{
        min-height:42px;

        padding:9px 10px;

        gap:10px;

        font-size:13px;
    }


    .rago-image-bin-context-menu
    .rago-bin-menu-item i{
        width:19px;

        flex-basis:19px;

        font-size:14px;
    }

}


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

@media(max-width:420px){

    .rago-image-bin-context-menu{
        min-width:230px;

        max-width:
            calc(100vw - 16px);
    }


    .rago-image-bin-context-menu
    .rago-bin-menu-item{
        min-height:41px;

        font-size:12.5px;
    }

}






















/* =====================================================
   RAGO PDF STUDIO
   TOP DOWNLOAD PDF BUTTON
===================================================== */

.toolbar-download #downloadPDFTop{
    position:relative;

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

    gap:8px;

    min-height:38px;

    padding:9px 16px;

    border:1px solid
        rgba(59,130,246,0.55);

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #3b82f6 45%,
            #06b6d4 100%
        );

    color:#ffffff;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    overflow:hidden;

    box-shadow:
        0 6px 18px rgba(37,99,235,0.28),
        inset 0 1px 0 rgba(255,255,255,0.22);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;

    animation:
        ragoDownloadPulse 2.8s
        ease-in-out infinite;
}


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

.toolbar-download
#downloadPDFTop i{
    position:relative;

    z-index:2;

    font-size:13px;

    animation:
        ragoDownloadIconMove 1.6s
        ease-in-out infinite;
}


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

.toolbar-download
#downloadPDFTop{
    text-shadow:
        0 1px 2px rgba(0,0,0,0.18);
}


/* =====================================================
   SHINE EFFECT
===================================================== */

.toolbar-download
#downloadPDFTop::before{
    content:"";

    position:absolute;

    top:-40%;
    left:-55%;

    width:34%;
    height:180%;

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

    transform:
        rotate(18deg);

    animation:
        ragoDownloadShine 3s
        ease-in-out infinite;

    pointer-events:none;
}


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

.toolbar-download
#downloadPDFTop:hover{
    transform:
        translateY(-2px)
        scale(1.025);

    filter:
        brightness(1.08);

    box-shadow:
        0 10px 26px rgba(37,99,235,0.38),
        0 0 18px rgba(6,182,212,0.22),
        inset 0 1px 0 rgba(255,255,255,0.28);
}


/* =====================================================
   ACTIVE CLICK
===================================================== */

.toolbar-download
#downloadPDFTop:active{
    transform:
        translateY(0)
        scale(0.97);

    box-shadow:
        0 4px 12px rgba(37,99,235,0.28);
}


/* =====================================================
   BUTTON PULSE
===================================================== */

@keyframes ragoDownloadPulse{

    0%,
    100%{
        box-shadow:
            0 6px 18px rgba(37,99,235,0.25),
            0 0 0 0 rgba(59,130,246,0);
    }

    50%{
        box-shadow:
            0 8px 24px rgba(37,99,235,0.38),
            0 0 0 5px rgba(59,130,246,0.08);
    }

}


/* =====================================================
   DOWNLOAD ICON MOTION
===================================================== */

@keyframes ragoDownloadIconMove{

    0%,
    100%{
        transform:
            translateY(0);
    }

    45%{
        transform:
            translateY(2px);
    }

    65%{
        transform:
            translateY(-1px);
    }

}


/* =====================================================
   SHINE ANIMATION
===================================================== */

@keyframes ragoDownloadShine{

    0%{
        left:-55%;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    42%{
        left:125%;
        opacity:0;
    }

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

}


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

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

    .toolbar-download
    #downloadPDFTop,

    .toolbar-download
    #downloadPDFTop i,

    .toolbar-download
    #downloadPDFTop::before{
        animation:none;
    }

}






















/* =====================================================
   DOWNLOAD PDF
   FUTURISTIC NEON GREEN OVERRIDE
===================================================== */

.toolbar-download #downloadPDFTop{

    border-color:
        rgba(34, 255, 153, 0.65);

    background:
        linear-gradient(
            135deg,
            #064e3b 0%,
            #00c875 45%,
            #22ff99 100%
        );

    color:#ffffff;

    box-shadow:
        0 6px 18px rgba(0, 200, 117, 0.28),
        0 0 10px rgba(34, 255, 153, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.22);
}


/* HOVER */

.toolbar-download #downloadPDFTop:hover{

    box-shadow:
        0 10px 26px rgba(0, 200, 117, 0.38),
        0 0 20px rgba(34, 255, 153, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.28);
}


/* ACTIVE */

.toolbar-download #downloadPDFTop:active{

    box-shadow:
        0 4px 12px rgba(0, 200, 117, 0.30),
        0 0 10px rgba(34, 255, 153, 0.20);
}






















/* =====================================================
   RAGO PDF STUDIO
   PAPER BACKGROUND TOGGLE
===================================================== */

/* Toggle Button */
.paper-bg-toggle{
    width:38px;
    height:38px;

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

    padding:0;

    border:1px solid #334155;
    border-radius:7px;

    background:#223047;
    color:#94a3b8;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .15s ease;
}

.paper-bg-toggle:hover{
    background:#2b3a52;
    color:#ffffff;
    border-color:#60a5fa;
}

.paper-bg-toggle:active{
    transform:scale(.95);
}


/* ON STATE */
.paper-bg-toggle.active{
    background:#2563eb;
    color:#ffffff;
    border-color:#60a5fa;

    box-shadow:
        0 0 0 2px rgba(37,99,235,.18),
        0 0 14px rgba(37,99,235,.28);
}


/* =====================================================
   WHITE PAPER VISUAL STATE

   White background appears ONLY when
   .paper-bg-on exists on .image-monitor
===================================================== */

.image-monitor.paper-bg-on .page-guide{
    background:#ffffff !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.32),
        0 0 0 1px rgba(15,23,42,.18) !important;

    border-radius:2px !important;
}


/* OFF STATE */
.image-monitor:not(.paper-bg-on) .page-guide{
    background:transparent !important;
    box-shadow:none !important;
}

































/* =====================================================
   RAGO VIEWER PAN ENGINE
   MOUSE + TOUCH
   FINAL OVERRIDE
===================================================== */

.image-monitor .monitor-body{
    position:relative !important;
    overflow:hidden !important;
    touch-action:none !important;
    cursor:grab;
}

.image-monitor .monitor-body.rago-panning{
    cursor:grabbing !important;
}

/* Whole paper stage moves together */
.image-monitor .pdf-workspace{
    position:relative !important;

    transform:
        translate3d(
            var(--rago-pan-x, 0px),
            var(--rago-pan-y, 0px),
            0
        ) !important;

    will-change:transform;

    transition:none !important;

    overflow:visible !important;
}

/* Prevent browser drag/select */
.image-monitor .monitor-body,
.image-monitor .pdf-workspace,
.image-monitor .page-guide{
    user-select:none !important;
    -webkit-user-select:none !important;
}

.image-monitor img{
    -webkit-user-drag:none !important;
}




/* =====================================================
   RAGO TEXT EDIT CURSOR
   BLACK BLINKING CARET
===================================================== */

.rago-text-layer[contenteditable="true"]{
    caret-color: #000000 !important;
}






















/* =====================================================
   RAGO MONITOR LOCK TOGGLE
   FUTURISTIC CYAN / VIOLET
===================================================== */

.viewer-right{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 7px !important;

    margin-left: auto !important;

    position: relative !important;
    top: 0 !important;
    right: 0 !important;
}


/* =====================================================
   FINGERPRINT LOCK BUTTON
===================================================== */

#monitorLockToggle{
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    position: static !important;
    inset: auto !important;

    border: 1px solid rgba(34, 211, 238, 0.55) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            145deg,
            #172554,
            #1e3a8a
        ) !important;

    color: #67e8f9 !important;

    font-size: 17px !important;

    cursor: pointer !important;

    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.08),
        0 0 12px rgba(34, 211, 238, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* HOVER */

#monitorLockToggle:hover{
    color: #ffffff !important;

    border-color: #22d3ee !important;

    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.18),
        0 0 18px rgba(34, 211, 238, 0.42),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;

    transform: translateY(-1px);
}


/* =====================================================
   LOCKED ACTIVE STATE
   CYBER VIOLET
===================================================== */

#monitorLockToggle.active{
    color: #ffffff !important;

    border-color: #a78bfa !important;

    background:
        linear-gradient(
            145deg,
            #4c1d95,
            #6d28d9
        ) !important;

    box-shadow:
        0 0 0 1px rgba(167, 139, 250, 0.22),
        0 0 18px rgba(139, 92, 246, 0.52),
        inset 0 1px 0 rgba(255,255,255,0.14) !important;
}


/* ICON */

#monitorLockToggle i{
    pointer-events: none;

    filter:
        drop-shadow(
            0 0 4px
            currentColor
        );
}







































/* =====================================================
   RAGO HOTKEYS HELP MODAL
===================================================== */

.rago-hotkeys-modal{
    position:fixed;
    inset:0;
    z-index:999999;

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

    padding:24px;
}

.rago-hotkeys-modal.active{
    display:flex;
}


/* BACKDROP */

.rago-hotkeys-backdrop{
    position:absolute;
    inset:0;

    background:rgba(3, 10, 22, 0.78);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}


/* DIALOG */

.rago-hotkeys-dialog{
    position:relative;
    z-index:2;

    width:min(760px, 100%);
    max-height:min(760px, 88vh);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #18263a,
            #111c2d
        );

    border:1px solid rgba(96, 165, 250, 0.28);

    border-radius:18px;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(59, 130, 246, 0.10);
}


/* HEADER */

.rago-hotkeys-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;

    padding:20px 22px;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.16);
}

.rago-hotkeys-title-wrap{
    display:flex;
    align-items:center;

    gap:14px;
}

.rago-hotkeys-icon{
    width:46px;
    height:46px;

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

    flex-shrink:0;

    border-radius:13px;

    color:#ffffff;

    font-size:20px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 8px 22px rgba(37, 99, 235, 0.28);
}

.rago-hotkeys-title-wrap h3{
    margin:0;

    color:#ffffff;

    font-size:20px;
    font-weight:800;
}

.rago-hotkeys-title-wrap p{
    margin:4px 0 0;

    color:#91a4bf;

    font-size:12px;
}


/* CLOSE */

.rago-hotkeys-close{
    width:38px;
    height:38px;

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

    flex-shrink:0;

    border:1px solid rgba(148, 163, 184, 0.18);

    border-radius:10px;

    background:#213149;

    color:#b9c8dc;

    cursor:pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.rago-hotkeys-close:hover{
    transform:rotate(90deg);

    background:#ef4444;

    color:#ffffff;
}


/* BODY */

.rago-hotkeys-body{
    padding:18px;

    overflow-y:auto;

    display:grid;

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

    gap:14px;
}


/* GROUP */

.rago-hotkey-group{
    padding:15px;

    border:
        1px solid rgba(148, 163, 184, 0.14);

    border-radius:14px;

    background:
        rgba(9, 18, 32, 0.48);
}

.rago-hotkey-group h4{
    margin:
        0
        0
        12px;

    display:flex;
    align-items:center;

    gap:8px;

    color:#60a5fa;

    font-size:13px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:0.04em;
}


/* ROW */

.rago-hotkey-row{
    min-height:40px;

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

    gap:14px;

    padding:8px 0;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.08);
}

.rago-hotkey-row:last-child{
    border-bottom:none;
}

.rago-hotkey-row > span{
    color:#c6d3e5;

    font-size:12px;
}


/* KEY COMBO */

.rago-key-combo{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:5px;

    flex-shrink:0;
}

.rago-key-combo > span{
    color:#64748b;

    font-size:11px;
}


/* KEY */

.rago-key-combo kbd{
    min-width:28px;
    height:27px;

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

    padding:0 8px;

    border:
        1px solid rgba(148, 163, 184, 0.28);

    border-bottom:
        3px solid rgba(3, 10, 22, 0.72);

    border-radius:7px;

    background:
        linear-gradient(
            180deg,
            #2a3c56,
            #1b2a40
        );

    color:#ffffff;

    font-family:
        inherit;

    font-size:11px;
    font-weight:800;

    line-height:1;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.20);
}


/* FOOTER */

.rago-hotkeys-footer{
    padding:13px 20px;

    border-top:
        1px solid rgba(148, 163, 184, 0.14);

    background:
        rgba(8, 15, 27, 0.48);
}

.rago-hotkeys-footer span{
    display:flex;
    align-items:center;

    gap:8px;

    color:#8295b0;

    font-size:11px;
}

.rago-hotkeys-footer i{
    color:#38bdf8;
}


/* SCROLLBAR */

.rago-hotkeys-body::-webkit-scrollbar{
    width:7px;
}

.rago-hotkeys-body::-webkit-scrollbar-thumb{
    background:#334a68;

    border-radius:10px;
}

.rago-hotkeys-body::-webkit-scrollbar-track{
    background:transparent;
}


/* MOBILE */

@media(max-width:700px){

    .rago-hotkeys-modal{
        padding:12px;
    }

    .rago-hotkeys-dialog{
        max-height:90vh;

        border-radius:15px;
    }

    .rago-hotkeys-body{
        grid-template-columns:1fr;

        padding:14px;
    }

    .rago-hotkeys-header{
        padding:16px;
    }

    .rago-hotkeys-title-wrap h3{
        font-size:17px;
    }

}













































/* =====================================================
   MOBILE LEFT PANEL GAP KILL
   FINAL OVERRIDE
===================================================== */

@media (max-width:768px){

    .studio-workspace{
        align-items:start !important;
    }

    .studio-left{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        align-self:start !important;
        overflow:visible !important;
    }

    .studio-left .toolbox-layout{
        height:auto !important;
        min-height:0 !important;
    }

    .studio-left .tool-list{
        height:auto !important;
        min-height:0 !important;
    }
}

































/* =====================================================
   RAGO PDF STUDIO
   TOP TOOLBAR FINAL RESPONSIVE FIX
   DESKTOP + TABLET + MOBILE
===================================================== */

/* =========================
   DESKTOP BASE
========================= */

.studio-toolbar{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    height:auto !important;
    min-height:55px !important;

    gap:8px !important;

    padding:8px 10px !important;

    overflow:visible !important;

    box-sizing:border-box !important;
}


/* ALL GROUPS */

.studio-toolbar .toolbar-group{
    display:flex !important;
    align-items:center !important;

    flex:0 1 auto !important;

    width:auto !important;
    min-width:0 !important;

    gap:6px !important;

    padding-right:8px !important;

    box-sizing:border-box !important;
}


/* GROUP TITLE */

.studio-toolbar .group-title{
    flex:0 0 auto !important;

    margin-right:2px !important;

    white-space:nowrap !important;
}


/* ALL BUTTONS */

.studio-toolbar .toolbar-group button{
    flex:0 1 auto !important;

    min-width:0 !important;

    padding-left:10px !important;
    padding-right:10px !important;

    white-space:nowrap !important;

    box-sizing:border-box !important;
}


/* DOWNLOAD GROUP */

.studio-toolbar .toolbar-download{
    flex:0 1 auto !important;

    min-width:0 !important;

    margin-left:0 !important;
    margin-right:0 !important;
}


/* SEND GROUP */

.studio-toolbar .toolbar-send{
    flex:0 1 auto !important;

    min-width:0 !important;

    margin-left:auto !important;
    margin-right:0 !important;

    padding-left:4px !important;
    padding-right:0 !important;

    border-right:none !important;
}


/* SEND BUTTONS */

.studio-toolbar .toolbar-send button{
    flex:0 1 auto !important;

    min-width:0 !important;

    padding-left:8px !important;
    padding-right:8px !important;

    font-size:11px !important;

    gap:4px !important;
}


/* =========================
   MEDIUM DESKTOP
========================= */

@media (max-width:1250px){

    .studio-toolbar{
        gap:6px !important;
        padding:8px !important;
    }

    .studio-toolbar .toolbar-group{
        gap:5px !important;
        padding-right:6px !important;
    }

    .studio-toolbar .toolbar-group button{
        padding-left:8px !important;
        padding-right:8px !important;
        font-size:11px !important;
    }

    .studio-toolbar .toolbar-send{
        margin-left:0 !important;
    }
}


/* =========================
   TABLET
========================= */

@media (max-width:1024px){

    .studio-toolbar{
        flex-wrap:wrap !important;

        height:auto !important;

        overflow:visible !important;

        align-content:flex-start !important;
    }

    .studio-toolbar .toolbar-group{
        flex:0 0 auto !important;
    }

    .studio-toolbar .toolbar-send{
        margin-left:0 !important;
    }
}


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

@media (max-width:768px){

    .studio-toolbar{
        display:flex !important;
        flex-wrap:wrap !important;

        gap:7px !important;

        padding:8px !important;

        overflow:visible !important;
    }

    .studio-toolbar .toolbar-group{
        flex:0 0 auto !important;

        max-width:100% !important;

        gap:5px !important;

        padding-right:0 !important;

        border-right:none !important;
    }

    .studio-toolbar .toolbar-group button{
        height:38px !important;

        padding-left:8px !important;
        padding-right:8px !important;

        font-size:11px !important;
    }

    .studio-toolbar .toolbar-send{
        margin-left:0 !important;
        padding-left:0 !important;
    }
}


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

@media (max-width:480px){

    .studio-toolbar{
        gap:6px !important;
        padding:7px !important;
    }

    .studio-toolbar .group-title{
        display:none !important;
    }

    .studio-toolbar .toolbar-group button{
        padding-left:7px !important;
        padding-right:7px !important;

        font-size:10px !important;
    }

    .studio-toolbar .toolbar-send{
        width:100% !important;

        display:flex !important;
    }

    .studio-toolbar .toolbar-send button{
        flex:1 1 0 !important;

        justify-content:center !important;
    }
}





















/* =====================================================
   RAGO EXTERNAL DROP OVERLAY
===================================================== */

#ragoExternalDropOverlay{
    position:fixed;
    inset:0;

    z-index:9999999;

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

    padding:24px;

    background:
        rgba(4, 12, 26, 0.82);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}

#ragoExternalDropOverlay.active{
    opacity:1;
    visibility:visible;
}

.rago-external-drop-card{
    width:min(560px, 92vw);

    padding:48px 28px;

    text-align:center;

    border:
        2px dashed
        #38bdf8;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 58, 95, 0.96),
            rgba(13, 27, 48, 0.98)
        );

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, 0.5);
}

.rago-external-drop-icon{
    margin-bottom:16px;

    font-size:52px;

    color:#38bdf8;
}

.rago-external-drop-title{
    margin-bottom:8px;

    color:#ffffff;

    font-size:24px;
    font-weight:800;
}

.rago-external-drop-subtitle{
    color:#9fb3cf;

    font-size:14px;
}