:root{color-scheme:dark;--bg:#191919;--panel:#202020;--line:#383838;--text:#ebebeb;--cyan:#09baa7;--blue:#64a7ff;--green:#62c991;--accent:#2962b4}

/* ── Landing Page ── */
.landing-overlay{position:fixed;inset:0;z-index:9999;background:#161b22;display:flex;align-items:center;justify-content:center;overflow-y:auto}
.landing-overlay.hidden{display:none}
.landing-inner{width:100%;max-width:480px;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:24px}
.landing-title{margin:0;font-size:56px;font-weight:800;letter-spacing:6px;color:#8edd65}
.landing-subtitle{margin:0;font-size:14px;color:#8b9bb4;font-weight:400;letter-spacing:1px}
.landing-login{display:flex;flex-direction:column;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid #2e3a48;border-radius:10px;padding:32px 40px;width:100%;margin-top:20px}
.login-row{display:flex;align-items:center;gap:12px;width:100%}
.login-row label{width:100px;text-align:right;color:#8b9bb4;font:600 13px "Segoe UI",Arial,sans-serif;flex-shrink:0;white-space:nowrap}
.login-row input{flex:1;height:36px;border:1px solid #3a4558;border-radius:4px;background:#0d1117;color:#eee;font:13px "Segoe UI",Arial,sans-serif;padding:0 12px;outline:none;transition:border-color .2s}
.login-row input:focus{border-color:#8edd65}
#loginBtn{width:100%;height:42px;margin-top:6px;border:0;border-radius:6px;background:#8edd65;color:#111;font:700 15px "Segoe UI",Arial,sans-serif;cursor:pointer;letter-spacing:1px;transition:opacity .2s}
#loginBtn:hover{opacity:.85}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font:13px "Segoe UI",Arial,sans-serif}body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:36px 42px minmax(0,1fr) 166px}.menubar,.toolbar,.studio,.log{min-width:0;width:100%}.menubar{display:flex;border-bottom:1px solid var(--line);background:#1c1c1c}.menu{border:0;background:transparent;color:#eee;padding:0 14px;font:inherit}.menu.active,.menu:hover{background:#3977d4}.window-actions{margin-left:auto;display:flex;align-items:center;gap:28px;padding:0 16px;color:#8c8c8c;font-size:17px}.window-actions .close{color:#ff5e64}.toolbar{display:flex;gap:8px;align-items:center;padding:3px;border-bottom:1px solid var(--line)}.toolbar button{height:35px;min-width:83px;border:1px solid #454545;border-radius:4px;background:#303030;color:#eee;font:15px inherit;text-align:left;padding:0 13px}.toolbar button:hover,.property-content button:hover{background:#3b3b3b}.toolbar span{margin-left:6px;font-size:12px}.studio{min-height:0;overflow:hidden;display:grid;grid-template-columns:270px minmax(420px,1fr) 400px}.left-panel,.right-panel{min-height:0;overflow:hidden;background:var(--panel)}.left-panel{display:grid;grid-template-rows:minmax(0,46fr) minmax(0,54fr);border-right:1px solid var(--line)}.right-panel{display:grid;grid-template-rows:30px minmax(0,1fr);border-left:1px solid var(--line)}.panel-section{min-height:0;overflow:hidden;border-bottom:1px solid var(--line)}.toolbox,.properties{height:auto}.panel-title{height:25px;border-bottom:1px solid var(--line);padding:4px 7px;color:#ddd;font-size:12px}.panel-title i,.viewer-title i{float:right;color:#838383;font-style:normal}.search{height:36px;padding:7px;display:flex;gap:5px}.search input{min-width:0;flex:1;border:0;border-bottom:1px solid #555;background:transparent;color:#ccc;outline:none;font:12px inherit}.search button{border:0;background:transparent;color:#b6d2ff;font-size:16px}.node-list{height:calc(100% - 61px);overflow:auto;padding:0 10px}.loading{color:#aaa}.category{margin:4px 0 14px}.category h3{color:var(--cyan);font-size:13px;font-weight:500;margin:6px 0 7px}.node-option{width:100%;height:29px;display:flex;gap:8px;align-items:center;background:transparent;color:#eee;border:0;text-align:left;padding:0 3px;cursor:grab}.node-option:active{cursor:grabbing}.node-option:hover{background:#333}.node-option img{width:18px;height:18px;object-fit:contain}.property-content{height:calc(100% - 25px);padding:8px;overflow:auto;color:#eee}.property-content p{color:#a0a0a0;font-size:12px;line-height:1.45}.property-content button{border:1px solid #555;border-radius:3px;background:#353535;color:#eee;padding:5px 8px;cursor:pointer}.ports-summary{padding-left:16px;color:#b7d6ff;font:11px Consolas,monospace}.canvas-wrap{min-height:0;overflow:hidden;background:#1a1a1a}.canvas{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1c1c1c;background-image:linear-gradient(#2b2b2b 2px,transparent 2px),linear-gradient(90deg,#2b2b2b 2px,transparent 2px);background-size:24px 24px}.canvas.drag-over{outline:2px dashed #62c991;outline-offset:-5px}.canvas-hint{position:absolute;z-index:0;top:45%;left:50%;transform:translate(-50%,-50%);color:#666;border:1px dashed #4c4c4c;padding:11px 15px;font-size:12px;pointer-events:none}.connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.connection{fill:none;stroke:#c8c864;stroke-width:2.5;filter:drop-shadow(0 0 2px #465100)}.connection.temp{stroke:#7aafff;stroke-dasharray:6 5}.flow-node{position:absolute;z-index:2;min-width:196px;border:1px solid #49566a;border-radius:4px;background:#222834;box-shadow:0 3px 12px #0008;user-select:none}.flow-node.selected{border-color:#7791b9;box-shadow:0 0 0 1px #7791b9}.node-header{height:28px;padding:6px 10px;background:#303947;color:#fff;font-weight:600;border-radius:4px 4px 0 0;cursor:move}.node-ports{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0 7px}.port-column{display:flex;flex-direction:column;gap:6px}.port-row{height:17px;display:flex;align-items:center;font:10px Consolas,monospace;color:#c5cedc;white-space:nowrap}.port-row.input{justify-content:flex-start}.port-row.output{justify-content:flex-end;text-align:right}.port-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;border:1px solid #17202c;margin:0 5px;cursor:crosshair}.port-dot.input{background:var(--blue)}.port-dot.output{background:var(--green)}.port-dot:hover,.port-dot.wiring{transform:scale(1.35);box-shadow:0 0 7px #fff}.empty-port{opacity:0}.tabs{height:30px;border-bottom:1px solid var(--line);padding-left:5px}.tab{height:29px;background:#191919;color:#ddd;border:1px solid var(--line);border-bottom:0;padding:0 12px;font:inherit}.tab.active{background:#272727}.viewer{min-height:0;height:auto;overflow:hidden}.viewer-title{height:28px;padding:6px;border-bottom:1px solid var(--line)}.selected-name{height:29px;border:1px solid #4b4b4b;border-radius:4px;margin:4px;text-align:center;padding:6px;color:#c5c5c5;font-size:12px}.viewer-block{height:calc(50% - 32px);padding:4px}.viewer-block h3{margin:0;height:25px;border-bottom:1px solid #4a4a4a;color:#d8faff;font-size:12px;padding:5px}.viewer-block h3 span{float:right;color:#aaa}.image-stage{height:calc(100% - 25px);border:1px solid #3b3b3b;background:#1b1b1b;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#606060}.image-stage img{width:100%;height:100%;object-fit:contain}.result-view{overflow:auto;padding:16px;color:#ddd}.result-view h3{font-size:14px}.result-view pre{white-space:pre-wrap;font:11px Consolas,monospace}.hidden{display:none}.log{grid-column:1/-1;min-height:0;overflow:hidden;border-top:10px solid #202020;background:#111}.log .panel-title{background:#202020}.log pre{height:calc(100% - 25px);overflow:auto;margin:0;padding:7px;color:#48ff9c;font:12px Consolas,monospace;white-space:pre-wrap}.prop-category{color:#09baa7;font-size:11px;margin:2px 0 6px}.prop-section{margin:6px 0}.prop-file-name{display:block;color:#888;margin-top:3px;font-size:11px}.prop-action-btn{width:100%;height:28px;border:1px solid #555;border-radius:3px;background:#353535;color:#eee;font:12px inherit;cursor:pointer;margin:3px 0}.prop-action-btn:hover{background:#3b3b3b}.prop-action-btn.danger{border-color:#774;color:#ffc}.prop-group{margin:6px 0 2px;border:1px solid #333;border-radius:3px;overflow:hidden}.prop-group-title{height:24px;padding:5px 8px;background:#282828;color:#aad;font:11px "Segoe UI",Arial,sans-serif;font-weight:600;cursor:default;user-select:none}.prop-group-toggle{cursor:pointer}.prop-group-toggle:hover{background:#303030}.toggle-arrow{float:right;color:#888;font-size:10px}.prop-group.collapsed .prop-group-body{display:none}.prop-group-body{padding:2px 0}.prop-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:center;padding:3px 8px;min-height:26px}.prop-row:hover{background:#2a2a2a}.prop-label{color:#c0c8d8;font:11px "Segoe UI",Arial,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}.prop-input{width:100%;height:22px;border:1px solid #444;border-radius:2px;background:#1a1a1a;color:#eee;font:11px Consolas,monospace;padding:2px 5px;outline:none}.prop-input:focus{border-color:var(--blue)}.prop-input[type="checkbox"]{width:14px;height:14px;accent-color:var(--cyan)}.prop-check{display:flex;align-items:center;gap:6px;font:11px "Segoe UI",Arial,sans-serif;color:#ccc}select.prop-input{height:24px;cursor:pointer;appearance:auto}.prop-ports{margin:2px 0}.port-dir{color:#888;font:10px "Segoe UI",Arial,sans-serif;padding:0 8px}.ports-summary{padding-left:24px;margin:2px 0 4px;color:#b7d6ff;font:11px Consolas,monospace}@media(max-width:900px){.studio{grid-template-columns:210px minmax(0,1fr)}.right-panel{display:none}}@media(max-width:620px){.studio{grid-template-columns:minmax(0,1fr)}.left-panel,.window-actions{display:none}}

/* ── Setting Buttons ── */
.setting-btn{width:100%;height:30px;border:1px solid #556;border-radius:3px;background:#2a2e3a;color:#cde;font:12px "Segoe UI",Arial,sans-serif;cursor:pointer;margin:2px 0;text-align:left;padding:0 10px}.setting-btn:hover{background:#353d4d;border-color:#77a}.setting-btn.pattern{border-color:#5a5;color:#bfb}.setting-btn.reset{border-color:#874;color:#fda}

/* ── Modal Overlay ── */
.modal-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center}
.modal-dialog{background:#222;border:1px solid #555;border-radius:6px;box-shadow:0 8px 40px #000a;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid #444;background:#2a2a2a;color:#eee;font:600 13px "Segoe UI",Arial,sans-serif}
.modal-close{background:none;border:0;color:#aaa;font-size:20px;cursor:pointer;line-height:1}.modal-close:hover{color:#fff}
.modal-body{flex:1;overflow:auto;padding:10px;display:flex;gap:12px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:8px 14px;border-top:1px solid #444;background:#2a2a2a}
.modal-btn{height:30px;min-width:68px;border:1px solid #555;border-radius:4px;background:#353535;color:#eee;font:13px "Segoe UI",Arial,sans-serif;cursor:pointer;padding:0 14px}.modal-btn:hover{background:#444}.modal-btn.ok{background:#2962b4;border-color:#4c8ae6}.modal-btn.ok:hover{background:#3574d0}
.modal-btn-sm{height:26px;border:1px solid #555;border-radius:3px;background:#333;color:#ccc;font:11px "Segoe UI",Arial,sans-serif;cursor:pointer;padding:0 10px;margin-top:6px}.modal-btn-sm:hover{background:#444}

/* ── Tool Canvas ── */
.tool-canvas-wrap{width:560px;min-height:420px;background:#111;border:1px solid #444;border-radius:3px;position:relative;overflow:hidden}
.tool-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}

/* ── Modal Form ── */
.modal-form{width:200px;display:flex;flex-direction:column;gap:4px;padding:4px 0}
.modal-form-wide{width:270px}
.form-row{display:flex;align-items:center;gap:6px;min-height:28px}.form-row label{width:72px;color:#bbb;font:11px "Segoe UI",Arial,sans-serif;flex-shrink:0}.form-row input,.form-row select{flex:1;height:24px;border:1px solid #444;border-radius:2px;background:#1a1a1a;color:#eee;font:11px Consolas,monospace;padding:2px 5px;outline:none}.form-row input:focus,.form-row select:focus{border-color:var(--blue)}
.form-hint{color:#888;font:11px "Segoe UI",Arial,sans-serif;margin:4px 0;line-height:1.4}
.form-section{margin:6px 0;padding-bottom:6px;border-bottom:1px solid #333}.form-section strong{color:#09baa7;font-size:11px}

/* ── Context Menu ── */
.context-menu{position:fixed;z-index:6000;background:#2a2a2e;border:1px solid #555;border-radius:4px;box-shadow:0 4px 16px #000a;min-width:180px;padding:4px 0}
.ctx-item{display:block;width:100%;border:0;background:none;color:#eee;font:12px "Segoe UI",Arial,sans-serif;text-align:left;padding:6px 16px;cursor:pointer}.ctx-item:hover{background:#3977d4}.ctx-item.delete{color:#ff7b7b}.ctx-item.delete:hover{background:#c03030;color:#fff}

/* ── Image Stage Zoom ── */
.image-stage{cursor:grab}.image-stage img{object-fit:contain;will-change:transform}

/* ── Pattern Trainer Dialog ── */
.pt-dialog{width:1080px;max-width:96vw;max-height:92vh}
.pt-hint{padding:4px 14px;background:#1a2030;color:#8bc;font-size:11px;border-bottom:1px solid #333}
.pt-body{display:flex;gap:0;flex:1;min-height:0;overflow:hidden}
.pt-left{flex:1;display:flex;flex-direction:column;border-right:1px solid #444;min-width:0}
.pt-right{width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:0;overflow-y:auto;background:#1a1a1a}
.pt-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#232830;border-bottom:1px solid #444}
.pt-tool{width:36px;height:36px;border:2px solid #555;border-radius:4px;background:#2a2e3a;color:#ccc;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pt-tool.active{border-color:var(--cyan);color:#fff;background:#1a3040}
.pt-tool:hover{background:#333}
.pt-pen-label{color:#999;font-size:11px;margin-left:12px}
.pt-pen-size{width:56px;height:26px;border:1px solid #555;border-radius:3px;background:#222;color:#eee;font:12px Consolas,monospace;text-align:center;padding:0 4px}
.pt-canvas-wrap{flex:1;min-height:300px;background:#111;position:relative;overflow:hidden}
.pt-clear-btn{width:100%;height:36px;border:0;background:#3a3a3a;color:#ccc;font:13px "Segoe UI",Arial,sans-serif;cursor:pointer;border-top:1px solid #555}
.pt-clear-btn:hover{background:#555;color:#fff}
.pt-fieldset{margin:0;padding:8px 10px;border:0;border-bottom:1px solid #333}
.pt-fieldset legend{color:var(--cyan);font:600 11px "Segoe UI",Arial,sans-serif;padding:0 4px}
.pt-preview{width:100%;height:180px;background:#000;display:flex;align-items:center;justify-content:center;border:1px solid #333;border-radius:3px;margin-top:4px}
.pt-preview-canvas{width:100%;height:100%;object-fit:contain}
.pt-info{display:flex;gap:10px;padding:2px 0;font:11px "Segoe UI",Arial,sans-serif;color:#bbb}
.pt-info span:first-child{color:var(--cyan);width:70px;flex-shrink:0}
.pt-save-btn{width:100%;height:34px;border:0;border-radius:4px;background:#1e7a4a;color:#fff;font:600 13px "Segoe UI",Arial,sans-serif;cursor:pointer;margin-bottom:6px}
.pt-save-btn:hover{background:#259a5c}
.pt-load-btn{width:100%;height:32px;border:1px solid #555;border-radius:4px;background:#2a2a2a;color:#ccc;font:13px "Segoe UI",Arial,sans-serif;cursor:pointer}
.pt-load-btn:hover{background:#3a3a3a}
.pt-log{margin:0;height:80px;overflow:auto;background:#111;border:1px solid #333;border-radius:3px;padding:4px 6px;color:#48ff9c;font:11px Consolas,monospace;white-space:pre-wrap}