.draw-card { max-width: 1100px; }

.draw-tools {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: .5rem; margin-bottom: .75rem;
}
.draw-color {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid #fff; box-shadow: 0 0 0 2px #ddd; cursor: pointer; padding: 0;
}
.draw-color.active { box-shadow: 0 0 0 3px #6a4bbc; transform: scale(1.12); }

.brush-sizes { display: flex; gap: .4rem; align-items: center; }
.brush-size {
    background: #f1e9ff; border: 2px solid #e0d0ff; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
}
.brush-size.active { background: #d0bcff; }
.brush-size .dot { background: #444; border-radius: 50%; display: block; }

.draw-btn {
    font-family: var(--kf); font-weight: 600; font-size: .95rem;
    background: #f1e9ff; color: #6a4bbc; border: 2px solid #e0d0ff;
    border-radius: 999px; padding: .5rem 1rem; cursor: pointer;
}
.draw-btn.active { background: #d0bcff; }
.draw-btn:active { transform: scale(.96); }
.draw-btn[disabled] { opacity: .4; cursor: default; }

.draw-stamps { gap: .35rem; }
.draw-stamp {
    font-size: 1.5rem; line-height: 1; width: 42px; height: 42px;
    border: 2px solid #ffe0f5; background: #fff7fe; border-radius: 12px; cursor: pointer; padding: 0;
}
.draw-stamp.active { background: #ffd6f0; border-color: #ff8fce; transform: scale(1.08); }

.draw-canvas {
    display: block; width: 100%; height: min(72vh, 720px);
    background: #fff; border-radius: 18px; border: 4px solid #ffe0f5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    touch-action: none; cursor: crosshair;
}