:root{--bg-dark: #0a0a0a;--bg-card: #111111;--bg-card2: #161616;--accent: #facc15;--accent-glow: rgba(250,204,21,.25);--accent-dim: rgba(250,204,21,.12);--text-primary: #e4e4e7;--text-secondary: #71717a;--glass-border: #222222;--border2: rgba(250,204,21,.15);--red: #f87171;--green: #4ade80;--radius-lg: 10px;--radius-md: 6px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Calibri,system-ui,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);overflow:hidden;height:100vh;font-size:13px}.view{height:100vh;display:flex;flex-direction:column}.hidden{display:none!important}.glass{background:var(--bg-card);border:1px solid var(--glass-border);box-shadow:0 4px 24px #0009}.cpg-logo{height:36px;width:auto;display:block}*{scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3a3a3a}#dashboard header{padding:1.25rem 2.5rem;display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);border-bottom:1px solid var(--glass-border);flex-shrink:0}.logo{display:flex;align-items:center;gap:.75rem}.logo .icon{font-size:1.6rem;filter:drop-shadow(0 0 6px var(--accent-glow))}.logo h1{font-size:1.25rem;font-weight:700;letter-spacing:.01em;color:var(--accent)}.actions{display:flex;gap:.75rem;align-items:center}.btn-primary{background:var(--accent);color:#000;border:none;padding:.45rem 1.1rem;border-radius:var(--radius-md);font-weight:600;font-family:inherit;font-size:12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:.4rem;height:32px;white-space:nowrap}.btn-primary:hover{background:#fde047;box-shadow:0 0 16px var(--accent-glow)}.btn-primary:active{transform:scale(.96)}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--glass-border);padding:.45rem 1.1rem;border-radius:var(--radius-md);font-weight:500;font-family:inherit;font-size:12px;cursor:pointer;transition:all .15s;height:32px;display:flex;align-items:center;white-space:nowrap}.btn-secondary:hover{border-color:var(--border2);color:var(--accent);background:var(--accent-dim)}main{padding:0 2.5rem;flex:1;overflow-y:auto}.project-grid-section h2{margin-bottom:1.25rem;margin-top:1.75rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary)}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem;padding-bottom:3rem}.project-card{border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all .2s;border:1px solid var(--glass-border)}.project-card:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:0 8px 32px #00000080,0 0 0 1px #facc1514}.project-thumb{aspect-ratio:16/9;background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:3rem;border-bottom:1px solid var(--glass-border)}.project-info{padding:.875rem 1rem;position:relative;background:var(--bg-card)}.project-info h3{margin-bottom:.2rem;font-size:13px;font-weight:600;color:var(--text-primary)}.project-info span{font-size:11px;color:var(--text-secondary)}.top-nav{padding:0 1rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--glass-border);z-index:100;background:var(--bg-card);height:46px;flex-shrink:0}.top-nav input{background:transparent;border:none;color:var(--text-primary);font-size:13px;font-weight:600;font-family:inherit;outline:none;flex:1;padding:0 4px}.top-nav input:focus{background:#facc150a;border-radius:4px}.icon-btn{background:transparent;border:1px solid transparent;color:var(--text-secondary);font-size:1rem;cursor:pointer;transition:all .12s;border-radius:var(--radius-md);width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-btn:hover{color:var(--accent);background:var(--accent-dim);border-color:var(--border2)}.top-actions{display:flex;align-items:center;gap:4px}.divider{width:1px;height:18px;background:var(--glass-border);margin:0 6px;flex-shrink:0}.editor-container{flex:1;display:flex;overflow:hidden}.main-editor-area{flex:1;display:flex;flex-direction:column;min-width:0;transition:all .3s ease}#canvas-container{flex:1;background:#050505;position:relative;min-height:0}.control-panel{position:absolute;top:1rem;left:1rem;padding:4px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:4px;z-index:10;background:var(--bg-card);border:1px solid var(--glass-border)}.mode-btn{width:34px;height:34px;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:.85rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center}.mode-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:var(--border2)}.mode-btn.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700}.right-tray{width:240px;background:var(--bg-card);border:1px solid var(--glass-border);border-left:1px solid var(--glass-border);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.25rem;transition:width .3s ease,padding .3s ease;flex-shrink:0;overflow-y:auto}.right-tray.is-floating{position:fixed;z-index:50;box-shadow:0 8px 32px #000000b3;border-radius:var(--radius-lg);max-height:80vh;overflow-y:auto}.right-tray.collapsed{width:0;padding:0;margin:0;border:none;overflow:hidden}.toggle-group{display:flex;flex-direction:column;gap:.625rem}.timeline{height:156px;background:var(--bg-card);border:1px solid var(--glass-border);border-top:1px solid var(--glass-border);display:flex;flex-direction:column;z-index:20;transition:height .3s ease,opacity .3s ease;flex-shrink:0}.timeline.is-floating{position:fixed;z-index:50;box-shadow:0 8px 32px #000000b3;border-radius:var(--radius-lg);min-width:400px;min-height:120px;overflow:auto}.timeline.collapsed{height:0;border:none;overflow:hidden;opacity:0}.timeline-toolbar{padding:.3rem .75rem;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:.5rem;background:var(--bg-card);height:36px;flex-shrink:0}.frame-counter{font-size:11px;color:var(--text-secondary);margin-left:4px}.frame-counter span{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}.timeline-content{flex:1;display:flex;overflow:hidden}.timeline-headers{width:110px;background:var(--bg-card);border-right:1px solid var(--glass-border);overflow-y:auto;flex-shrink:0}.track-header{height:30px;padding:0 .625rem;display:flex;align-items:center;font-size:11px;color:var(--text-secondary);border-bottom:1px solid var(--glass-border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-tracks-container{flex:1;position:relative;overflow:auto}.timeline-grid{position:absolute;top:0;left:0;width:5000px;height:100%;background-image:linear-gradient(to right,#1e1e1e 1px,transparent 1px);background-size:40px 100%}.track-lane{height:30px;position:relative;border-bottom:1px solid #1a1a1a}.keyframe{position:absolute;width:10px;height:10px;background:var(--accent);transform:translate(-50%,-50%) rotate(45deg);top:50%;cursor:grab;box-shadow:0 0 8px var(--accent-glow);touch-action:none;transition:box-shadow .1s}.keyframe:hover{box-shadow:0 0 14px var(--accent-glow),0 0 4px var(--accent)}.keyframe:active{cursor:grabbing}#playhead{position:absolute;top:0;left:0;width:1.5px;height:100%;background:var(--accent);z-index:10;pointer-events:none;opacity:.85}#playhead:after{content:"";position:absolute;top:0;left:-4px;width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 6px var(--accent-glow)}.btn-delete-project{position:absolute;top:.5rem;right:.5rem;background:#f871711a;border:1px solid rgba(248,113,113,.25);color:var(--red);width:28px;height:28px;border-radius:var(--radius-md);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s}.project-card:hover .btn-delete-project{opacity:1}.btn-delete-project:hover{background:#f8717140}.export-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.export-dialog{padding:1.75rem;border-radius:var(--radius-lg);min-width:300px;max-width:380px;background:var(--bg-card);border:1px solid var(--border2);box-shadow:0 20px 60px #000c,0 0 0 1px #facc150f}.export-dialog h3{margin-bottom:1.25rem;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);text-align:center}.btn-small{background:transparent;border:1px solid var(--glass-border);color:var(--text-primary);padding:.2rem .6rem;border-radius:var(--radius-md);font-size:11px;font-family:inherit;cursor:pointer;transition:all .12s;height:24px;display:flex;align-items:center;white-space:nowrap}.btn-small:hover{background:var(--accent-dim);border-color:var(--border2);color:var(--accent)}.toggle-item input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}.toggle-item{font-size:12px;color:var(--text-primary);cursor:pointer}.toggle-item:hover{color:var(--accent)}#selected-bone-name{font-size:12px;color:var(--accent);font-weight:600;margin-top:4px}.right-tray h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:.375rem}#selected-bone-info{border-top:1px solid var(--glass-border);padding-top:1rem}#camera-info{position:absolute;bottom:.5rem;left:.5rem;font-size:10px;color:var(--text-secondary);pointer-events:none;z-index:5;font-variant-numeric:tabular-nums;background:#0000008c;padding:3px 8px;border-radius:4px;border:1px solid var(--glass-border)}.drag-handle{padding:4px 8px;cursor:grab;background:var(--bg-card2);border-bottom:1px solid var(--glass-border);font-size:14px;color:var(--text-secondary);text-align:center;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s}.drag-handle:hover{background:var(--accent-dim);color:var(--accent)}.drag-handle:active{cursor:grabbing}.draggable-panel{box-shadow:0 4px 16px #0006}
