/* Photoboo Web — pastel neon buttons (owner request 07/10/2026, reference: pastel glass app icons).
   Product only (injected by _middleware.js after the other product styles). Prototype: docs/prototipos/botoes-neon.html */
.mode-app {
  --n-lav: 196 168 255; --n-mint: 120 236 200; --n-pink: 255 150 180; --n-peach: 255 176 130; --n-sun: 255 214 110;
}

/* ---------- studio menu: big tiles (built by neon.js) ---------- */
.pb-neon-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 22px 16px; margin: 6px 0 34px; }
.pb-neon-menu[hidden] { display: none; }
.pb-locked .pb-neon-menu { display: none !important; }
.neon { --c: var(--n-lav); position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px; min-width: 0; padding: 0; border: 0; background: none; color: #e9e3f7; font: 600 13px/1.25 "DM Sans", sans-serif; letter-spacing: .02em; cursor: pointer; }
.neon.lav { --c: var(--n-lav); } .neon.mint { --c: var(--n-mint); } .neon.pink { --c: var(--n-pink); } .neon.peach { --c: var(--n-peach); } .neon.sun { --c: var(--n-sun); }
.neon .tile { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 26px;
  background: linear-gradient(150deg, rgb(255 255 255 / .07), rgb(var(--c) / .17));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .28), inset 0 0 0 7px rgb(var(--c) / .12), inset 0 0 18px rgb(var(--c) / .45),
              0 0 0 1px rgb(var(--c) / .35), 0 10px 26px rgb(var(--c) / .22);
  transition: transform .18s ease, box-shadow .18s ease; }
.neon .tile::before { content: ""; position: absolute; inset: 9px; border-radius: 19px; border: 2.5px solid rgb(255 255 255 / .95);
  box-shadow: 0 0 6px rgb(var(--c)), 0 0 14px rgb(var(--c) / .8), inset 0 0 6px rgb(var(--c) / .9); }
.neon svg { position: relative; width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgb(var(--c))) drop-shadow(0 0 6px rgb(var(--c) / .9)); }
.neon .lbl { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neon .dot { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: #6b6873; box-shadow: 0 0 0 3px #1b1d20; display: none; }
.neon.on .dot { display: block; background: #58e08a; box-shadow: 0 0 0 3px #1b1d20, 0 0 10px #58e08a; }
.neon.warn .dot { display: block; background: #ffc56b; box-shadow: 0 0 0 3px #1b1d20, 0 0 10px #ffc56b; }
.neon:hover .tile { transform: translateY(-3px); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .4), inset 0 0 0 7px rgb(var(--c) / .16), inset 0 0 26px rgb(var(--c) / .6), 0 0 0 1px rgb(var(--c) / .5), 0 16px 34px rgb(var(--c) / .35); }
.neon:active .tile { transform: translateY(1px) scale(.97); }
.neon:focus-visible { outline: none; }
.neon:focus-visible .tile { outline: 3px solid rgb(var(--c)); outline-offset: 4px; }

/* the header chips that became tiles stay in the page (they keep their handlers) but are not shown twice */
.mode-app.pb-neon-ready .top-tools > #event-chip,
.mode-app.pb-neon-ready .top-tools > #guest-chip,
.mode-app.pb-neon-ready .top-tools > #gallery-chip,
.mode-app.pb-neon-ready .top-tools > #print-chip,
.mode-app.pb-neon-ready .top-tools > #pb-my-galleries { display: none !important; }

/* ---------- header icon buttons (⚙ ⛶) ---------- */
.mode-app .top-tools .icon-btn { --c: var(--n-lav); width: 48px; height: 48px; border-radius: 15px; border: 0; color: #fff; font-size: 19px;
  text-shadow: 0 0 6px rgb(var(--c)), 0 0 12px rgb(var(--c) / .8);
  background: linear-gradient(150deg, rgb(255 255 255 / .07), rgb(var(--c) / .18));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55), inset 0 0 12px rgb(var(--c) / .5), 0 0 0 1px rgb(var(--c) / .35), 0 6px 16px rgb(var(--c) / .25); }
.mode-app .top-tools #btn-full { --c: var(--n-mint); }
.mode-app .top-tools .icon-btn:hover { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .8), inset 0 0 18px rgb(var(--c) / .7), 0 0 0 1px rgb(var(--c) / .5), 0 10px 22px rgb(var(--c) / .4); }

/* credits chip: neon pill */
.mode-app .top-tools #billing-chip { --c: var(--n-sun); border: 0; color: #fff4d6; text-shadow: 0 0 8px rgb(var(--c) / .8);
  background: linear-gradient(150deg, rgb(255 255 255 / .06), rgb(var(--c) / .16));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .4), inset 0 0 12px rgb(var(--c) / .45), 0 0 0 1px rgb(var(--c) / .35), 0 6px 16px rgb(var(--c) / .2); }

/* ---------- text buttons ---------- */
.mode-app .pill { --c: var(--n-lav); border: 0; color: #f4f0ff; text-shadow: 0 0 8px rgb(var(--c) / .7);
  background: linear-gradient(150deg, rgb(20 18 28 / .72), rgb(var(--c) / .2)); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55), inset 0 0 12px rgb(var(--c) / .45), 0 0 0 1px rgb(var(--c) / .3), 0 6px 18px rgb(var(--c) / .22); }
.mode-app .pill:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .8), inset 0 0 16px rgb(var(--c) / .6), 0 0 0 1px rgb(var(--c) / .45), 0 10px 22px rgb(var(--c) / .32); }
.mode-app .pill.ghost { background: transparent; box-shadow: none; text-shadow: none; }
.mode-app #btn-download, .mode-app #btn-again { --c: var(--n-mint); }
.mode-app .cta, .mode-app .preview-choose { --c: var(--n-pink); border: 0; color: #2a1020; text-shadow: 0 0 10px rgb(255 255 255 / .85);
  background: linear-gradient(150deg, rgb(255 235 243), rgb(var(--c)));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85), inset 0 0 14px rgb(255 255 255 / .6), 0 0 14px rgb(var(--c) / .75), 0 10px 26px rgb(var(--c) / .4); }
.mode-app .cta:hover, .mode-app .preview-choose:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: inset 0 0 0 2px #fff, inset 0 0 18px rgb(255 255 255 / .7), 0 0 20px rgb(var(--c) / .9), 0 14px 30px rgb(var(--c) / .5); }
.mode-app .pill:focus-visible, .mode-app .cta:focus-visible { outline: 2px solid rgb(var(--c)); outline-offset: 3px; }

@media (max-width: 600px) {
  .pb-neon-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .neon .tile { width: 82px; height: 82px; border-radius: 22px; }
  .neon .tile::before { inset: 8px; border-radius: 16px; }
  .neon svg { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .neon .tile, .mode-app .pill, .mode-app .cta { transition: none; } }

/* Camera / review / result / category buttons: same selectors as the earlier dark-neon treatment in
   workspace-header.css, so the pastel look wins there too. */
.mode-app #cats .chip,
.mode-app #scr-camera :is(button.pill,label.file-pill,.seg),
.mode-app #scr-review :is(.pill,.cta),
.mode-app #scr-result :is(.pill,.cta) {
  --c: var(--n-lav); border: 0; border-radius: 18px; color: #f4f0ff; text-shadow: 0 0 8px rgb(var(--c) / .75);
  background: linear-gradient(150deg, rgb(20 18 28 / .78), rgb(var(--c) / .2));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6), inset 0 0 0 5px rgb(var(--c) / .14), inset 0 0 14px rgb(var(--c) / .5),
              0 0 0 1px rgb(var(--c) / .35), 0 0 12px rgb(var(--c) / .35), 0 8px 18px rgb(0 0 0 / .45);
}
.mode-app #cats .chip:nth-child(3n+2) { --c: var(--n-pink); }
.mode-app #cats .chip:nth-child(3n) { --c: var(--n-mint); }
.mode-app #scr-result #btn-download, .mode-app #scr-result #btn-again { --c: var(--n-mint); }
.mode-app #scr-review #btn-retake, .mode-app #scr-result #btn-hold { --c: var(--n-lav); }
.mode-app #cats .chip.on,
.mode-app #scr-camera .seg.on,
.mode-app #scr-review .cta,
.mode-app #scr-result .cta {
  --c: var(--n-pink); color: #2a1020; text-shadow: 0 0 10px rgb(255 255 255 / .85);
  background: linear-gradient(150deg, rgb(255 235 243), rgb(var(--c)));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .9), inset 0 0 14px rgb(255 255 255 / .6), 0 0 14px rgb(var(--c) / .8), 0 10px 26px rgb(var(--c) / .4);
}
.mode-app #cats .chip.on { --c: var(--n-lav); background: linear-gradient(150deg, rgb(244 238 255), rgb(var(--c))); }
.mode-app #cats .chip:hover,
.mode-app #scr-camera :is(button.pill,label.file-pill,.seg):hover,
.mode-app #scr-review .pill:hover, .mode-app #scr-result .pill:hover {
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85), inset 0 0 0 5px rgb(var(--c) / .2), inset 0 0 18px rgb(var(--c) / .65), 0 0 0 1px rgb(var(--c) / .5), 0 0 18px rgb(var(--c) / .5);
}