Template:Home/ConservationPanel.css

.lw-cons-panel{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-left:4px solid #2d5016;
  border-radius:12px;
  padding:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
  margin:2em 0;
}

.lw-cons-title{
  font-weight:700;
  color:#2d5016;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.9rem;
  margin-bottom:.5rem;
}

.lw-cons-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:8px 0 6px;
}
.lw-metric{
  background:#f8f9fa;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px 12px;
  text-align:center;
}
.lw-metric .num{
  display:block;
  font-size:1.75rem;
  font-weight:800;
  color:#1f2937;
  line-height:1.1;
}
.lw-metric .label{
  display:block;
  margin-top:4px;
  font-size:.85rem;
  color:#6b7280;
}

.lw-status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:4px 16px;
  margin-top:10px;
}
.lw-status{
  display:flex;
  align-items:center;
  min-height:32px;
  font-size:.95rem;
  color:#1f2937;
}
.lw-status .lw-dot{
  width:10px;height:10px;border-radius:50%;
  background:currentColor;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  margin-right:8px;
}
.lw-status .name{font-weight:600;}
.lw-status .spacer{
  flex:1;
  border-bottom:1px dashed #e5e7eb;
  margin:0 8px;
}
.lw-status .value{font-variant-numeric:tabular-nums;}

.lw-stable{color:#2e7d32;}
.lw-vulnerable{color:#f59e0b;}
.lw-endangered{color:#f97316;}
.lw-critical{color:#dc2626;}
.lw-extinct{color:#111827;}
.lw-unknown{color:#9ca3af;}

.lw-actions{
  display:flex;flex-wrap:wrap;gap:8px; margin-top:14px;
}
.lw-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:8px;
  border:1px solid #e5e7eb;background:#ffffff;
  text-decoration:none;color:#2d5016;font-weight:600;
  transition:background .15s,border-color .15s,transform .15s;
}
.lw-btn:hover{background:#f8f9fa;border-color:#d1d5db;transform:translateY(-1px);}
.lw-btn--primary{background:#2d5016;color:#ffffff;border-color:#2d5016;}
.lw-btn--primary:hover{background:#3d6b1f;border-color:#3d6b1f;}

@media (max-width:768px){
  .lw-cons-metrics{grid-template-columns:1fr;gap:10px;}
  .lw-status-grid{grid-template-columns:1fr;}
}