:root{
  --ink: #14171c;
  --panel: #1b1f26;
  --panel-line: #2a2f38;
  --paper: #edeae3;
  --muted: #8a8f98;
  --amber: #e8a33d;
  --amber-dim: #7a5a26;
  --green: #5fa87c;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
}

.mono{font-family:'IBM Plex Mono',monospace;}

/* ---------- Login ---------- */
.login-body{
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-card{
  width:340px;
  padding:36px 32px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:4px;
  text-align:center;
  position:relative;
}
.login-card::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;right:-1px;
  height:3px;
  background:var(--amber);
}
.stamp{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  font-size:28px;
  letter-spacing:6px;
  color:var(--amber);
  border:2px solid var(--amber);
  display:inline-block;
  padding:10px 18px;
  transform:rotate(-2deg);
  border-radius:3px;
}
.login-sub{
  color:var(--muted);
  font-size:13px;
  margin:18px 0 24px;
  letter-spacing:.3px;
}
.login-form{display:flex; flex-direction:column; gap:10px; text-align:left;}
.login-form label{font-size:12px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase;}
.login-form input{
  background:var(--ink);
  border:1px solid var(--panel-line);
  color:var(--paper);
  padding:10px 12px;
  border-radius:3px;
  font-size:14px;
  font-family:'IBM Plex Mono',monospace;
}
.login-form input:focus{outline:none; border-color:var(--amber);}
.login-form button{
  margin-top:8px;
  background:var(--amber);
  color:var(--ink);
  border:none;
  padding:11px;
  font-weight:600;
  border-radius:3px;
  cursor:pointer;
  letter-spacing:.5px;
}
.login-form button:hover{background:#f2b458;}
.login-error{color:#e0725f; font-size:13px; margin:0;}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 32px;
  border-bottom:1px solid var(--panel-line);
}
.brand-mark{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  letter-spacing:4px;
  color:var(--amber);
  font-size:18px;
}
.brand-sub{
  color:var(--muted);
  font-size:12px;
  margin-left:10px;
  letter-spacing:.3px;
}
.topbar-actions{display:flex; gap:10px;}
.ghost-btn{
  background:transparent;
  border:1px solid var(--panel-line);
  color:var(--paper);
  padding:8px 14px;
  border-radius:3px;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  transition:border-color .15s;
}
.ghost-btn:hover{border-color:var(--amber); color:var(--amber);}

/* ---------- Layout ---------- */
.wrap{
  max-width:960px;
  margin:0 auto;
  padding:32px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-bottom:28px;
}
.stat-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:4px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.stat-label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
.stat-value{font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:600; color:var(--amber);}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:4px;
  padding:22px 24px;
  margin-bottom:20px;
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.panel-head h2{font-size:14px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:0; font-weight:600;}

/* ---------- Chart ---------- */
.chart-row{
  display:grid;
  grid-template-columns:140px 1fr 44px;
  align-items:center;
  gap:12px;
  padding:6px 0;
}
.chart-label{font-size:13px; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chart-bar-track{
  background:var(--ink);
  border-radius:2px;
  height:10px;
  overflow:hidden;
}
.chart-bar{
  height:100%;
  background:linear-gradient(90deg, var(--amber-dim), var(--amber));
  border-radius:2px;
}
.chart-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); text-align:right;}

/* ---------- Search ---------- */
.search-input{
  background:var(--ink);
  border:1px solid var(--panel-line);
  color:var(--paper);
  padding:8px 12px;
  border-radius:3px;
  font-size:13px;
  width:220px;
  font-family:'Inter',sans-serif;
}
.search-input:focus{outline:none; border-color:var(--amber);}

/* ---------- Table ---------- */
.ledger{
  width:100%;
  border-collapse:collapse;
}
.ledger th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
  border-bottom:1px solid var(--panel-line);
  padding:8px 6px;
  cursor:pointer;
  user-select:none;
}
.ledger th:hover{color:var(--amber);}
.ledger td{
  padding:10px 6px;
  border-bottom:1px dashed var(--panel-line);
  font-size:13.5px;
}
.ledger tr:hover td{background:rgba(232,163,61,0.04);}
.num{text-align:right;}
.empty{color:var(--muted); font-size:13px; text-align:center; padding:16px 0;}

@media (max-width:640px){
  .stats{grid-template-columns:1fr;}
  .chart-row{grid-template-columns:90px 1fr 36px;}
  .search-input{width:100%; margin-top:8px;}
  .panel-head{flex-direction:column; align-items:flex-start; gap:8px;}
}