* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", "SF Pro", system-ui, -apple-system, sans-serif;
  background: #0d0f12;
  color: #e6e8eb;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid #1e2228;
}

.top-bar h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.4px;
}

.btn {
  border: 1px solid #2c3138;
  background: #1a1d22;
  color: #e6e8eb;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

.btn.primary {
  background: #181b20;
  border-color: #3b4047;
}

.btn.ghost {
  background: transparent;
}

.btn.active {
  border-color: #5b6cff;
  color: #9fb0ff;
}

.controls {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto;
  gap: 16px;
  padding: 16px 28px;
}

.search {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2b3037;
  background: #121519;
  color: #e6e8eb;
}

.tabs {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #121519;
  border-radius: 12px;
  padding: 6px;
  border: 1px solid #2b3037;
}

.tabs button {
  flex: 1;
  border: none;
  background: transparent;
  color: #a1a6ad;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.tabs button.active {
  background: #1d2128;
  color: #cdd3db;
}

.currency-toggle {
  display: flex;
  gap: 8px;
}

.stats {
  padding: 0 28px 28px;
}

.day-card {
  margin-top: 18px;
  background: #111418;
  border-radius: 16px;
  border: 1px solid #1f242b;
  overflow: hidden;
}

.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #0f1216;
  border-bottom: 1px solid #1f242b;
  font-weight: 600;
  cursor: pointer;
}

.day-header .metrics {
  display: flex;
  gap: 28px;
  font-size: 14px;
}

.metrics span {
  color: #8aa0ff;
}

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

.day-card.collapsed .wallet-table {
  display: none;
}

.day-card.collapsed .day-header {
  border-bottom: none;
}

.wallet-table th,
.wallet-table td {
  padding: 12px 20px;
  text-align: left;
  border-bottom: 1px solid #1f242b;
  font-size: 14px;
}

.wallet-table th {
  color: #9aa1ab;
  font-weight: 600;
}

.wallet-table tr:last-child td {
  border-bottom: none;
}

.wallet {
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 13px;
  color: #d2d6db;
}

.value {
  color: #cfe8c9;
}

.value.negative {
  color: #ff8787;
}

.empty {
  padding: 24px;
  color: #8a9098;
}