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

:root{

  --primary:#2563eb;
  --primary-dark:#1d4ed8;

  --danger:#ef4444;
  --danger-dark:#dc2626;

  --bg:#f4f7fb;
  --card:#ffffff;

  --text:#1f2937;

  --border:#dcdcdc;

}

body{

  font-family:Arial,sans-serif;

  background:var(--bg);

  color:var(--text);

  min-height:100vh;

}

/* =========================================
   HEADER
========================================= */

header{

  background:linear-gradient(135deg,#2563eb,#1e40af);

  color:white;

  padding:35px 20px;

  text-align:center;

  box-shadow:0 2px 12px rgba(0,0,0,0.15);

}

header h1{

  margin-bottom:10px;

  font-size:2rem;

}

header p{

  opacity:0.9;

}

header nav{

  margin-top:20px;

}

header nav a{

  text-decoration:none;

  background:white;

  color:var(--primary);

  padding:10px 18px;

  border-radius:10px;

  font-weight:bold;

  transition:0.2s;

}

header nav a:hover{

  background:#dbeafe;

}

/* =========================================
   CONTAINER
========================================= */

.container{

  width:92%;

  max-width:1200px;

  margin:30px auto;

}

/* =========================================
   FORM / SEARCH
========================================= */

.form-section,
.search-section{

  background:white;

  padding:25px;

  border-radius:16px;

  margin-bottom:25px;

  box-shadow:0 4px 14px rgba(0,0,0,0.06);

}

.form-section h2{

  margin-bottom:20px;

  color:var(--primary);

}

form{

  display:flex;

  flex-direction:column;

  gap:16px;

}

/* =========================================
   INPUTS
========================================= */

input,
textarea{

  width:100%;

  padding:14px;

  border:1px solid var(--border);

  border-radius:10px;

  font-size:16px;

  transition:0.2s;

}

input:focus,
textarea:focus{

  outline:none;

  border-color:var(--primary);

  box-shadow:0 0 0 4px rgba(37,99,235,0.1);

}

textarea{

  min-height:120px;

  resize:vertical;

}

/* =========================================
   BOTÕES
========================================= */

button{

  padding:14px;

  border:none;

  border-radius:10px;

  background:var(--primary);

  color:white;

  font-size:16px;

  font-weight:bold;

  cursor:pointer;

  transition:0.25s ease;

}

button:hover{

  background:var(--primary-dark);

  transform:translateY(-2px);

}

/* =========================================
   LOGOUT
========================================= */

.logout-btn{

  margin-top:20px;

  background:var(--danger);

}

.logout-btn:hover{

  background:var(--danger-dark);

}

/* =========================================
   GRID CARDS
========================================= */

#cardsContainer{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

  gap:22px;

}

/* =========================================
   CARD (COMPATÍVEL card e card-item)
========================================= */

.card,
.card-item{

  position:relative;

  background:var(--card);

  border-radius:18px;

  padding:24px;

  box-shadow:0 6px 18px rgba(0,0,0,0.07);

  transition:0.25s ease;

}

.card:hover,
.card-item:hover{

  transform:translateY(-5px);

  box-shadow:0 12px 24px rgba(0,0,0,0.1);

}

/* TÍTULO */

.card h3,
.card-item h2{

  color:var(--primary);

  margin-bottom:15px;

  padding-right:50px;

  line-height:1.4;

}

/* =========================================
   CATEGORIA
========================================= */

.categoria{

  display:inline-block;

  background:#dbeafe;

  color:#1d4ed8;

  padding:6px 14px;

  border-radius:30px;

  font-size:14px;

  margin-bottom:15px;

  font-weight:bold;

}

/* =========================================
   SECTIONS
========================================= */

.card-section{

  margin-bottom:18px;

}

.card-section h4{

  margin-bottom:6px;

  color:#111827;

}

.card-section p{

  line-height:1.6;

  color:#374151;

  white-space:pre-wrap;

}

/* =========================================
   DELETE BUTTON
========================================= */

.delete-btn,
.card-item a{

  position:absolute;

  top:16px;
  right:16px;

  width:40px;
  height:40px;

  border-radius:50%;

  background:var(--danger);

  color:white;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:18px;

  text-decoration:none;

  border:none;

  cursor:pointer;

  transition:0.2s ease;

  padding:0;

}

.delete-btn:hover,
.card-item a:hover{

  background:var(--danger-dark);

  transform:scale(1.08);

}

.delete-btn:active,
.card-item a:active{

  transform:scale(0.92);

}

/* =========================================
   EMPTY STATE
========================================= */

.empty{

  text-align:center;

  background:white;

  padding:50px;

  border-radius:16px;

  color:#6b7280;

}

/* =========================================
   LOGIN
========================================= */

.login-body{

  display:flex;

  justify-content:center;

  align-items:center;

  min-height:100vh;

  background:linear-gradient(135deg,#2563eb,#1e3a8a);

}

.login-container{

  width:90%;
  max-width:400px;

  background:white;

  padding:40px;

  border-radius:20px;

  box-shadow:0 10px 30px rgba(0,0,0,0.2);

  text-align:center;

}

.login-container h1{

  margin-bottom:10px;

  color:var(--primary);

}

.login-container p{

  margin-bottom:20px;

  color:#6b7280;

}

#loginError{

  color:var(--danger);

  font-size:14px;

}

.back-link{

  display:inline-block;

  margin-top:20px;

  text-decoration:none;

  color:var(--primary);

  font-weight:bold;

}

/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 768px) {

  header {
    padding: 25px 15px;
  }

  header h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  header p {
    font-size: 0.95rem;
  }

  header nav a {
    padding: 8px 14px;
    font-size: 14px;
  }

  .container {
    width: 95%;
  }

  .form-section,
  .search-section {
    padding: 16px;
    border-radius: 12px;
  }

  /* inputs mais confortáveis no mobile */
  input,
  textarea,
  button {
    font-size: 15px;
    padding: 12px;
  }

  /* cards ocupando melhor espaço */
  .card,
  .card-item {
    padding: 16px;
    border-radius: 14px;
  }

  .card h2,
  .card h3 {
    font-size: 1.1rem;
    padding-right: 40px; /* espaço pro botão delete */
  }

  /* grid vira coluna única */
  #cardsContainer {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* botão delete melhor no mobile */
  .delete-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
    top: 10px;
    right: 10px;
  }

  /* melhora leitura dos textos */
  .card p,
  .card-item p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* evita zoom estranho no iOS */
  input,
  textarea {
    font-size: 16px;
  }
}

/* telas muito pequenas */
@media (max-width: 420px) {

  header h1 {
    font-size: 1.3rem;
  }

  .form-section,
  .search-section,
  .card,
  .card-item {
    padding: 14px;
  }

  button {
    width: 100%;
  }

  .delete-btn {
    width: 32px;
    height: 32px;
  }
}