.drawing-layout { padding:2rem 0 5rem; }
.drawing-panel { margin-top:1.5rem; padding:1rem; border:1px solid var(--line); background:rgba(53,37,23,.45); }
.drawing-tools { display:flex; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.drawing-tools label { display:grid; gap:.35rem; color:#e1b66e; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.drawing-tools .drawing-toggle { display:inline-flex; align-items:center; width:auto; min-height:2.45rem; gap:.55rem; }
.drawing-tools .drawing-toggle input { width:1rem; height:1rem; margin:0; accent-color:#c93d30; }
.drawing-tools input[type="color"] { width:3.2rem; height:2.5rem; padding:.15rem; border:1px solid var(--line); background:var(--cream); }
.drawing-tools input[type="range"] { accent-color:#c93d30; }
.drawing-tools select, .drawing-tools input[type="text"] { min-height:2.45rem; border:1px solid var(--line); border-radius:0; padding:.45rem .55rem; color:#17130f; background:#fffaf0; font:700 .88rem Arial,sans-serif; text-transform:none; letter-spacing:normal; }
.drawing-tools select { min-width:9.4rem; }
.drawing-text-field { min-width:min(100%,19rem); flex:1 1 15rem; }
.drawing-tools button { padding:.7rem .9rem; }
.drawing-tools button:disabled { cursor:not-allowed; opacity:.48; }
.sketch-canvas-wrap { position:relative; }
.sketch-canvas-wrap.is-grid::before { position:absolute; z-index:1; inset:3px; content:""; pointer-events:none; background-image:linear-gradient(rgba(23,19,15,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(23,19,15,.14) 1px,transparent 1px); background-size:10% 10%; }
.sketch-canvas-wrap.is-guide::after { position:absolute; z-index:2; inset:8% 12%; border:2px dashed rgba(201,61,48,.72); border-radius:18%; content:""; pointer-events:none; }
.sketch-canvas-wrap.is-guide[data-guide-shape="square"]::after { inset:16.667% 27.778%; border-radius:5%; }
.sketch-canvas-wrap.is-guide[data-guide-shape="circle"]::after { inset:10% 23.333%; border-radius:50%; }
.sketch-canvas-wrap.is-guide[data-guide-shape="bumper"]::after { inset:29% 5%; border-radius:5%; }
#sticker-sketchpad { position:relative; z-index:0; display:block; width:100%; aspect-ratio:3 / 2; touch-action:none; cursor:crosshair; border:3px solid #f3e7ca; background:#fffaf0; }
.drawing-note { max-width:52rem; color:#d7c6a7; line-height:1.55; }
.drawing-status { min-height:1.2rem; margin:.1rem 0 .8rem; color:#e1b66e; font-size:.85rem; }
@media (max-width:760px) { .drawing-tools { align-items:center; gap:.7rem; } .drawing-tools label { width:100%; } .drawing-tools .drawing-toggle { width:auto; } .drawing-tools select, .drawing-tools input[type="text"] { width:100%; } }