/* ====== Tema base ====== */
:root{
  --bg:#1e6648;                /* verde de fundo do gradiente */
  --text:#e8eef8;
  --muted:#aab2c0;
  --accent:green;
  --accent-600:#0891b2;
  --ring:rgba(56,189,248,.35);

  --nav-bg:#0f3225;            /* mesma cor do rodapé */
  --footer-bg:#0f3225;

  --panel-top:#161a22;
  --panel-bottom:#10141b;
  --border:#232836;
}

*{ box-sizing:border-box }
html,body{ height:100% }

/* Fundo do site – termina no mesmo tom do rodapé (sem “degrau”) */
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, #0b1220 0%, var(--bg) 45%),
    radial-gradient(1000px 600px at 120% 10%, #0b1220 0%, var(--bg) 40%),
    var(--footer-bg);
}

/* ====== Layout cola-rodapé ====== */
.page{
  min-height: 100dvh;                 /* ocupa a altura da viewport */
  display: grid;
  grid-template-rows: auto 1fr auto;  /* nav | conteúdo | rodapé */
}

/* ====== Container central ====== */
.container,
.app-container{
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 16px;
}

/* ====== Navbar full-bleed ====== */
.nav-bleed{
  width:100vw;
  background:var(--nav-bg);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-bottom:1px solid rgba(0,0,0,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#e8eef8;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
}
.brand img{
  width:34px;
  height:34px;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

.links{ display:inline-flex; gap:14px }
.links a{
  color:#a9c8bc;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
  transition:background .15s ease, color .15s ease;
}
.links a:hover{ background:rgba(255,255,255,.06); color:#e8eef8 }
.links a[aria-current="page"]{ background:rgba(255,255,255,.10); color:#fff }

/* ====== Rodapé full-bleed ====== */
.footer-bleed{
  width:100vw;
  background:var(--footer-bg);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  box-shadow:0 -8px 24px rgba(0,0,0,.25) inset;
  padding:16px 16px;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  color:#e8eef8;
  text-align:center;
  font-size:12px;
}