:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1f2933;background-color:#f6f8fb}*{box-sizing:border-box}body{margin:0}#app{height:100vh}.app-shell{display:grid;grid-template-rows:56px 1fr;grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(280px,340px);grid-template-areas:"toolbar toolbar toolbar" "sidebar canvas inspector";height:100%}.app-shell.is-narrow{grid-template-columns:1fr;grid-template-areas:"toolbar" "canvas" "sidebar";grid-template-rows:56px auto 1fr}.toolbar{grid-area:toolbar;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#111827;color:#f9fafb;flex-wrap:wrap}.auto-layout-controls{display:flex;gap:6px;align-items:center}.sidebar{grid-area:sidebar;background:#fff;border-right:1px solid #e5e7eb;padding:12px;overflow:hidden;display:flex;flex-direction:column}.sidebar-scroll{overflow-y:auto;padding-right:6px;flex:1}.component-list{display:grid;gap:8px}.sidebar-actions{background:#fff;padding-bottom:8px;border-bottom:1px solid #e5e7eb}.sidebar-actions-row{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}.canvas-area{grid-area:canvas;background:#f3f4f6;display:flex;flex-direction:column}.canvas-wrapper{flex:1;border:1px solid #e5e7eb;background:#fff;margin:12px;position:relative}.inspector{grid-area:inspector;background:#fff;border-left:1px solid #e5e7eb;padding:12px;overflow:auto;position:relative;flex:0 0 320px;min-width:280px}.inspector.inspector-hidden{display:none}.inspector-drawer{position:fixed;top:56px;right:0;bottom:0;width:min(360px,90vw);min-width:280px;max-height:none;box-shadow:-6px 0 20px #00000026;transform:translate(100%);transition:transform .25s ease;z-index:30}.inspector-drawer.open{transform:translate(0)}.inspector-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.inspector-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:20}.section-title{font-weight:600;margin:12px 0 6px}.button{background:#10b981;border:none;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer}.button.secondary{background:#374151}.button.danger{background:#ef4444}.button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:14px}label{font-size:13px;display:block;color:#374151;margin-top:10px}.list-item{padding:8px;border:1px solid #e5e7eb;border-radius:6px;margin-bottom:8px;cursor:pointer;background:#f9fafb}.list-item.selected{border-color:#2563eb;background:#e0ecff}.badge{display:inline-block;padding:2px 6px;border-radius:4px;background:#e5e7eb;font-size:12px;margin-left:6px}.canvas-stats{display:flex;gap:12px;padding:6px 12px;background:#111827;color:#e5e7eb;font-size:13px}.overlay-warning{position:absolute;top:8px;right:8px;background:#ef4444e6;color:#fff;padding:6px 10px;border-radius:6px;font-size:13px}.guide-line{stroke:#6366f1;stroke-width:1;dash:[4,4]}.zoom-controls{display:flex;gap:6px;align-items:center}.margin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.margin-grid label{margin-top:0}.rotation-row{margin-top:10px;display:flex;gap:6px;flex-direction:column}.rotation-label{font-weight:600;color:#111827}.rotation-controls{display:grid;grid-template-columns:repeat(3,auto);align-items:center;gap:8px}.rotation-value{padding:6px 12px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;min-width:52px;text-align:center;font-weight:600}.warning-list{color:#b45309;margin-top:6px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:40}.modal{background:#fff;padding:16px;border-radius:8px;width:560px;max-width:calc(100% - 48px);box-shadow:0 10px 40px #00000040;color:#111827}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.modal ul{padding-left:20px;margin:0;display:grid;gap:6px}.color-row{display:flex;gap:8px;align-items:center}.alpha-controls{display:grid;grid-template-columns:1fr 80px;gap:8px;align-items:center}.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.shortcut-group h4{margin:6px 0}.shortcut-table{display:grid;gap:10px}.shortcut-row{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center}.shortcut-keys{display:grid;grid-auto-flow:column;gap:6px;align-items:center;justify-content:start;grid-auto-columns:max-content}.shortcut-desc{color:#374151;word-break:break-word}.shortcut-keys kbd{background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;padding:2px 6px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;box-shadow:inset 0 -1px #00000014}.shortcut-plus,.shortcut-separator{margin:0 4px;color:#6b7280}.shortcut-note{margin:4px 0 12px;font-size:13px;color:#4b5563}@media (max-width: 1100px){.app-shell{grid-template-columns:1fr;grid-template-areas:"toolbar" "canvas" "sidebar";grid-template-rows:56px auto 1fr;row-gap:8px}.sidebar{border-right:none;border-top:1px solid #e5e7eb;min-height:0}.canvas-wrapper{margin:8px}.canvas-stats{flex-wrap:wrap}.shortcut-grid{grid-template-columns:1fr}}