.sg { display: grid; gap: 20px; }
.sg .kv-msg { margin: 0; }
.sg-work { display: grid; gap: 16px; }
.sg-filebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.sg-filebar p { margin: 0; overflow-wrap: anywhere; }

.sg-layout { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .sg-layout { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .sg-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* Páginas */
.sg-pages {
  display: grid; gap: 18px; padding: 16px; border-radius: 12px; background: var(--sunken);
}
@media (min-width: 900px) { .sg-pages { max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; } }
@media (max-width: 520px) { .sg-pages { padding: 8px; gap: 12px; } }
.sg-page { position: relative; width: 100%; max-width: 820px; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.sg-page.is-active { outline: 3px solid var(--kit); outline-offset: 3px; }
.sg-page canvas { display: block; width: 100%; height: 100%; }
.sg-layer { position: absolute; inset: 0; }
.sg-page-num {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px;
  background: rgba(20, 33, 61, 0.75); color: #fff; font-size: 0.8rem; pointer-events: none;
}

/* Assinaturas e textos colocados */
.sg-item { position: absolute; touch-action: none; cursor: move; outline: 1.5px dashed rgba(47, 91, 234, 0.75); outline-offset: 2px; }
.sg-item:focus-visible, .sg-item.is-moving { outline: 2px solid var(--focus); }
.sg-item img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.sg-item span:first-child {
  display: block; white-space: nowrap; line-height: 1.3; padding-left: 0.1em;
  font-family: Helvetica, Arial, sans-serif; pointer-events: none; user-select: none;
}
/* Botões de remover e de tamanho: só no item selecionado (ou sob o mouse), para não cobrir itens pequenos. */
.sg-item-del {
  position: absolute; top: -30px; right: -6px; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; background: var(--err); color: #fff; font: 700 16px/1 var(--font); cursor: pointer;
}
.sg-item-handle {
  position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 4px;
  border: 2px solid #fff; background: var(--focus); cursor: nwse-resize;
}
.sg-item:not(:hover):not(:focus-within):not(.is-moving) .sg-item-del,
.sg-item:not(:hover):not(:focus-within):not(.is-moving) .sg-item-handle { visibility: hidden; }
.sg-item:not(:hover):not(:focus-within):not(.is-moving) { outline-color: rgba(47, 91, 234, 0.4); }
@media (pointer: coarse) {
  .sg-item-del { width: 30px; height: 30px; top: -38px; right: -8px; }
  .sg-item-handle { width: 22px; height: 22px; right: -12px; bottom: -12px; }
}

/* Painel lateral */
.sg-side { display: grid; gap: 16px; align-content: start; }
.sg-box { display: grid; gap: 12px; padding: 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); }
.sg-box h2 { font-size: 1.08rem; font-weight: 720; }
.sg-box .kv-tab { padding: 8px 10px; }
.sg-panel { display: grid; gap: 8px; }
.sg-pad {
  width: 100%; height: 150px; touch-action: none; cursor: crosshair; border-radius: 10px;
  background: #fff linear-gradient(transparent calc(100% - 38px), #c4cbd8 calc(100% - 38px), #c4cbd8 calc(100% - 37px), transparent calc(100% - 37px));
  border: 2px solid var(--line);
}
.sg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sg-name, .sg-text { max-width: none; width: 100%; }
.sg-row .sg-text { flex: 1; min-width: 140px; width: auto; }
.sg-fonts { display: grid; gap: 6px; }
.sg-font {
  min-height: 56px; padding: 4px 12px; border: 2px solid var(--line); border-radius: 10px; background: #fff;
  text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3;
}
.sg-font[aria-checked='true'] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--kit); }
.sg-upload { position: relative; justify-self: start; }
.sg-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sg-image-preview { display: grid; place-items: center; min-height: 80px; padding: 8px; border-radius: 10px; background: #fff; border: 2px solid var(--line); }
.sg-image-preview canvas { max-width: 100%; max-height: 120px; }
.sg-colors .kv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 0.9rem; }
.sg-color i { width: 14px; height: 14px; border-radius: 50%; }
.sg-box > .kv-btn--primary { justify-self: start; }
.sg-box p { margin: 0; }

.sg-finish { display: grid; gap: 10px; }
.sg-finish p { margin: 0; }
.sg-finish .kv-btn--big { justify-self: stretch; }
.sg-done { color: var(--muted); font-weight: 600; }
.sg-done:empty { display: none; }