* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'IBM Plex Sans Thai', sans-serif; }
html, body { height: 100%; overflow: hidden; background: #EDF0F4; }
.toolbar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: #fff; padding: 10px 16px; border-radius: 16px;
  box-shadow: 0 8px 30px rgba(20,40,70,.15); z-index: 10; max-width: 96vw;
}
.logo { font-weight: 600; font-size: 15px; color: #1D3557; margin-right: 4px; }
.colors { display: flex; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d5dde8; cursor: pointer; }
.swatch.active { box-shadow: 0 0 0 3px #1D3557; }
#picker { width: 30px; height: 30px; border: none; background: none; cursor: pointer; }
.size { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #5a6b80; }
.size input { width: 90px; }
.tool { border: 1px solid #e1e7ef; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 15px; cursor: pointer; }
.tool:hover { background: #F0F4F8; }
.tool.active { background: #1D3557; color: #fff; }
.tool.primary { background: #1FA45B; color: #fff; border: none; font-size: 13px; font-weight: 600; }
canvas { display: block; touch-action: none; cursor: crosshair; }