:root{--bg: #14171b;--panel: #1b1f24;--panel-2: #22272e;--line: #2f363f;--text: #dde3ea;--muted: #8b97a6;--accent: #4f9dff;--accent-dim: #2b5f9e;--warn: #e0a33e;--err: #e0574a;--ok: #4cc38a;--radius: 6px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:13px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}.brand{font-weight:650;letter-spacing:.2px}.brand span{color:var(--muted);font-weight:400;margin-left:8px;font-size:12px}.tabs{display:flex;gap:2px;margin-left:8px}.tab{padding:5px 12px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer;font:inherit}.tab:hover{color:var(--text);background:var(--panel-2)}.tab[aria-selected=true]{background:var(--accent-dim);color:#fff;border-color:var(--accent)}.spacer{flex:1}.main{display:flex;flex:1;min-height:0}.left,.right{background:var(--panel);display:flex;flex-direction:column;min-height:0;overflow:hidden}.left{width:270px;border-right:1px solid var(--line);flex:none}.right{width:330px;border-left:1px solid var(--line);flex:none}.center{flex:1;min-width:0;display:flex;flex-direction:column}.scroll{overflow:auto;min-height:0;flex:1}button,select,input,textarea{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:4px 8px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent-dim);border-color:var(--accent);color:#fff}button.danger:hover{border-color:var(--err);color:var(--err)}button.sm{padding:2px 6px;font-size:12px}input[type=number]{width:72px}input[type=checkbox]{width:auto;accent-color:var(--accent)}input[type=range]{padding:0;background:transparent;border:none;accent-color:var(--accent)}label{color:var(--muted)}.row{display:flex;align-items:center;gap:8px}.row.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:8px}.section{border-bottom:1px solid var(--line);padding:10px 12px}.section h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600}.hint{color:var(--muted);font-size:12px}.badge{font-size:11px;padding:1px 6px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}.list{display:flex;flex-direction:column;gap:3px}.item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);cursor:pointer;text-align:left}.item:hover{border-color:var(--accent)}.item[aria-selected=true]{border-color:var(--accent);background:var(--accent-dim)}.item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item .meta{color:var(--muted);font-size:11px}.item[aria-selected=true] .meta{color:#cfe0f5}.thumb{width:30px;height:30px;flex:none;border-radius:4px;background:#0f1216;border:1px solid var(--line)}.viewer{position:relative;flex:1;min-height:0;background:#1b1f24}.viewer-canvas{position:absolute;inset:0}.viewer-badge,.viewer-hint,.viewer-empty{position:absolute;padding:3px 8px;border-radius:var(--radius);background:#0000008c;color:var(--text);font-size:11px;pointer-events:none}.viewer-badge{top:8px;left:8px;color:var(--accent)}.viewer-hint{bottom:8px;right:8px;color:var(--muted)}.viewer-empty{top:50%;left:50%;transform:translate(-50%,-50%);color:var(--muted)}.canvas-wrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#0f1216}.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}.toolbar .sep{width:1px;height:20px;background:var(--line);margin:0 3px}.statusbar{display:flex;align-items:center;gap:12px;flex:none;padding:5px 12px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}.dot.ready{background:var(--ok)}.dot.rendering{background:var(--accent);animation:pulse 1s ease-in-out infinite}.dot.error{background:var(--err)}.dot.loading{background:var(--warn);animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.msg{padding:6px 8px;border-radius:var(--radius);font-size:12px;border:1px solid}.msg.warn{color:var(--warn);border-color:#5a4520;background:#2a2115}.msg.err{color:var(--err);border-color:#5c2b26;background:#2a1917}.msg+.msg{margin-top:4px}.log{font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;background:#0f1216;border:1px solid var(--line);border-radius:var(--radius);padding:8px;max-height:220px;overflow:auto;color:var(--muted)}.pgroup{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:6px;background:var(--panel-2)}.pgroup>summary{padding:6px 10px;cursor:pointer;font-weight:600;font-size:12px;list-style:none;display:flex;align-items:center;gap:6px}.pgroup>summary::-webkit-details-marker{display:none}.pgroup>summary:before{content:"▸";color:var(--muted)}.pgroup[open]>summary:before{content:"▾"}.pgroup>.pbody{padding:4px 10px 10px;display:flex;flex-direction:column;gap:7px}.field{display:flex;flex-direction:column;gap:3px}.field>.flabel{display:flex;align-items:baseline;gap:6px}.field>.flabel>.fname{color:var(--text);font-size:12px}.field>.flabel>.funit{color:var(--muted);font-size:11px}.field .fdesc{color:var(--muted);font-size:11px}.field .fcontrol{display:flex;align-items:center;gap:6px}.field .fcontrol input[type=text],.field .fcontrol select{flex:1;min-width:0}.field.expr .fcontrol{color:var(--warn);font-size:11px;font-family:ui-monospace,monospace}.vec{display:flex;gap:4px}.vec input{width:100%}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;color:var(--muted);text-align:center;padding:24px}.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12px}.kv dt{color:var(--muted)}.kv dd{margin:0}.layers{display:flex;flex-direction:column;gap:4px}.layer{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}.layer .idx{color:var(--muted);font-family:ui-monospace,monospace}.layer.base{opacity:.65}.split{display:flex;flex-direction:column;flex:1;min-height:0}.split-a{flex:1.35;min-height:0;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}.split-b{flex:1;min-height:0;display:flex}.menu-scrim{position:fixed;inset:0;z-index:40}.menu{position:absolute;z-index:41;min-width:210px;padding:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px #00000073;display:flex;flex-direction:column;gap:1px}.menu button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:transparent;border:none;border-radius:4px;padding:6px 8px;text-align:left;width:100%}.menu button:hover{background:var(--accent-dim)}.menu button.danger:hover{background:#4a2420;color:var(--err)}.menu .menu-hint{color:var(--muted);font-size:11px}.menu button:hover .menu-hint{color:#cfe0f5}.dialog{position:fixed;z-index:41;top:56px;right:12px;width:560px;max-height:70vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px #00000080}.dialog-head,.dialog-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;flex:none}.dialog-head{border-bottom:1px solid var(--line)}.dialog-foot{border-top:1px solid var(--line)}.dialog-body{padding:10px 12px;overflow:auto;flex:1;min-height:0}
