*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:Inter,system-ui,sans-serif;font-size:13px;background:#1c1c1c;color:#d8d8d8;-webkit-font-smoothing:antialiased}.app{display:flex;height:100vh;overflow:hidden}.main{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}.toolbar{display:flex;align-items:center;gap:2px;padding:0 10px;height:48px;background:#252525;border-bottom:1px solid #333;flex-shrink:0;overflow-x:auto;overflow-y:visible;scrollbar-width:thin;scrollbar-color:#444 transparent}.tb-group{display:flex;align-items:center;gap:2px;position:relative}.tb-divider{width:1px;height:22px;background:#3a3a3a;margin:0 4px;flex-shrink:0}.tb-btn{position:relative;display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border:none;border-radius:4px;background:transparent;color:#ccc;cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap;transition:background .1s}.tb-btn:hover{background:#333}.tb-btn.active{background:#2a4a8c;color:#fff}.tb-btn.danger:hover{background:#5a1e1e;color:#f88}.tb-select{height:28px;border:1px solid #3a3a3a;border-radius:4px;background:#2e2e2e;color:#ccc;font-size:12px;font-family:inherit;padding:0 22px 0 6px;cursor:pointer;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}.tb-select:hover{border-color:#555}.tb-select:focus{border-color:#2563eb}.tb-number{height:28px;border:1px solid #3a3a3a;border-radius:4px;background:#2e2e2e;color:#ccc;font-size:12px;font-family:inherit;padding:0 2px 0 6px;text-align:left;outline:none}.tb-number:hover{border-color:#555}.tb-number:focus{border-color:#2563eb}.tb-number::-webkit-inner-spin-button,.tb-number::-webkit-outer-spin-button{-webkit-appearance:inner-spin-button;opacity:1;cursor:default}.tb-label{font-size:11px;color:#888;white-space:nowrap}.tb-color{width:24px;height:24px;border:1px solid #3a3a3a;border-radius:3px;padding:0;cursor:pointer;background:none}.tb-hex{height:28px;border:1px solid #3a3a3a;border-radius:4px;background:#2e2e2e;color:#ccc;font-size:11px;font-family:Space Mono,monospace;padding:0 5px;width:62px;outline:none;text-align:center}.tb-hex:hover{border-color:#555}.tb-hex:focus{border-color:#2563eb}.spread-viewport{flex:1;min-height:0;overflow:auto;background:#2e2e2e;scrollbar-width:thin;scrollbar-color:#444 transparent;display:flex;flex-direction:column;align-items:center}.spread{background:transparent;box-shadow:0 4px 32px #00000080,0 1px 4px #0006}.element{-webkit-user-select:none;user-select:none}.element:focus{outline:none}.element.crop-active>div:first-child{outline:2px solid #f59e0b}.svg-inline{pointer-events:none}.svg-inline svg{display:block;width:100%;height:100%}.img-placeholder{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;cursor:default}.img-hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;color:#999;font-family:Inter,sans-serif;pointer-events:none;background:#fff9;padding:3px 0}.thread-port{position:absolute;width:18px;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;z-index:15;cursor:pointer;border:1.5px solid;transition:transform .1s}.thread-port:hover{transform:scale(1.15)}.thread-port-out{bottom:-9px;right:-9px;background:#dc2626;color:#fff;border-color:#fff}.thread-port-out-linked{bottom:-9px;right:-9px;background:#2563eb;color:#fff;border-color:#fff}.thread-port-in{top:-9px;left:-9px;background:#2563eb;color:#fff;border-color:#fff}.thread-link-target{position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border:2px dashed #2563eb;border-radius:2px;background:#2563eb14;cursor:cell;z-index:12;pointer-events:all;animation:thread-pulse 1.2s ease-in-out infinite}@keyframes thread-pulse{0%,to{border-color:#2563ebe6}50%{border-color:#2563eb4d}}.sidebar{width:268px;min-width:268px;background:#202020;border-right:1px solid #2e2e2e;display:flex;flex-direction:column;overflow:hidden}.sidebar-tabs{display:flex;flex-shrink:0;border-bottom:1px solid #2a2a2a}.sidebar-tab{flex:1;padding:10px 4px;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:#666;font-size:11px;font-family:inherit;font-weight:500;cursor:pointer;letter-spacing:.3px;transition:color .1s,border-color .1s}.sidebar-tab:hover{color:#aaa}.sidebar-tab.active{color:#e0e0e0;border-bottom-color:#2563eb}.sidebar-tab-content{flex:1;overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.template-grid-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px;border:1px solid #2a2a2a;border-radius:5px;background:transparent;color:#888;cursor:pointer;transition:background .1s,border-color .1s;width:100%}.template-grid-item:hover{background:#2a2a2a;border-color:#3a3a3a;color:#bbb}.template-grid-thumb{border-radius:2px;overflow:hidden;border:1px solid #2e2e2e;line-height:0;width:100%}.template-grid-thumb svg{width:100%;height:auto;display:block}.template-grid-name{font-size:9px;color:#777;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.template-grid-item:hover .template-grid-name{color:#bbb}.preset-list{display:flex;flex-direction:column;gap:5px}.text-preset-btn{width:100%;padding:9px 10px;display:flex;align-items:baseline;gap:8px;text-align:left;border:1px solid #2a2a2a;border-radius:4px;background:#1c1c1c;cursor:pointer;transition:background .1s,border-color .1s}.text-preset-btn:hover{background:#272727;border-color:#3a3a3a}.text-preset-label{color:#ddd;line-height:1.2;flex-shrink:0}.text-preset-sub{font-size:9px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-preset-btn:hover .text-preset-sub{color:#777}.section-label{font-size:9px;font-weight:600;letter-spacing:1.5px;color:#555;margin-bottom:7px}.img-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.img-size-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:1px solid #2a2a2a;border-radius:4px;background:#1c1c1c;color:#888;font-size:10px;font-family:inherit;cursor:pointer;transition:background .1s}.img-size-btn:hover{background:#272727;color:#ccc}.img-size-icon{width:44px;max-height:36px;overflow:hidden;display:flex;align-items:center;justify-content:center}.img-size-label{font-size:10px;color:#aaa}.img-size-ratio{font-size:9px;color:#555}.img-multi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.img-multi-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border:1px solid #2a2a2a;border-radius:4px;background:#1c1c1c;color:#888;font-size:9px;font-family:inherit;cursor:pointer;transition:background .1s}.img-multi-btn:hover{background:#272727;color:#ccc}.img-multi-preview{display:flex;align-items:center;justify-content:center}.img-multi-label{color:#666;font-size:9px}.img-multi-btn:hover .img-multi-label{color:#aaa}.gallery-btn{width:100%;padding:8px;border:1px dashed #333;border-radius:4px;background:transparent;color:#777;font-size:11px;font-family:inherit;cursor:pointer;transition:border-color .1s,color .1s;margin-bottom:8px}.gallery-btn:hover{border-color:#555;color:#bbb}.gallery-btn:disabled{opacity:.45;cursor:wait}.gallery-count{font-size:9px;color:#555;margin-bottom:6px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.gallery-img{width:100%;padding-top:100%;position:relative;overflow:hidden;border-radius:2px;border:1px solid #2a2a2a;cursor:grab;transition:border-color .1s;background:#2a2a2a}.gallery-img:active{cursor:grabbing}.gallery-img:hover{border-color:#555}.gallery-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.shape-presets{display:flex;gap:8px;padding:6px 0 2px}.shape-preset-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border-radius:6px;border:1px solid #333;background:#252525;color:#888;cursor:pointer;font-size:10px;font-family:inherit;transition:border-color .15s,background .15s}.shape-preset-btn:hover{border-color:#555;background:#2e2e2e;color:#ccc}.shape-preset-btn svg{display:block}.sidebar-export{padding:10px;border-top:1px solid #2a2a2a;flex-shrink:0}.export-btn{display:block;width:100%;padding:8px;margin-bottom:6px;border:1px solid #3a3a3a;border-radius:5px;background:#2a3f6a;color:#8ab4f8;cursor:pointer;font-size:12px;font-family:inherit;font-weight:500;transition:background .1s}.export-btn:hover{background:#2d4d7f}.export-btn.secondary{background:#1e1e1e;color:#888}.export-btn.secondary:hover{background:#2a2a2a}.spread-nav{height:110px;background:#181818;border-top:1px solid #2a2a2a;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#333 transparent}.spread-nav-track{display:flex;align-items:center;gap:8px;padding:10px 14px;height:100%;width:max-content}.spread-nav-item{display:flex;flex-direction:column;border:1.5px solid #2a2a2a;border-radius:5px;background:#202020;cursor:pointer;flex-shrink:0;overflow:hidden;transition:border-color .15s,background .15s;-webkit-user-select:none;user-select:none}.spread-nav-item:hover{border-color:#444;background:#262626}.spread-nav-item.active{border-color:#2563eb;background:#172038}.spread-nav-thumb{display:block;line-height:0}.spread-nav-bottom{display:flex;align-items:center;gap:4px;padding:3px 6px;background:#1a1a1a;border-top:1px solid #232323;min-height:20px}.spread-nav-item.active .spread-nav-bottom{background:#182035}.spread-nav-num{font-size:9px;color:#4a4a4a;flex-shrink:0}.spread-nav-item.active .spread-nav-num{color:#3a5abf}.spread-nav-label{flex:1;font-size:10px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none;min-width:0;border-radius:2px;cursor:text}.spread-nav-item.active .spread-nav-label{color:#8ab4f8}.spread-nav-label:focus{background:#2563eb26;color:#fff;padding:0 2px}.spread-nav-del{flex-shrink:0;display:none;width:14px;height:14px;border-radius:50%;border:none;background:#3a3a3a;color:#999;font-size:10px;cursor:pointer;align-items:center;justify-content:center;line-height:1;padding:0}.spread-nav-item:hover .spread-nav-del{display:flex}.spread-nav-del:hover{background:#b91c1c;color:#fff}.spread-nav-add{display:flex;align-items:center;justify-content:center;width:50px;height:86px;border:1.5px dashed #2e2e2e;border-radius:5px;background:transparent;color:#3a3a3a;font-size:24px;cursor:pointer;flex-shrink:0;transition:border-color .15s,color .15s;line-height:1}.spread-nav-add:hover{border-color:#555;color:#888}.ctx-menu{position:fixed;z-index:9999;background:#1e1e1e;border:1px solid #3a3a3a;border-radius:6px;padding:4px;box-shadow:0 8px 24px #00000080,0 1px 4px #0006;min-width:150px}.ctx-item{display:block;width:100%;padding:6px 10px;text-align:left;background:transparent;border:none;color:#ccc;font-size:12px;font-family:inherit;cursor:pointer;border-radius:4px;transition:background .1s}.ctx-item:hover{background:#2e2e2e;color:#fff}.ctx-item.danger{color:#f87171}.ctx-item.danger:hover{background:#3a1818}.ctx-sep{height:1px;background:#2e2e2e;margin:3px 4px}.ps-section{margin-bottom:18px}.ps-row{display:flex;align-items:center;gap:6px;padding:4px 0;min-height:28px}.ps-col{display:flex;flex-direction:column;gap:4px;padding:4px 0}.ps-label{flex:1;font-size:11px;color:#888}.ps-unit{font-size:10px;color:#555}.ps-num{width:56px;height:24px;border:1px solid #333;border-radius:3px;background:#1a1a1a;color:#ccc;font-size:11px;font-family:inherit;text-align:left;outline:none;padding:0 2px 0 5px}.ps-num:focus{border-color:#2563eb}.ps-num::-webkit-inner-spin-button,.ps-num::-webkit-outer-spin-button{-webkit-appearance:inner-spin-button;opacity:1;cursor:default}.ps-select{flex:1;height:24px;border:1px solid #333;border-radius:3px;background:#1a1a1a;color:#ccc;font-size:11px;font-family:inherit;padding:0 18px 0 4px;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center}.ps-select:focus{border-color:#2563eb}.ps-toggle{position:relative;width:32px;height:18px;border:none;border-radius:9px;background:#333;cursor:pointer;padding:0;flex-shrink:0;transition:background .2s}.ps-toggle.on{background:#2563eb}.ps-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}.ps-toggle.on .ps-toggle-thumb{left:16px}.ps-color{width:24px;height:24px;border:1px solid #333;border-radius:3px;padding:0;cursor:pointer;background:none;flex-shrink:0}.ps-text{width:100%;height:26px;border:1px solid #333;border-radius:3px;background:#1a1a1a;color:#ccc;font-size:11px;font-family:inherit;padding:0 6px;outline:none}.ps-text:focus{border-color:#2563eb}.ps-text::placeholder{color:#444}.ps-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}.ps-section-header .section-label{margin-bottom:0}.ps-lock-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;border:1px solid #333;background:transparent;color:#555;cursor:pointer;flex-shrink:0;transition:color .15s,border-color .15s,background .15s}.ps-lock-btn:hover{color:#999;border-color:#555;background:#2a2a2a}.ps-lock-btn.locked{color:#2563eb;border-color:#2563eb;background:#2563eb1a}@media print{.toolbar,.sidebar,.spread-nav{display:none!important}.spread-viewport{overflow:visible!important;background:#fff!important}.spread{transform:none!important;box-shadow:none!important}[data-handle],.element.selected>div:last-child{display:none!important}[data-grid-overlay],.thread-port,.thread-link-target{display:none!important}}