/* 极简白板 — 页面样式。变量沿用 site.css。 */

.mb-page main { max-width: 1100px; }

.mb-app {
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.mb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line, #e3e6ea);
  background: var(--card, #fafbfc);
}

.mb-colors, .mb-sizes, .mb-actions { display: flex; align-items: center; gap: 0.4rem; }

.mb-pen {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--pc);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 3px #fff;
}
.mb-pen.active { border-color: var(--accent, #1971c2); }

.mb-size {
  width: 34px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.mb-size span { display: block; border-radius: 50%; background: #1f2328; }
.mb-size[data-size="3"] span { width: 5px; height: 5px; }
.mb-size[data-size="6"] span { width: 11px; height: 11px; }
.mb-size.active { border-color: var(--accent, #1971c2); box-shadow: 0 0 0 2px rgba(25,113,194,.15); }

.mb-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 34px;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.mb-btn:hover { border-color: var(--accent, #1971c2); }
.mb-btn[aria-pressed="true"] { background: var(--accent, #1971c2); color: var(--accent-text, #fff); border-color: var(--accent, #1971c2); }
.mb-primary { background: var(--accent, #1971c2); color: var(--accent-text, #fff); border-color: var(--accent, #1971c2); font-weight: 600; }

.mb-stage { position: relative; height: min(68vh, 640px); touch-action: none; }
.mb-stage canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.mb-stage.erasing canvas { cursor: cell; }

@media (max-width: 640px) {
  .mb-stage { height: min(60vh, 520px); }
  .mb-btn { font-size: 0.8rem; padding: 0.25rem 0.55rem; }
}