body {
  margin: 0;
  background: #f6f7fb;
  color: #172033;
  -webkit-font-smoothing: antialiased;
}

.safe-bottom {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.card {
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06);
}

.orange-gradient {
  background: linear-gradient(135deg, #ff7a1a 0%, #ff9f43 100%);
}

.dark-card {
  background: linear-gradient(135deg, #1d2638 0%, #111827 100%);
}

.tab-active {
  color: #ff7a1a;
}

.nav-btn {
  transition: 0.2s ease;
}

.nav-btn:active {
  transform: scale(0.94);
}

.chart-canvas {
  width: 100% !important;
  height: 240px !important;
  max-height: 320px;
}

.status-green {
  background: #dcfce7;
  color: #15803d;
}

.status-red {
  background: #fee2e2;
  color: #b91c1c;
}

.status-orange {
  background: #ffedd5;
  color: #c2410c;
}

.status-gray {
  background: #f1f5f9;
  color: #475569;
}

.input {
  width: 100%;
  background: #ffffff;
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
}

.input:focus {
  box-shadow: 0 0 0 2px rgba(255, 122, 26, 0.2);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-card {
  width: 100%;
  max-width: 448px;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
}

.hidden {
  display: none;
}