/* ===============================
   Global
=============================== */
body {
  background: #f4f6fb;
}

/* ===============================
   Header / Title
=============================== */
.page-header {
  background: linear-gradient(135deg,#0d6efd,#20c997);
  color:#fff;
  border-radius:22px;
  padding:34px 32px;
  margin-bottom:32px;
  box-shadow:0 25px 50px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}

.page-header::after {
  content:'';
  position:absolute;
  top:-40px;
  right:-40px;
  width:180px;
  height:180px;
  background:rgba(255,255,255,.12);
  border-radius:50%;
}

.page-title {
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:-.5px;
  margin-bottom:10px;
}

.page-subtitle {
  font-size:1rem;
  font-weight:500;
  opacity:.92;
  max-width:520px;
  line-height:1.6;
}

/* ===============================
   Earnings Card
=============================== */
.earn-card {
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  transition:.3s ease;
  position:relative;
  overflow:hidden;
}

.earn-card:hover {
  transform:translateY(-4px);
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}

.earn-icon {
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#20c997,#0d6efd);
  color:#fff;
  font-size:1.2rem;
  margin-bottom:12px;
}

.earn-value {
  font-size:1.8rem;
  font-weight:800;
  color: #464b48;
}

.earn-label {
  font-size:.85rem;
  color:#6c757d;
}

/* ===============================
   Cards
=============================== */
.panel-card {
  border:none;
  border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.1);
  transition:.25s ease;
}

.panel-card:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 45px rgba(0,0,0,.15);
}

.card-header {
  background:#fff;
  border-bottom:1px solid #eef0f4;
  font-weight:700;
}

/* ===============================
   Trip Cards
=============================== */
.trip-card {
  border:1px solid #eef0f4;
  border-radius:18px;
  padding:18px;
  margin-bottom:16px;
  transition:.25s ease;
}

.trip-card:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(0,0,0,.1);
}

.trip-meta {
  font-size:.85rem;
  color:#6c757d;
}

.progress {
  height:8px;
  border-radius:10px;
}

/* ===============================
   Request Cards
=============================== */
.req-card {
  border:1px solid #eef0f4;
  border-radius:18px;
  padding:18px;
  transition:.25s ease;
}

.req-card:hover {
  background:#f9fafc;
}

.req-actions .btn {
  min-width:92px;
}

/* ===============================
   Buttons
=============================== */
.btn {
  border-radius:14px;
}

.btn-primary {
  box-shadow:0 8px 20px rgba(13,110,253,.35);
}

/* ===============================
   Soft Badges
=============================== */
.badge-soft {
  padding:.45em .95em;
  border-radius:50px;
  font-size:.75rem;
  font-weight:700;
}

.badge-soft.success {background:#d1f7ea;color:#0f5132}