:root {
  --accent: #2dc2c7;
  --accent-dark: #22979c;
  --bg-top: #f8fbfd;
  --bg-bottom: #eef6f7;
  --text-main: #17313a;
  --text-muted: #58717b;
  --surface: #ffffff;
  --surface-border: #d8e6e9;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: var(--text-main);
}

.app-shell {
  padding: 1rem 0 3rem;
}

.app-container {
  max-width: 900px;
}

.text-accent {
  color: var(--accent-dark) !important;
}

.navbar-brand.text-accent,
.navbar-brand.text-accent:hover,
.navbar-brand.text-accent:focus {
  color: #000 !important;
}

.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent-dark);
  color: white;
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: white;
}

.nav-link {
  color: var(--text-muted);
  border-radius: 999px;
}

.nav-link.active,
.nav-link:hover {
  color: var(--accent-dark);
  background: rgba(45, 194, 199, 0.12);
}

.money-prefix {
  font-size: 0.7em;
}

.chart-range-btn {
  background-color: rgb(245, 245, 245);
  color: black;
}

.chart-range-btn:hover {
  background-color: rgb(223, 223, 223);
}

.btn-check:checked + .chart-range-btn {
  background-color: var(--accent);
  color: white;
}

.small-copy {
  font-size: 12px;
}

.hero-card {
  background: linear-gradient(135deg, #ffffff, #eef7f8);
  border: 1px solid var(--surface-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 12px 24px rgba(28, 82, 94, 0.08);
}

.eyebrow {
  margin-bottom: 0.4rem;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-card {
  background: rgba(45, 194, 199, 0.12);
  border: 1px solid rgba(34, 151, 156, 0.2);
  border-radius: 0.75rem;
  padding: 1rem;
}

.upload-zone {
  border: 2px dashed rgba(34, 151, 156, 0.35);
  border-radius: 1rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fcfc, #f1f7f7);
  text-align: center;
}

.info-box {
  background: #f1f9fa;
  border: 1px solid var(--surface-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

.info-box summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
}

.error-illustration {
  max-width: 360px;
}

.hidden {
  display: none !important;
}