@font-face{font-family:'Vazirmatn';src:url('https://cdn.jsdelivr.net/npm/vazirmatn@33.0.3/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('https://cdn.jsdelivr.net/npm/vazirmatn@33.0.3/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--bg:#f5f5f5;--surface:#fff;--text:#222;--muted:#666;--primary:#2e7d32;--grid-size:24px;--canvas-width:1600px;--canvas-height:1200px}
*{box-sizing:border-box;font-family:"Vazirmatn",sans-serif}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
.app{display:flex;flex-direction:column;height:100vh}
.topbar{height:56px;background:var(--surface);display:flex;align-items:center;padding:0 12px;gap:8px;border-bottom:1px solid #e6e6e6}
.btn{background:var(--primary);color:#fff;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.main{display:flex;flex:1;overflow:hidden}
.sidebar{width:320px;background:var(--surface);border-left:1px solid #eee;padding:12px;display:flex;flex-direction:column}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.component-item{background:#fafafa;border:1px solid #eee;padding:8px;border-radius:8px;cursor:grab;display:flex;align-items:center;justify-content:center;font-size:13px}
.canvas-outer{flex:1;position:relative;overflow:hidden;background:linear-gradient(90deg,#fff,#fff)}
.viewport{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-start}
#canvas-wrap{position:relative;width:100%;height:100%}
#canvas{position:relative;transform-origin:0 0;will-change:transform}
.grid-line{position:absolute;inset:0;background-size:var(--grid-size) var(--grid-size);background-image:linear-gradient(to right,#e9e9e9 1px,transparent 1px),linear-gradient(to bottom,#e9e9e9 1px,transparent 1px)}
.component-el{position:absolute;width:80px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.06);background:#fff;border:2px solid #ddd;touch-action:none;z-index:3;pointer-events:auto;font-size:12px}
.component-el.selected{outline:3px solid rgba(33,150,243,0.18)}
.wire-layer{position:absolute;left:0;top:0;pointer-events:none;z-index:2}
.toolbar{display:flex;gap:8px;margin-left:auto}
.coords{font-size:13px;color:var(--muted);margin-left:12px}
.drop-highlight{position:absolute;width:48px;height:48px;border-radius:6px;transform:translate(-50%,-50%);pointer-events:none}
.node{position:absolute;width:12px;height:12px;border-radius:50%;background:#4caf50;transform:translate(-50%,-50%);pointer-events:auto;z-index:6;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.context-menu{position:fixed;display:none;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,0.12);border-radius:8px;z-index:999;padding:6px;font-size:14px}
.context-menu button{display:block;width:100%;padding:6px 10px;border:none;background:transparent;text-align:left}
.hidden{display:none}
.sidebar .spacer{flex:1}
.help{font-size:13px;color:var(--muted);margin-top:8px}
.test-results{position:fixed;left:12px;bottom:12px;background:rgba(0,0,0,0.8);color:#fff;padding:8px 12px;border-radius:8px;font-size:13px}
footer{width:100%;text-align:center;padding:6px 0;background:var(--surface);font-size:13px;color:var(--muted);border-top:1px solid #e6e6e6}