.mockup-overlay{pointer-events:none;z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mockup-toggle{background:linear-gradient(90deg,#b0b0b0,#fff,#888);border-radius:3px;width:14px;height:28px;position:relative;top:-6px;box-shadow:0 4px 6px #0009,inset 0 1px 2px #ffffffe6,0 -10px 0 -4px #444,0 -12px 0 -2px #888}.mockup-knob{background:radial-gradient(circle at 30% 30%,#666,#222);border:1px solid #111;border-radius:50%;width:24px;height:24px;position:relative;box-shadow:0 4px 6px #000c,inset 0 0 5px #000}.mockup-knob:after{content:"";background:#eee;border-radius:1px;width:2px;height:8px;position:absolute;top:2px;left:50%;transform:translate(-50%)}.mockup-pushbutton{background:radial-gradient(circle at 30% 30%,#ef4444,#991b1b);border:2px solid #333;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 4px #00000080,inset 0 2px 4px #fff6}.mockup-gear{background:radial-gradient(circle at 40% 40%,#fff9,#0000),#c8c8c8e6;border-radius:50%;width:24px;height:24px;position:relative;box-shadow:0 5px 10px #0009,inset 0 -2px 5px #00000080}.mockup-gear:after{content:"";z-index:-1;background:linear-gradient(90deg,#666,#aaa,#444);width:4px;height:12px;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.mockup-screw{background:radial-gradient(circle at 30% 30%,#ccc,#666);border-radius:50%;width:8px;height:8px;position:relative;box-shadow:0 1px 2px #000c,inset 0 0 1px #000}.mockup-screw:after{content:"";background:#333;height:1px;position:absolute;top:50%;left:15%;right:15%;transform:translateY(-50%)rotate(45deg);box-shadow:0 1px #ffffff80}:root{--bg-color:#0f172a;--panel-bg:#030000;--sidebar-bg:#1e293b;--text-main:#f8fafc;--text-muted:#94a3b8;--accent:#3b82f6;--accent-hover:#2563eb;--border-color:#334155}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}.app-container{width:100vw;height:100vh;display:flex}.sidebar{background-color:var(--sidebar-bg);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;gap:1.5rem;width:320px;padding:1.5rem;display:flex;overflow-y:auto;box-shadow:2px 0 10px #00000080}.sidebar h2{color:var(--text-main);margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.section{border-bottom:1px solid var(--border-color);flex-direction:column;gap:.75rem;padding-bottom:1.5rem;display:flex}.section h3{text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;font-size:.875rem;font-weight:500}.input-group{align-items:center;gap:.5rem;display:flex}.input-group label{min-width:80px;font-size:.875rem}input[type=number],input[type=text]{background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-main);border-radius:4px;width:100%;padding:.5rem;font-family:inherit;font-size:.875rem}input[type=color]{cursor:pointer;background:0 0;border:none;width:36px;height:36px}.checkbox-label{cursor:pointer;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.button-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}button{background-color:var(--bg-color);color:var(--text-main);border:1px solid var(--border-color);cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;font-size:.75rem;transition:all .2s;display:flex}button:hover{background-color:var(--border-color)}.primary-button{background-color:var(--accent);color:#fff;border:none;flex-direction:row;justify-content:center;padding:.75rem;font-size:.875rem;font-weight:500}.primary-button:hover{background-color:var(--accent-hover)}.secondary-button{color:var(--text-main);border:1px solid var(--border-color);background-color:#0000;flex-direction:row;justify-content:center;padding:.75rem;font-size:.875rem;font-weight:500}.danger-button{color:#f87171;background-color:#ef44441a;border:1px solid #ef444433;flex-direction:row;justify-content:center;padding:.75rem}.danger-button:hover{background-color:#ef444433}.print-controls{background:var(--sidebar-bg);text-align:center;z-index:50;border-radius:8px;flex-direction:column;gap:1rem;padding:1rem 2rem;display:flex;position:absolute;top:2rem;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000080}.canvas-container{background-color:var(--bg-color);background-image:radial-gradient(var(--border-color) 1px, transparent 1px);touch-action:none;background-size:20px 20px;flex:1;justify-content:center;align-items:center;padding:2rem;display:flex;overflow:auto}.canvas{background-color:var(--panel-bg);border:1px solid var(--border-color);position:relative;overflow:hidden;box-shadow:0 10px 40px #00000080}.element{cursor:grab;-webkit-user-select:none;user-select:none;position:absolute;transform:translate(-50%,-50%)}.element:active{cursor:grabbing}.element.selected:after{content:"";border:2px dashed var(--accent);pointer-events:none;position:absolute;inset:-4px}.text-element{white-space:nowrap;font-weight:600}.hole-element{border-radius:50%;justify-content:center;align-items:center;display:flex}.crosshair{width:100%;height:100%;position:relative}.ch-v{width:1px;position:absolute;top:10%;bottom:10%;left:50%;transform:translate(-50%)}.ch-h{height:1px;position:absolute;top:50%;left:10%;right:10%;transform:translateY(-50%)}.rect-element{background:0 0;border-style:solid}.context-menu{background:var(--sidebar-bg);border:1px solid var(--border-color);z-index:1000;border-radius:6px;flex-direction:column;min-width:180px;padding:4px;display:flex;position:absolute;box-shadow:0 4px 12px #00000080}.context-menu button{color:var(--text-main);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:.85rem;display:flex}.context-menu button:hover{background:var(--border-color)}.context-menu .submenu{border:1px solid var(--border-color);background:#0003;border-radius:6px;flex-direction:column;min-width:160px;margin-top:4px;padding:4px;display:flex;position:relative;box-shadow:inset 0 2px 4px #00000080}@media print{@page{size:A4;margin:0}body{background:0 0;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.sidebar,.print-controls,.no-print{display:none!important}.canvas-container{background:0 0;margin:0;padding:0;display:block}.a4-page{page-break-after:always;justify-content:center;align-items:center;width:210mm;height:297mm;display:flex;position:relative;overflow:hidden}.canvas{box-shadow:none;background-color:#030000;background-color:device-cmyk(1 1 1 1);border:none;margin:0;position:relative}}.resize-handle{border:1px solid var(--accent);z-index:100;background-color:#fff;border-radius:50%;width:8px;height:8px;position:absolute;box-shadow:0 0 2px #00000080}.resize-handle.nw{cursor:nwse-resize;top:-4px;left:-4px}.resize-handle.ne{cursor:nesw-resize;top:-4px;right:-4px}.resize-handle.sw{cursor:nesw-resize;bottom:-4px;left:-4px}.resize-handle.se{cursor:nwse-resize;bottom:-4px;right:-4px}.resize-handle.n{cursor:ns-resize;top:-4px;left:50%;transform:translate(-50%)}.resize-handle.s{cursor:ns-resize;bottom:-4px;left:50%;transform:translate(-50%)}.resize-handle.e{cursor:ew-resize;top:50%;right:-4px;transform:translateY(-50%)}.resize-handle.w{cursor:ew-resize;top:50%;left:-4px;transform:translateY(-50%)}.canvas.show-grid{background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px)}@media (width<=768px){.app-container{position:relative}.sidebar{z-index:1000;width:300px;box-shadow:none;transition:transform .3s;position:absolute;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:4px 0 20px #000c}.canvas-container{padding:4rem 1rem 1rem}}.mobile-menu-btn{z-index:100;background-color:var(--sidebar-bg);color:var(--text-main);border:1px solid var(--border-color);cursor:pointer;border-radius:8px;padding:.75rem;display:none;position:absolute;top:1rem;left:1rem;box-shadow:0 4px 10px #00000080}@media (width<=768px){.mobile-menu-btn{justify-content:center;align-items:center;display:flex}}.zoom-controls{z-index:90;flex-direction:column;gap:.5rem;display:flex;position:absolute;bottom:2rem;right:2rem}.zoom-controls button{background-color:var(--sidebar-bg);border:1px solid var(--border-color);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex;box-shadow:0 4px 10px #00000080}.zoom-controls button:hover{background-color:var(--border-color)}.mobile-only{display:none!important}@media (width<=768px){.mobile-only{display:flex!important}}