.kcb-app { width: min(920px, 100%); display: grid; gap: 12px; margin: 0 auto; }
.kcb-topbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px; background:white; border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.kcb-title { font-weight: 800; font-size: 18px; }
.kcb-hint { color: #374151; font-size: 14px; padding: 2px 0; }
.kcb-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.kcb-btn{
  border:0; border-radius:14px; padding:10px 14px; font-weight:700;
  background:#111827; color:white; cursor:pointer; touch-action:manipulation;
}
.kcb-btn:active { transform: translateY(1px); }
.kcb-secondary { background:#e5e7eb; color:#111827; }
.kcb-palette { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.kcb-swatch{
  width:46px; height:46px; border-radius:999px; border:3px solid rgba(0,0,0,.1);
  box-shadow:0 6px 14px rgba(0,0,0,.08); cursor:pointer;
}
.kcb-swatch.kcb-selected { outline:4px solid #111827; outline-offset:2px; }
.kcb-stage{
  background:white; border-radius:18px; box-shadow:0 10px 26px rgba(0,0,0,.08);
  padding:10px; display:grid; place-items:center;
}
.kcb-canvas { width: min(720px, 100%); height:auto; border-radius:12px; touch-action:none; }