body { font-family: 'Inter', ui-sans-serif, system-ui; }

.skeleton-card {
  height: 96px;
  border-radius: 1rem;
  background: linear-gradient(90deg, #eef1f5 25%, #e4e8ee 37%, #eef1f5 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.stat-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #eef1f5;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,0.03);
}
.stat-card .stat-label { font-size: 11px; font-weight: 600; color: #94a3b8; letter-spacing: 0.03em; text-transform: uppercase; }
.stat-card .stat-value { font-size: 1.35rem; font-weight: 800; color: #1e293b; margin-top: 4px; }
.stat-card .stat-delta { font-size: 12px; font-weight: 600; margin-top: 4px; }
.stat-delta.up { color: #059669; }
.stat-delta.down { color: #dc2626; }
.stat-delta.flat { color: #94a3b8; }

.quick-btn {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 1rem;
  padding: 1.1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(16,24,40,0.03);
  transition: all 0.15s;
  text-align: center;
}
.quick-btn:active { transform: scale(0.97); background: #f8fafc; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: #fff; border-radius: 1.25rem; padding: 1.5rem; width: 100%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.modal-header { font-weight: 700; font-size: 1.05rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.5rem; color: #1e293b; }
.modal-footer { display: flex; gap: 0.6rem; margin-top: 1rem; }

.field-label { display: block; font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 0.35rem; }
.field-input {
  width: 100%; padding: 0.65rem 0.9rem; border-radius: 0.7rem; border: 1px solid #e2e8f0;
  font-size: 0.9rem; outline: none;
}
.field-input:focus { border-color: #e0122a; box-shadow: 0 0 0 3px rgba(224,18,42,0.12); }

.btn-primary {
  flex: 1; background: #e0122a; color: #fff; font-weight: 700; padding: 0.7rem; border-radius: 0.75rem;
  transition: background 0.15s;
}
.btn-primary:hover { background: #b40e21; }
.btn-secondary {
  flex: 1; background: #f1f5f9; color: #475569; font-weight: 600; padding: 0.7rem; border-radius: 0.75rem;
}
.btn-secondary:hover { background: #e2e8f0; }

.tab-btn {
  padding: 0.55rem 1.1rem; border-radius: 0.65rem; font-size: 0.85rem; font-weight: 600; color: #64748b; background: #fff; border: 1px solid #e2e8f0;
}
.tab-btn.active { background: #0b1b3a; color: #fff; border-color: #0b1b3a; }

.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 11px; font-weight: 700;
  padding: 0.25rem 0.6rem; border-radius: 999px;
}
.badge-green { background: #ecfdf5; color: #059669; }
.badge-yellow { background: #fffbeb; color: #d97706; }
.badge-red { background: #fef2f2; color: #dc2626; }
.badge-gray { background: #f1f5f9; color: #64748b; }
.badge-orange { background: #fff7ed; color: #ea580c; }

.branch-card {
  background: #fff; border-radius: 1rem; border: 1px solid #eef1f5; padding: 1rem 1.2rem;
  box-shadow: 0 1px 2px rgba(16,24,40,0.03);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }