/* ============================================================
   BASE — reset, tipografia, moldura de dispositivo, utilitários
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ------------------------ ambiente / fundo ------------------------ */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(255, 77, 0, .16), transparent 70%),
    radial-gradient(50% 40% at 85% 105%, rgba(255, 77, 0, .08), transparent 70%),
    var(--bg);
}

/* ------------------------ moldura do aparelho ------------------------ */
.device {
  position: relative;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0;
}

.app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}

/* ------------------------ tela (scroll) ------------------------ */
.screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: calc(var(--safe-t) + var(--sp-3));
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  position: relative;
}
.screen::-webkit-scrollbar { display: none; }
.screen--no-tab { padding-bottom: calc(var(--safe-b) + 24px); }

/* ------------------------ transição de tela ------------------------ */
@keyframes screen-in-fwd {
  from { opacity: 0; transform: translate3d(20px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes screen-in-back {
  from { opacity: 0; transform: translate3d(-20px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.screen[data-dir="fwd"]  > .page { animation: screen-in-fwd var(--d-3) var(--e-spring) both; }
.screen[data-dir="back"] > .page { animation: screen-in-back var(--d-3) var(--e-spring) both; }

/* ------------------------ utilitários ------------------------ */
.page { padding-top: 4px; }

.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.stack { display: flex; flex-direction: column; }
.grow { flex: 1 1 auto; min-width: 0; }
.px { padding-left: var(--pad); padding-right: var(--pad); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2 { color: var(--txt-2); }
.t3 { color: var(--txt-3); }
.accent { color: var(--accent); }
.mono { font-variant-numeric: tabular-nums; }

.ico { width: 24px; height: 24px; fill: none; stroke: currentColor;
       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ico--sm { width: 18px; height: 18px; }
.ico--xs { width: 15px; height: 15px; }
.ico--lg { width: 28px; height: 28px; }
.ico--fill { fill: currentColor; stroke: none; }

/* marca — herda a cor do contexto (svg inline em assets/js/brand.js) */
.logo { height: 30px; width: auto; fill: currentColor; stroke: none; display: block; flex: 0 0 auto; }
.logo--sm { height: 22px; }
.logo--lg { height: 40px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* skeleton */
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--bg-elev-2) 25%, var(--bg-elev-3) 37%, var(--bg-elev-2) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

/* reveal em cascata */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.rise { animation: rise var(--d-4) var(--e-reveal) both; }
.rise-1 { animation-delay: 40ms; } .rise-2 { animation-delay: 80ms; }
.rise-3 { animation-delay: 120ms; } .rise-4 { animation-delay: 160ms; }
.rise-5 { animation-delay: 200ms; } .rise-6 { animation-delay: 240ms; }
.rise-7 { animation-delay: 280ms; } .rise-8 { animation-delay: 320ms; }

/* ------------------------ reduced motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rise, .screen[data-dir] > .page { transform: none !important; }
}

/* ------------------------ responsivo estreito ------------------------ */
@media (max-width: 359px) {
  :root { --pad: 16px; }
}