:root{--body-bg:#f4f4f7;--root-bg:#ffffff;--node-bg:#ffffff;--text-color:#1c1d22;--context-bg:#ffffff;--context-border:#ccc;--option-bg:#e2e8f0;--option-border:#cbd5e0;--option-hover:#d1d9e2;--pin-color:#444;--link-color:#444}

html.dark{--body-bg:#2c3e50;--root-bg:#282c34;--node-bg:#3e4452;--text-color:#c8cdd4;--context-bg:#3e4452;--context-border:#555;--option-bg:#4f566b;--option-border:#606580;--option-hover:#606580;--pin-color:#444;--link-color:#444}

html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:sans-serif;background:var(--body-bg);color:var(--text-color)}

.canvas{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden;cursor:grab;z-index:0;background:var(--root-bg);touch-action:none}

.node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 18px;width:180px;background:var(--node-bg);border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.08);user-select:none;z-index:1;box-sizing:border-box;border:3px solid transparent;overflow:hidden;touch-action:none}

.node--file{border-color:#10b981}

.node--convert{border-color:#3b82f6}

.node--zip{border-color:#8b5cf6}

.node--download{border-color:#06b6d4}

.node--merge{border-color:#f59e0b}

.node--separate{border-color:#ef4444}

.node--combine{border-color:#4ade80}

.node--resize{border-color:#a78bfa}

.node--crop{border-color:#ec4899}

.node--sequenceToVideo{border-color:#d946ef}

.node--extractAudio{border-color:#f97316}

.node--compress{border-color:#6366f1}

.node--compress-percent{border-color:#16a34a}

.node--removeMetadata{border-color:#22d3ee}

.node--rename{border-color:#0ea5e9}

.node--chromaKey{border-color:#4ade80}

.node--removeBackground{border-color:#0d9488}



.node.selected-node{box-shadow:0 0 0 3px #007bff,0 4px 12px rgba(0,0,0,.08);z-index:10}

.pin{position:absolute;width:18px;height:18px;background:var(--pin-color);border:3px solid var(--pin-color);border-radius:4px;cursor:pointer;z-index:2;transition:transform .2s;touch-action:none}

.pin:hover{transform:scale(1.3)}

.pin.left{left:-12px;top:50%;transform:translateY(-50%)}

.pin.right{right:-12px;top:50%;transform:translateY(-50%)}

.pin.multipin{transform:none}

.pin-label{position:absolute;left:8px;font-size:.75em;color:var(--text-color);pointer-events:none}

.context{position:fixed;background:var(--context-bg);border:1px solid var(--context-border);box-shadow:0 2px 6px rgba(0,0,0,.15);border-radius:8px;z-index:1000}

.context button{display:block;width:130px;padding:8px 12px;text-align:left;cursor:pointer;border:none;background:none}

.context button:hover{background:#f0f0f0}

.context button.selected{background:#3b82f6;color:#fff}

.context button.selected:hover{background:#3b82f6}

.file-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}

.file-wrapper input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.custom-file-button{display:block;width:calc(100% - 24px);padding:8px 12px;background-color:#e2e8f0;border:1px solid #cbd5e0;border-radius:6px;cursor:pointer;font-size:.9em;color:var(--text-color);text-align:center;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.05);box-sizing:border-box}

.custom-file-button:active,.custom-file-button:hover{background-color:#d1d9e2;border-color:#aebacd;box-shadow:0 2px 4px rgba(0,0,0,.1)}

.custom-file-button:active{background-color:#a8b0ba;border-color:#8b96a2;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}

.filename-display{font-size:.8em;color:var(--text-color);text-align:center;word-break:break-all;padding:2px 0}

.filename-display.has-file{font-weight:700;color:#10b981}

.node-control-group{display:flex;flex-direction:column;gap:4px;width:100%;align-items:stretch;box-sizing:border-box}

.node-control-group input[type=number],.node-control-group input[type=text]{width:calc(100% - 16px);padding:4px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:.9em}

.node-button,.node-option{padding:8px 12px;background-color:var(--option-bg);border:1px solid var(--option-border);border-radius:6px;cursor:pointer;font-size:.9em;color:var(--text-color);text-align:center;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.05)}

.node-button:active,.node-button:hover,.node-option:active,.node-option:hover{background-color:var(--option-hover);border-color:var(--option-border);box-shadow:0 2px 4px rgba(0,0,0,.1)}

.node-button:active,.node-option:active{background-color:#a8b0ba;border-color:#8b96a2;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}

.node-option.selected{background-color:#3b82f6;color:#fff;border-color:#2563eb;font-weight:700}

.node-header{font-weight:700;margin-bottom:8px;color:var(--text-color);font-size:1.1em;width:100%;text-align:center}

.node--file .node-header{color:#10b981}

.node--convert .node-header{color:#3b82f6}

.node--merge .node-header{color:#f59e0b}

.node--zip .node-header{color:#8b5cf6}

.node--download .node-header{color:#06b6d4}

.node--separate .node-header{color:#ef4444}

.node--combine .node-header{color:#4ade80}

.node--resize .node-header{color:#a78bfa}

.node--crop .node-header{color:#ec4899}

.node--sequenceToVideo .node-header{color:#d946ef}

.node--extractAudio .node-header{color:#f97316}

.node--compress .node-header{color:#6366f1}

.node--compress-percent .node-header{color:#16a34a}

.node--removeMetadata .node-header{color:#22d3ee}

.node--rename .node-header{color:#0ea5e9}

.node--removeBackground .node-header{color:#0d9488}

.node--qrCode{border-color:#7e22ce}

.node--qrCode .node-header{color:#7e22ce}



.node-input-group{display:flex;flex-direction:column;width:100%;gap:5px;margin-top:5px;align-items:center}

.node-input-group input[type=number],.node-input-group input[type=text]{width:calc(100% - 16px);padding:6px 8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:.9em}

.node-input-group input[type=radio]{margin-right:5px}

.node-input-row{display:flex;width:100%;justify-content:space-between;align-items:center;gap:5px}

.node-input-row span{font-size:.85em;color:var(--text-color)}

.node-radio-option{display:flex;align-items:center;gap:5px;font-size:.9em;color:var(--text-color);cursor:pointer}

.node-radio-option input[type=radio], .node-radio-option input[type=checkbox]{cursor:pointer; margin-right: 5px;}

.custom-dimensions-group{display:flex;gap:5px;width:100%;align-items:center}

.custom-dimensions-group input{flex-grow:1}

.link-context-menu{position:fixed;background:var(--context-bg);border:1px solid var(--context-border);box-shadow:0 2px 6px rgba(0,0,0,.15);border-radius:8px;z-index:1000}

.link-context-menu button{display:block;width:130px;padding:8px 12px;text-align:left;cursor:pointer;border:none;background:none}

.link-context-menu button:hover{background:#f0f0f0}

.node-context-menu{position:fixed;background:var(--context-bg);border:1px solid var(--context-border);box-shadow:0 2px 6px rgba(0,0,0,.15);border-radius:8px;z-index:1000}

.node-context-menu button{display:block;width:130px;padding:8px 12px;text-align:left;cursor:pointer;border:none;background:none}

.node-context-menu button:hover{background:#f0f0f0}

.crop-modal{display:none;position:fixed;z-index:1001;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5);align-items:center;justify-content:center}

html.dark .crop-modal{background-color:rgba(0,0,0,.75)}

.crop-modal-content{background-color:#fefefe;padding:20px;border:1px solid #888;width:80%;max-width:700px;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.3);position:relative}

html.dark .crop-modal-content{background-color:#2a2b31;border-color:#555;color:var(--text-color)}

.crop-modal-close-button{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}

html.dark .crop-modal-close-button{color:#ccc}

.crop-modal-close-button:focus,.crop-modal-close-button:hover{color:#000;text-decoration:none}

.crop-image-container{width:100%;height:400px;margin-bottom:15px;background:#eee;display:flex;align-items:center;justify-content:center;overflow:hidden}

html.dark .crop-image-container{background:#3e4452;border-color:#555}

.crop-image-container img{max-width:100%;max-height:100%;display:block}

html.dark #cropImagePreview{border-color:#555}

html.dark #vectorizerPreviewSrcImage{border-color:#555}

.ratio-options{display:flex;align-items:center;gap:8px;margin-bottom:8px}

html.dark .crop-modal select{background:#3e4452;color:var(--text-color);border:1px solid #555}

html.dark .crop-modal option{background:#3e4452;color:var(--text-color)}

.crop-modal-controls{text-align:right}

.crop-modal-controls button{padding:10px 15px;margin-left:10px;border-radius:5px;border:1px solid #ccc;cursor:pointer}

.crop-modal-controls button#confirmCropButton{background-color:#4caf50;color:#fff;border-color:#4caf50}

.crop-modal-controls button#confirmCropButton:hover{background-color:#45a049}

.crop-modal-controls button#cancelCropButton,.crop-modal-controls button#vectorizerCancelButton{background-color:#e0e0e0;color:var(--dark-gray)}

.crop-modal-controls button#cancelCropButton:hover,.crop-modal-controls button#vectorizerCancelButton:hover{background-color:#c7c7c7}

html.dark .crop-modal-controls button#cancelCropButton,html.dark .crop-modal-controls button#vectorizerCancelButton{background-color:#444;color:var(--text-color)}

html.dark .crop-modal-controls button#cancelCropButton:hover,html.dark .crop-modal-controls button#vectorizerCancelButton:hover{background-color:#555}

#cropLoadingIndicator{font-style:italic;color:var(--text-color)}

.node-spinner{position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:20px;height:20px;border:3px solid rgba(0,0,0,.1);border-left-color:#007bff;border-radius:50%;animation:spin 1s linear infinite;z-index:15}

@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}

.node-description{font-size:0.8em;color:var(--text-color);text-align:center;margin-top:4px;}



.node-progress{position:absolute;top:0;left:0;height:4px;background:#22c55e;width:0%;pointer-events:none;}

/* Dodatečné styly pro vectorizerModal, pokud jsou potřeba */

#vectorizerModal .crop-modal-content { /* Přepis pro šířku, pokud je to stejná třída */

    max-width: 900px; /* Nebo kolik potřebujete */

    width: 90%;

}



#vectorizerOptionsContainer {

    /* Pokud options-panel má specifické styly, které se zde nehodí, přepište je zde */

    padding-left: 0; /* Pokud je border-left z hlavní stránky */

    border-left: none;

    max-height: none; /* Pokud byl omezen */

}

html.dark #vectorizerOptionsContainer .button-group button{background-color:var(--option-bg);color:var(--text-color);border-color:var(--option-border)}

html.dark #vectorizerOptionsContainer .button-group button:hover{background-color:var(--option-hover);color:var(--text-color)}



#vectorizerPreviewSvgContainer svg {

    display: block; /* Zajistí, že SVG vyplní kontejner správně */

    margin: auto; /* Centrování, pokud je menší než kontejner */

}

html.dark #vectorizerPreviewSvgContainer{background-color:#3e3f47;border-color:#555}

.node--imgDenoiser{border-color:#6ee7b7}

.node--imgDenoiser .node-header{color:#6ee7b7}

.node--mono-stereo{border-color:#facc15}

.node--mono-stereo .node-header{color:#facc15}

.node--crop-video{border-color:#fbbf24}

.node--crop-video .node-header{color:#fbbf24}

.node--gif-reverse{border-color:#f472b6}

.node--gif-reverse .node-header{color:#f472b6}

.node--heic-jpg{border-color:#f87171}

.node--heic-jpg .node-header{color:#f87171}

.node--bw{border-color:#64748b}

.node--bw .node-header{color:#64748b}

.node--h265{border-color:#4ade80}

.node--h265 .node-header{color:#4ade80}

.node--censor{border-color:#fb7185}

.node--censor .node-header{color:#fb7185}



.node--preview{border-color:#94a3b8}

.node--preview .node-header{color:#94a3b8}

.preview-container{width:100%;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-height:140px;overflow:auto}

.preview-container img,.preview-container video{max-width:80px;max-height:80px;border:1px solid #ccc;border-radius:4px;cursor:pointer}

.preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:1000}

.preview-overlay img,.preview-overlay video{max-width:90%;max-height:90%;background:#000;border:1px solid #777;border-radius:4px}



.hamburger{--bar:4px;position:fixed;top:15px;left:15px;width:32px;height:24px;display:inline-block;cursor:pointer;z-index:110;color:#333}

.hamburger div{position:absolute;width:100%;height:var(--bar);background:currentColor;left:0;transition:.4s;border-radius:2px}

html.dark .hamburger{color:#eee}

.hamburger div:nth-child(1){top:0}

.hamburger div:nth-child(2){top:calc(50% - var(--bar)/2)}

.hamburger div:nth-child(3){bottom:0}

body.menu-open .hamburger div:nth-child(1){transform:translateY(10px) rotate(45deg)}

body.menu-open .hamburger div:nth-child(2){opacity:0}

body.menu-open .hamburger div:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.menu-overlay{position:fixed;inset:0;background:#0006;opacity:0;pointer-events:none;transition:opacity .35s;z-index:108}

body.menu-open .menu-overlay{opacity:1;pointer-events:auto}

.side-menu{position:fixed;top:0;left:0;width:280px;height:100%;background:linear-gradient(135deg,#ffffff 0%,#e7e7ec 100%);box-shadow:4px 0 10px #0004;transform:translateX(-100%);transition:transform .5s cubic-bezier(.4,2,.6,1);z-index:109;display:flex;flex-direction:column;padding:24px 20px 40px 20px;gap:20px;overflow-y:hidden}

html.dark .side-menu{background:linear-gradient(135deg,#2a2b31 0%,#1b1c20 100%)}

body.menu-open .side-menu{transform:translateX(0)}

.side-menu #workflowList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px}

.side-menu input[type=search]{width:100%;padding:10px 12px;border:none;border-radius:8px;background:#f0f0f3;font-size:.9rem;box-shadow:inset 0 2px 4px #0002;outline:none;transition:.2s}

html.dark .side-menu input[type=search]{background:#26272c;color:#f4f4f7;box-shadow:none}

.side-menu input[type=search]:focus{box-shadow:0 0 0 2px var(--primary-color)}

.menu-btn{display:block;width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,#ffffff 0%,#eaeaf0 100%);box-shadow:0 2px 5px #0002;font-size:.9rem;font-weight:600;cursor:pointer;transition:.2s;text-align:left;color:inherit}

html.dark .menu-btn{background:linear-gradient(135deg,#34353b 0%,#28292e 100%)}

.menu-btn:hover{box-shadow:0 3px 8px #0003;transform:translateY(-1px)}

.clean-btn{margin-top:auto;margin-bottom:20px;position:sticky;bottom:20px;background:#fff0f0;border:1px solid #f5a5a5;color:#b00}

html.dark .clean-btn{background:#452222;border-color:#a55;color:#fdd}

.clean-btn:hover{background:#ffdede}

#themeSwitchBar .switch{display:none!important}