@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
#spk-open{display:block!important;width:100%!important;margin:18px 0 25px!important;padding:13px 20px!important;border:0!important;border-radius:6px!important;background:#222!important;color:#fff!important;font-size:16px!important;font-weight:600!important;line-height:1.3!important;cursor:pointer!important;text-align:center!important}
#spk-open.spk-has-design{background:#3d4a4f!important}
body.spk-lock{overflow:hidden!important}
#spk-modal{display:none;position:fixed;z-index:999999;inset:0;background:rgba(0,0,0,.68);align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
#spk-modal.show{display:flex}
#spk-window{position:relative;width:1050px;max-width:100%;max-height:95vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto;touch-action:pan-y;background:#fff;border-radius:14px;padding:28px;box-sizing:border-box;box-shadow:0 15px 60px rgba(0,0,0,.25)}
#spk-window h2{margin:0 45px 25px 0;font-size:25px}
#spk-close{position:absolute;right:14px;top:8px;width:40px;height:40px;border:0;background:transparent;font-size:32px;cursor:pointer}
.spk-layout{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}.spk-left{flex:1 1 500px;min-width:0}
.spk-preview{position:relative;width:100%;max-width:500px;margin:auto;overflow:hidden;touch-action:none;user-select:none}
.spk-preview>img{display:block;width:100%;height:auto;pointer-events:none}.spk-text{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:20;color:#fff;font-size:30px;font-weight:600;line-height:1.05;white-space:nowrap;cursor:grab;user-select:none;touch-action:none;text-align:center;padding:3px 5px;border:1px solid transparent}
.spk-text.spk-selected{border:1px dashed rgba(0,0,0,.45);background:rgba(255,255,255,.08)}.spk-text>span{pointer-events:none}
.spk-resize{display:none;position:absolute;width:12px;height:12px;right:-8px;bottom:-8px;padding:0;border-radius:50%;border:2px solid #222;background:#fff;cursor:nwse-resize}
.spk-selected .spk-resize{display:block}.spk-info{text-align:center;font-size:13px;line-height:1.5;color:#777;margin-top:12px}
.spk-controls{width:320px;max-width:100%}.spk-group{margin-bottom:16px}.spk-group label{display:block;font-weight:600;margin-bottom:6px}
.spk-group input,.spk-group select{width:100%;box-sizing:border-box;padding:10px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:14px}
.spk-colors{display:flex;gap:10px;flex-wrap:wrap}.spk-color{width:32px;height:32px;padding:0;border-radius:50%;border:2px solid #aaa;cursor:pointer;box-sizing:border-box}
.spk-color.active{outline:2px solid #111;outline-offset:2px}.spk-use{width:100%;padding:13px;border:0;border-radius:6px;background:#222;color:#fff;font-weight:600;cursor:pointer;margin-top:5px}
@media(max-width:700px){#spk-modal{padding:10px}#spk-window{padding:20px 15px;max-height:96vh}#spk-window h2{font-size:21px;margin-bottom:18px}.spk-layout{gap:22px}.spk-left,.spk-controls{width:100%;flex-basis:100%}}
/* =====================================================
   SKRYTÍ OHRANIČENÍ PŘI EDITACI TEXTU
===================================================== */

.spk-text.editing{
    border:1px solid transparent !important;
    background:transparent !important;
}

.spk-text.editing .spk-h{
    display:none !important;
}

/* =====================================================
   SKRYTÍ BÍLÉHO PRUHU PŘI EDITACI TEXTU
===================================================== */

.spk-text.editing span,
.spk-text.editing span[contenteditable="true"]{
    background:transparent !important;
    border:0 !important;
    outline:none !important;
    box-shadow:none !important;
}

/* =====================================================
   VRSTVY
===================================================== */

.spk-layers-panel{
    width:100%;
    margin-bottom:20px;
    padding:12px;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fafafa;
}


.spk-layers-title{
    margin-bottom:10px;
    font-size:15px;
    font-weight:700;
    color:#333;
}


.spk-layers-list{
    display:flex;
    flex-direction:column;
    gap:5px;
}


.spk-layer-row{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:40px;
    padding:5px 6px;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
}


.spk-layer-row.active{
    border-color:#3d4a4f;
    background:#f0f4f5;
}


.spk-layer-row.hidden{
    opacity:.5;
}


.spk-layer-row.locked{
    background:#f5f5f5;
}


.spk-layer-icon{
    width:25px;
    min-width:25px;
    text-align:center;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}


.spk-layer-name{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    cursor:pointer;
}


.spk-layer-action{
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:5px;
    background:transparent;
    cursor:pointer;
    font-size:15px;
}


.spk-layer-action:hover{
    background:#eee;
}


.spk-layer-locked{
    cursor:not-allowed!important;
}


.spk-layer-locked .spk-h{
    display:none!important;
}

.spk-layer-row{
    cursor:grab;
}


.spk-layer-row:active{
    cursor:grabbing;
}


.spk-layer-row.dragging{
    opacity:.45;
}


.spk-layer-row.drag-over{
    border-color:#3d4a4f;
    background:#eef3f4;
}

/* =====================================================
   SKRYTÁ VRSTVA ZŮSTÁVÁ V PANELU VRSTEV
===================================================== */

.spk-layer-row.hidden{
    display:flex !important;
    opacity:0.55;
}

/* =====================================================
   MOTIV – VYKRESLENÍ, BARVA A ROHOVÉ ÚCHYTY
===================================================== */

.spk-motif{
    position:absolute;

    box-sizing:border-box;

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

    cursor:grab;

    user-select:none;

    touch-action:none;
}


/* =====================================================
   SAMOTNÝ MOTIV
===================================================== */

.spk-motif::before{
    content:"";

    position:absolute;

    inset:0;

    background-color:
        var(--spk-motif-color,#000000);

    -webkit-mask-image:
        var(--spk-motif-src);

    mask-image:
        var(--spk-motif-src);

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;

    pointer-events:none;

    z-index:1;
}


/* =====================================================
   ROHOVÉ ÚCHYTY
===================================================== */

.spk-motif .spk-h{
    display:block !important;

    position:absolute;

    width:12px;

    height:12px;

    box-sizing:border-box;

    border:2px solid #222;

    background:#fff;

    border-radius:50%;

    z-index:100;

    pointer-events:auto;

    opacity:1 !important;

    visibility:visible !important;

    -webkit-mask-image:none !important;

    mask-image:none !important;
}


.spk-motif .spk-h.tl{
    left:-7px;

    top:-7px;

    cursor:nwse-resize;
}


.spk-motif .spk-h.tr{
    right:-7px;

    top:-7px;

    cursor:nesw-resize;
}


.spk-motif .spk-h.bl{
    left:-7px;

    bottom:-7px;

    cursor:nesw-resize;
}


.spk-motif .spk-h.br{
    right:-7px;

    bottom:-7px;

    cursor:nwse-resize;
}

/* ============================================================
   SPARKNITO — MOCKUP STYLE v2
   Vizuální redesign podle schváleného návrhu.
   JavaScript / funkce editoru se nemění.
   ============================================================ */

:root{
    --spk-primary:#1683ff;
    --spk-primary-hover:#0d72df;
    --spk-green:#16a34a;
    --spk-ink:#182233;
    --spk-muted:#748094;
    --spk-line:#e4e8ee;
    --spk-bg:#f4f6f9;
    --spk-panel:#ffffff;
}

/* ===== MODAL / APP WINDOW ===== */

#spk-modal{
    padding:0!important;
    background:rgba(17,24,39,.70)!important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

#spk-window{
    width:min(1500px,100vw)!important;
    height:min(96vh,920px);
    max-height:96vh!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:18px!important;
    background:var(--spk-bg)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.28)!important;
    font-family:Montserrat,Arial,sans-serif!important;
    color:var(--spk-ink);
}

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

#spk-window h2{
    height:62px;
    box-sizing:border-box;
    margin:0!important;
    padding:0 70px 0 26px!important;
    display:flex;
    align-items:center;
    font-size:20px!important;
    font-weight:700!important;
    letter-spacing:-.2px;
    background:#fff!important;
    border-bottom:1px solid var(--spk-line);
}

#spk-close{
    top:10px!important;
    right:12px!important;
    width:42px!important;
    height:42px!important;
    border-radius:11px!important;
    background:#f3f5f8!important;
    color:#182233!important;
    font-size:28px!important;
    line-height:40px!important;
}

#spk-close:hover{
    background:#e9edf2!important;
}

/* ===== TOP SIDE SWITCH ===== */

#spk-sides{
    min-height:60px;
    box-sizing:border-box;
    margin:0!important;
    padding:9px 24px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:#fff;
    border-bottom:1px solid var(--spk-line);
}

.spk-side-btn{
    min-width:150px;
    min-height:42px;
    padding:8px 18px!important;
    border:1px solid #dce2e9!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#273244!important;
    font-family:Montserrat,Arial,sans-serif!important;
    font-weight:700!important;
    cursor:pointer;
    transition:.15s ease;
}

.spk-side-btn:hover{
    background:#f7f9fc!important;
}

.spk-side-btn.active{
    border-color:var(--spk-primary)!important;
    background:#eef6ff!important;
    color:var(--spk-primary)!important;
    box-shadow:0 0 0 2px rgba(22,131,255,.08);
}

/* ===== HISTORY BAR ===== */

.spk-history-controls{
    position:absolute;
    top:72px;
    left:24px;
    z-index:30;
    display:flex!important;
    gap:5px!important;
    margin:0!important;
}

.spk-history-button{
    min-width:74px!important;
    min-height:38px!important;
    padding:7px 11px!important;
    border:1px solid #dfe4eb!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#334155!important;
    font-family:Montserrat,Arial,sans-serif!important;
    font-size:12px!important;
    font-weight:600!important;
}

.spk-history-button:hover:not(:disabled){
    background:#f5f8fc!important;
}

/* ===== MAIN CANVAS + CONTROLS ===== */

.spk-layout{
    height:calc(100% - 122px);
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 390px!important;
    gap:0!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
}

.spk-left{
    width:auto!important;
    min-width:0!important;
    padding:24px!important;
    box-sizing:border-box;
    background:#f0f2f5!important;
    border-right:1px solid var(--spk-line);
    display:flex;
    flex-direction:column;
}

.spk-controls{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:100%;
    max-height:none!important;
    box-sizing:border-box;
    padding:18px!important;
    background:#fff!important;
    overflow:auto!important;
}

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

#spk-zoom-controls{
    width:360px;
    max-width:100%;
    margin:0 auto 7px!important;
    display:grid!important;
    grid-template-columns:42px 1fr 42px!important;
    grid-template-rows:40px 22px!important;
    gap:6px!important;
}

.spk-zoom-button,
.spk-zoom-value{
    border:1px solid #dce2e9!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#273244!important;
    font-family:Montserrat,Arial,sans-serif!important;
}

.spk-zoom-button{
    font-size:21px!important;
    font-weight:500!important;
}

.spk-zoom-value{
    font-size:12px!important;
    font-weight:700!important;
}

.spk-zoom-range{
    grid-column:1 / 4;
    accent-color:var(--spk-primary);
}

.spk-zoom-hint{
    margin:0 auto 12px!important;
    color:#8a94a4!important;
    font-size:10px!important;
}

/* checkerboard canvas exactly as design */

#spk-zoom-viewport{
    flex:1;
    min-height:0!important;
    width:100%!important;
    max-width:900px!important;
    margin:0 auto!important;
    padding:28px!important;
    box-sizing:border-box!important;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border:1px solid #dfe4ea!important;
    border-radius:16px!important;
    background:
        linear-gradient(45deg,#eef0f3 25%,transparent 25%) 0 0/24px 24px,
        linear-gradient(-45deg,#eef0f3 25%,transparent 25%) 0 12px/24px 24px,
        linear-gradient(45deg,transparent 75%,#eef0f3 75%) 12px -12px/24px 24px,
        linear-gradient(-45deg,transparent 75%,#eef0f3 75%) -12px 0/24px 24px,
        #fff!important;
    overflow:hidden!important;
}

.spk-preview{
    width:100%!important;
    max-width:650px!important;
    margin:auto!important;
    border-radius:8px!important;
    background:#fff;
    box-shadow:0 18px 42px rgba(15,23,42,.16);
}

.spk-preview>img{
    border-radius:8px;
}

.spk-side-name{
    margin:11px auto 0!important;
    padding:6px 13px!important;
    border:1px solid #dfe4ea;
    border-radius:999px;
    background:#fff;
    color:#657084;
    font-size:11px!important;
    font-weight:700;
}

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

.spk-controls > .spk-group,
.spk-controls > .spk-layers-panel,
.spk-controls > .spk-variant-panel,
.spk-controls > #spk-edit{
    border:1px solid var(--spk-line)!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
}

.spk-group{
    margin-bottom:11px!important;
    padding:13px!important;
}

.spk-group > label{
    margin-bottom:9px!important;
    color:#202b3c!important;
    font-size:13px!important;
    font-weight:700!important;
}

.spk-group input,
.spk-group select{
    min-height:40px;
    padding:9px 11px!important;
    border:1px solid #dce2e9!important;
    border-radius:9px!important;
    font-family:Montserrat,Arial,sans-serif!important;
}

.spk-group input:focus,
.spk-group select:focus{
    border-color:var(--spk-primary)!important;
    box-shadow:0 0 0 3px rgba(22,131,255,.10)!important;
}

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

#spk-add{
    width:100%;
    min-height:42px!important;
    margin-top:9px!important;
    border:1px solid #d9e0e8!important;
    border-radius:9px!important;
    background:#f8fafc!important;
    color:#172033!important;
    font-family:Montserrat,Arial,sans-serif!important;
    font-weight:700!important;
}

#spk-add:hover{
    border-color:#bfcbd8!important;
    background:#f2f6fa!important;
}

/* file input */

#spk-file{
    min-height:43px;
    box-sizing:border-box;
    padding:8px!important;
    border:1px dashed #c8d1dd!important;
    border-radius:9px!important;
    background:#f8fafc!important;
}

/* ===== VARIANT PANEL ===== */

.spk-variant-panel{
    margin-bottom:11px!important;
    padding:13px!important;
    border:1px solid var(--spk-line)!important;
    border-radius:13px!important;
    background:#fff!important;
}

.spk-variant-panel-heading{
    margin-bottom:9px!important;
    color:#202b3c!important;
    font-size:13px!important;
    font-weight:700!important;
}

.spk-variant-title{
    color:#7a8596!important;
    font-size:11px!important;
}

.spk-variant-buttons{
    gap:6px!important;
}

.spk-variant-button{
    min-width:68px!important;
    min-height:40px!important;
    border:1px solid #dbe2ea!important;
    border-radius:9px!important;
    background:#fff!important;
    box-shadow:none!important;
}

.spk-variant-button.has-image{
    min-width:56px!important;
    min-height:56px!important;
}

.spk-variant-button.active{
    border:2px solid var(--spk-primary)!important;
    box-shadow:0 0 0 3px rgba(22,131,255,.09)!important;
}

/* ===== LAYERS ===== */

.spk-layers-panel{
    padding:13px!important;
    margin-bottom:11px!important;
}

.spk-layers-title{
    margin-bottom:9px!important;
    font-size:13px!important;
}

.spk-layers-list{
    gap:6px!important;
}

.spk-layer-row{
    min-height:40px!important;
    border-color:#e0e5eb!important;
    border-radius:9px!important;
}

.spk-layer-row.active{
    border-color:var(--spk-primary)!important;
    background:#eef6ff!important;
}

/* ===== EDIT PANEL ===== */

#spk-edit:not(:empty){
    padding:13px!important;
    margin-bottom:11px!important;
    overflow:hidden;
}

#spk-edit .spk-group{
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
    margin-bottom:12px!important;
}

/* sliders */

#spk-edit input[type="range"]{
    accent-color:var(--spk-primary);
}

/* ===== SELECTED OBJECT ===== */

.spk-text.spk-selected{
    border:1px dashed var(--spk-primary)!important;
    background:rgba(22,131,255,.045)!important;
}

.spk-resize{
    width:12px!important;
    height:12px!important;
    border:2px solid var(--spk-primary)!important;
    background:#fff!important;
    box-shadow:0 2px 5px rgba(15,23,42,.15);
}

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

.spk-row{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:7px!important;
    margin-top:0!important;
}

.spk-row button{
    min-height:39px!important;
    padding:8px 10px!important;
    border:1px solid #dce2e9!important;
    border-radius:9px!important;
    background:#f8fafc!important;
    color:#465366!important;
    font-size:11px!important;
}

/* ===== MAIN ACTION ===== */

.spk-use{
    min-height:52px!important;
    width:100%!important;
    margin-top:11px!important;
    padding:13px 16px!important;
    border:0!important;
    border-radius:11px!important;
    background:linear-gradient(135deg,#16a34a,#0d913d)!important;
    color:#fff!important;
    font-family:Montserrat,Arial,sans-serif!important;
    font-size:15px!important;
    font-weight:700!important;
    box-shadow:0 8px 20px rgba(22,163,74,.20)!important;
    transition:.15s ease!important;
}

.spk-use:hover{
    transform:translateY(-1px);
    box-shadow:0 11px 24px rgba(22,163,74,.27)!important;
}

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

.spk-info{
    max-width:560px;
    margin:10px auto 0!important;
    color:#8a94a4!important;
    font-size:10px!important;
    line-height:1.55!important;
}

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

@media(max-width:900px){

    #spk-window{
        width:100vw!important;
        height:100vh!important;
        max-height:100vh!important;
        border-radius:0!important;
    }

    #spk-window h2{
        height:56px;
        padding-left:16px!important;
        font-size:17px!important;
    }

    #spk-sides{
        min-height:54px;
        justify-content:flex-start;
        overflow-x:auto;
        padding:7px 12px!important;
    }

    .spk-history-controls{
        position:static;
        padding:7px 12px;
        background:#fff;
        border-bottom:1px solid var(--spk-line);
    }

    .spk-layout{
        height:calc(100% - 110px)!important;
        display:flex!important;
        flex-direction:column!important;
    }

    .spk-left{
        flex:none!important;
        width:100%!important;
        height:auto!important;
        padding:10px!important;
        border-right:0!important;
        border-bottom:1px solid var(--spk-line);
    }

    #spk-zoom-viewport{
        min-height:340px!important;
        padding:12px!important;
    }

    .spk-controls{
        width:100%!important;
        height:auto!important;
        max-height:none!important;
        padding:10px!important;
        overflow:auto!important;
    }
}

@media(max-width:560px){

    #spk-zoom-controls{
        width:100%;
    }

    #spk-zoom-viewport{
        min-height:300px!important;
    }

    .spk-group{
        padding:11px!important;
    }

    .spk-use{
        min-height:50px!important;
    }
}


/* ============================================================
   SPARKNITO – 3 SLOUPCE
   LEVÁ STRANA = varianty + text + obrázek
   STŘED       = náhled produktu
   PRAVÁ STRANA= ostatní nástroje / úpravy
   ============================================================ */

@media(min-width:901px){

    .spk-layout{
        display:grid!important;
        grid-template-columns:280px minmax(0,1fr) 390px!important;
        gap:0!important;
        align-items:stretch!important;
        height:calc(100% - 122px)!important;
        min-height:0!important;
    }

    .spk-side-tools{
        grid-column:1;
        grid-row:1;
        width:100%;
        min-width:0;
        height:100%;
        box-sizing:border-box;
        padding:18px 14px;
        background:#fff;
        border-right:1px solid var(--spk-line);
        overflow:auto;
        scrollbar-width:thin;
    }

    .spk-side-tools-title{
        display:flex;
        align-items:center;
        gap:8px;
        min-height:40px;
        margin:0 0 10px;
        padding:0 4px 10px;
        box-sizing:border-box;
        border-bottom:1px solid var(--spk-line);
        color:var(--spk-ink);
        font-size:14px;
        font-weight:700;
    }

    .spk-side-tools-title-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:27px;
        height:27px;
        border-radius:8px;
        background:#eef6ff;
        color:var(--spk-primary);
        font-size:15px;
    }

    .spk-side-tools > .spk-group,
    .spk-side-tools > .spk-variant-panel{
        width:100%!important;
        box-sizing:border-box;
    }

    .spk-side-tools > .spk-group{
        margin-bottom:11px!important;
    }

    .spk-side-tools .spk-variant-panel{
        margin-bottom:11px!important;
    }

    .spk-left{
        grid-column:2;
        grid-row:1;
        width:auto!important;
        min-width:0!important;
        height:100%!important;
    }

    .spk-controls{
        grid-column:3;
        grid-row:1;
        width:auto!important;
        min-width:0!important;
        height:100%!important;
        max-height:none!important;
    }

    /* Pravý panel už neobsahuje levé nástroje. */
    .spk-controls > .spk-group,
    .spk-controls > .spk-variant-panel{
        width:100%;
    }

}

/* ============================================================
   LEVÝ PANEL – sjednocení vzhledu
   ============================================================ */

.spk-side-tools .spk-group,
.spk-side-tools .spk-variant-panel{
    border:1px solid var(--spk-line)!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
}

.spk-side-tools .spk-group{
    padding:13px!important;
}

.spk-side-tools .spk-group > label{
    display:block;
    margin-bottom:9px!important;
    color:#202b3c!important;
    font-size:13px!important;
    font-weight:700!important;
}

.spk-side-tools #spk-add{
    width:100%;
}

.spk-side-tools #spk-file{
    width:100%;
    max-width:100%;
}

/* ============================================================
   MOBILE
   Náhled zůstává nahoře, pod ním levé nástroje a následně
   ostatní pravý panel.
   ============================================================ */

@media(max-width:900px){

    .spk-layout{
        display:flex!important;
        flex-direction:column!important;
        height:calc(100% - 110px)!important;
        gap:0!important;
    }

    .spk-left{
        order:1!important;
        width:100%!important;
    }

    .spk-side-tools{
        order:2!important;
        width:100%!important;
        box-sizing:border-box;
        padding:10px;
        background:#fff;
        border-top:1px solid var(--spk-line);
        border-bottom:1px solid var(--spk-line);
        overflow:visible;
    }

    .spk-side-tools-title{
        margin:0 0 9px;
        padding:0 2px 9px;
    }

    .spk-side-tools .spk-group,
    .spk-side-tools .spk-variant-panel{
        margin-bottom:9px!important;
    }

    .spk-controls{
        order:3!important;
        width:100%!important;
    }
}


/* SPARKNITO – redesign v3: výraznější rozložení podle referenčního návrhu */
:root{--spk-primary:#6d3df5;--spk-primary-hover:#5728de;--spk-green:#16a34a;--spk-ink:#172033;--spk-muted:#6f7b90;--spk-line:#e2e6ef;--spk-bg:#f4f6fc;--spk-panel:#fff}
#spk-modal{padding:0!important;background:rgba(19,24,40,.62)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#spk-window{width:min(1600px,100vw)!important;height:min(96vh,1000px)!important;max-height:96vh!important;padding:0!important;overflow:hidden!important;border-radius:18px!important;background:var(--spk-bg)!important;box-shadow:0 28px 90px rgba(15,23,42,.28)!important;font-family:Montserrat,Arial,sans-serif!important;color:var(--spk-ink)!important;display:flex;flex-direction:column}
#spk-window h2.spk-header{height:74px;min-height:74px;flex:none;box-sizing:border-box;margin:0!important;padding:9px 72px 9px 26px!important;display:flex;align-items:center;gap:16px;background:linear-gradient(100deg,#fff 0%,#f8f7ff 100%)!important;border-bottom:1px solid #e4e4f1!important;font-size:14px!important;line-height:1.2!important;letter-spacing:0!important;overflow:hidden}
.spk-brand-mark{display:flex;align-items:center;gap:9px;min-width:230px;color:#111827;font-size:22px;font-weight:800;letter-spacing:-.7px;white-space:nowrap}
.spk-brand-mark .spk-brand-star{font-size:28px;color:#7042f6}
.spk-product-heading{display:flex;flex-direction:column;gap:4px;min-width:155px;flex:1;color:#111827;white-space:nowrap}
.spk-product-heading strong{font-size:15px;font-weight:800}.spk-product-heading small{font-size:11px;font-weight:500;color:#7b8496}
#spk-close{top:15px!important;right:14px!important;width:40px!important;height:40px!important;border-radius:12px!important;background:#f0f2f8!important;color:#1f2937!important;font-size:26px!important;line-height:40px!important;z-index:50}
#spk-sides{height:54px;min-height:54px;flex:none;box-sizing:border-box;margin:0!important;padding:7px 18px!important;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff!important;border-bottom:1px solid var(--spk-line)!important}
.spk-side-btn{min-width:148px;min-height:39px;padding:8px 16px!important;border:1px solid #e0d8ff!important;border-radius:11px!important;background:#fff!important;color:#4f2bc6!important;font:700 12px Montserrat,Arial,sans-serif!important;letter-spacing:.3px;transition:all .15s ease}
.spk-side-btn.active{background:#f0eaff!important;border:1px solid #7c4dff!important;color:#6335ed!important;box-shadow:0 0 0 3px rgba(109,61,245,.09)!important}
.spk-layout{flex:1!important;height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:300px minmax(320px,1fr) 360px!important;gap:0!important;align-items:stretch!important;overflow:hidden!important}
.spk-side-tools{grid-column:1;grid-row:1;min-width:0;width:100%;height:100%;box-sizing:border-box;padding:18px 14px!important;background:#fff!important;border-right:1px solid var(--spk-line)!important;overflow:auto!important;scrollbar-width:thin}
.spk-side-tools-title{display:flex;align-items:center;gap:9px;min-height:42px;margin:0 0 14px!important;padding:0 3px 12px!important;border-bottom:1px solid #eceef5!important;color:#172033!important;font-size:14px!important;font-weight:800!important}
.spk-side-tools-title-icon{width:30px!important;height:30px!important;border-radius:10px!important;background:#eee7ff!important;color:#6d3df5!important;font-size:17px!important}
.spk-side-tools .spk-group,.spk-side-tools .spk-variant-panel{padding:14px!important;margin:0 0 13px!important;border:1px solid #e3e7f0!important;border-radius:15px!important;background:#fff!important;box-shadow:0 4px 14px rgba(24,35,60,.045)!important}
.spk-side-tools .spk-group>label,.spk-variant-panel-heading{font-size:13px!important;font-weight:800!important;color:#273248!important;margin-bottom:11px!important}
.spk-side-tools #spk-add{min-height:44px!important;border:1px solid #ded5ff!important;border-radius:11px!important;background:linear-gradient(135deg,#f6f2ff,#fff)!important;color:#6035e8!important;font-weight:800!important}
.spk-side-tools #spk-file{width:100%!important;max-width:100%!important;min-height:58px!important;padding:10px!important;border:1px dashed #c8b8ff!important;border-radius:12px!important;background:#faf8ff!important;font-size:11px!important}
.spk-variant-buttons{gap:8px!important}.spk-variant-button{min-width:56px!important;min-height:56px!important;border:1px solid #dfe4ee!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}.spk-variant-button.active{border:2px solid #7548ff!important;box-shadow:0 0 0 3px rgba(109,61,245,.10)!important}
.spk-left{grid-column:2;grid-row:1;display:flex!important;flex-direction:column!important;min-width:0!important;width:auto!important;height:100%!important;box-sizing:border-box;padding:16px 18px 14px!important;background:#f2f4fa!important;border-right:1px solid var(--spk-line)!important;overflow:hidden!important}
#spk-zoom-controls{width:250px!important;max-width:38vw!important;margin:0!important;display:grid!important;grid-template-columns:36px minmax(68px,1fr) 36px!important;grid-template-rows:36px!important;gap:4px!important;flex:none!important}
.spk-zoom-button,.spk-zoom-value{min-width:0!important;border:1px solid #e0e4ee!important;border-radius:10px!important;background:#fff!important;color:#202b40!important;font-family:Montserrat,Arial,sans-serif!important;box-shadow:0 2px 6px rgba(20,30,50,.03)}
.spk-zoom-button{font-size:19px!important}.spk-zoom-value{font-size:12px!important;font-weight:800!important}.spk-zoom-range{display:none!important}
.spk-zoom-hint{display:none!important}
#spk-zoom-viewport{flex:1!important;min-height:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:20px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;border:1px solid #e0e4ee!important;border-radius:16px!important;background-color:#fff!important;background-image:linear-gradient(45deg,#eef0f5 25%,transparent 25%),linear-gradient(-45deg,#eef0f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0f5 75%),linear-gradient(-45deg,transparent 75%,#eef0f5 75%)!important;background-size:22px 22px!important;background-position:0 0,0 11px,11px -11px,-11px 0!important;overflow:hidden!important}
.spk-preview{width:100%!important;max-width:780px!important;margin:auto!important;border-radius:10px!important;background:#fff!important;box-shadow:0 14px 36px rgba(15,23,42,.12)!important}
.spk-preview>img{border-radius:10px!important}
.spk-side-name{align-self:center;flex:none;margin:10px auto 0!important;padding:7px 14px!important;border:1px solid #e1d9ff!important;border-radius:999px!important;background:#fff!important;color:#6335ed!important;font-size:10px!important;font-weight:800!important;letter-spacing:.3px}
.spk-info{flex:none;max-width:600px;margin:8px auto 0!important;color:#8a94a6!important;font-size:10px!important;line-height:1.45!important}
.spk-controls{grid-column:3;grid-row:1;width:auto!important;min-width:0!important;height:100%!important;max-height:none!important;box-sizing:border-box!important;padding:14px!important;background:#fff!important;overflow:auto!important;scrollbar-width:thin}
.spk-controls>.spk-group,.spk-controls>.spk-layers-panel,.spk-controls>.spk-variant-panel,.spk-controls>#spk-edit{border:1px solid #e3e7f0!important;border-radius:15px!important;background:#fff!important;box-shadow:0 4px 14px rgba(24,35,60,.045)!important}
.spk-controls>.spk-group,.spk-controls>.spk-layers-panel{padding:14px!important;margin-bottom:12px!important}
.spk-group>label,.spk-layers-title{color:#273248!important;font-size:13px!important;font-weight:800!important}
.spk-group input:not([type=range]),.spk-group select,#spk-edit input:not([type=range]),#spk-edit select,#spk-edit textarea{border:1px solid #dfe4ee!important;border-radius:10px!important;font-family:Montserrat,Arial,sans-serif!important}
.spk-layer-row{min-height:42px!important;border:1px solid #e5e7ef!important;border-radius:10px!important}.spk-layer-row.active{border-color:#9b7bff!important;background:#f2edff!important}.spk-layer-action{border-radius:8px!important}.spk-layer-action:hover{background:#eee8ff!important;color:#6335ed!important}
.spk-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:10px 0!important}.spk-row button{min-height:42px!important;border:1px solid #dfe4ee!important;border-radius:10px!important;background:#f8f9fc!important;color:#465168!important;font:600 11px Montserrat,Arial,sans-serif!important}
.spk-use{min-height:54px!important;margin-top:8px!important;border:0!important;border-radius:13px!important;background:linear-gradient(135deg,#7545ff,#5d2ee7)!important;color:#fff!important;font:800 14px Montserrat,Arial,sans-serif!important;box-shadow:0 8px 20px rgba(109,61,245,.22)!important}
.spk-use:hover{filter:brightness(1.03);transform:translateY(-1px)}
.spk-history-controls{position:static!important;display:flex!important;align-items:center!important;gap:4px!important;flex:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
.spk-history-button{min-width:64px!important;min-height:34px!important;padding:6px 8px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#4b5568!important;font:600 11px Montserrat,Arial,sans-serif!important;white-space:nowrap}
.spk-history-button:hover:not(:disabled){background:#f0eaff!important;color:#6335ed!important}.spk-history-button:disabled{opacity:.4}
@media(max-width:1150px) and (min-width:901px){.spk-layout{grid-template-columns:245px minmax(280px,1fr) 320px!important}.spk-side-tools{padding:12px 10px!important}.spk-controls{padding:10px!important}.spk-brand-mark{min-width:190px;font-size:19px}.spk-product-heading{min-width:110px}}
@media(max-width:900px){#spk-window{width:100vw!important;height:100vh!important;max-height:100vh!important;border-radius:0!important}#spk-window h2.spk-header{height:auto;min-height:70px;padding:10px 55px 10px 14px!important;gap:8px;flex-wrap:wrap}.spk-brand-mark{min-width:0;font-size:17px}.spk-brand-mark .spk-brand-star{font-size:22px}.spk-product-heading{display:none}.spk-history-controls{order:2}.#spk-zoom-controls{max-width:100%!important}.spk-layout{display:flex!important;flex-direction:column!important;overflow:auto!important;height:auto!important;flex:1!important}.spk-left{order:1!important;flex:none!important;width:100%!important;height:auto!important;min-height:380px!important;padding:10px!important;border-right:0!important;border-bottom:1px solid var(--spk-line)!important}.spk-side-tools{order:2!important;width:100%!important;height:auto!important;overflow:visible!important;padding:10px!important;border-right:0!important;border-bottom:1px solid var(--spk-line)!important}.spk-controls{order:3!important;width:100%!important;height:auto!important;overflow:visible!important;padding:10px!important}#spk-zoom-controls{width:200px!important;grid-template-columns:32px minmax(60px,1fr) 32px!important}.spk-info{font-size:10px!important}}


/* ============================================================
   SPARKNITO – LEVÝ PANEL NÁSTROJŮ podle referenčního návrhu
   Pouze rozložení a vzhled; ovládací logika editoru zůstává.
============================================================ */
@media(min-width:901px){
  .spk-layout{
    grid-template-columns:360px minmax(0,1fr) 360px!important;
  }
  .spk-side-tools{
    grid-column:1!important;grid-row:1!important;
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:0!important;
    width:100%!important;min-width:0!important;height:100%!important;
    padding:10px!important;background:#f7f8fc!important;
    border-right:1px solid #e3e7f2!important;overflow:hidden!important;
  }
  .spk-side-tools-title{grid-column:1 / 3!important;grid-row:1!important;
    display:flex!important;align-items:center!important;gap:8px!important;
    min-height:36px!important;margin:0 0 8px!important;padding:0 5px 9px!important;
    border-bottom:1px solid #e6e8f1!important;font-size:14px!important;
  }
  .spk-tool-rail{grid-column:1!important;grid-row:2!important;display:flex!important;
    flex-direction:column!important;gap:8px!important;align-items:stretch!important;
    padding:6px 7px!important;background:#fff!important;border:1px solid #ebeaf4!important;
    border-radius:15px!important;box-shadow:0 3px 12px rgba(38,35,80,.04)!important;
    overflow:auto!important;min-width:0!important;
  }
  .spk-tool-rail-button{display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:3px!important;
    min-width:0!important;min-height:68px!important;padding:7px 3px!important;
    border:1px solid transparent!important;border-radius:12px!important;
    background:#f8f9fd!important;color:#596277!important;
    font:500 11px Montserrat,Arial,sans-serif!important;cursor:pointer!important;
    transition:background .15s,border-color .15s,transform .15s!important;
  }
  .spk-tool-rail-button:hover{background:#f1edff!important;color:#6335ed!important}
  .spk-tool-rail-button.active{background:linear-gradient(145deg,#7545ff,#5e2ce7)!important;
    color:#fff!important;box-shadow:0 5px 13px rgba(99,53,237,.2)!important}
  .spk-tool-rail-icon{display:flex!important;align-items:center!important;justify-content:center!important;
    width:42px!important;height:42px!important;border-radius:11px!important;
    font:500 25px Arial,sans-serif!important;line-height:1!important}
  .spk-tool-content{grid-column:2!important;grid-row:2!important;min-width:0!important;
    height:100%!important;overflow:auto!important;overscroll-behavior:contain!important;
    padding:0 0 6px 10px!important;box-sizing:border-box!important;scrollbar-width:thin!important}
  .spk-tool-content>.spk-group,.spk-tool-content>.spk-variant-panel{
    width:100%!important;box-sizing:border-box!important;margin:0 0 12px!important;
    padding:14px!important;border:1px solid #e4e7f0!important;border-radius:15px!important;
    background:#fff!important;box-shadow:0 4px 14px rgba(24,35,60,.045)!important;
  }
  .spk-tool-content .spk-group>label,.spk-variant-panel-heading{
    font-size:14px!important;font-weight:700!important;color:#242d42!important;margin-bottom:11px!important
  }
  .spk-tool-content #spk-add{background:linear-gradient(135deg,#7545ff,#5e2ce7)!important;
    color:#fff!important;border:0!important;border-radius:11px!important;min-height:48px!important;
    box-shadow:0 5px 12px rgba(99,53,237,.17)!important}
  .spk-tool-content #spk-file{min-height:130px!important;padding:20px 10px!important;
    border:1px dashed #c6cce0!important;border-radius:12px!important;background:#f8f9fe!important}
  .spk-tool-content .spk-variant-buttons{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .spk-tool-content .spk-variant-button{min-width:0!important;width:100%!important;min-height:64px!important;border-radius:11px!important}
}
@media(max-width:900px){
  .spk-side-tools{display:flex!important;flex-direction:column!important}
  .spk-tool-rail{display:flex!important;flex-direction:row!important;gap:6px!important;overflow-x:auto!important;padding:6px!important}
  .spk-tool-rail-button{flex:0 0 65px!important;min-height:58px!important;border:1px solid #e5e7f0!important;border-radius:10px!important;background:#fff!important;color:#596277!important;font-size:10px!important}
  .spk-tool-rail-button.active{background:#6938ef!important;color:#fff!important}
  .spk-tool-rail-icon{font-size:20px!important}
  .spk-tool-content{min-width:0!important;width:100%!important}
}