:root {
  --bg: #eef4ff;
  --card: #ffffff;
  --text: #1f2a44;
  --sub: #6b7898;
  --primary: #5a6dff;
  --primary-2: #7f5cff;
  --ok: #2fb56d;
  --warn: #d7782b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #fff, var(--bg));
}
.app { max-width: 1320px; margin: 0 auto; padding: 16px; }
.card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(43, 76, 160, 0.14);
}
.hero { padding: 16px; margin-bottom: 14px; }
.hero h1 { margin: 0 0 8px; }
.sub { color: var(--sub); margin: 0; }
.workspace { display: grid; grid-template-columns: 1fr 360px; gap: 14px; }
.painter { padding: 14px; }
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.toolbar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
button, select, textarea, input[type="color"], input[type="range"] {
  font: inherit;
}
button {
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
}
button.ghost {
  background: #eaf0ff;
  color: var(--text);
}
#board {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 2px solid #cfdcff;
  background: linear-gradient(135deg, #fff, #f8faff);
  touch-action: none;
}
.panel { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.panel h2 { margin: 0; }
.panel textarea,
.panel select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d6e0ff;
  padding: 8px;
}
.actions { display: flex; }
.status {
  min-height: 24px;
  margin: 0;
  color: var(--sub);
  font-weight: 700;
}
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.result-wrap {
  border: 1px solid #d9e3ff;
  border-radius: 12px;
  padding: 10px;
  background: #f8fbff;
}
.result-wrap h3 { margin: 0 0 8px; }
#resultImage {
  width: 100%;
  display: none;
  border-radius: 10px;
  border: 1px solid #d5def8;
  background: #fff;
}
@media (max-width: 1080px) {
  .workspace { grid-template-columns: 1fr; }
}