*{box-sizing:border-box}:root{--border: #e2e8f0;--bg: #f1f5f9;--panel: #ffffff;--text: #0f172a;--muted: #64748b;--blue: #2563eb}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.app-header h1{font-size:18px;margin:0}.header-actions{display:flex;align-items:center;gap:10px}.name-input{padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px}.status{font-size:13px;color:var(--muted)}.code-badge{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;letter-spacing:.06em;background:#ecfdf5;border-color:#a7f3d0;color:#047857}.code-badge strong{color:#065f46}.toolbar{display:flex;flex-wrap:wrap;gap:18px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);align-items:center}.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-group label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.toolbar input[type=number]{width:64px;padding:5px 6px;border:1px solid var(--border);border-radius:6px}.toolbar select{padding:5px 6px;border:1px solid var(--border);border-radius:6px}.layout{display:grid;grid-template-columns:240px 1fr 280px;flex:1;min-height:0}.sidebar{background:var(--panel);overflow-y:auto;padding:14px}.sidebar.left{border-right:1px solid var(--border)}.sidebar.right{border-left:1px solid var(--border);display:flex;flex-direction:column;gap:16px}.stage{display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:32px}.canvas-wrap{display:inline-block}.canvas-meta{font-size:12px;color:var(--muted);margin-bottom:8px;text-align:center}.canvas{position:relative;box-shadow:0 4px 24px #0f172a1f;border:1px solid var(--border);background-image:linear-gradient(45deg,#fafafa 25%,transparent 25%),linear-gradient(-45deg,#fafafa 25%,transparent 25%);background-size:16px 16px}button{cursor:pointer;font-size:13px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:#fff}button:hover{background:#f8fafc}button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}button.primary:disabled{opacity:.6;cursor:default}.panel button.primary{width:100%}button.zpl-btn{width:100%;margin-top:8px;background:#0f172a;color:#fff;border-color:#0f172a}button.zpl-btn:disabled{opacity:.6;cursor:default}button.chip{padding:4px 8px;font-size:12px;background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}button.danger{color:#b91c1c;border-color:#fecaca;background:#fef2f2;width:100%;margin-top:12px}.panel{margin-bottom:4px}.panel h3{margin:0 0 12px;font-size:14px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.hint{font-size:12px;color:var(--muted)}.field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.field>span{font-size:12px;color:var(--muted);min-width:64px}.field input[type=text],.field select{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:6px;min-width:0}.field input[type=color]{width:40px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px}.dims{font-size:12px;color:var(--text);text-align:right}.toggle-row{display:flex;gap:6px}.toggle{width:32px;font-weight:700}.toggle.on{background:var(--blue);color:#fff;border-color:var(--blue)}.template-list{list-style:none;margin:0;padding:0}.template-list li{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:6px;margin-bottom:6px;overflow:hidden}.template-list li.active{border-color:var(--blue)}.template-list .link{flex:1;display:flex;flex-direction:column;align-items:flex-start;border:none;border-radius:0;background:transparent;text-align:left;padding:8px 10px}.template-list .link small{color:var(--muted);font-size:11px}.template-list .x{border:none;background:transparent;color:var(--muted);font-size:18px;padding:0 10px;align-self:stretch}.template-list .x:hover{color:#b91c1c;background:#fef2f2}