.canvas-column { min-width: 0; }
.canvas-help { margin: 0 0 0.5rem; color: #52606d; font-size: 0.9rem; }
.u-canvas-frame { height: clamp(360px, 65vh, 760px); overflow: auto; background: #f7f9fb; }
.u-canvas-frame #grid-canvas { max-width: none; max-height: none; cursor: grab; touch-action: none; }
.u-canvas-frame #grid-canvas.is-dragging { cursor: grabbing; }
.translation-controls { display: grid; gap: 0.55rem; }
.piece-control { border-left: 0.45rem solid var(--piece-color); padding: 0.4rem 0.55rem; background: #f7f9fb; }
.piece-control strong { display: block; margin-bottom: 0.3rem; }
.piece-control label { display: inline-flex; gap: 0.3rem; align-items: center; margin-right: 0.45rem; font-size: 0.9rem; }
.piece-control input { width: 5.5rem; }
.input-error { margin: 0.65rem 0 0; color: #b42318; font-weight: 700; }
.metric-ok { color: #08783e; font-weight: 700; }
.metric-error { color: #b42318; font-weight: 700; }
@media (max-width: 700px) { .u-canvas-frame { height: 58vh; } }