*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--color-primary: #4a9eff;--color-bg-main: #1a1a2e;--color-bg-sidebar-start: #1a1a2e;--color-bg-sidebar-end: #16213e;--color-border: #2a2a4a;--color-overlay-bg: rgba(0, 0, 0, .7)}.app-layout{height:100vh;width:100vw}.app-sider{background:linear-gradient(180deg,var(--color-bg-sidebar-start) 0%,var(--color-bg-sidebar-end) 100%)!important;border-right:1px solid var(--color-border);overflow:hidden}.sider-content{display:flex;flex-direction:column;height:100%;padding:16px}.sider-header{text-align:center;padding-bottom:8px}.sider-section{padding:8px 0}.sider-footer{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-border)}.app-content{position:relative;background:var(--color-bg-main);overflow:hidden}.help-overlay{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:var(--color-overlay-bg);padding:8px 16px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}.app-content canvas{cursor:default}.app-content.placing canvas,.app-content.placing canvas:active,.app-content.wiring canvas,.app-content.wiring canvas:active{cursor:crosshair}.app-content.placing.placing-invalid canvas,.app-content.placing.placing-invalid canvas:active{cursor:not-allowed}.app-content.dragging canvas{cursor:grabbing}.app-content.dragging.dragging-invalid canvas{cursor:not-allowed}.gate-selector-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:8px}.gate-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border-radius:8px;background:#ffffff0d;border:1px solid var(--color-border);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.gate-icon:hover{background:#4a9eff1a;border-color:var(--color-primary);transform:translateY(-1px)}.gate-icon:active{transform:translateY(0)}.gate-icon.active{background:#4a9eff33;border-color:var(--color-primary);box-shadow:0 0 12px #4a9eff4d}.gate-icon-label{margin-top:6px;font-size:11px;font-weight:500;color:#ffffffa6;text-transform:uppercase;letter-spacing:.5px}.gate-icon.active .gate-icon-label{color:var(--color-primary)}.placement-hint{display:block;margin-top:8px;text-align:center}