*{box-sizing:border-box;margin:0;padding:0}body{height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#root,.app{flex-direction:column;height:100vh;display:flex}.app-header{color:#fff;background:#1a1a2e;flex-shrink:0;align-items:center;gap:12px;padding:8px 16px;display:flex}.app-header h1{color:#fff;margin:0;font-size:18px;font-weight:600}.app-header .subtitle{color:#fff9;font-size:13px}.app-body{flex:1;display:flex;overflow:hidden}.toolbar{background:#f8f9fa;border-right:1px solid #e0e0e0;flex-direction:column;flex-shrink:0;gap:16px;width:180px;padding:12px;display:flex;overflow-y:auto}.toolbar-section h3{text-transform:uppercase;color:#999;letter-spacing:.5px;margin-bottom:8px;font-size:11px}.tool-buttons{flex-direction:column;gap:4px;display:flex}.draw-mode-select{color:#555;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:4px;width:100%;margin-top:2px;padding:4px 6px;font-size:11px}.draw-mode-select:focus{border-color:#1a1a2e;outline:none}.tool-btn{cursor:pointer;color:#555;text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:8px;padding:8px 10px;font-size:13px;transition:all .15s;display:flex}.tool-btn:hover{background:#e8e8e8}.tool-btn.active{color:#fff;background:#1a1a2e;border-color:#1a1a2e}.tool-icon{text-align:center;width:20px;font-size:16px}.action-btn{cursor:pointer;color:#555;background:#fff;border:1px solid #ddd;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;transition:all .15s;display:flex}.action-btn:hover{background:#f0f0f0;border-color:#ccc}.action-btn.danger{color:#e53935;border-color:#ffcdd2}.action-btn.danger:hover{background:#ffebee}.undo-redo-row{gap:4px;display:flex}.action-btn.undo-redo{flex:1;justify-content:center;padding:6px 4px;font-size:11px}.action-btn:disabled{opacity:.35;cursor:not-allowed}.action-btn.view-toggle{justify-content:center;width:100%;font-weight:600}.action-btn.view-toggle.active-3d{color:#fff;background:#1a1a2e;border-color:#1a1a2e}.action-btn.view-toggle.active-3d:hover{background:#2a2a4e}.toolbar-section.help{margin-top:auto}.toolbar-section.help ul{color:#888;font-size:11px;line-height:1.6;list-style:none}.properties-panel{background:#f8f9fa;border-left:1px solid #e0e0e0;flex-shrink:0;width:200px;padding:16px;font-size:13px}.properties-panel h4{color:#333;border-bottom:1px solid #e0e0e0;margin-bottom:12px;padding-bottom:8px;font-size:13px}.properties-panel p{color:#666;margin-bottom:6px}.properties-panel .hint{color:#aaa;text-align:center;margin-top:20px;font-size:12px}.properties-panel label{color:#666;flex-direction:column;gap:4px;margin-bottom:12px;display:flex}.properties-panel input[type=text]{border:1px solid #ddd;border-radius:4px;padding:6px 8px;font-size:13px}.properties-panel input[type=text]:focus{border-color:#1a1a2e;outline:none}.properties-panel select{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:4px;padding:5px 8px;font-size:12px}.properties-panel select:focus{border-color:#1a1a2e;outline:none}.color-swatches{flex-wrap:wrap;gap:4px;display:flex}.color-swatch{cursor:pointer;border:2px solid #0000;border-radius:4px;width:22px;height:22px;padding:0}.color-swatch:hover{border-color:#999}.color-swatch.active{border-color:#1a1a2e;box-shadow:inset 0 0 0 1px #fff}.stats{border-top:1px solid #e0e0e0;margin-top:20px;padding-top:12px}.stats h4{border-bottom:none;padding-bottom:0}.inline-form-backdrop{z-index:10;position:absolute;inset:0}.inline-form{z-index:11;background:#fff;border:1px solid #d0d0d0;border-radius:8px;min-width:180px;padding:12px;position:absolute;transform:translate(-50%,8px);box-shadow:0 4px 16px #00000026}.inline-form-title{color:#333;border-bottom:1px solid #eee;margin-bottom:10px;padding-bottom:6px;font-size:12px;font-weight:600}.inline-form label{color:#666;flex-direction:column;gap:3px;margin-bottom:8px;font-size:11px;display:flex}.inline-form input{border:1px solid #ddd;border-radius:4px;outline:none;padding:5px 8px;font-size:13px}.inline-form input:focus{border-color:#1a1a2e}.inline-form-actions{gap:6px;margin-top:10px;display:flex}.inline-form-btn{cursor:pointer;color:#555;background:#fff;border:1px solid #ddd;border-radius:4px;flex:1;padding:5px 10px;font-size:12px}.inline-form-btn:hover{background:#f5f5f5}.inline-form-btn.primary{color:#fff;background:#1a1a2e;border-color:#1a1a2e}.inline-form-btn.primary:hover{background:#2a2a4e}
