/* Provador de vasos: o mesmo visual da loja 3D (fundo noturno, vidro escuro, dourado, Manrope + Playfair Display). */
:root {
  --fundo: #0a0e18;
  --fundo-2: #121827;
  --vidro: rgb(12 16 28 / .58);
  --vidro-forte: rgb(13 17 29 / .9);
  --linha: rgb(255 255 255 / .1);
  --linha-ouro: rgb(226 194 125 / .38);
  --texto: #f3efe6;
  --texto-2: rgb(243 239 230 / .72);
  --ouro: #e2c27d;
  --ouro-claro: #f3dca4;
  --tinta-ouro: #1c1608;
  --verde-ok: #9fd8a4;
  --alerta: #f2a477;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --topo: 60px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.5 Manrope, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- barra de cima ---------- */
.topo { position: fixed; z-index: 20; top: 0; left: 0; right: 0; min-height: var(--topo); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: rgb(9 12 22 / .55); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; text-decoration: none; }
.nome-marca { font: 600 20px "Playfair Display", Georgia, serif; letter-spacing: .01em; white-space: nowrap; }
.selo { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); white-space: nowrap; }
.pilula { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: rgb(255 255 255 / .05);
  cursor: pointer; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, border-color .2s; }
.pilula:hover { background: rgb(255 255 255 / .1); }
.pilula svg { width: 18px; height: 18px; flex: none; }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--ouro); background: var(--ouro); color: var(--tinta-ouro); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .2s, opacity .2s; }
.botao:hover { background: var(--ouro-claro); }
.botao:active { transform: scale(.98); }
.botao:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.botao svg { width: 22px; height: 22px; flex: none; }
.botao.leve { background: transparent; color: var(--ouro-claro); border-color: var(--linha-ouro); font-weight: 600; min-height: 46px; font-size: 15px; }
.botao.leve:hover { background: rgb(226 194 125 / .08); }

/* ---------- painel (cartão de vidro) ---------- */
.painel { background: var(--vidro-forte); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--linha); border-radius: 22px; box-shadow: 0 24px 70px rgb(0 0 0 / .5); }
.rotulo { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.titulo { margin: 0; font: 500 24px/1.2 "Playfair Display", Georgia, serif; }
.dica { margin: 0; font-size: 13.5px; color: var(--texto-2); }

/* escolhas: chips (vaso) e bolinhas (cor) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .04); cursor: pointer; font-size: 14px; font-weight: 500; }
.chip[aria-pressed="true"] { border-color: var(--ouro); background: rgb(226 194 125 / .16); color: var(--ouro-claro); }
.cores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cor { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .25); padding: 0; cursor: pointer; }
.cor[aria-pressed="true"] { outline: 2px solid var(--ouro); outline-offset: 3px; }
.cor:disabled { opacity: .3; cursor: not-allowed; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linha-ouro); background: rgb(226 194 125 / .07); font-size: 13.5px; color: var(--texto); }
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ouro); }
.aviso.erro { border-color: rgb(242 164 119 / .5); background: rgb(242 164 119 / .08); }
.aviso.erro svg { color: var(--alerta); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }