/* 在线画板 */
.db-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-bottom:.75rem}
.db-group{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem}
.db-group .form-check{margin:0;padding-left:1.5em}
.db-group .form-check-input{margin-top:.25em}
.db-color{width:2.4rem;min-width:2.4rem;height:2rem;padding:.1rem}
.db-swatches{display:inline-flex;flex-wrap:wrap;gap:.3rem}
.db-swatch{width:1.5rem;height:1.5rem;padding:0;border:2px solid #fff;border-radius:50%;cursor:pointer;
  box-shadow:0 0 0 1px #d7dce5;transition:transform .12s}
.db-swatch:hover{transform:scale(1.08)}
.db-swatch.is-on{box-shadow:0 0 0 2px var(--site-primary)}
.db-range{width:9rem}
.db-group-actions{margin-left:auto}

.db-stage{position:relative;margin-top:.25rem;padding:.5rem;border:1px solid #e9edf2;border-radius:.5rem;
  background:#f8fafc;height:min(62vh,560px);min-height:20rem}
.db-stage canvas{display:block;width:100%;height:100%;border-radius:.35rem;background:#fff;cursor:crosshair;
  box-shadow:0 1px 4px rgba(15,23,42,.08);touch-action:none;user-select:none;-webkit-user-select:none}

@media (max-width:767.98px){
  .db-group-actions{margin-left:0;width:100%}
  .db-range{width:7rem}
  .db-stage{height:56vh;min-height:16rem}
}