:root{
  --ink:      #0d0b08;
  --umber:    #1a1510;
  --umber-2:  #221b13;
  --rule:     rgba(237,230,214,0.14);
  --paper:    #ede6d6;
  --muted:    #a99f8d;
  --amber:    #d9a24b;
  --amber-dim:#8a6b34;
  --green:    #6bbf7b;
  --red:      #c25b4f;
  --blue:     #6f9bd1;

  --font-display: 'Anton', sans-serif;
  --font-mono: 'Courier Prime', monospace;
  --font-body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:
    radial-gradient(ellipse at top left, rgba(217,162,75,0.06), transparent 45%),
    var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.6;
  min-height:100vh;
}
a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; }

.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:100;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 3px);
  opacity:0.5;
}

header{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 6%;
  border-bottom:1px solid var(--rule);
}
.logo{ font-family:var(--font-mono); font-weight:700; }
.logo span{ color:var(--amber); }
.repo-link{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.repo-link:hover{ color:var(--amber); }

main{ max-width:1120px; margin:0 auto; padding:0 5%; }

.hero{ padding:56px 0 36px; }
.case-tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px;
  color:var(--amber); border:1px dashed var(--amber-dim);
  padding:5px 12px; margin-bottom:20px; transform:rotate(-1deg);
}
h1{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(38px, 6vw, 58px); letter-spacing:1px;
}
h1 span{ color:var(--amber); }
.dek{ color:var(--muted); max-width:600px; margin-top:14px; font-size:14px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.kpi-card{ background:var(--umber); border:1px solid var(--rule); border-radius:10px; padding:20px; }
.kpi-label{ font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.kpi-value{ font-family:var(--font-display); font-size:26px; color:var(--paper); }
.kpi-green{ color:var(--green); }
.kpi-red{ color:var(--red); }

.workspace{ display:grid; grid-template-columns:320px 1fr; gap:20px; margin-bottom:26px; align-items:start; }

.form-panel{ background:var(--umber); border:1px solid var(--rule); border-radius:10px; overflow:hidden; }
.terminal-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--umber-2); border-bottom:1px solid var(--rule); }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.red{ background:#c25b4f; } .dot.yellow{ background:#d9a24b; } .dot.green{ background:#6bbf7b; }
.terminal-title{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-left:8px; }
.form-body{ padding:22px; }

.type-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.type-btn{
  flex:1; background:var(--ink); border:1px solid var(--rule); color:var(--muted);
  font-family:var(--font-mono); font-size:12px; padding:10px; border-radius:6px; cursor:pointer;
}
.type-btn.active[data-type="expense"]{ background:rgba(194,91,79,0.15); border-color:var(--red); color:var(--red); }
.type-btn.active[data-type="income"]{ background:rgba(107,191,123,0.15); border-color:var(--green); color:var(--green); }

input, select{
  width:100%; background:var(--ink); border:1px solid var(--rule); color:var(--paper);
  font-family:var(--font-body); font-size:13px; padding:10px 12px; border-radius:6px;
  outline:none; margin-bottom:10px;
}
input:focus, select:focus{ border-color:var(--amber-dim); }
select{ font-family:var(--font-body); }
input[type="date"]{ font-family:var(--font-mono); color-scheme:dark; }

.btn-primary{
  width:100%; background:var(--amber); border:none; border-radius:6px; color:var(--ink);
  font-family:var(--font-mono); font-weight:700; font-size:13px; padding:12px; cursor:pointer;
}
.btn-primary:hover{ background:var(--paper); }
.btn-ghost{
  background:transparent; border:1px solid var(--rule); border-radius:6px; color:var(--paper);
  font-family:var(--font-mono); font-size:12px; padding:9px 16px; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); }

.chart-panel{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.chart-card{ background:var(--umber); border:1px solid var(--rule); border-radius:10px; padding:22px; height:280px; display:flex; flex-direction:column; }
.chart-title{ font-family:var(--font-mono); font-size:11px; color:var(--amber); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
.chart-card canvas{ flex:1; max-height:210px; }

.table-section{ margin:20px 0 70px; }
.table-header{ display:flex; justify-content:space-between; align-items:center; }
.table-wrap{ background:var(--umber); border:1px solid var(--rule); border-radius:10px; overflow-x:auto; margin-top:16px; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th, td{ padding:13px 16px; text-align:left; white-space:nowrap; }
th{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); border-bottom:1px solid var(--rule); background:var(--umber-2); }
td{ border-bottom:1px solid var(--rule); color:var(--paper); }
tr:last-child td{ border-bottom:none; }
.tx-income{ color:var(--green); }
.tx-expense{ color:var(--red); }
.delete-btn{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; }
.delete-btn:hover{ color:var(--red); }
.empty-state{ padding:40px; text-align:center; color:var(--muted); font-family:var(--font-mono); font-size:13px; }

.notes{ padding-bottom:60px; }
.notes p{ color:var(--muted); max-width:640px; margin-top:14px; font-size:14px; }

footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:26px 6%; font-family:var(--font-mono); font-size:12px; color:var(--muted);
  border-top:1px solid var(--rule);
}

@media(max-width:900px){
  .workspace{ grid-template-columns:1fr; }
  .chart-panel{ grid-template-columns:1fr; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:520px){
  .kpi-grid{ grid-template-columns:1fr; }
  header{ flex-direction:column; gap:10px; text-align:center; }
}