/* ============================================================
   glb_bse001.css — Base global (reset, body, container do app).
   ============================================================ */

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(1200px 480px at 50% -10%, var(--rose-100), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 60px rgba(214, 67, 122, 0.06);
}

@media (min-width: 900px) {
  body { padding: 22px 0 30px; }
  #app {
    min-height: calc(100dvh - 52px);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
  }
}

.font-num   { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.text-ink   { color: var(--ink) !important; }
.text-soft  { color: var(--ink-soft) !important; }
.text-faint { color: var(--ink-faint) !important; }

.hidden { display: none !important; }
.cursor-pointer { cursor: pointer; }

.screen { padding: 16px 16px 96px; }

/* utilitário "dashed" (linha pontilhada estilo caderno) */
.dashed { border-top: 2px dashed var(--border); }