:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
h1 {
  margin-bottom: 1rem;
}
.card {
  background: #f1d6c9d6;
  border: 1px solid #dddddd;
  border-radius: 12px;
  margin: 1rem 0;
  padding: 1rem;
}
.row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
#expense,
#amount,
#category,
#payment-method,
#paid-to,
#note {
  margin-top: 3px;
}
.row-actions {
  justify-items: start;
}

input,
select,
button {
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
}
button {
  cursor: pointer;
}
button.add {
  background: #91f48d;
  border-color: #96ea93;
  transition: background 0.2s;
}
button.add:hover {
  background: #44d43f;
}
button.clear {
  background: #f78383;
  border-color: #ff9191;
  transition: background 0.2;
}
button.clear:hover {
  background: #f96666;
}
button.clear:disabled {
  background: #cccccc;
  border-color: #cccccc;
  cursor: not-allowed;
}
.btn-delete {
  background: #e0e0e0;
}
.btn-delete:hover {
  background: #ff4d4f;
  color: #ffffff;
  transition: background 0.2s, color 0.2s;
}

table.list {
  width: 100%;
  border-collapse: collapse;
}
table.list th,
table.list td {
  text-align: left;
  border-bottom: 1px solid #eeeeee;
  padding: 0.6rem 0.5rem;
}
.summary {
  color: #b23b3b;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px 10px;
}
tbody tr:hover {
  background: #fafafa;
}