:root{
  --bg:#f7f7f8;
  --accent:#0f62fe;
  --muted:#666;
}
*{box-sizing:border-box;font-family:Inter, system-ui, Arial, sans-serif}
body{margin:0;background:var(--bg);color:#111}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#fff;border-bottom:1px solid #e6e6e6}
.topbar h1{margin:0;font-size:16px}
.controls{display:flex;gap:8px;align-items:center}
.main{display:flex;height:calc(100vh - 64px)}
.sidebar{width:260px;background:#fff;border-right:1px solid #e6e6e6;padding:12px;overflow:auto}
.viewer{flex:1;padding:12px;display:flex;flex-direction:column;gap:10px}
.viewer-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;background:#ddd;padding:8px;border-radius:6px;overflow:auto}
canvas{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.history-item{padding:6px;border:1px solid #eee;margin-bottom:6px;background:#fafafa;cursor:pointer}
.server-item{padding:6px;border:1px solid #eee;margin-bottom:6px;background:#fff}
.small{font-size:12px;color:var(--muted)}