html,body { min-height:100%; overflow:hidden; }
body { margin:0; background: #fff }

.w-10 { width:10%; }
.w-30 { width:30%; }

:root {
    --inknexo-black: #111111;
    --inknexo-gray: #6c757d;
    --inknexo-light: #f6f6f6;
    --inknexo-border: #CACCCE;
}

.topbar { height:80Px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    background:#fff;
    border-bottom:1px solid #dee2e6
}

.brand { font-size:1.25rem; font-weight:700 }
.status { font-size:.85rem; color:#6c757d }
#zoom { accent-color: #000; }
.preview-page { padding:24px }

.artwork-panel { 
    height:calc(100vh - 112px); 
    min-height:600px; 
    display:flex; 
    flex-direction:column; 
    /* background:#fff;  */
    /* border:1px solid #000;  */
    /* border-radius:16px;  */
    overflow: hidden;
} 

.canvas-drop-zone { 
    position: relative; 
    flex: 1; 
    min-width: 0; 
    min-height: 0; 
    overflow: hidden; 
    background:#fff 
}

.canvas-drop-zone.dragover { 
    outline: 4px dashed #198754;
    outline-offset: -12px 
} 

#canvaContainer {
    position: absolute;
    inset: 0
}

.canvas-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(420px,85%);
    padding: 45px 30px;
    text-align: center;
    background:rgba(255,255,255,.96);
    border: 2px dashed #adb5bd;
    border-radius: 18px;
    z-index: 20; 
    pointer-events: none
}

.border-inknexo { border-color: var(--inknexo-border); }

.finish-selected { background:#fff; border:3px solid #000; border-radius:16px; overflow:hidden }
.finish-unselected { background:#fff; border:1px solid var(--inknexo-border); border-radius:16px; overflow:hidden }

.canvas-empty i { display:block;margin-bottom:15px;font-size:3.5rem;color:#6c757d}

.canvas-empty-title{font-size:1.3rem;font-weight:700}.canvas-empty-text{margin-top:8px;color:#6c757d}.canvas-empty-format{margin-top:10px;font-size:.8rem;color:#adb5bd}

.canvas-toolbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 16px;background:#fff;border-top:1px solid #dee2e6}

.zoom-control{display:flex;align-items:center;gap:10px}#zoom{width:200px}.zoom-value{min-width:50px;text-align:right;font-size:.85rem;color:#6c757d}

.options-panel{ background:#fff; border-radius:16px; overflow:hidden }

.option-section { padding:22px; border-bottom: 1px solid #e9ecef }
.option-section:last-child { border-bottom:0}
.option-title{ margin:0 0 18px; font-size:1rem; font-weight:700 }

.form-label{font-size:.9rem;font-weight:600}.artwork-info{padding:14px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:10px}

.artwork-info-row{display:flex;justify-content:space-between;gap:20px;padding:6px 0;font-size:.9rem}.artwork-info-label{color:#6c757d}.artwork-info-value{font-weight:600;text-align:right}

.small-note{margin-top:8px;font-size:.78rem;color:#6c757d}

@media(min-width:992px){.options-panel{max-height:calc(100vh - 112px);overflow-y:auto}}

@media(max-width:991.98px){.preview-page{padding:16px}.artwork-panel{height:650px}.options-panel{margin-bottom:30px}}

.loading-overlay{

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(15,18,22,.58);

    backdrop-filter:blur(2px);

}

.loading-overlay.show{display:flex}

.loading-card{

    min-width:220px;

    padding:24px 28px;

    text-align:center;

    background:#fff;

    border-radius:16px;

    box-shadow:0 18px 55px rgba(0,0,0,.25);

}

.loading-card .spinner-border{width:2.5rem;height:2.5rem}

.loading-message{margin-top:14px;font-weight:600}

.loading-submessage{margin-top:5px;font-size:.82rem;color:#6c757d}

body.is-processing{overflow:hidden}



.custom-select {

    position: relative;

    width: 100%;

    max-width: 520px;

}



/* Selected option */

.select-selected {

    width: 100%;

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 10px 42px 10px 10px;

    background: white;

    border: 1px solid #ced4da;

    border-radius: 8px;

    cursor: pointer;

    position: relative;

    transition: border-color .15s ease,

                box-shadow .15s ease;

}



.select-selected:hover {

    border-color: #999;

}



.select-selected.open {

    border-color: #86b7fe;

    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);

}



/* Arrow */

.select-selected::after {

    content: "";

    position: absolute;

    right: 16px;

    top: 50%;

    width: 9px;

    height: 9px;

    border-right: 2px solid #555;

    border-bottom: 2px solid #555;

    transform:

        translateY(-70%)

        rotate(45deg);



    transition: transform .2s ease;

}



.select-selected.open::after {

    transform:

        translateY(-25%)

        rotate(225deg);

}



/* Image */

.option-image {

    width: 64px;

    height: 54px;

    flex: 0 0 64px;

    object-fit: cover;

    border-radius: 6px;

    background: #eee;

}



/* Text container */

.option-content {

    flex: 1;

    min-width: 0;

}



.option-title {

    font-size: 15px;

    font-weight: 600;

    color: #212529;

    margin-bottom: 4px;

}



.option-description {

    font-size: 13px;

    line-height: 1.35;

    color: #6c757d;

    white-space: normal;

}



/* Dropdown */

.select-options {

    position: absolute;

    top: calc(100% + 5px);

    left: 0;

    right: 0;

    background: white;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);

    max-height: 430px;

    overflow-y: auto;

    display: none;

    z-index: 1000;

}



.select-options.show {

    display: block;

}



/* Each option */

.select-option {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 10px;

    cursor: pointer;

    border-bottom: 1px solid #eee;

    transition: background .15s ease;

}



.select-option:last-child {

    border-bottom: none;

}



.select-option:hover {

    background: #f4f6f8;

}



.select-option.active {

    background: #eef5ff;

}



.canvas-scroll-container{
    position:absolute;
    inset:0;
    overflow:auto;
    overscroll-behavior:contain;
    background:#e9ecef;
    scrollbar-gutter:stable;
}

#canvaContainer{
    position:sticky;
    left:0;
    top:0;
    z-index:2;
    width:100%;
    height:100%;
}

#canvasScrollSpacer{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

.canvas-scroll-container::-webkit-scrollbar{width:14px;height:14px}
.canvas-scroll-container::-webkit-scrollbar-thumb{
    background:#8b9299;
    border:3px solid #e9ecef;
    border-radius:10px;
}
.canvas-scroll-container::-webkit-scrollbar-track{background:#e9ecef}



/* Mobile */

@media (max-width: 600px) {



    .option-image {

        width: 55px;

        height: 48px;

        flex-basis: 55px;

    }

    .option-title {
        font-size: 14px;
    }

    .option-description {
        font-size: 12px;
    }
}