/* TOBIRA tools (2026-09-27): inside the white workspace panel, settings on the left (280px) and a large stage on the right.
   Controls use the gallery's Pro sizes: 36px rows, 10.8px corners, #f5f5f5 fills, TOBIRA red for the slider fill. */
.tool-screen{display:block;overflow:hidden}
.tool-app{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;height:100%;padding:64px 16px 16px;box-sizing:border-box}
.tool-panel{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding:4px 4px 4px 0}
.tool-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 8px;min-height:36px;padding:6px 12px;border-radius:10.8px;background:#f5f5f5;font-size:13px;color:#525252}
.tool-field>span{font-weight:500;color:#0a0a0a}
.tool-field select{grid-column:1/-1;height:32px;padding:0 8px;border:1px solid #e5e5e5;border-radius:8.8px;background:#fff;font:inherit;font-size:14px;color:#0a0a0a}
.tool-slider output{font-variant-numeric:tabular-nums;color:#525252}
.tool-slider input{grid-column:1/-1;width:100%;margin:0;accent-color:#b5462a}
.tool-color{grid-template-columns:1fr 28px 84px}
.tool-color input[type=color]{width:28px;height:28px;padding:0;border:1px solid #e5e5e5;border-radius:8px;background:none;cursor:pointer}
.tool-color input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.tool-color input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.tool-color input[type=text]{height:28px;padding:0 8px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;font:inherit;font-size:13px;color:#0a0a0a;text-transform:lowercase}
.tool-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:8px}
.tool-actions .pb-button,.tool-primary{width:100%}
.tool-primary{height:40px}
.tool-stage{position:relative;min-width:0;min-height:0;border-radius:20px;overflow:hidden;background:#f4f4f4}
.tool-canvas{display:block;width:100%;height:100%}
.tool-stage-bar{position:absolute;left:16px;bottom:16px;display:flex;gap:8px}
.tool-stage-bar .pb-button{background:#fffffff0}
.tool-dialog{width:min(760px,calc(100vw - 48px));max-height:calc(100vh - 96px);padding:0;border:0;border-radius:20px;box-shadow:0 24px 64px #17171733}
.tool-dialog::backdrop{background:#0a0a0a33}
.tool-dialog header,.tool-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}
.tool-dialog footer{justify-content:flex-end}
.tool-dialog h2{margin:0;font-size:16px;font-weight:600;color:#0a0a0a}
.tool-dialog pre{margin:0 20px;max-height:52vh;overflow:auto;padding:16px;border-radius:12px;background:#f5f5f5;font-size:12px;line-height:18px}
.tool-soon{margin:24px;font-size:14px;color:#525252}
@media(max-width:900px){.tool-app{grid-template-columns:1fr;grid-template-rows:auto minmax(320px,1fr);overflow:auto}.tool-panel{overflow:visible}}
/* Texture Filter: the effect stack as grey groups (one per effect, its name and move/remove at the top), the image
   fitted whole on the stage. */
.tool-actions-top{margin-top:0;padding-top:0}
.tool-actions-top label.pb-button{cursor:pointer}
.tf-stack{display:flex;flex-direction:column;gap:8px}
.tf-effect{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:14px;background:#fafafa;box-shadow:inset 0 0 0 1px #e5e5e5}
.tf-effect header{display:flex;align-items:center;justify-content:space-between;padding:0 4px;font-size:13px;color:#0a0a0a}
.tf-effect header span{display:flex}
.tf-effect .tool-field{background:#f0f0f0}
.tf-color{grid-template-columns:1fr 28px}
.tf-none{margin:4px 4px 0;font-size:13px;line-height:20px;color:#525252}
.tf-stage{display:grid;place-items:center}
.tf-canvas{max-width:calc(100% - 32px);max-height:calc(100% - 32px);width:auto;height:auto;border-radius:8px;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
.tf-empty{position:absolute;margin:0;font-size:14px;color:#525252}
.tf-check input{width:16px;height:16px;margin:0;accent-color:#b5462a}
/* Shape Builder: the work surface is a light grid; the selected shape shows a thin dark frame and a square handle. */
.sb-stage{display:grid;place-items:center;background:#fafafa}
.sb-svg{width:100%;height:100%;touch-action:none;user-select:none;fill:#000;stroke:none;stroke-width:0}
.sb-hits rect{cursor:move}
.sb-sel{stroke:#0a0a0a;stroke-width:1;stroke-dasharray:4 3;pointer-events:none}
.sb-handle{fill:#fff;stroke:#0a0a0a;stroke-width:1.5;cursor:nwse-resize}
/* Dropdown (tool-ui.js choice): the button is a white 32px field like the other inputs; the list is the gallery's
   .pb-menu (white, 10.8px corners, hairline, soft shadow) at the button's width, the chosen item marked with a check. */
.tool-choice .pb-menu-wrap{grid-column:1/-1}
.tool-choice-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:32px;padding:0 10px;border:1px solid #e5e5e5;border-radius:8.8px;background:#fff;font:inherit;font-size:14px;color:#0a0a0a;cursor:pointer}
.tool-choice-button b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-choice-button svg{width:16px;height:16px;color:#737373;transition:transform .15s}
.tool-choice-button[aria-expanded=true] svg{transform:rotate(180deg)}
.tool-choice-button:focus-visible,.tool-choice .pb-menu-item:focus-visible{outline:2px solid #0a0a0a;outline-offset:1px}
.tool-choice-menu{left:0;right:0;width:auto;max-height:320px;overflow:auto}
.tool-choice .pb-menu-item svg{visibility:hidden;color:#0a0a0a}
.tool-choice .pb-menu-item[aria-selected=true] svg{visibility:visible}