* { 
  box-sizing: border-box;
  --Gray:#f4f4f4ce;
  --white: #FFFFFF;
  --yellow: #FFDE68;
  --orange: #FFB018;
  --teal: #00BEAA;
  --darkteal: #007F78;
  --darkforest: #203233;
  --black: #000000;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 /* background:linear-gradient(180deg,var(--Gray),var(--yellow),var(--teal));*/
 background: #d7e7e5;
  color: #e7e9ee;
}


.app { 
  max-width: 980px; 
  margin: 0 auto; 
  padding: 24px; 
}

.header {
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--darkforest), var(--darkteal), var(--teal));
  border:none;
  box-shadow: 0 4px 4px var(--darkforest);
}

.card {
  margin: 14px 0;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--darkforest), var(--darkteal), var(--teal));
  border:none;
    box-shadow: 0 4px 4px var(--darkforest);

}

h1 { margin: 0 0 6px; font-size: 28px; }
h2 { margin: 0 0 12px; font-size: 18px; }

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

label { 
  display: grid; 
  gap: 6px;
  font-size: 14px; 
  opacity: 0.95; 
}

input, select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--darkforest);
  background: var(--Gray);
  color: var(--black);
  outline: none;
}

.actions {
   grid-column: 1 / -1;
   display: flex;
    gap: 10px; 

  }

.toolbar {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.5fr 1fr auto 1fr auto;
  align-items: center;
}

.check { display: flex;
   gap: 8px; 
   align-items: center; 
   white-space: nowrap; 
  }


.btn {
   /* background:linear-gradient(160deg,var(--darkforest),var(--teal),var(--Gray),var(--orange),var(--yellow));*/
  background: linear-gradient(160deg, var(--Gray), var(--darkforest), var(--darkteal));
  color:var(--white);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
}
.btn:hover {
  background: linear-gradient(160deg, var(--white), var(--orange),var(--Gray));
}
.btn.primary:hover {
  background: linear-gradient(160deg, var(--white), var(--darkteal),var(--Gray));
  color:var(--white);
 }
.btn.danger:hover {
  background: linear-gradient(160deg,var(--Gray), #8B0000, #FF4500);
  color: var(--white);
 }

.list { display: grid; gap: 10px; }

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background:var(--Gray);
  border: 1px solid var(--darkforest);
  color: var(--darkforest);
}

.meta { opacity: 0.9; font-size: 14px; }

.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--darkforest);
  opacity: 0.9;
}



.itemActions { 
  display: flex; 
  gap: 8px; 
  align-items: start; }

.iconBtn {
  width: 40px; height: 40px;
  border-radius: 12px;
  background:var(--darkforest);
  color: #e7e9ee;
  cursor: pointer;
  display: grid; 
  place-items: center;
  border: none;
}
.iconBtn:hover {
  background: var(--darkteal);
}


.hint { opacity: 0.8;
   font-size: 13px; 
   margin-top: 10px; 
  }




.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.statBox {
  padding: 12px;
  border-radius: 14px;
  background:var(--Gray);
  border: 1px solid var(--darkforest);
  color: var(--darkforest);
}
.statBox b { font-size: 18px;
   display: block;
    margin-bottom: 4px; 
  }



@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}