:root {
  --primary-color:#8AC926;
  --bg-color:#f3f4f6;
  --card-bg:#ffffff;
  --text-main:#1f2937;
  --text-sub:#6b7280;
  --read-green:#10b379634;
  --unread-red:#ef4444;
  --shadow:0 4px 6px -1px rgba(0,9,9,0.1),0 2px 4px rgba(0,0,0,0.06);
}

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

body {
  font-family:'Poppins',sans-serif;
  background-color:var(--bg-collor);
  line-height:1.5;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.main{
  flex:1;
}

.contanier{
  max-width:1200px;
  margin:0 auto;
  padding: 0 24px;
}

.header{
  text-align:center;
  background-color:var(--card-bg);
  padding:24px 0;
  box-shadow:var(--shadow);
  margin-bottom:40px;
}

.header h1{
  font-size:2rem;
  font-weight:700;
  color:var(--primary-color);
}

.main{
  display:flex;
  flex-direction: column;
  align-items:center;
}

.btn-add {
  background-color:var(--primary-color);
  color:white;
  border:none;
  padding:12px 24px;
  font-size:1rem;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:background-color 0.2s;
  margin-bottom:32px;
}

.btn-add:hover{
  background-color:#FFCA3A;
}

.book-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
  width:100%;
  margin-bottom:56px;

}

.book-card{
  background-color:var(--card-bg);
  padding:24px;
  border-radius:12px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-left:5px solid transparent;
  transition:transform 0.2;
}

.book-card:hover{
  transform:translaeY(-5px);
}

.book-card h3{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:12px;
  color:var(--text-main);
}


.book-card p {
  color:var(--text-sub);
  font-size:0.95rem;
  margin-bottom:4px;
}

.book-card .status {
  display:inline-block;
  font-weight:600;
  padding:3px 12px;
  border-radius:4px;
  margin-top:12px;
  margin-bottom:24px;
}


.read-status {
  background-color:#d1fae5;
  color:var(--read-green);
}


.unread-status{
  background-color:#fee2e2;
  color:var(--unread-red);
}

.card-btns{
  display:flex;
  gap:12px;
  margin-top:auto;
}


.book-card button {
  /* flex:1; */
  border:none;
  padding:12px;
  border-radius:6px;
  font-weight:400;
  font-size:0.9rem;
  cursor:pointer;
  transition:background-color 0.2s;

}


.toggle-btn{
  background-color:#e5e7eb;
  color:var(--text-main);
}

.toggle-btn:hover{
  background-color:#d1d5db;
}

.remove-btn{
  background-color:var(--unread-red);
  color:white;
}


.remove-btn:hover {
  background-color:#dc2626;

}


/* popup form */
dialog {
  border:none;
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:32px;
  width:450px;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

dialog::backdrop {
  background-color:rgba(0,0,0,0.5);
}

#bookForm {
  display:flex;
  flex-direction:column;
  gap:14px;
}

#bookForm h3{
  margin-bottom:12px;
  color:var(--primary-color);
  font-weight:700;
}

#bookForm input[type="text"],
#bookForm input[type="number"]{
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-size:1rem;
}

.is-read-group {
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
}

#read {
  width:18px;
  height:18px;
  cursor:pointer;
  accent-color:var(--primary-color);
  color:#d1d5db;
}


.form-btns{
  display:flex;
  gap:14px;
  margin-top:24px;

}


#bookForm button {
  flex:1;
  border:none;
  padding:12px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  font-size:1rem;
}


#submitBtn {
  background-color:var(--primary-color);
  color:var(--bg-color)
}

#submitBtn:hover {
  background-color:#FFCA3A;
}

#cancelBtn {
  background-color:#e5e7eb;
  color:var(--text-main);
}

#cancelBtn:hover {
  background-color:#d1d5db;
}

.footer{
  width:100%;
  flex-shrink:0;
  text-align:center;
  padding:32px 0;
  background-color:var(--card-bg);
  margin-top:auto;
}

.footer p {
  color:var(--text-sub);
  font-size:1rem;
}


@media(max-width:600px){
  .header h1{
    font-size:1.5rem;
  }

  .btn-add{
    width:90%;
    padding:14px;
  }

  .book-grid{
    grid-template-columns:1fr;
    padding:12px;
    gap:14px;
  }

  .book-card{
    padding:24px;
  }

  dialog{
    width:95%;
    padding:20px;
  }

  #bookForm button {
    padding:14px;
  }
}