/* =========================================================
   Ateliê, Mercadinho e decoração da Casa Mágica
   ========================================================= */
.screen--workshop .shop-pages { grid-template-columns: repeat(2, 1fr); }
.ws-body { display: flex; flex-direction: column; gap: var(--s-3); }

/* ---------- prancheta ---------- */
.pad { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.pad__frame {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  /* Xadrez claro: mostra o que é transparente (o que não vira objeto). */
  background:
    repeating-conic-gradient(#f1f5f9 0 25%, #e2e8f0 0 50%) 0 0 / 28px 28px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
}
.pad__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

/* ---------- ações: desfazer, limpar, tela cheia (separadas das ferramentas) ---------- */
.pad-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pad-action {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 12px 0 6px;
  border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  background: var(--glass-surface-strong); color: var(--text-primary);
  font: inherit; font-family: var(--font-display); font-size: 0.86rem; cursor: pointer;
}
.pad-action__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e2e8f0; color: #1f2937; }
.pad-action__icon svg { width: 22px; height: 22px; display: block; }
.pad-action:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.pad-action:active { transform: scale(0.97); }

/* ---------- seções dos controles ---------- */
.pad-section { display: flex; flex-direction: column; gap: 6px; }
.pad-section[hidden] { display: none; }
.pad-section__title { margin: 0; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); text-transform: uppercase; }

/* ---------- ferramentas: cartões com desenho e nome ---------- */
.pad-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pad-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 92px; padding: 8px 4px;
  border: 2px solid var(--glass-border); border-radius: var(--r-md);
  background: var(--glass-surface); color: var(--text-primary);
  font: inherit; cursor: pointer;
}
.pad-tool__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #eef2ff; }
.pad-tool__icon svg { width: 36px; height: 36px; display: block; }
.pad-tool__label { font-family: var(--font-display); font-size: 0.9rem; }
.pad-tool__hint { font-size: 0.68rem; color: var(--text-muted); line-height: 1.1; text-align: center; }
.pad-tool.is-active { border-color: var(--brand-mint); background: color-mix(in srgb, var(--brand-mint) 24%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-mint) 40%, transparent); }
.pad-tool.is-active .pad-tool__icon { background: #fff; }
.pad-tool:focus-visible, .pad-color:focus-visible, .pad-width:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }

/* ---------- espessura ---------- */
.pad-widths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pad-width {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  border: 2px solid var(--glass-border); border-radius: var(--r-pill);
  background: var(--glass-surface); color: var(--text-primary); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.pad-width__line { flex: 1; height: var(--line); min-width: 18px; border-radius: 99px; background: currentColor; }
.pad-width.is-active { border-color: var(--brand-mint); background: color-mix(in srgb, var(--brand-mint) 24%, transparent); }

/* ---------- cores: paleta, "mais cores" e a cor escolhida ---------- */
.pad-palette { display: flex; flex-direction: column; gap: 8px; }
.pad-palette__row { display: flex; gap: 8px; align-items: stretch; }
.pad-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; flex: 1; }
.pad-colors--custom { grid-template-columns: repeat(auto-fill, minmax(36px, 44px)); }
.pad-colors[hidden] { display: none; }
.pad-color {
  aspect-ratio: 1;
  min-height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
}
.pad-color.is-active { border-color: #fff; box-shadow: 0 0 0 3px var(--brand-mint); transform: scale(1.06); }
.pad-picker {
  position: relative; flex: 0 0 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed var(--glass-border-bright); border-radius: var(--r-md);
  cursor: pointer; text-align: center;
}
.pad-picker__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pad-picker__wheel {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(#f87171, #facc15, #4ade80, #22d3ee, #6366f1, #d946ef, #f87171);
  color: #fff; font-size: 1.5rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.pad-picker__label { font-size: 0.7rem; line-height: 1.1; color: var(--text-secondary); }
.pad-picker:focus-within { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.pad-current { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-secondary); }
.pad-current__swatch { width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }

/* ---------- moldes, formulário e regras ---------- */
.ws-templates, .ws-rules { border-radius: var(--r-md); }
.ws-templates { padding: 10px 12px; background: var(--glass-surface); border: 1px solid var(--glass-border); }
.ws-templates summary, .ws-rules summary { cursor: pointer; font-family: var(--font-display); min-height: 32px; display: flex; align-items: center; gap: 4px; }
.ws-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 8px; }
.ws-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--glass-surface-soft);
  color: var(--text-secondary);
  font-size: 0.72rem;
  cursor: pointer;
}
.ws-template__art { width: 52px; height: 44px; display: block; }
.ws-template__art svg { width: 100%; height: 100%; }

.ws-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.ws-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-field__label { font-family: var(--font-display); font-size: 0.85rem; color: var(--text-secondary); }
.ws-input, .ws-select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
}
.ws-input:focus-visible, .ws-select:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 1px; }
.ws-hint { color: var(--state-danger); font-size: 0.82rem; }
.ws-hint[hidden] { display: none; }
.ws-behaviors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ws-rules ul, .ws-rule-list { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--text-secondary); }
.ws-create { width: 100%; }
.ws-create:disabled { opacity: 0.7; cursor: progress; }

/* ---------- coleção e vitrine ---------- */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ws-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; text-align: center; min-width: 0; }
.ws-card__img, .ws-created__img {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.ws-created__img { max-width: 180px; margin: 0 auto; }
.ws-card__name { font-family: var(--font-display); font-size: 0.95rem; overflow-wrap: anywhere; }
.ws-card__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.ws-card__actions .gbtn { flex: 1 1 auto; min-height: 40px; font-size: 0.82rem; padding: 0 10px; }
.ws-tag {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  background: var(--glass-surface-strong);
  color: var(--text-secondary);
}
.ws-tag--listed { background: color-mix(in srgb, var(--brand-mint) 25%, transparent); color: var(--coin-common); }
.ws-tag--pending { background: color-mix(in srgb, var(--state-warning) 22%, transparent); color: var(--state-warning); }
.ws-tag--bought { background: color-mix(in srgb, var(--brand-purple) 25%, transparent); color: var(--coin-premium); }
.ws-report {
  flex: 0 0 auto !important;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.ws-more { align-self: center; margin-top: 10px; }

.ws-empty, .ws-guest { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; text-align: center; }
.ws-empty__icon, .ws-guest__icon { font-size: 2.4rem; }

.ws-piggy { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.ws-piggy__icon { font-size: 2rem; }
.ws-piggy__text { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-explain { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.ws-link { border: 0; background: none; color: var(--brand-mint); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }

/* ---------- casa: atalhos e decoração ---------- */
.house-create { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex-shrink: 0; position: relative; z-index: 3; }
.house-create[hidden] { display: none; }
.house-create__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  background: var(--glass-surface-strong);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.9rem;
  cursor: pointer;
}
.house-create__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.house-explore[hidden] { display: none; }

.house-decor { position: relative; z-index: 3; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); }
.house-decor[hidden] { display: none; }
.house-decor__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.house-decor__head strong { font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.house-decor__done { min-height: 40px; }
.house-decor__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.house-decor__tools .gbtn { min-height: 40px; padding: 0 12px; }
.house-decor__strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.house-decor__item {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  background: var(--glass-surface);
  color: var(--text-primary);
  font-size: 1.6rem;
  cursor: pointer;
}
.house-decor__item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.house-decor__empty { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; }

/* Na decoração, os objetos do cômodo ficam parados; só os da criança se movem. */
.room--editable .room__obj.is-locked { pointer-events: none; outline: none; cursor: default; }

@media (max-height: 700px) {
  .house-create__btn { min-height: 38px; font-size: 0.82rem; }
}
.room--editable .room__obj.is-locked .room__obj-art > img, .room--editable .room__obj.is-locked .room__obj-art > svg * { pointer-events: none; }
@media (max-width: 400px) {
  .pad-tool { min-height: 84px; }
  .pad-tool__hint { display: none; }
  .pad-action { padding-right: 10px; font-size: 0.8rem; }
}

/* ---------- estilo do objeto: desenho livre ou estilo do jogo (SVG) ---------- */
.ws-styles { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.ws-styles__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ws-style {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-surface-soft);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ws-style.is-active { border-color: var(--brand-purple); background: color-mix(in srgb, var(--brand-purple) 22%, transparent); }
.ws-style:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.ws-style__icon { font-size: 1.3rem; }
.ws-style strong { font-family: var(--font-display); font-size: 0.92rem; }
.ws-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ws-preview__art {
  width: min(100%, 200px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  /* Mesmo fundo do quarto, para a prévia parecer o objeto na casa. */
  background: linear-gradient(180deg, #1c5160 0 61%, #6b4630 61% 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.ws-preview__art > svg { width: 82%; height: 82%; }
.ws-preview__art[data-empty]::after { content: 'Desenhe para ver a prévia'; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }

/* ---------- superfície: tinta (canvas) + forma em ajuste (SVG) ---------- */
.pad__surface { position: relative; width: 100%; height: 100%; touch-action: none; }
.pad__overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pad__guide { stroke: #6366f1; stroke-width: 2.5; stroke-dasharray: 8 8; opacity: 0.7; }
.pad__box { fill: none; stroke: #334155; stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.6; }
.pad__handle { fill: #fff; stroke: #0f172a; stroke-width: 3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.pad__handle--bend { fill: #a855f7; stroke: #fff; stroke-width: 4; }
.pad__flex { fill: #facc15; stroke: #713f12; stroke-width: 2.5; }
.pad__controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------- painel de formas ---------- */
.ws-shapes { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-md); background: color-mix(in srgb, var(--bg-deep) 45%, transparent); border: 1px solid var(--glass-border); }
.ws-shapes[hidden] { display: none; }
.ws-shapes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ws-shape {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 64px; padding: 6px 2px;
  border: 1px solid var(--glass-border); border-radius: var(--r-sm);
  background: var(--glass-surface-soft); color: var(--text-primary);
  font: inherit; cursor: pointer;
}
.ws-shape.is-active { border-color: var(--brand-purple); background: color-mix(in srgb, var(--brand-purple) 26%, transparent); }
.ws-shape:focus-visible, .ws-chip:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.ws-shape__icon { width: 30px; height: 30px; color: #c4b5fd; }
.ws-shape.is-active .ws-shape__icon { color: #fff; }
.ws-shape__icon svg { width: 100%; height: 100%; display: block; }
.ws-shape__name { font-size: 0.68rem; line-height: 1.1; text-align: center; color: var(--text-secondary); }
.ws-shapes__hint { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.ws-shapes__fill { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-shapes__fill[hidden] { display: none; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  background: var(--glass-surface-soft); color: var(--text-primary); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.ws-chip.is-active { border-color: var(--brand-purple); background: color-mix(in srgb, var(--brand-purple) 26%, transparent); }
.ws-shapes__tweaks { display: grid; gap: 10px; }
.ws-shapes__tweaks:empty, .ws-shapes__actions:empty { display: none; }
.ws-slider { display: flex; flex-direction: column; gap: 4px; }
.ws-slider__label { display: flex; flex-direction: column; }
.ws-range { width: 100%; min-height: 36px; accent-color: #a855f7; }
.ws-shapes__actions { display: flex; gap: 8px; }
.ws-shapes__actions .gbtn { flex: 1; min-height: 44px; }

/* ---------- tela cheia (mesmo modo dos jogos) ---------- */
body.is-workshop-fullscreen { overflow: hidden; }
body.is-workshop-fullscreen .topbar,
body.is-workshop-fullscreen .nav,
body.is-workshop-fullscreen .notification-button,
body.is-workshop-fullscreen .status-dock { display: none !important; }
/* A animação de entrada usa transform, que prenderia o position: fixed. */
body.is-workshop-fullscreen .screen { animation: none; transform: none; }
.pad.is-fullscreen {
  position: fixed; inset: 0; z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-radius: 0;
  background: #0b1224;
  overflow: hidden;
}
/* A prancheta é o maior quadrado que cabe no espaço que sobra. */
.pad.is-fullscreen .pad__stage { container-type: size; min-height: 0; min-width: 0; display: grid; place-items: center; }
.pad.is-fullscreen .pad__frame { width: min(100cqw, 100cqh); max-width: none; margin: 0; }
.pad.is-fullscreen .pad__controls { max-height: 38dvh; overflow-y: auto; }
.pad.is-fullscreen .pad-colors:not(.pad-colors--custom) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pad.is-fullscreen .pad-tool { min-height: 72px; }
.pad.is-fullscreen .pad-tool__hint { display: none; }
.pad.is-fullscreen .ws-shapes__grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
/* Deitado (tablet, celular de lado): prancheta à esquerda, controles à direita. */
@media (orientation: landscape) {
  .pad.is-fullscreen { grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); grid-template-rows: auto minmax(0, 1fr); }
  .pad.is-fullscreen .pad-actions { grid-column: 1 / -1; }
  .pad.is-fullscreen .pad__stage { grid-row: 2; }
  .pad.is-fullscreen .pad__controls { grid-row: 2; max-height: none; height: 100%; }
  .pad.is-fullscreen .pad-colors:not(.pad-colors--custom) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .pad.is-fullscreen .pad-colors:not(.pad-colors--custom) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- caprichado com IA ---------- */
.ws-styles__row:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .ws-styles__row:has(> :nth-child(3)) { grid-template-columns: 1fr; } }
.ws-ai-note { margin: 0; }
.ws-tag--ai { background: color-mix(in srgb, var(--brand-violet) 28%, transparent); color: #ddd6fe; }
.ws-ai-wait { align-items: center; }
.ws-ai-wait__spinner {
  width: 54px; height: 54px; border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--brand-purple) 25%, transparent);
  border-top-color: var(--brand-purple);
  animation: ws-spin 0.9s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ws-ai-wait__spinner { animation-duration: 3s; } }

/* ---------- elemento escolhido (ferramenta Mexer) ---------- */
.pad-action:disabled { opacity: 0.45; cursor: default; }
.pad-selection {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 2px solid #a78bfa; border-radius: var(--r-md);
  background: color-mix(in srgb, #a78bfa 16%, transparent);
}
.pad-selection[hidden] { display: none; }
.pad-selection__hint { margin: 0; }
.pad-edits { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.pad-edit {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  border: 1px solid var(--glass-border); border-radius: var(--r-md);
  background: var(--glass-surface-strong); color: var(--text-primary);
  font: inherit; font-family: var(--font-display); font-size: 0.78rem; cursor: pointer;
}
.pad-edit__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; }
.pad-edit__icon svg { width: 28px; height: 28px; display: block; }
.pad-edit:disabled { opacity: 0.4; cursor: default; }
.pad-edit[data-edit="done"] { border-color: var(--brand-mint); }
.pad-edit[data-edit="delete"] .pad-edit__icon { background: #fee2e2; }
.pad-edit:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }
.pad-edit:active:not(:disabled) { transform: scale(0.96); }
.pad__handle--scale { fill: #a78bfa; stroke: #fff; stroke-width: 4; }
.ws-shapes__grid[hidden], .ws-shapes .pad-section__title[hidden] { display: none; }
.pad.is-fullscreen .pad-selection__hint { display: none; }
/* Cinco ferramentas cabem em telas estreitas. */
.pad-tool { min-width: 0; }
.pad-tool__label { font-size: 0.84rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad__controls { overflow-x: hidden; }
@media (max-width: 440px) {
  .pad-tools { gap: 4px; }
  .pad-tool { padding: 6px 2px; }
  .pad-tool__icon { width: 38px; height: 38px; }
  .pad-tool__icon svg { width: 30px; height: 30px; }
  .pad-tool__label { font-size: 0.74rem; }
  .pad-actions { flex-wrap: wrap; }
}
/* Tela cheia: a barra do elemento escolhido fica sempre à vista, no alto dos controles. */
.pad.is-fullscreen .pad-selection { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, #a78bfa 22%, #0b1224); }
.pad.is-fullscreen .pad-edits { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.pad.is-fullscreen .pad-edit__icon { width: 28px; height: 28px; }
.pad.is-fullscreen .pad-edit__icon svg { width: 22px; height: 22px; }
.pad.is-fullscreen .pad-edit { font-size: 0.7rem; padding: 4px 2px; }