:root{--ink:#192f31;--muted:#78858b;--teal:#007b70;--line:#e1e6e8;--bg:#f1f4f5;--font:Arial,'Malgun Gothic','Apple SD Gothic Neo',sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:14px var(--font)}button,input,select,textarea{font:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;background:transparent;color:inherit;border-radius:6px;padding:8px 10px;cursor:pointer;white-space:nowrap}button:hover{background:#e9f2f0}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #08a593;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}svg.lucide{width:17px;height:17px;stroke-width:1.7;flex-shrink:0}input,select,textarea{border:1px solid #d8e0e1;border-radius:5px;padding:8px 9px;color:var(--ink);background:white;min-width:0;width:100%}input[type=color]{height:35px;padding:4px}input[type=checkbox]{width:auto;accent-color:var(--teal)}header{height:76px;background:#102c2e;color:white;display:flex;align-items:center;gap:34px;padding:0 24px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:white;font-size:21px;font-weight:bold;letter-spacing:1px;flex-shrink:0}.brandmark{width:34px;height:37px;font-size:31px;position:relative;line-height:34px;color:#65dac3}.brandmark span{font-size:16px;position:absolute;right:0;top:-5px}.brandlight{font-weight:normal}.brand small{display:block;font-size:10px;font-weight:normal;letter-spacing:2.8px;color:#8eb1af;margin-top:3px}.project{display:flex;align-items:center;gap:13px;flex:1}.project input{background:transparent;color:white;border:none;width:190px;padding:5px;font-weight:600;font-size:15px}.project span{font-size:12px;color:#92b9b3}.header-actions{display:flex;align-items:center;gap:8px}header button{border-color:#375154;color:#e6f2ef}header button:hover{background:#28494a}.primary,header .primary{background:var(--teal);border-color:var(--teal);color:white}.primary:hover,header .primary:hover{background:#006a60}.status{color:#9bccc1;font-size:12px;margin-right:8px}.toolbar{min-height:52px;padding:6px 18px;background:white;display:flex;gap:10px;border-bottom:1px solid var(--line)}.toolgroup{display:flex;align-items:center;padding-right:12px;border-right:1px solid var(--line);gap:3px}.toolbar button{padding:7px 9px}.toolbar-end{margin-left:auto;display:flex;gap:4px}.switch{display:flex;gap:5px;align-items:center;margin:0 7px;color:#647276;font-size:13px}main{display:grid;grid-template-columns:218px minmax(350px,1fr) 278px;min-height:570px;height:calc(100vh - 349px)}.left,.right{background:white;overflow-y:auto}.left{border-right:1px solid var(--line);display:flex;flex-direction:column}.panel-heading{padding:23px 20px 14px;font-weight:bold}.insert-grid{display:grid;grid-template-columns:1fr 1fr;padding:0 14px;gap:6px}.insert-grid button{flex-direction:column;gap:8px;padding:14px 0;background:#f7f9f9;border:1px solid #edf1f1;font-size:13px}.insert-grid button:hover{background:#e8f4f0;border-color:#9ccfc4}.insert-grid svg{width:22px;height:22px;color:#426466}.templates-heading{display:flex;justify-content:space-between;margin-top:7px}.templates-heading span{font-size:11px;color:var(--muted);font-weight:normal}#templates{padding:0 14px;display:flex;flex-direction:column;gap:8px}.template-card{border:1px solid var(--line);padding:10px;display:flex;gap:10px;justify-content:flex-start;width:100%;text-align:left}.template-thumb{width:48px;height:35px;border:1px solid #ccd9d6;background:#fff;color:#14695d;display:flex;align-items:center;justify-content:center}.template-card strong{font-size:13px}.template-card small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.left-bottom{margin-top:auto;padding:22px 17px;display:flex;gap:9px;font-size:11px;color:#657a7b}.left-bottom svg{color:var(--teal)}.left-bottom small{display:block;font-size:10px;margin-top:4px}.workspace{min-width:0;display:flex;flex-direction:column}.work-heading{padding:23px 28px 18px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.6px;color:#8a969b;font-weight:bold}h1{font-size:19px;margin:6px 0 0;font-weight:600}.dimensions{display:flex;align-items:center;gap:10px;color:#738186;font-size:13px}.pill{border:1px solid #d8e4e2;border-radius:4px;padding:5px 7px;color:#58877b;background:#eaf2ef;font-size:11px}.stage{position:relative;overflow:auto;flex:1;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(#d7dfe1 .7px,transparent .7px);background-size:14px 14px;margin:0 18px;border:1px solid #e3e8e9;border-radius:7px;background-color:#eaf0f1;min-height:300px;padding:48px}#boardWrap{position:relative;flex-shrink:0;margin:24px}#board{display:block;background:white;box-shadow:0 6px 26px #1e3c4020;touch-action:none;outline:none;overflow:visible}.ruler{position:absolute;font-size:9px;color:#8a999d}.ruler.top{left:0;top:-27px;height:22px;width:100%;border-bottom:1px solid #b8c9cd}.ruler.left-ruler{top:0;left:-29px;width:23px;height:100%;border-right:1px solid #b8c9cd}.ruler span{position:absolute}.ruler.top span:before{content:'';display:block;height:5px;border-left:1px solid #a7bdc1;position:absolute;bottom:-10px}.left-ruler span{transform:translateY(-50%)}.canvas-hint{position:absolute;bottom:15px;left:0;text-align:center;width:100%;font-size:11px;color:#8b999e;pointer-events:none}.canvas-footer{display:flex;justify-content:space-between;padding:13px 24px;align-items:center;font-size:12px;color:#708186;min-height:50px}.zoom-controls{display:flex;gap:5px;align-items:center}.zoom-controls input{width:80px;border:none;padding:0;accent-color:var(--teal)}.zoom-controls button{padding:5px}.zoom-controls span{min-width:37px}.right{border-left:1px solid var(--line)}.panel-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 12px}.panel-tabs button{border-radius:0;flex:1;padding:16px 0;color:#7a898d}.panel-tabs button.active{border-bottom:2px solid var(--teal);color:var(--teal);font-weight:bold}.properties{padding:0 19px 18px}.properties label{display:block;color:#708084;font-size:12px;margin:10px 0}.properties label input,.properties label select,.properties label textarea{display:block;margin-top:6px;font-size:13px}.section-title{font-size:13px;font-weight:600;margin:22px 0 12px;display:flex;justify-content:space-between}.section-title span{color:#98a5a7;font-weight:normal;font-size:11px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{width:100%;border:1px solid var(--line);font-size:12px;margin-top:10px}.layers-heading{display:flex;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--line);font-size:13px;font-weight:600}.layers-heading span:last-child{color:#9aa6a7;font-size:12px}#layers{padding:0 12px 18px}.layer{padding:8px;border-radius:5px;display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}.layer.active{background:#e5f3ed;color:var(--teal)}.layer span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer button{padding:3px}.layer svg{width:14px}.data-dock{background:white;border-top:1px solid var(--line);height:188px;overflow:hidden}.dock-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 18px;min-height:46px}.dock-head>div{display:flex;gap:5px;align-items:center}.dock-tabs button{border-radius:0;padding:13px 14px;color:#7c8b90}.dock-tabs button.active{border-bottom:2px solid var(--teal);color:var(--teal);font-weight:600}.dock-tabs button span{background:#edf3f1;color:#6d8b82;padding:1px 5px;font-size:11px;border-radius:3px}.dock-head button{font-size:12px}.data-table{height:111px;overflow:auto;padding:0 25px}.data-table table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.data-table td,.data-table th{padding:7px 12px;border-bottom:1px solid #edf1f2;white-space:nowrap}.data-table th{color:#7d8e93;font-weight:normal;background:#f7f9f9;position:sticky;top:0}.data-table tr.selected{background:#eaf5f1}.data-table tr{cursor:pointer}.data-table .empty{padding:32px;color:#8c9a9e;text-align:center}.data-note{padding:7px 26px;color:#8d999e;font-size:11px}.serial-fields{display:flex;gap:15px;padding:16px 28px;align-items:flex-end}.serial-fields label{max-width:170px;font-size:12px;color:#73898d}.serial-fields input{margin-top:5px}#serialPanel p{font-size:12px;color:#7b8f94;padding:0 28px;margin:0}.statusbar{height:33px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:#e8edef;color:#87979b;font-size:10px;letter-spacing:.2px}.statusbar b{font-weight:normal;margin-left:5px}.separator{padding:0 12px}#toast{position:fixed;bottom:42px;left:50%;transform:translateX(-50%) translateY(30px);background:#102f30;color:white;padding:13px 22px;border-radius:7px;box-shadow:0 5px 25px #0003;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;z-index:9;font-size:14px}#toast.show{opacity:1;transform:translateX(-50%)}dialog{border:0;border-radius:12px;max-width:720px;width:calc(100% - 40px);padding:0;color:var(--ink);box-shadow:0 15px 80px #0004}dialog::backdrop{background:#15343966;backdrop-filter:blur(3px)}.modal-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 24px}.modal-head h2{font-size:19px;margin:0}.modal-head button{padding:6px}#modalBody{padding:22px 24px;max-height:75vh;overflow:auto}#modalBody p{line-height:1.8;color:#687c80}#modalBody label{display:block;margin:13px 0;color:#62797c;font-size:13px}#modalBody label input,#modalBody label select{margin-top:6px}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}.modal-actions button{border:1px solid var(--line)}.note{padding:12px;background:#edf6f2;border-radius:6px;font-size:13px;line-height:1.7;color:#557d72}.preview-sheet{display:flex;flex-wrap:wrap;gap:12px;background:#f0f4f5;padding:18px;max-height:350px;overflow:auto;margin:18px 0}.preview-label{background:white;box-shadow:0 1px 8px #0001;width:210px}.help-list{line-height:1.9;padding-left:22px;color:#647b7e}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.btn-row button,.btn-row a{border:1px solid var(--line);border-radius:5px;padding:10px 14px;text-decoration:none;color:var(--ink);font-size:14px}.check-item{padding:10px;border-bottom:1px solid var(--line);line-height:1.6}.check-item.error{color:#b34930}.check-item.ok{color:var(--teal)}.saved-project{display:flex;justify-content:space-between;align-items:center;padding:13px;border:1px solid var(--line);margin-bottom:10px;border-radius:6px}.saved-project small{display:block;color:var(--muted);margin-top:4px}a{color:var(--teal)}[hidden]{display:none!important}@media(min-width:1550px){main{grid-template-columns:238px minmax(350px,1fr) 300px}.insert-grid button{padding:19px 0}.properties{padding-left:23px;padding-right:23px}}@media(max-width:1150px){header{gap:18px;padding:0 16px}.project span{display:none}.header-actions button span{display:none}main{grid-template-columns:175px minmax(300px,1fr) 248px}.left-bottom{display:none}.work-heading{padding:18px}.dimensions .pill{display:none}.toolbar{gap:5px;padding:5px}.toolbar button{font-size:12px;padding:6px}.toolgroup{padding-right:5px;gap:0}.switch{margin:0 3px}.canvas-footer{padding:12px;font-size:11px}.canvas-hint{font-size:10px}.dock-head{padding:0 8px}.project input{width:150px}.brand{font-size:18px}.header-actions{gap:4px}}@media(max-width:800px){header{height:auto;min-height:68px;flex-wrap:wrap;padding:12px;gap:10px}.project{flex:1}.header-actions{width:100%;justify-content:flex-end}.header-actions button span{display:inline}.toolbar{overflow-x:auto;flex-wrap:nowrap}.toolgroup{flex-shrink:0}.toolbar-end{flex-shrink:0}main{height:auto;min-height:0;grid-template-columns:80px minmax(0,1fr)}.left{grid-column:1;grid-row:1}.left .panel-heading,.left #templates,.templates-heading{display:none}.insert-grid{grid-template-columns:1fr;padding:8px;gap:5px}.insert-grid button{font-size:10px;padding:12px 0}.workspace{grid-column:2;grid-row:1;height:510px}.work-heading{display:block}.dimensions{margin-top:10px}.stage{padding:20px;margin:0 10px;min-height:290px}.canvas-hint{display:none}.canvas-footer{flex-direction:column;gap:8px}.right{grid-column:1/-1;max-height:400px;border-top:1px solid var(--line)}.properties{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.section-title{grid-column:1/-1}.data-dock{height:220px}.dock-head{flex-wrap:wrap}.dock-head>div{flex-wrap:wrap}.dock-head button{font-size:11px}.data-table{height:100px}.data-note{font-size:10px}.serial-fields{flex-wrap:wrap;padding:12px;gap:8px}.serial-fields label{max-width:100px}.statusbar span:first-child{display:none}.statusbar{padding:0 10px}#serialPanel p{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}