*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; position: relative; overflow-x: hidden;
  background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); line-height: 1.5; overflow-wrap: anywhere;
}
/* Acentos diagonais dourados nos cantos */
.corner { position: fixed; pointer-events: none; width: 70vw; max-width: calc(var(--spacing) * 90); aspect-ratio: 1; z-index: 0; opacity: 0.85; }
.corner-top { top: 0; left: 0; background: linear-gradient(135deg, var(--primary) 0 9%, transparent 9.5%); clip-path: ellipse(100% 60% at 0 0); opacity: 0.55; }
.corner-bottom { bottom: 0; right: 0; background: linear-gradient(315deg, var(--primary) 0 7%, transparent 7.5%); opacity: 0.55; }
.page {
  position: relative; z-index: 1; width: 100%;
  max-width: calc(var(--spacing) * 120); margin: 0 auto;
  padding: max(calc(var(--spacing) * 10), env(safe-area-inset-top)) calc(var(--spacing) * 5) max(calc(var(--spacing) * 8), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: calc(var(--spacing) * 5);
}
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--spacing) * 2); }
.logo-ring {
  width: calc(var(--spacing) * 40); height: calc(var(--spacing) * 40); border-radius: 999px;
  padding: calc(var(--spacing) * 1.5); background: var(--foreground);
  border: calc(var(--spacing) * 1) solid var(--primary);
  margin-bottom: calc(var(--spacing) * 3); flex: none;
}
.store-logo { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }
h1 { margin: 0; font-size: 1.875rem; line-height: 1.15; font-weight: 800; font-style: italic; letter-spacing: -0.01em; color: var(--foreground); }
.accent { color: var(--primary); }
p { margin: 0; color: var(--muted-foreground); }
.store-name { color: var(--foreground); font-weight: 700; font-size: 1rem; }
.store-slogan { font-style: italic; font-size: 0.875rem; }
.swoosh { width: 60%; height: calc(var(--spacing) * 3); color: var(--primary); }
.actions { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 3); }
.btn {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 3);
  width: 100%; min-height: calc(var(--spacing) * 12);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-radius: calc(var(--radius) * 1.5);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-install {
  max-width: calc(var(--spacing) * 80);
  background: var(--primary); color: var(--primary-foreground); border: 1px solid var(--primary);
  min-height: calc(var(--spacing) * 16);
}
.btn-install:hover:not(:disabled) { opacity: 0.92; }
.btn-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.btn-title { font-size: 1.125rem; font-weight: 800; }
.btn-sub { font-size: 0.8125rem; font-weight: 500; }
.btn-outline { max-width: calc(var(--spacing) * 80); background: transparent; color: var(--foreground); border: 1px solid var(--border); font-size: 0.9375rem; }
.btn-outline:hover { border-color: var(--primary); }
.btn:focus-visible, a:focus-visible, button:focus-visible, .installation-help summary:focus-visible {
  outline: calc(var(--spacing) * 0.5) solid var(--ring); outline-offset: calc(var(--spacing) * 0.5);
}
.status { color: var(--foreground); text-align: center; font-size: 0.875rem; }
.status:empty { display: none; }
/* Cor de visualização do DS, não semântica de sucesso: progresso ilustrativo. */
.progress-card {
  background: var(--foreground); color: var(--background);
  border-radius: calc(var(--radius) * 2); padding: calc(var(--spacing) * 5);
  display: flex; flex-direction: column; gap: calc(var(--spacing) * 3);
}
.progress-title { margin: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); font-size: 1.125rem; font-weight: 800; color: var(--background); }
.progress-title svg { color: var(--chart4); flex: none; }
.progress-track { height: calc(var(--spacing) * 7); border-radius: 999px; background: var(--muted-foreground); overflow: hidden; }
.progress-bar {
  height: 100%; width: 0%; min-width: calc(var(--spacing) * 14); border-radius: 999px;
  background: var(--chart4); color: var(--background);
  display: flex; align-items: center; justify-content: center;
  transition: width 300ms ease;
}
.progress-value { font-weight: 800; font-size: 0.875rem; }
.progress-label { color: var(--card); font-size: 0.8125rem; text-align: center; }
.progress-cancel {
  align-self: center; min-height: calc(var(--spacing) * 11);
  background: transparent; border: 0; color: var(--background);
  font: inherit; font-size: 0.8125rem; text-decoration: underline; cursor: pointer;
}
.installation-help { border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); background: var(--card); }
.installation-help summary { min-height: calc(var(--spacing) * 12); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5); cursor: pointer; font-weight: 600; color: var(--foreground); }
.help-content { padding: 0 calc(var(--spacing) * 5) calc(var(--spacing) * 5); display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); }
.help { font-size: 0.875rem; }
.platforms { display: grid; gap: calc(var(--spacing) * 5); }
h3 { margin: 0 0 calc(var(--spacing) * 2); font-size: 1rem; color: var(--foreground); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; color: var(--muted-foreground); font-size: 0.875rem; }
.steps li { counter-increment: step; display: flex; gap: calc(var(--spacing) * 3); align-items: flex-start; }
.steps li + li { margin-top: calc(var(--spacing) * 2); }
.steps li::before {
  content: counter(step); flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground); font-size: 0.75rem; font-weight: 700;
}
.notes { margin: 0; padding-left: calc(var(--spacing) * 5); color: var(--muted-foreground); font-size: 0.8125rem; }
.notes li + li { margin-top: calc(var(--spacing) * 1); }
.product-signature { margin: calc(var(--spacing) * 2) 0 0; text-align: center; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
@media (max-width: 360px) {
  .page { padding-left: calc(var(--spacing) * 4); padding-right: calc(var(--spacing) * 4); }
  .logo-ring { width: calc(var(--spacing) * 32); height: calc(var(--spacing) * 32); }
  h1 { font-size: 1.5rem; }
}
@media (min-width: 640px) { .platforms { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .page { padding-top: calc(var(--spacing) * 16); } h1 { font-size: 2.25rem; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .progress-bar { transition: none; }
  .btn:active { transform: none; }
}