.layout{--bg-main: #1e1e1e;--bg-sidebar: #252526;--bg-tabs: #2d2d2d;--bg-input: #3c3c3c;--text-main: #d4d4d4;--text-muted: #888;--border: #333;--ln-color: #555;--bg-terminal: #0a0a0a;--text-terminal: #4ade80}.layout.light-mode{--bg-main: #ffffff;--bg-sidebar: #f3f3f3;--bg-tabs: #e8e8e8;--bg-input: #ffffff;--text-main: #333;--text-muted: #777;--border: #ddd;--ln-color: #aaa;--bg-terminal: #1a1a1a}*{box-sizing:border-box;margin:0;padding:0}.layout{display:flex;height:100vh;font-family:Fira Code,monospace;background:var(--bg-main);color:var(--text-main);font-size:12px;overflow:hidden}.sidebar{width:250px;background:var(--bg-sidebar);border-right:1px solid var(--border);padding:15px;flex-shrink:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.btn-theme{width:100%;padding:8px;background:#007acc;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700}.btn-yellow{width:100%;padding:8px;background:#f2a917;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700}.btn-animate{width:100%;padding:8px;background:#7c3aed;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;font-family:inherit;transition:background .15s}.btn-animate:hover:not(:disabled){background:#6d28d9}.btn-animate:disabled{opacity:.4;cursor:not-allowed}.session-controls input{width:100%;padding:7px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-main);border-radius:4px;margin-bottom:6px;outline:none;font-family:inherit}.nav-row{display:flex;gap:8px;align-items:center}.nav-row button{flex:1;padding:6px;background:var(--bg-input);color:var(--text-main);border:1px solid var(--border);cursor:pointer;border-radius:4px}.step-info{font-weight:700;min-width:54px;text-align:center;font-size:11px}.goto-row{display:flex;align-items:center;gap:6px}.goto-label{font-size:11px;color:var(--text-muted);white-space:nowrap}.goto-input{flex:1;padding:5px 6px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-main);border-radius:4px;outline:none;font-family:inherit;font-size:12px;min-width:0;-moz-appearance:textfield}.goto-input::-webkit-inner-spin-button,.goto-input::-webkit-outer-spin-button{-webkit-appearance:none}.goto-input:focus{border-color:#007acc}.goto-btn{padding:5px 10px;background:#007acc;color:#fff;border:none;border-radius:4px;cursor:pointer;font-family:inherit}.goto-btn:hover{background:#005fa3}.file-item{padding:6px 10px;cursor:pointer;color:var(--text-muted);border-radius:4px;transition:.2s}.file-item:hover{background:#ffffff0d}.file-item.active{background:var(--bg-input);color:var(--text-main)}.file-dot{color:#3fb950;margin-right:6px}.sidebar h4{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.sidebar hr{border:none;border-top:1px solid var(--border)}.main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.editor-pane{display:flex;flex-direction:column;overflow:hidden}.resizer{height:10px;background:var(--border);cursor:row-resize;z-index:10;display:flex;align-items:center;justify-content:center;flex-shrink:0}.resizer:hover{background:#007acc}.resizer-handle{width:40px;height:4px;background:#fff3;border-radius:2px}.tabs{display:flex;background:var(--bg-tabs);border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0}.tab{padding:8px 18px;border-right:1px solid var(--border);cursor:pointer;color:var(--text-muted);white-space:nowrap}.tab.active{background:var(--bg-main);color:var(--text-main);border-bottom:2px solid #007acc}.diff-panel{height:180px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg-main);border-bottom:2px solid var(--border)}.diff-header{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background:var(--bg-tabs);border-bottom:1px solid var(--border);flex-shrink:0}.diff-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.diff-stats{display:flex;gap:8px;font-size:11px;font-weight:700}.diff-add-count{color:#3fb950}.diff-del-count{color:#f85149}.diff-body{flex:1;overflow-y:auto}.diff-empty{padding:16px;color:var(--text-muted);font-size:11px;text-align:center;opacity:.5}.diff-table{width:100%;border-collapse:collapse;table-layout:fixed}.diff-ln{width:50px;text-align:right;padding-right:10px;color:var(--ln-color);-webkit-user-select:none;user-select:none;font-size:10px}.diff-sign{width:25px;text-align:center;-webkit-user-select:none;user-select:none}.diff-code{white-space:pre;padding-left:10px;font-size:11px}.diff-row.add{background:#3fb95026}.diff-row.add .new{color:#3fb950;font-weight:700}.diff-row.add .diff-code{color:#adf3b8}.diff-row.del{background:#f8514926}.diff-row.del .old{color:#f85149;font-weight:700}.diff-row.del .diff-code{color:#ffa8a3}.diff-row.hunk{background:#007acc1a;color:#58a6ff}.diff-row.ctx .diff-code{color:#8b949e}.editor-content,.code-viewer-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}.code-toolbar{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background:var(--bg-tabs);border-bottom:1px solid var(--border);flex-shrink:0}.code-filename{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-copy{padding:3px 10px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted);border-radius:4px;cursor:pointer;font-size:11px;font-family:inherit;flex-shrink:0;transition:all .15s}.btn-copy:hover{border-color:#007acc;color:#007acc}.btn-copy.copied{border-color:#3fb950;color:#3fb950}.code-viewer{flex:1;overflow:auto;padding:10px 0;background:var(--bg-main)}.line{display:flex;line-height:1.6}.ln{width:45px;text-align:right;padding-right:20px;color:var(--ln-color);-webkit-user-select:none;user-select:none;flex-shrink:0}.code{white-space:pre;padding-right:40px}.hl-line{background:#007acc33}.terminal-mode{background:var(--bg-terminal)!important;color:var(--text-terminal)}.text-terminal{color:var(--text-terminal)!important}.anim-overlay{position:fixed;inset:0;background:#000000c7;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}.anim-modal{background:#1a1a2e;border:1px solid #2a2a3e;border-radius:12px;width:100%;max-width:920px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden}.anim-topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#12122a;border-bottom:1px solid #2a2a3e;flex-shrink:0;flex-wrap:wrap;gap:6px}.anim-topbar-left{display:flex;align-items:center;gap:8px}.anim-badge{background:#2d2d6a;color:#a5b4fc;font-size:11px;font-weight:600;padding:2px 9px;border-radius:6px;font-family:Fira Code,monospace}.anim-step-title{font-size:11px;color:#77a;font-family:Fira Code,monospace}.anim-controls{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.anim-speed-label{font-size:11px;color:#555}.anim-btn{font-size:11px;padding:3px 10px;cursor:pointer;border-radius:5px;border:1px solid #2a2a3e;background:#1e1e3a;color:#aaa;font-family:Fira Code,monospace;transition:background .1s}.anim-btn:hover{background:#28284a}.anim-btn.active{background:#2d2d6a;color:#a5b4fc;border-color:#4a4a9a}.anim-btn-close{background:#2a1a1a;color:#f87171;border-color:#3a2020}.anim-btn-close:hover{background:#3a2020}.anim-caption-box{display:flex;align-items:flex-start;gap:10px;padding:8px 14px;background:#0f0f1e;border-bottom:1px solid #1e1e2e;min-height:44px;flex-shrink:0}.anim-avatar{width:26px;height:26px;border-radius:50%;background:#2d2d6a;color:#a5b4fc;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;font-family:sans-serif;margin-top:2px}.anim-caption-text{font-size:12.5px;color:#b0b0cc;line-height:1.55;font-family:sans-serif;padding-top:3px}.anim-caption-text.typing:after{content:"▋";animation:animBlink .7s infinite;font-size:10px;color:#444}@keyframes animBlink{0%,to{opacity:1}50%{opacity:0}}.anim-prog-wrap{height:2px;background:#1a1a2e;flex-shrink:0}.anim-prog-bar{height:2px;background:#7c3aed;transition:width .25s}.anim-editor{background:#1e1e2e;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:200px}.anim-editor-bar{background:#181825;padding:6px 12px;display:flex;align-items:center;gap:6px;flex-shrink:0;border-bottom:1px solid #2a2a3e}.anim-dot{width:10px;height:10px;border-radius:50%}.anim-dot.r{background:#e06c75}.anim-dot.y{background:#e5c07b}.anim-dot.g{background:#98c379}.anim-fname{font-size:11px;color:#666;margin-left:6px;font-family:Fira Code,monospace}.anim-editor-body{display:flex;flex:1;overflow:hidden}.anim-line-col{padding:10px 0;min-width:40px;text-align:right;background:#1e1e2e;border-right:1px solid #2a2a3e;flex-shrink:0;overflow:hidden}.anim-line-col span{display:block;font-size:11px;color:#4a4a5e;line-height:1.65;padding:0 7px;font-family:Fira Code,monospace}.anim-code-col{flex:1;padding:10px 13px;overflow:auto;font-size:12px;line-height:1.65;font-family:Fira Code,monospace;white-space:pre;color:#cdd6f4}.anim-cursor{display:inline-block;width:2px;height:13px;background:#f5c2e7;animation:animBlink 1s infinite;vertical-align:middle}.hl-comment{color:#6c7086;font-style:italic}.hl-tag{color:#89b4fa}.hl-attr{color:#a6e3a1}.hl-val{color:#f9e2af}.hl-kw{color:#cba6f7}.anim-step-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:5px;padding:9px 14px;background:#12122a;border-top:1px solid #1e1e2e;flex-shrink:0;max-height:120px;overflow-y:auto}.anim-scard{padding:6px 9px;border-radius:6px;border:1px solid #2a2a3e;background:#1a1a3a;cursor:pointer;transition:background .1s}.anim-scard:hover{background:#24244a}.anim-scard.done{background:#0c2418;border-color:#163824}.anim-scard.cur{background:#18184a;border-color:#3030a0}.anim-snum{font-size:10px;color:#444;font-family:Fira Code,monospace;margin-bottom:2px}.anim-scard.cur .anim-snum{color:#a5b4fc}.anim-scard.done .anim-snum{color:#3fb950}.anim-stitle{font-size:11px;font-weight:600;color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.anim-sdesc{font-size:10px;color:#444;margin-top:1px}.anim-scard.cur .anim-sdesc{color:#6060bb}.anim-scard.done .anim-sdesc{color:#1f6b33}
