:root{--bg:#f4f5f7;--panel:#fff;--border:#e3e5e8;--text:#1f2328;--muted:#6b7280;--primary:#1d4ed8;--primary-hover:#1e40af;--danger:#dc2626;--radius:8px;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0}a{color:var(--primary);text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--border);color:var(--text);background:#fff;border-radius:6px;padding:6px 12px}button:hover{background:#f3f4f6}button.primary{background:var(--primary);border-color:var(--primary);color:#fff}button.primary:hover{background:var(--primary-hover)}button.danger{color:var(--danger)}button.sm{padding:3px 8px;font-size:12px}button:disabled{opacity:.5;cursor:default}input,select,textarea{border:1px solid var(--border);background:#fff;border-radius:6px;width:100%;padding:6px 8px}label{color:var(--muted);margin-bottom:4px;font-size:12px;display:block}.field{margin-bottom:10px}.row{align-items:center;gap:8px;display:flex}.row.between{justify-content:space-between}.grow{flex:1}.muted{color:var(--muted)}.small{font-size:12px}.err{color:var(--danger);font-size:13px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.badge{color:#374151;white-space:nowrap;background:#e5e7eb;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;display:inline-block}.badge.blue{color:#1e40af;background:#dbeafe}.badge.green{color:#166534;background:#dcfce7}.badge.amber{color:#92400e;background:#fef3c7}.badge.red{color:#991b1b;background:#fee2e2}.badge.gray{color:#374151;background:#e5e7eb}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;padding:7px 8px}th{color:var(--muted);font-size:12px;font-weight:600}tr.clickable{cursor:pointer}tr.clickable:hover{background:#f9fafb}tr.active{background:#eff6ff}.topbar{color:#fff;background:#0f172a;align-items:center;gap:16px;height:48px;padding:0 16px;display:flex}.topbar .brand{letter-spacing:.3px;font-weight:700}.topbar a{color:#cbd5e1}.topbar a.active,.topbar a:hover{color:#fff}.page{max-width:1280px;margin:0 auto;padding:20px}.tabs{border-bottom:1px solid var(--border);gap:4px;margin-bottom:16px;display:flex}.tabs a{color:var(--muted);border-bottom:2px solid #0000;padding:8px 14px}.tabs a.active{color:var(--primary);border-color:var(--primary);font-weight:600}.login{max-width:360px;margin:10vh auto}.project-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.cde{grid-template-columns:260px 1fr;gap:14px;min-height:60vh;display:grid}.tree-item{cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:5px 8px;display:flex}.tree-item:hover{background:#f3f4f6}.tree-item.active{color:var(--primary);background:#eff6ff;font-weight:600}.viewer-layout{grid-template-columns:240px 1fr 340px;gap:10px;height:calc(100vh - 150px);display:grid}.viewer-canvas{border:1px solid var(--border);border-radius:var(--radius);background:#e5e7eb;position:relative;overflow:hidden}.viewer-canvas>.canvas-host{width:100%;height:100%}.viewer-overlay{pointer-events:none;background:#ffffffe6;border-radius:6px;padding:6px 10px;font-size:12px;position:absolute;top:10px;left:10px}.viewer-toolbar{gap:6px;display:flex;position:absolute;top:10px;right:10px}.side{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.side .head{border-bottom:1px solid var(--border);gap:4px;padding:8px 10px;font-weight:600;display:flex}.side .head button{color:var(--muted);background:0 0;border:none;padding:4px 8px}.side .head button.on{color:var(--primary);background:#eff6ff;font-weight:600}.side .body{flex:1;padding:10px;overflow:auto}.props h4{color:var(--muted);text-transform:uppercase;margin:10px 0 4px;font-size:12px}.props .kv{word-break:break-word;border-bottom:1px dashed #eef0f2;grid-template-columns:45% 55%;gap:2px 8px;padding:2px 0;font-size:12px;display:grid}.props .kv span:first-child{color:var(--muted);text-overflow:ellipsis;overflow:hidden}.list-item{border:1px solid var(--border);cursor:pointer;border-radius:6px;margin-bottom:6px;padding:8px}.list-item:hover{background:#f9fafb}.list-item.active{border-color:var(--primary);background:#eff6ff}.legend{flex-wrap:wrap;gap:6px 12px;font-size:12px;display:flex}.legend i{vertical-align:middle;border-radius:2px;width:10px;height:10px;margin-right:4px;display:inline-block}