.portal-body { background: #f4f6fb; color: #1b2434; }
#portal-shell { max-width: 640px; margin: 0 auto; min-height: 100vh; background: #fff; box-shadow: 0 0 40px rgba(0,0,0,0.04); }
#portal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e6e9f0;
}
.portal-brand { font-size: 18px; font-weight: 700; color: #1b2434; text-decoration: none; }
.portal-brand span { color: #3d8bfd; }
.portal-nav { display: flex; gap: 16px; font-size: 13px; }
.portal-nav a { color: #6b7690; text-decoration: none; }
.portal-nav a.active { color: #1b2434; font-weight: 600; }
#portal-main { padding: 24px 20px 60px; }

.portal-card {
  background: #fff;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.portal-h1 { font-size: 24px; margin: 0 0 8px; }
.portal-sub { color: #6b7690; font-size: 14px; margin-bottom: 20px; }

.portal-field { margin-bottom: 16px; }
.portal-field label { display: block; font-size: 13px; color: #6b7690; margin-bottom: 6px; }
.portal-field input, .portal-field textarea, .portal-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d5dae4;
  border-radius: 8px;
  font-size: 15px;
  color: #1b2434;
}
.portal-btn {
  display: inline-block;
  width: 100%;
  background: #3d8bfd;
  color: #fff;
  border: none;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.portal-btn.secondary { background: #eef1f7; color: #1b2434; }
.portal-alert { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.portal-alert-error { background: #fde8e8; color: #b42318; }
.portal-alert-success { background: #e7f7ee; color: #067647; }

.ride-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #eef1f7;
}
.ride-row:last-child { border-bottom: none; }
.ride-addr { font-size: 14px; }
.ride-meta { font-size: 12px; color: #6b7690; margin-top: 2px; }
.ride-status {
  font-size: 11px; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; font-weight: 600;
}
.ride-status.pending, .ride-status.dispatched { background: #fff4e5; color: #b54708; }
.ride-status.en_route, .ride-status.arrived, .ride-status.in_progress { background: #e6f0ff; color: #175cd3; }
.ride-status.completed { background: #e7f7ee; color: #067647; }
.ride-status.cancelled, .ride-status.no_show { background: #f2f4f7; color: #667085; }

.otp-inputs { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.otp-inputs input {
  width: 46px; height: 56px; text-align: center; font-size: 24px;
  border: 1px solid #d5dae4; border-radius: 8px;
}
.portal-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }