:root{--bg: #1a1a2e;--panel: #16213e;--panel-light: #1c2a4a;--accent: #0f3460;--highlight: #e94560;--green-field: #2d8a4e;--text: #eee;--text-dim: #999;--border: #2a3a5e}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh}.app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;background:var(--panel);border-bottom:1px solid var(--border);padding:6px 16px;gap:12px;height:48px;flex-shrink:0}.topbar h1{font-size:16px;font-weight:600;white-space:nowrap}.topbar-divider{width:1px;height:28px;background:var(--border)}.topbar-btn{background:var(--accent);border:1px solid var(--border);color:var(--text);padding:5px 14px;border-radius:4px;cursor:pointer;font-size:13px;transition:background .15s;white-space:nowrap}.topbar-btn:hover,.topbar-btn.active{background:var(--highlight)}.topbar-group{display:flex;gap:4px;align-items:center}.topbar-spacer{flex:1}.exercise-tabs{display:flex;background:var(--panel);border-bottom:1px solid var(--border);padding:0 16px;gap:2px;flex-shrink:0}.exercise-tab{padding:8px 18px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);font-size:13px;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}.exercise-tab:hover{color:var(--text)}.exercise-tab.active{color:var(--highlight);border-bottom-color:var(--highlight)}.main{display:flex;flex:1;overflow:hidden}.sidebar{width:220px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.sidebar-section{border-bottom:1px solid var(--border)}.sidebar-section-header{padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none}.sidebar-section-header:hover{color:var(--text)}.sidebar-section-content{padding:6px 10px 12px}.collapsed .sidebar-section-content{display:none}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tool-item{background:var(--panel-light);border:1px solid var(--border);border-radius:6px;padding:8px 4px;text-align:center;cursor:grab;transition:all .15s;font-size:11px;-webkit-user-select:none;user-select:none}.tool-item:hover{border-color:var(--highlight);background:var(--accent)}.tool-item:active{cursor:grabbing}.tool-item .icon{font-size:24px;margin-bottom:3px}.color-row{display:flex;gap:6px;padding:4px 0;flex-wrap:wrap}.color-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .15s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#fff}.draw-tools{display:flex;gap:4px;flex-wrap:wrap}.draw-btn{background:var(--panel-light);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .15s}.draw-btn:hover{border-color:var(--highlight)}.draw-btn.active{background:var(--highlight);border-color:var(--highlight)}.add-btn{background:var(--accent);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;width:100%;transition:background .15s}.add-btn:hover{background:var(--highlight)}.add-btn.danger{background:#c0392b}.canvas-area{flex:1;display:flex;flex-direction:column;position:relative;background:#111}.canvas-wrapper{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}canvas{box-shadow:0 4px 24px #00000080}.anim-bar{background:var(--panel);border-top:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:12px;height:56px;flex-shrink:0}.anim-btn{width:36px;height:36px;border-radius:50%;background:var(--accent);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s}.anim-btn:hover{background:var(--highlight)}.timeline-container{flex:1;height:36px;background:var(--panel-light);border-radius:4px;position:relative;cursor:pointer;border:1px solid var(--border);overflow:hidden}.timeline-progress{height:100%;background:linear-gradient(90deg,var(--highlight),#c0392b);border-radius:3px;pointer-events:none}.timeline-marker{position:absolute;top:2px;bottom:2px;width:4px;background:#fff;border-radius:2px;transform:translate(-50%)}.timeline-playhead{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;transform:translate(-50%);pointer-events:none}.anim-time{font-size:13px;font-variant-numeric:tabular-nums;min-width:80px;text-align:center}.anim-label{font-size:12px;color:var(--text-dim)}.anim-input{width:50px;background:var(--panel-light);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:3px;text-align:center;font-size:13px}.concept-panel{width:300px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.tab-bar{display:flex;border-bottom:1px solid var(--border)}.tab-btn{flex:1;padding:10px;background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;border-bottom:2px solid transparent;font-weight:600}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--highlight);border-bottom-color:var(--highlight)}.concept-section{padding:14px;border-bottom:1px solid var(--border)}.concept-section h3{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:10px}.form-group label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px}.form-input{width:100%;background:var(--panel-light);border:1px solid var(--border);color:var(--text);padding:7px 10px;border-radius:4px;font-size:13px;font-family:inherit}.form-input:focus{outline:none;border-color:var(--highlight)}textarea.form-input{resize:vertical;min-height:60px}.phase-item{background:var(--panel-light);border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px;position:relative}.phase-num{position:absolute;top:-8px;left:10px;background:var(--highlight);color:#fff;font-size:10px;padding:1px 8px;border-radius:10px;font-weight:700}.phase-remove{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px}.phase-remove:hover{color:var(--highlight)}.phase-input{width:100%;background:var(--accent);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:3px;font-size:12px;font-family:inherit;margin-top:4px}textarea.phase-input{resize:vertical;min-height:40px}.props-section{padding:14px;border-bottom:1px solid var(--border)}.props-section h3{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--highlight);text-transform:uppercase}.prop-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.prop-row label{font-size:12px;color:var(--text-dim)}.prop-input{width:80px;background:var(--panel-light);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:3px;font-size:12px;text-align:center}.material-row{display:flex;justify-content:space-between;padding:2px 0;font-size:13px}.context-menu{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:4px 0;z-index:1000;min-width:160px;box-shadow:0 8px 24px #00000080}.context-item{padding:8px 16px;font-size:13px;cursor:pointer}.context-item:hover{background:var(--accent)}.context-separator{height:1px;background:var(--border);margin:4px 0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--panel)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.row{display:flex;gap:8px}.flex-1{flex:1}