:root {
  --brand: #ff005e;
  --brand-2: #ff4a8c;
  --ink: #06060a;
  --surface: #111117;
  --surface-2: #181821;
  --line: rgba(255, 255, 255, 0.1);
  --muted: #a6a6b3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% -10%, rgba(255, 0, 94, 0.30), transparent 30rem),
    radial-gradient(circle at 90% 10%, rgba(255, 74, 140, 0.12), transparent 28rem),
    #06060a;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass {
  border: 1px solid var(--line);
  background: rgba(17, 17, 23, 0.78);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
}

.brand-glow {
  box-shadow: 0 0 0 1px rgba(255, 0, 94, 0.14), 0 12px 40px rgba(255, 0, 94, 0.24);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.product-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.product-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -52% -20%;
  height: 72%;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 0, 94, .23), transparent 66%);
  opacity: 0;
  transition: opacity .25s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 0, 94, .55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}
.product-card:hover::after { opacity: 1; }
.product-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(255,0,94,.18), 0 24px 60px rgba(255,0,94,.14);
}
.product-image-wrap {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 46%),
    linear-gradient(150deg, #ff005e 0%, #9b003a 100%);
}
.product-image {
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .32));
  transition: transform .35s ease;
}
.product-card:hover .product-image { transform: scale(1.045) rotate(-1deg); }

.category-chip { transition: all .2s ease; }
.category-chip.active {
  color: white;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 12px 28px rgba(255,0,94,.22);
}

.modal-backdrop {
  animation: fadeIn .18s ease both;
}
.modal-panel {
  animation: riseIn .22s ease both;
}
.drawer-panel {
  animation: slideIn .24s ease both;
}
.toast {
  animation: toastIn .22s ease both;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pulseSoft { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }

.status-dot { animation: pulseSoft 1.7s ease-in-out infinite; }

.focus-ring:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 0, 94, .14);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

.qr-shell {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ff005e, #ff80ad) border-box;
  border: 5px solid transparent;
}

.seller-status-PAGO { border-left-color: #ff005e !important; }
.seller-status-EM_PREPARO { border-left-color: #f59e0b !important; }
.seller-status-PRONTO { border-left-color: #22c55e !important; }
.seller-status-ENTREGUE { border-left-color: #64748b !important; }
.seller-status-AGUARDANDO_PIX { border-left-color: #38bdf8 !important; }

@media (max-width: 640px) {
  .product-card:hover { transform: none; }
  .drawer-panel { width: 100% !important; }
}