* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Arial, sans-serif; color: #0f172a; background: #f8fafc; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #111827; color: #f9fafb; }
.topbar .brand { font-weight: 700; letter-spacing: .5px; }
.topbar .actions { display: flex; gap: 8px; align-items: center; }
.btn { background: #2563eb; color: white; border: none; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.btn:hover { opacity: .9; }
.btn-secondary { background: #334155; color: #e2e8f0; }
.btn-accent { background: #16a34a; }

.wrap { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: calc(100vh - 58px); }
.sidebar { background: #ffffff; border-right: 1px solid #e5e7eb; padding: 12px; overflow-y: auto; }
.stage { background: #f1f5f9; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tab { padding: 8px 10px; border-radius: 10px; background: #e5e7eb; border: none; cursor: pointer; font-weight: 600; }
.tab.active { background: #dbeafe; color: #1e3a8a; }
.panel { display: block; }
.panel.hidden { display: none; }

.group { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fafafa; }
.group-title { font-weight: 700; margin-bottom: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input[type='number'], input[type='text'], select { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; }

.canvas-wrap { position: relative; display: inline-block; border: 1px dashed #cbd5e1; border-radius: 12px; overflow: hidden; background: white; }
#c, #animCanvas { display: block; }
#animCanvas { position: absolute; inset: 0; pointer-events: none; }

.help { font-size: 12px; color: #475569; }