.draw-toolbar { width:max-content; max-width:calc(100% - 18px); flex-wrap:wrap; justify-content:center; row-gap:6px; padding:8px; border-color:var(--line-bright); background:rgba(15,20,23,.96); box-shadow:0 12px 28px #0008; }
.drawing-front .draw-toolbar { animation:front-toolbar-in 180ms ease-out both; }
.draw-toolbar span { color:var(--text); }
.draw-toolbar label { display:flex; align-items:center; gap:6px; padding:2px 7px; border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.025); font-size:.5rem; font-weight:800; letter-spacing:.06em; }
.draw-toolbar input[type="color"] { width:27px; height:26px; padding:2px; border:1px solid var(--line-bright); background:transparent; cursor:pointer; }
.draw-toolbar button { white-space:nowrap; transition:background-color 150ms ease,border-color 150ms ease,transform 150ms ease; }
.draw-toolbar button:hover:not(:disabled) { border-color:var(--amber); transform:translateY(-1px); }
.draw-toolbar button:disabled { opacity:.45; cursor:not-allowed; }
.draw-toolbar :focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.front-color-note { margin:-2px 0 10px; color:var(--muted); font-size:.67rem; line-height:1.45; }
@keyframes front-toolbar-in { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
@media(max-width:600px){.draw-toolbar { bottom:8px; }.draw-toolbar span { width:100%; text-align:center; }.draw-toolbar button { flex:1 1 auto; }}
@media(prefers-reduced-motion:reduce){.drawing-front .draw-toolbar { animation:none; }.draw-toolbar button { transition:none; }}