/* Social Image Maker: tool-only styles, built on the shared tokens. © 2026 Tomas Martinez · GPL-3.0-or-later · tm1363-c339e3ad */
.si-viewport { display: grid; place-items: center; padding: 16px; min-height: 320px; outline: none; }
.si-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.si-board { position: relative; box-shadow: var(--shadow); }
.si-board canvas { display: block; }
.si-board #doc { background-color: var(--checker-a); background-image: linear-gradient(45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-b) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.si-overlay { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); touch-action: none; }
.si-status { font-size: 12px; color: var(--text-faint); min-height: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.si-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.si-layer { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 6px 5px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-size: 13px; }
.si-layer:hover { background: var(--bg-elev); }
.si-layer.is-active { border-color: var(--accent); background: var(--accent-soft); }
.si-layer.is-hidden span { opacity: .45; }
.si-layer > svg { width: 16px; height: 16px; color: var(--text-muted); }
.si-layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-layer .acts { display: flex; }
.si-layer .acts button { padding: 4px 5px; }
.si-layer .acts svg { width: 14px; height: 14px; }
.si-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.si-grid2 .ctrl { margin-bottom: 0; }
.si-grid2 input[type="number"] { padding: 6px 8px; }
#props .ctrl-section, #props > .ctrl { margin-bottom: 12px; }
.si-designs { display: grid; gap: 6px; margin-top: 8px; }
.si-design { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.si-design button.name { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--text); cursor: pointer; padding: 4px 0; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-design button.name:hover { color: var(--accent); }
.si-design small { color: var(--text-faint); white-space: nowrap; }