:root {
  --bg: #e7ecf4;
  --card: #e7ecf4;
  --text: #243044;
  --muted: #66758f;
  --plus: #0d8f63;
  --minus: #d64545;
  --shadow-light: #ffffff;
  --shadow-dark: #bcc5d5;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 16px;
}
.neo {
  background: var(--card);
  border-radius: 18px;
  box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light);
}
.card { padding: 16px; }
.header h1 { margin: 0; }
.muted { color: var(--muted); }
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat .label { color: var(--muted); font-size: 14px; }
.stat .value { font-size: 24px; font-weight: 800; margin-top: 4px; }
.plus { color: var(--plus); }
.minus { color: var(--minus); }
.form-card h2, .history h2 { margin-top: 0; }
.form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 10px;
}
input, select, button {
  border: 0;
  outline: none;
  padding: 12px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  color: var(--text);
}
button {
  cursor: pointer;
  font-weight: 700;
  box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
}
button:active {
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 10px 8px; border-bottom: 1px solid #d6deeb; font-size: 14px; }
th { text-align: left; color: var(--muted); }
.right { text-align: right; }
.history-head { display: flex; align-items: center; justify-content: space-between; }
.pill { padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill-red { background: #f9d4d4; color: #a42525; }
.pill-green { background: #d2f3e7; color: #0e7150; }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid button { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wrap { padding: 10px; }
  .card { padding: 12px; }
  .form-grid { grid-template-columns: 1fr; }
}