/* Toolisco — social post/story/banner makers (page-scoped). */
.tool-app [hidden]{display:none!important}
.tool-app .tool-grid>.tool-panel{min-width:0}
.sm-stage{position:relative;border:1px solid var(--border);border-radius:var(--r-md,10px);padding:8px;
  background-color:#e9edf3;background-image:linear-gradient(45deg,#cfd6df 25%,transparent 25%),linear-gradient(-45deg,#cfd6df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfd6df 75%),linear-gradient(-45deg,transparent 75%,#cfd6df 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.sm-stage canvas{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;margin:0 auto;touch-action:none;cursor:move;border-radius:4px;outline:none}
.sm-stage canvas:focus-visible{box-shadow:0 0 0 3px var(--signal)}
.sm-tall .sm-stage canvas{max-height:72vh;width:auto;max-width:100%}
.sm-layers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sm-layer[aria-pressed=true]{background:var(--grad-soft);border-color:var(--signal);font-weight:600}
.sm-row{display:flex;flex-wrap:wrap;gap:var(--s-2,8px) var(--s-3,12px);align-items:end}
.sm-row>.field{flex:1 1 140px;min-width:0;margin-bottom:0}
.sm-sec{border-top:1px solid var(--border);padding-top:var(--s-3,12px);margin-top:var(--s-3,12px)}
.sm-sec h3{font-size:var(--fs-md,1rem);margin:0 0 var(--s-2,8px)}
.sm-range{display:flex;gap:8px;align-items:center}.sm-range input{flex:1;min-width:0}.sm-range output{min-width:4.5em;font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.tool-app input[type=color].input{height:42px;padding:4px;min-width:64px}
.sm-check{display:inline-flex;gap:.45rem;align-items:center;font-size:var(--fs-sm)}
.sm-out{font-size:var(--fs-sm);overflow-wrap:anywhere;margin:var(--s-2,8px) 0 0}
.tool-app .tool-msg,.tool-app .panel-hint{overflow-wrap:anywhere}