/* ══════════════════════════════════════
   BASE — variáveis, reset, utilitários
   ══════════════════════════════════════ */

:root {
  --bg: #080e09;
  --surface: #0e1a10;
  --card: #132116;
  --border: rgba(255,255,255,0.08);
  --border-focus: rgba(13,107,53,0.6);
  --green: #0d6b35;
  --green-mid: #15a04f;
  --green-light: #22c55e;
  --purple: #0d6b35;
  --purple-mid: #15a04f;
  --purple-light: #4ade80;
  --gold: #c9a227;
  --gold-light: #f0d060;
  --rose: #f43f5e;
  --teal: #14b8a6;
  --text: #edf5ee;
  --muted: #6b8f72;
  --danger: #f87171;
  --success: #4ade80;
  --radius: 24px;
  --shadow: 0 32px 80px rgba(0,0,0,0.6);

  /* Safe areas (iPhone notch / Dynamic Island / home bar) */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  overscroll-behavior: none;
  height: 100%;
  height: -webkit-fill-available;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;

  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Evita seleção acidental durante swipe */
  -webkit-user-select: none;
  user-select: none;
}

/* Permite seleção em campos de texto */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Fundo decorativo */
.bg-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(26,74,46,.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(201,162,39,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 70%, rgba(42,110,69,.12) 0%, transparent 50%);
}

.cross-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Crect x='27' y='10' width='6' height='40'/%3E%3Crect x='10' y='27' width='40' height='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Estrelas */
.stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.star  { position: absolute; border-radius: 50%; background: rgba(255,255,255,.7); animation: twinkle linear infinite alternate; }

/* Toast */
.toast, #toast {
  position: fixed;
  top: calc(24px + var(--sat));
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 22px;
  font-size: 13px; font-weight: 500; color: var(--text);
  opacity: 0; transition: all .3s;
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  max-width: calc(100vw - 40px);
  white-space: normal;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Spinner */
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: white; border-radius: 50%;
  animation: spin .7s linear infinite; display: none;
}
.loading .spinner  { display: inline-block; }
.loading .btn-label { display: none; }

/* Utilidades */
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.text-center { text-align: center; }
.text-muted  { color: var(--muted); font-size: 14px; }
.link        { color: var(--green-light); cursor: pointer; font-weight: 600; }
.hidden      { display: none !important; }
.scrollable  { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.scrollable::-webkit-scrollbar { display: none; }

/* Animações compartilhadas */
@keyframes twinkle  { 0% { opacity: .1; transform: scale(1); }   100% { opacity: .6; transform: scale(1.4); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fadeIn   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse    { 0%,100% { opacity:.4; transform:scale(.9); } 50% { opacity:1; transform:scale(1.1); } }
@keyframes glow     { from { box-shadow: 0 0 40px rgba(124,58,237,.2); } to { box-shadow: 0 0 80px rgba(124,58,237,.4); } }
@keyframes floatUp  { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-120px) scale(1.4); } }