html.dark{color-scheme:dark;--el-color-primary:#2263f8;--el-color-primary-light-3:#1e4bb4;--el-color-primary-light-5:#1b3c86;--el-color-primary-light-7:#182c58;--el-color-primary-light-8:#172442;--el-color-primary-light-9:#151c2b;--el-color-primary-dark-2:#4e82f9;--el-color-success:#00b884;--el-color-success-light-3:#068762;--el-color-success-light-5:#0a664c;--el-color-success-light-7:#0e4536;--el-color-success-light-8:#10352a;--el-color-success-light-9:#12241f;--el-color-success-dark-2:#33c69d;--el-color-warning:#e6a23c;--el-color-warning-light-3:#a77730;--el-color-warning-light-5:#7d5b28;--el-color-warning-light-7:#533f20;--el-color-warning-light-8:#3e301c;--el-color-warning-light-9:#292218;--el-color-warning-dark-2:#ebb563;--el-color-danger:#dc3545;--el-color-danger-light-3:#a02b36;--el-color-danger-light-5:#78252d;--el-color-danger-light-7:#501e23;--el-color-danger-light-8:#3c1b1e;--el-color-danger-light-9:#281719;--el-color-danger-dark-2:#e35d6a;--el-color-error:#f56c6c;--el-color-error-light-3:#b25252;--el-color-error-light-5:#854040;--el-color-error-light-7:#582e2e;--el-color-error-light-8:#412626;--el-color-error-light-9:#2b1d1d;--el-color-error-dark-2:#f78989;--el-color-info:#909399;--el-color-info-light-3:#6b6d71;--el-color-info-light-5:#525457;--el-color-info-light-7:#393a3c;--el-color-info-light-8:#2d2d2f;--el-color-info-light-9:#202121;--el-color-info-dark-2:#a6a9ad;--el-box-shadow:0px 12px 32px 4px rgba(0,0,0,.36),0px 8px 20px rgba(0,0,0,.72);--el-box-shadow-light:0px 0px 12px rgba(0,0,0,.72);--el-box-shadow-lighter:0px 0px 6px rgba(0,0,0,.72);--el-box-shadow-dark:0px 16px 48px 16px rgba(0,0,0,.72),0px 12px 32px #000,0px 8px 16px -8px #000;--el-bg-color-page:#0a0a0a;--el-bg-color:#141414;--el-bg-color-overlay:#1d1e1f;--el-text-color-primary:#e5eaf3;--el-text-color-regular:#cfd3dc;--el-text-color-secondary:#a3a6ad;--el-text-color-placeholder:#8d9095;--el-text-color-disabled:#6c6e72;--el-border-color-darker:#636466;--el-border-color-dark:#58585b;--el-border-color:#4c4d4f;--el-border-color-light:#414243;--el-border-color-lighter:#363637;--el-border-color-extra-light:#2b2b2c;--el-fill-color-darker:#424243;--el-fill-color-dark:#39393a;--el-fill-color:#303030;--el-fill-color-light:#262727;--el-fill-color-lighter:#1d1d1d;--el-fill-color-extra-light:#191919;--el-fill-color-blank:transparent;--el-mask-color:rgba(0,0,0,.8);--el-mask-color-extra-light:rgba(0,0,0,.3)}html.dark .el-button{--el-button-disabled-text-color:hsla(0,0%,100%,.5)}html.dark .el-card{--el-card-bg-color:var(--el-bg-color-overlay)}html.dark .el-empty{--el-empty-fill-color-0:var(--el-color-black);--el-empty-fill-color-1:#4b4b52;--el-empty-fill-color-2:#36383d;--el-empty-fill-color-3:#1e1e20;--el-empty-fill-color-4:#262629;--el-empty-fill-color-5:#202124;--el-empty-fill-color-6:#212224;--el-empty-fill-color-7:#1b1c1f;--el-empty-fill-color-8:#1c1d1f;--el-empty-fill-color-9:#18181a}.pintu .pintu-container{--primary:#2563eb;--bg:#0f172a;--panel-w:320px;--text:#f8fafc;--border:#334155;bottom:0;display:flex;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:999}@media (max-width:768px){.pintu .pintu-container{flex-direction:column;height:auto;min-height:100vh;overflow:auto}.pintu .panel{border-bottom:1px solid var(--border);border-right:none!important;height:auto!important;width:100%!important}.pintu .panel.right{border-left:none!important;border-top:1px solid var(--border)}.pintu .workspace{flex:none!important;height:60vh!important;min-height:400px;width:100%}.pintu .toggle-btn{display:none!important}.pintu .layout-category-list .cat-item{display:none}.pintu .layout-category-list .cat-item.current{display:block}}.pintu .panel{background:#1e293b;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;position:relative;transition:width .3s ease;width:var(--panel-w);z-index:20}.pintu .panel.right{border-left:1px solid var(--border);border-right:none}.pintu .panel.collapsed{border:none;padding:0;width:0!important}.pintu .panel-content{display:flex;flex-direction:column;height:100%;overflow-y:auto;width:100%}.pintu .mode-tabs{background:#0f172a;border-bottom:1px solid var(--border);display:flex;flex-shrink:0}.pintu .mode-tab{background:#1e293b;border-bottom:3px solid transparent;color:#94a3b8;cursor:pointer;flex:1;font-weight:700;padding:15px 0;text-align:center;transition:.2s}.pintu .mode-tab:hover{color:#fff}.pintu .mode-tab.active{background:#252e42;border-bottom-color:var(--primary);color:var(--primary)}.pintu .toggle-btn{align-items:center;background:#1e293b;border:1px solid #334155;color:#94a3b8;cursor:pointer;display:flex;height:80px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease;width:24px;z-index:50}.pintu #toggle-left{border-left:none;border-radius:0 10px 10px 0;left:320px}.pintu .pintu-container.left-closed #toggle-left{left:0}.pintu #toggle-right{border-radius:10px 0 0 10px;border-right:none;right:320px}.pintu .pintu-container.right-closed #toggle-right{right:0}.pintu .cat-item{border:1px solid #334155;border-radius:4px;margin-bottom:5px;overflow:hidden}.pintu .cat-header{align-items:center;background:#334155;color:#fff;display:flex;font-size:14px;font-weight:700;justify-content:space-between;padding:12px 15px}.pintu .cat-body{background:#1e293b;display:grid;gap:8px;grid-template-columns:repeat(3,1fr);padding:10px}.pintu .tpl-thumb{aspect-ratio:1;background:#475569;border:2px solid transparent;border-radius:4px;cursor:pointer;display:grid;gap:1px;padding:2px}.pintu .tpl-thumb.active{background:#0f172a;border-color:var(--primary)}.pintu .tpl-thumb div{background:#94a3b8}.pintu .stitch-settings{display:none;flex:1;flex-direction:column;gap:20px;padding:20px}.pintu .stitch-settings.active{display:flex}.pintu .direction-group{display:flex;gap:10px}.pintu .dir-btn{align-items:center;background:#334155;border:2px solid transparent;border-radius:8px;color:#94a3b8;cursor:pointer;display:flex;flex:1;flex-direction:column;gap:5px;padding:15px;text-align:center}.pintu .dir-btn.active{background:#2563eb1a;border-color:var(--primary);color:#fff}.pintu .stitch-size-input{margin-top:10px}.pintu .stitch-size-input label{color:#94a3b8;display:block;font-size:12px;margin-bottom:5px}.pintu .stitch-size-input input{background:#0f172a;border:1px solid #334155;border-radius:4px;color:#fff;padding:8px;width:100%}.pintu .workspace{background-color:#0f172a;background-image:radial-gradient(#334155 1px,transparent 0);background-size:20px 20px;flex:1;overflow:hidden;position:relative;z-index:10}.pintu #physical-container,.pintu .workspace{align-items:center;display:flex;justify-content:center}.pintu #physical-container{background:#fff;box-shadow:0 10px 50px #00000080;flex-shrink:0;transform-origin:center center;transition:width .2s,height .2s}.pintu #collage-canvas{box-sizing:border-box;height:100%;width:100%}.pintu #collage-canvas.mode-layout{display:grid;overflow:hidden}.pintu #collage-canvas.mode-stitch{background-color:transparent;display:flex;gap:10px;overflow:hidden;padding:20px}.pintu #collage-canvas.mode-stitch.stitch-v{align-items:stretch;flex-direction:column;height:auto;width:100%}.pintu #collage-canvas.mode-stitch.stitch-h{align-items:stretch;flex-direction:row;height:100%;width:auto}.pintu .grid-slot{align-items:center;background:#f1f5f9;display:flex;justify-content:center;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.pintu .mode-layout .grid-slot{cursor:grab;height:100%;width:100%}.pintu .mode-layout .grid-slot:active{cursor:grabbing}.pintu .mode-stitch .grid-slot{background:transparent;cursor:default;flex-shrink:0}.pintu .mode-stitch.stitch-v .grid-slot{height:auto;width:100%}.pintu .mode-stitch.stitch-h .grid-slot{height:100%;width:auto}.pintu .grid-slot.empty{border:none!important;cursor:pointer}.pintu .grid-slot.empty:after{color:#cbd5e1;content:"+";font-size:40px}.pintu .grid-slot.empty:hover{background:#e2e8f0}.pintu .mode-layout .grid-slot img{max-height:none!important;max-width:none!important;pointer-events:none;position:absolute;transform-origin:center center;will-change:transform}.pintu .mode-stitch .grid-slot img{display:block;object-fit:fill}.pintu .mode-stitch.stitch-v .grid-slot img{height:auto!important;width:100%!important}.pintu .mode-stitch.stitch-h .grid-slot img{height:100%!important;width:auto!important}.pintu .slot-controls{background:#000000d9;border-radius:15px;display:flex;gap:8px;left:50%;opacity:0;padding:10px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .1s;z-index:999}.pintu .mode-layout .slot-controls{flex-direction:column}.pintu .mode-stitch .slot-controls{flex-direction:row}.pintu .grid-slot:hover{border:1px solid #ccc}.pintu .grid-slot:hover .slot-controls{opacity:1;pointer-events:auto}.pintu .ctrl-row{gap:8px}.pintu .ctrl-row,.pintu .icon-btn{display:flex;justify-content:center}.pintu .icon-btn{align-items:center;background:#ffffff26;border:2px solid hsla(0,0%,100%,.3);border-radius:8px;color:#fff;cursor:pointer;flex-shrink:0;height:46px;min-height:46px;min-width:46px;pointer-events:auto;width:46px}.pintu .icon-btn i{font-size:24px;font-weight:600}.pintu .icon-btn:hover{background:var(--primary);border-color:var(--primary)}.pintu .icon-btn.delete:hover{background:#ef4444;border-color:#ef4444}.pintu .header{background:#0f172a;border-bottom:1px solid var(--border);flex-shrink:0;padding:15px}.pintu .header h2{color:#fff;font-size:16px;margin:0;text-align:center}.pintu .controls{flex:1;overflow-y:auto;padding:15px}.pintu .control-group{border-bottom:1px solid #334155;margin-bottom:20px;padding-bottom:15px}.pintu .control-row label{color:#cbd5e1;display:block;font-size:12px;margin-bottom:5px}.pintu input,.pintu select{background:#334155;border:1px solid #475569;border-radius:4px;color:#fff;font-size:13px;outline:none;padding:8px;width:100%}.pintu input[type=color]{cursor:pointer;height:36px;padding:2px}.pintu .custom-size-box{display:flex;display:none;gap:5px;margin-top:5px}.pintu button.btn{align-items:center;background:var(--primary);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;justify-content:center;margin-top:18px;padding:8px 4px;width:100%}.pintu button.btn:hover{background:#1d4ed8}.pintu button.btn.green{background:#10b981}.pintu #bg-image-input,.pintu #hidden-file-input{display:none}.pintu #template-select-container{background:#0f172a;border-bottom:1px solid var(--border);flex-shrink:0;padding:10px 20px;position:sticky;top:0;z-index:10}.pintu .layout-category-list{flex:1;overflow-y:auto;padding:10px}.pintu #slot-bg-picker{display:none}