html,
body {
  margin: 0;
}

body{
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(
    544.72% 214.23% at 50% 211.41%,
    #006aff 0%,
    #fff 100%
  );
  overflow-x: hidden;
  min-height: 100vh;
}

body * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  padding-bottom: 30px;
}
  

.header{
  padding-top:30px ;
  margin-bottom: 10px ;
}

.header-img{
  margin-bottom: 10px;
  width: 130px;
}

.nav{
  display: flex;
  gap: 40px;
}

.nav .header-title{
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(10, 15, 21, .5);
  cursor: pointer;
}

.nav .header-title.active{
  color: rgba(10, 15, 21, 1);
}

/* ============================== */
/* Card (Light Mode - vidro)      */
/* ============================== */
.card{
  gap: 15px;
  /* antes: background-color: white; */
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 20px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 1px 0px 6.6px 5px rgba(0, 0, 0, 0.05);
  transition: .3s all ease-in-out;
}

.card:hover{
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

.card-body{
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 0px;
}

.card-title{
  font-size: 22px;
  font-weight: 700;
  color: #0A0F15;
  margin-bottom: 12px;
}

.card-desc{
  color: #0A0F15;
  margin-bottom: 30px;
}

.card-anchor{
  display: flex; 
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: auto;
  color: #006AFF;
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
}

@media only screen and (max-width: 680px) {
  .header{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nav .header-title{
    font-size: 20px;
  }
}

.nav-tabs::-webkit-scrollbar{
  height: 8px;
  border-radius: 20px;
}

.nav-tabs::-webkit-scrollbar-thumb{
  background-color: rgba(10, 15, 21, .3);
  border-radius: 20px;
}

/* ====================== */
/* Night Mode Styles      */
/* ====================== */
body.night-mode {
  background: #121212;
  color: #ffffff;
}

body.night-mode .header,
body.night-mode .sidebar,
body.night-mode .content,
body.night-mode .card {
  background-color: #1e1e1e;
  color: #ffffff;
}

body.night-mode .sidebar a,
body.night-mode .header a {
  color: #ffffff;
}

/* Reforço + !important para garantir override */
body.night-mode {
  background: #121212 !important; 
  color: #ffffff !important;
}

body.night-mode .landing-page {
  background-color: #121212 !important;
  color: #ffffff !important;
}

body.night-mode .header,
body.night-mode .sidebar,
body.night-mode .content,
body.night-mode .card {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

body.night-mode a,
body.night-mode .sidebar a,
body.night-mode .header a,
body.night-mode .card a {
  color: #ffffff !important;
}

body.night-mode .btn {
  background-color: #333333 !important;
  border-color: #444444 !important;
  color: #ffffff !important;
}

/* ======================================== */
/* NightMode Background                     */
/* ======================================== */
body.night-mode {
  background: #121212 !important;
  background-image: none !important;
  color: #ffffff !important;
}

body.night-mode #particles-js,
body.night-mode .landing-page,
body.night-mode .landing-content,
body.night-mode .content {
  background: #121212 !important;
  background-image: none !important;
  color: #ffffff !important;
}

body.night-mode .content,
body.night-mode .cardscontent {
  /* corrigido: removido "/" solto no fim da linha */
  background: transparent !important;
}

/* Cartões em night mode com leve vidro */
body.night-mode .card {
  background-color: rgba(30, 30, 30, 0.80) !important;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffffff !important;
}

/* ============================================== */
/* Ajustes night mode adicionais                   */
/* ============================================== */
body.night-mode .header {
  background-color: transparent !important;
}

body.night-mode .card-title {
  color: #ffffff !important;
}

/* Modal em night mode */
body.night-mode .modal-content {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border: none !important; 
}

body.night-mode .modal-header,
body.night-mode .modal-footer {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border: none !important; 
}

/* Botão fechar (X) */
body.night-mode .btn-close {
  filter: invert(1);
}

/* Botão .btn-secondary */
body.night-mode .btn-secondary {
  background-color: #444444 !important;
  border-color: #444444 !important;
  color: #ffffff !important;
}

/* Switch/labels */
body.night-mode .form-check-label {
  color: #ffffff !important;
}

body.night-mode .form-check-input:checked {
  background-color: #0d6efd !important; 
  border-color: #0d6efd !important;
}

/* ============================================== */
/* Landing Page em night mode                      */
/* ============================================== */
body.night-mode .landing-page {
  background: transparent !important; /* ver partículas */
}

body.night-mode .landing-content {
  /* leve fundo translúcido para legibilidade */
  background-color: rgba(18, 18, 18, 0.6) !important;
  padding: 20px;
  border-radius: 8px;
}

body.night-mode .landing-content h1,
body.night-mode .landing-content p {
  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}