:root { 
  --bg:#f8f5f0;              /* warm offwhite page background */
  --panel:#ffffff;           /* card background */
  --muted:#7a7a7a;           /* muted text */
  --text:#333333;            /* main text color */
  --acc:#b5895a;             /* warm beige-gold accent */
  --ok:#2e8b57;              /* success green */
  --bad:#c0392b;             /* error red */

  --interest-blue:#4a90e2;   /* interest = blue */
  --uncovered-red:#e74c3c;   /* uncovered = red */
  --pill-bg-blue: rgba(74,144,226,0.15);
  --pill-bg-red:  rgba(231,76,60,0.15);
}

*{box-sizing:border-box}

body {
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
}

header {
  padding:18px 20px;
  border-bottom:1px solid #ddd;
}

header h1 {
  margin:0 0 6px;
  font-size:20px;
}

header p {
  margin:0;
  color:var(--muted);
  font-size:13px;
}

main {
  display:grid;
  grid-template-columns:420px 1fr;
  gap:16px;
  padding:16px;
}

@media (max-width:980px){
  main { grid-template-columns:1fr; }
}

.card {
  background:var(--panel);
  border:1px solid #ddd;
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.card h2 {
  margin:0;
  font-size:16px;
}

.card .body {
  padding:14px;
}

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

.row {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:10px;
  align-items:center;
}

label {
  color:var(--muted);
  font-size:13px;
}

input,select,button,textarea {
  font:inherit;
}

input[type="number"],
input[type="date"],
select,
textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid #ccc;
  background:#fdfaf6;
  color:var(--text);
  border-radius:10px;
  outline:none;
  transition:border .2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color:var(--acc);
}

.btn {
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #ccc;
  background:#f5f2ed;
  color:var(--text);
  cursor:pointer;
  transition:transform .05s ease,background .2s;
}

.btn:hover {
  background:#ece6dd;
}

.btn:active {
  transform:translateY(1px);
}

.btn.primary {
  background:var(--acc);
  border-color:#a07848;
  color:#fff;
}

.btn.primary:hover {
  background:#9a6f3d;
}

.btn.danger {
  background:#f6d6d6;
  border-color:#dba6a6;
  color:var(--bad);
}

.split {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.muted {
  color:var(--muted);
}

.small-note {
  font-size:12px;
  margin-top:4px;
}

table {
  width:100%;
  border-collapse:collapse;
}

th,td {
  padding:10px 8px;
  border-bottom:1px solid #e2e2e2;
  text-align:right;
  font-variant-numeric:tabular-nums;
  vertical-align:top;
}

th:first-child,
td:first-child {
  text-align:left;
}

tfoot td {
  font-weight:600;
}

.divider {
  border-top:1px solid #ddd;
  margin:12px 0;
}

/* Pills */
.pill {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  line-height:1.2;
}

.pill.big {
  font-size:14px;
  padding:6px 12px;
}

.pill.blue {
  color:var(--interest-blue);
  background:var(--pill-bg-blue);
}

.pill.red {
  color:var(--uncovered-red);
  background:var(--pill-bg-red);
}

.pill.ok {
  background:rgba(46,204,113,.12);
  color:var(--ok);
}

.pill.warn {
  background:rgba(255,107,107,.16);
  color:var(--bad);
}

.pill.info {
  background:rgba(181,137,90,.15);
  color:var(--acc);
}

.hidden {
  display:none;
}

.error {
  color:var(--bad);
  font-size:13px;
}

/* Chart */
.chart-wrap {
  background:#fdfaf6;
  border:1px solid #ddd;
  border-radius:12px;
  padding:10px;
}

#reserveChart {
  width:100%;
  height:300px;
  display:block;
  cursor:crosshair;
}

.legend {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
}

.swatch {
  width:10px;
  height:10px;
  border-radius:2px;
  display:inline-block;
}

.swatch.interest {
  background:var(--interest-blue);
}

.swatch.uncovered {
  background:var(--uncovered-red);
}

.mb8 {
  margin-bottom:8px;
}