/* ========================================================= 
   BALO — DASHBOARD (FINAL BUILD, DAY/NIGHT FIXED)
   Scoped only to .db-body
   ========================================================= */

/* ---------------------------------------------------------
   1) TOKENS (inherit from Zen Calm global variables)
   --------------------------------------------------------- */
.db-body {
  --db-max: 1180px;
  --radius: 18px;
  --gap: clamp(16px, 2.2vw, 24px);

  /* Text tones */
  --db-text: var(--zen-text, #e9eefb);
  --db-muted: var(--zen-muted, #9aa6b0);

  /* Card/frame surfaces */
  --db-card-bg: var(--zen-card-bg, rgba(10,14,20,.88));
  --db-card-bd: var(--zen-card-bd, rgba(148,163,184,.12));
  --db-shadow: var(--zen-shadow, 0 10px 30px rgba(0,0,0,.36));

  /* Inputs */
  --db-input-bg: color-mix(in srgb, #0b1224 72%, transparent);
  --db-input-bg-day: #f8fafc;
  --db-input-bd: rgba(148,163,184,.22);
  --db-input-bd-focus: rgba(99,102,241,.45);

  /* Upload button fix */
  --db-upload-day-bg: #ffffff;
  --db-upload-day-bd: rgba(148,163,184,.55);
  --db-upload-day-hover: #f1f5f9;
}

/* =========================================================
   DAY OVERRIDES — make dashboard readable & bright
   ========================================================= */
body.balo-day.db-body {
  --db-text: #0f172a;
  --db-muted: #475569;

  /* Pure white cards */
  --db-card-bg: rgba(255,255,255,.96);
  --db-card-bd: rgba(148,163,184,.35);
  --db-shadow: 0 18px 40px rgba(15,23,42,.08);

  /* Inputs day mode */
  --db-input-bg: #ffffff;
  --db-input-bd: rgba(148,163,184,.55);

  /* Upload button fix */
  --db-upload-day-bg: #ffffff;
  --db-upload-day-hover: #f1f5f9;
}

/* =========================================================
   2) WRAPPER
   ========================================================= */
.db-body .db-wrap {
  padding: clamp(16px, 3.5vw, 32px);
  color: var(--db-text);
}

/* =========================================================
   3) HERO
   ========================================================= */
.db-body .db-hero {
  position: relative;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 16px clamp(20px, 4vw, 40px);
  isolation: isolate;
  color: var(--db-text);
}

.db-body .db-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(880px 520px at 20% -8%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(760px 460px at 80% -12%, rgba(255,214,165,.06), transparent 60%);
}

.db-body .db-title {
  font-size: clamp(28px, 5.2vw, 48px);
  margin: 12px 0 8px;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  color: var(--db-text);
}

.db-body .db-sub {
  opacity: .95;
  font-size: clamp(16px, 2.2vw, 19px);
  max-width: 70ch;
  margin: 0 auto;
}

.db-body .db-time {
  margin-top: 8px;
  color: var(--db-muted);
}

/* Logo centering */
.db-body .db-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================================================
   4) GRID LAYOUT
   ========================================================= */
.db-body .db-container {
  max-width: var(--db-max);
  margin: 0 auto;
}

.db-body .db-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
}

.db-body .db-card {
  grid-column: span 4;
}
.db-body .db-card--wide {
  grid-column: span 12;
}

/* Responsive */
@media (max-width: 1024px) {
  .db-body .db-card {
    grid-column: span 6;
  }
}
@media (max-width: 720px) {
  .db-body .db-card,
  .db-body .db-card--wide {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   5) CARDS
   ========================================================= */
.db-body .db-card {
  background: var(--db-card-bg);
  border: 1px solid var(--db-card-bd);
  border-radius: var(--radius);
  box-shadow: var(--db-shadow);
  padding: clamp(18px, 2.2vw, 26px);
  color: var(--db-text);
  backdrop-filter: saturate(140%) blur(10px);
}

/* =========================================================
   TRACKING HUB CARD
   ========================================================= */
.db-body .db-card-tracking-hub {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.db-body .db-card-tracking-hub::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
  pointer-events: none;
}

.db-body .db-tracking-hub-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.db-body .db-card-tracking-hub h2 {
  font-size: clamp(20px, 2.5vw, 26px);
  margin: 0 0 10px;
  color: var(--db-text);
}

.db-body .db-tracking-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.db-body .db-tracking-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.db-body .db-tracking-stat strong {
  font-size: 24px;
  color: var(--db-text);
  line-height: 1.1;
}

.db-body .btn-tracking-hub {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(99, 102, 241, 0.9));
  border-color: rgba(139, 92, 246, 0.5);
  color: #fff;
  padding: 12px 24px;
  font-weight: 600;
  margin-top: 8px;
}

.db-body .btn-tracking-hub:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
  transform: translateY(-2px);
}

/* Day mode tracking hub card */
body.balo-day.db-body .db-card-tracking-hub::before {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
}

body.balo-day.db-body .db-tracking-stat {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.15);
}

/* =========================================================
   CONTACT SUPPORT CARD
   ========================================================= */
.db-body .db-card-support {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.db-body .db-card-support::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
  pointer-events: none;
}

.db-body .db-support-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  position: relative;
}

.db-body .db-support-icon {
  width: 48px;
  height: 48px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
}

.db-body .db-support-header h2 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
}

.db-body .db-support-desc {
  font-size: 0.9375rem;
  color: var(--db-muted);
  margin: 0 0 1.25rem;
  position: relative;
}

.db-body .db-support-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  position: relative;
}

.db-body .db-support-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.db-body .db-support-label {
  font-size: 0.75rem;
  color: var(--db-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.db-body .db-support-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--db-text);
}

.db-body .db-support-email {
  font-size: 0.875rem;
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.db-body .db-support-email:hover {
  text-decoration: underline;
}

.db-body .db-support-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: rgba(59, 130, 246, 0.5);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  position: relative;
  transition: all 0.2s ease;
}

.db-body .db-support-btn:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
  transform: translateY(-2px);
}

/* Day mode support card */
body.balo-day.db-body .db-card-support::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(37, 99, 235, 0.04) 100%);
}

body.balo-day.db-body .db-support-info-item {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.12);
}

/* =========================================================
   YOUR OVERVIEW CARD
   ========================================================= */
.db-body .db-card-overview {
  position: relative;
  overflow: hidden;
}

.db-body .db-card-overview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%);
  pointer-events: none;
}

.db-body .db-overview-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.db-body .db-overview-icon {
  width: 44px;
  height: 44px;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
}

.db-body .db-overview-header h2 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
}

.db-body .db-overview-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.db-body .db-overview-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.db-body .db-overview-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--db-text);
  line-height: 1.2;
}

.db-body .db-overview-stat-label {
  font-size: 0.75rem;
  color: var(--db-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

.db-body .db-overview-plans {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.db-body .db-overview-plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.balo-day .db-body .db-overview-plan {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.db-body .db-overview-plan-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.db-body .db-overview-plan-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--db-text);
}

.db-body .db-overview-plan-due {
  font-size: 0.75rem;
  color: var(--db-muted);
}

.db-body .db-overview-plan-status {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
}

.db-body .db-overview-plan-status.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.db-body .db-overview-plan-status.inactive {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.db-body .db-overview-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.db-body .db-overview-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: rgba(16, 185, 129, 0.5);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  width: 100%;
  text-align: center;
  transition: all 0.2s ease;
}

.db-body .db-overview-btn:hover {
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
  transform: translateY(-2px);
}

.db-body .db-overview-link {
  font-size: 0.875rem;
  color: #10b981;
  text-decoration: none;
}

.db-body .db-overview-link:hover {
  text-decoration: underline;
}

/* Day mode overview card */
body.balo-day.db-body .db-card-overview::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(5, 150, 105, 0.04) 100%);
}

body.balo-day.db-body .db-overview-stat {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.12);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .db-body .db-overview-stats {
    flex-wrap: wrap;
  }
  .db-body .db-overview-stat {
    min-width: calc(50% - 0.5rem);
  }
}

/* =========================================================
   STAT CARDS (Revenue, Sessions, Messages)
   ========================================================= */
.db-body .db-stat {
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
}

.db-body .db-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.db-body .db-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.db-body .db-stat-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.25rem;
  color: var(--db-text);
}

.db-body .db-stat-sub {
  font-size: 0.75rem;
  color: var(--db-muted);
  margin: 0 0 0.5rem;
}

.db-body .db-stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--db-text);
}

.db-body .db-stat-total {
  font-size: 0.8125rem;
  color: var(--db-muted);
  margin: 0.5rem 0 0;
}

.db-body .db-stat-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

/* Revenue Card - Yellow/Amber */
.db-body .db-stat-revenue::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.05) 100%);
}

.db-body .db-stat-revenue .db-stat-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.db-body .db-stat-revenue .db-stat-value {
  color: #f59e0b;
}

body.balo-day.db-body .db-stat-revenue::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(217, 119, 6, 0.04) 100%);
}

/* Sessions Card - Indigo */
.db-body .db-stat-sessions::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.05) 100%);
}

.db-body .db-stat-sessions .db-stat-icon {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

.db-body .db-stat-sessions .db-stat-value {
  color: #6366f1;
}

body.balo-day.db-body .db-stat-sessions::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(79, 70, 229, 0.04) 100%);
}

/* Messages Card - Rose/Pink */
.db-body .db-stat-messages::before {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(225, 29, 72, 0.05) 100%);
}

.db-body .db-stat-messages .db-stat-icon {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
}

.db-body .db-stat-messages .db-stat-value {
  color: #f43f5e;
}

.db-body .db-stat-messages .db-stat-value.has-unread {
  animation: pulse-unread 2s ease-in-out infinite;
}

@keyframes pulse-unread {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.db-body .db-stat-messages .db-stat-link {
  background: rgba(244, 63, 94, 0.1);
  color: #f43f5e;
}

.db-body .db-stat-messages .db-stat-link:hover {
  background: rgba(244, 63, 94, 0.2);
}

body.balo-day.db-body .db-stat-messages::before {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.06) 0%, rgba(225, 29, 72, 0.04) 100%);
}

/* =========================================================
   6) PROFILE SECTION
   ========================================================= */
.db-body .db-id {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 160px 1fr;
  align-items: center;
}
@media (max-width: 720px) {
  .db-body .db-id {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.db-body .db-avatar {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
}

body.balo-day .db-body .db-avatar {
  border-color: rgba(15,23,42,.15);
}

.db-body .db-id-name {
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 6px;
  color: var(--db-text);
}

.db-body .db-id-sub {
  margin: 0 0 10px;
  color: var(--db-muted);
}

/* Inline form */
.db-body .db-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.db-body .db-input {
  width: 100%;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--db-input-bd);
  background: var(--db-input-bg);
  color: var(--db-text);
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.balo-day.db-body .db-input {
  background: var(--db-input-bg-day);
  border-color: rgba(148,163,184,.45);
  color: #0f172a;
}

.db-body .db-input:focus {
  border-color: var(--db-input-bd-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,.20);
}

/* =========================================================
   7) FORM ELEMENTS (Offer creation)
   ========================================================= */
.db-body textarea.db-input {
  resize: vertical;
  min-height: 120px;
}

/* Select boxes */
.db-body select.db-input {
  appearance: none;
  background-position: right 12px center;
  background-repeat: no-repeat;
}

body.balo-day.db-body select.db-input {
  background-color: #ffffff;
}

/* Upload field (fix bright day-mode issue) */
.db-body .db-upload-btn {
  background: var(--db-upload-day-bg);
  border: 1px solid var(--db-upload-day-bd);
  color: #0f172a;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
}

.db-body .db-upload-btn:hover {
  background: var(--db-upload-day-hover);
}

/* =========================================================
   8) BUTTONS
   ========================================================= */
.db-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,.22);
  color: #fff;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(99,102,241,.20), rgba(99,102,241,0)),
    linear-gradient(180deg, rgba(39,55,110,.92), rgba(20,31,64,.95));
  transition: transform .12s, box-shadow .2s, border-color .2s;
}

.db-body .btn:hover {
  transform: translateY(-1px);
  border-color: rgba(129,140,248,.55);
  box-shadow: 0 0 40px 6px rgba(99,102,241,.25);
}

/* Day mode button fix */
body.balo-day.db-body .btn {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
  box-shadow: 0 10px 25px rgba(59,130,246,.25);
}

body.balo-day.db-body .btn:hover {
  box-shadow: 0 14px 32px rgba(59,130,246,.35);
}

/* =========================================================
   9) TABS
   ========================================================= */
.db-body .tabbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.db-body .tabbar button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--db-card-bd);
  background: transparent;
  color: var(--db-text);
  cursor: pointer;
}

.db-body .tabbar button.active {
  background: linear-gradient(180deg, rgba(99,102,241,.95), rgba(67,56,202,.95));
  color: #fff;
  border-color: transparent;
}

.db-body .tab {
  display: none;
}
.db-body .tab.active {
  display: block;
}

/* =========================================================
   10) MODAL
   ========================================================= */
.db-body .db-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

.db-body .db-modal.open {
  display: flex;
}

.db-body .db-modal-inner {
  position: relative;
  max-width: 480px;
  width: 90%;
  background: var(--db-card-bg);
  border: 1px solid var(--db-card-bd);
  border-radius: 18px;
  padding: 24px 20px;
  color: var(--db-text);
  box-shadow: var(--db-shadow);
}

.db-body .db-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: var(--db-text);
}

/* =========================================================
   11) MOTION SAFETY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .db-body .btn,
  .db-body .db-input { transition: none !important; }
}

/* ✅ No min-height on .hero-wrap (home page) – it will size naturally
   from its padding + content now, so the home hero won't become oversized. */
/* =========================================================
   Dashboard hero — glass cards
   ========================================================= */

.db-hero {
  background: transparent;
}

/* Main hero cards inside the dashboard hero */
.db-hero .dashboard-card {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.32),
    rgba(15, 23, 42, 0.12)
  );
  border: 1px solid rgba(248, 250, 252, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
}

/* Day mode – lighter, frosted glass */
body.balo-day.db-body .db-hero .dashboard-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.64)
  );
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}
/* ============================================
   Zen Collapsible Panels (Dashboard)
   Works with day + night
   ============================================ */

body.zen-calm .db-panel {
  max-width: var(--db-max, 1180px);
  margin: 0 auto 18px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.38),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  transition:
    box-shadow 0.25s ease,
    transform 0.18s ease,
    border-color 0.25s ease,
    background 0.3s ease;
}

/* Day mode (no balo-night) */
body.zen-calm:not(.balo-night) .db-panel {
  background: radial-gradient(circle at top left,
    rgba(94, 234, 212, 0.08),
    rgba(59, 130, 246, 0.03) 35%,
    rgba(15, 23, 42, 0.01) 100%);
  color: #020617;
}

/* Night mode */
body.zen-calm.balo-night .db-panel {
  background: radial-gradient(circle at top left,
    rgba(59, 130, 246, 0.15),
    rgba(15, 23, 42, 0.95) 50%);
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.55);
}

/* Hover / active lift */
body.zen-calm .db-panel:hover {
  transform: translateY(-1px);
  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.5),
    0 0 0 1px rgba(56, 189, 248, 0.35);
  border-color: rgba(56, 189, 248, 0.75);
}

/* ============================================
   Header of each panel
   ============================================ */
body.zen-calm .db-panel-head {
  width: 100%;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.0),
    rgba(37, 99, 235, 0.10)
  );
  color: inherit;
  text-align: left;
}

body.zen-calm:not(.balo-night) .db-panel-head {
  background: linear-gradient(
    90deg,
    rgba(249, 250, 251, 0.8),
    rgba(191, 219, 254, 0.5)
  );
}

body.zen-calm .db-panel-head:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.9);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Title */
body.zen-calm .db-panel-head span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Little glowing dot before title */
body.zen-calm .db-panel-head span:first-child::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle,
    rgba(56, 189, 248, 0.95),
    rgba(59, 130, 246, 0.1));
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
}

/* Icon (chevron) */
body.zen-calm .db-panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.85rem;
  opacity: 0.85;
  transition: transform 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}

body.zen-calm .db-panel-head:hover .db-panel-icon {
  background: rgba(15, 23, 42, 0.14);
  opacity: 1;
}

/* Rotated when open */
body.zen-calm .db-panel.is-open .db-panel-icon {
  transform: rotate(180deg);
}

/* ============================================
   Panel body
   ============================================ */
body.zen-calm .db-panel-body {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Soft background stripes for items */
body.zen-calm .db-panel-body .zen-card-item {
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.03),
    rgba(148, 163, 184, 0.06)
  );
}

body.zen-calm.balo-night .db-panel-body .zen-card-item {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.9),
    rgba(30, 64, 175, 0.55)
  );
}

/* Muted text */
body.zen-calm .db-panel-body .muted {
  color: rgba(148, 163, 184, 0.95);
}

/* Buttons inside cards */
body.zen-calm .db-panel-body .btn.btn-small {
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 999px;
  margin-top: 4px;
  margin-right: 4px;
}

/* Danger buttons subtle but clear */
body.zen-calm .db-panel-body .btn-danger {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.55);
}

body.zen-calm:not(.balo-night) .db-panel-body .btn-danger {
  color: #b91c1c;
  background: rgba(254, 226, 226, 0.9);
  border-color: rgba(248, 113, 113, 0.7);
}
/* ================================
   Zen Dashboard Panels (Collapsible)
   ================================ */

/* Base panel wrapper */
.db-panel {
  border-radius: 14px;
  margin: 12px 0;
  overflow: hidden;
  background: var(--zen-surface, #f8fafc); /* light surface */
  color: var(--zen-text, #0f172a);
  border: 1px solid var(--zen-border-soft, rgba(15, 23, 42, 0.08));
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

/* Night mode */
body.balo-night .db-panel {
  background: var(--zen-surface-dark, #020617);
  color: var(--zen-text-dark, #e5e7eb);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

/* Header (the clickable bar) */
.db-panel-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.02),
    rgba(59, 130, 246, 0.08)
  );
  color: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Night header */
body.balo-night .db-panel-head {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.95),
    rgba(37, 99, 235, 0.25)
  );
}

/* Hover / focus for better clarity in day mode */
.db-panel-head:hover,
.db-panel-head:focus-visible {
  outline: none;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.09),
    rgba(59, 130, 246, 0.14)
  );
}

body.balo-night .db-panel-head:hover,
body.balo-night .db-panel-head:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.95),
    rgba(59, 130, 246, 0.4)
  );
}

/* Icon */
.db-panel-icon {
  font-size: 0.9rem;
  opacity: 0.7;
  transform: translateY(1px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Rotate icon when open */
.db-panel.is-open .db-panel-icon {
  transform: rotate(180deg) translateY(-1px);
  opacity: 1;
}

/* Title text in header */
.db-panel-head span:first-child {
  letter-spacing: 0.01em;
}

/* Panel body (collapsible content) */
.db-panel-body {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  background: var(--zen-surface-soft, #ffffff);
  color: var(--zen-text, #020617);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Night body */
body.balo-night .db-panel-body {
  background: radial-gradient(circle at top left, #020617 0%, #020617 40%, #020617 100%);
  color: var(--zen-text-dark, #e5e7eb);
  border-top-color: rgba(148, 163, 184, 0.35);
}

/* Text inside body – make sure paragraphs and small text are readable */
.db-panel-body p,
.db-panel-body small,
.db-panel-body span,
.db-panel-body li {
  color: inherit;
}

/* Muted bits inside (labels etc.) */
.db-panel-body .muted {
  color: var(--zen-muted, #4b5563);
}

body.balo-night .db-panel-body .muted {
  color: var(--zen-muted-dark, #9ca3af);
}

/* Listing items inside panels */
.db-panel-body .zen-card-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.db-panel-body .zen-card-item:last-child {
  border-bottom: none;
}

.db-panel-body .zen-card-item strong {
  font-weight: 600;
  display: inline-block;
  margin-bottom: 2px;
}

/* Buttons inside panels */
.db-panel-body .btn {
  margin-top: 6px;
  margin-right: 6px;
}

/* Optional: slightly tighter spacing on mobile */
@media (max-width: 640px) {
  .db-panel-head {
    padding: 10px 12px;
  }
  .db-panel-body {
    padding: 10px 12px 12px;
  }
}
/* Force detail lines inside dashboard panels to be fully readable */

/* Light mode: make them dark, not grey */
.db-panel-body .zen-card-item small.muted,
.db-panel-body .zen-card-item span.muted {
  color: var(--zen-text, #020617) !important;
}

/* Night mode: bright enough on dark background */
body.balo-night .db-panel-body .zen-card-item small.muted,
body.balo-night .db-panel-body .zen-card-item span.muted {
  color: var(--zen-text-dark, #e5e7eb) !important;
}
/* ==========================================
   Dashboard — Plan chips (Service / Mentorship)
   ========================================== */

.planchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: rgba(248, 250, 252, 0.9);
  color: #0f172a;
}

/* Active */
.chip-active {
  background: #bbf7d0;
  color: #064e3b;
  border-color: #16a34a;
}

/* Inactive */
.chip-inactive {
  background: #e5e7eb;
  color: #111827;
  border-color: #9ca3af;
}

/* Grace period */
.chip-grace {
  background: #fef9c3;
  color: #854d0e;
  border-color: #eab308;
}

/* Overdue */
.chip-overdue {
  background: #fee2e2;
  color: #991b1b;
  border-color: #dc2626;
}

/* Blocked */
.chip-blocked {
  background: #fecaca;
  color: #7f1d1d;
  border-color: #b91c1c;
}

/* ================================
   Night Mode — Enhanced contrast
   ================================ */

body.balo-night .planchip {
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.95);
}

body.balo-night .chip-active {
  background: #16a34a;
  color: #ecfdf5;
  border-color: #bbf7d0;
}

body.balo-night .chip-inactive {
  background: #4b5563;
  color: #f9fafb;
  border-color: #9ca3af;
}

/* ==========================================
   Dispute Modal Styling
   ========================================== */

#balo-dispute-modal .db-modal-inner {
  max-width: 520px;
}

.acc-dispute-btn {
  background: #dc2626 !important;
  color: #fff !important;
  border-radius: 6px;
  margin-left: 6px;
}
/* ===========================================================
   Balo Dashboard — Highlight ONLY the Setup Checklist box
   =========================================================== */

.db-card h2 + .muted + .muted + .db-list,
.db-card h2:contains("Setup checklist") {
  /* nothing here – modern browsers don’t support :contains */
}

/* Target the Setup Checklist card using its heading text */
.db-card:has(> h2:nth-child(1):where(:is(:not(.db-stat-title))):where(:not(.db-id-name))) {
}

.db-card:has(> h2:nth-child(1):where(:is(*)):where(:not(.db-stat-title))) h2 {
}

/* Final reliable selector (works everywhere): 
   This card is ALWAYS the ONLY card whose <h2> contains the words “Setup checklist”
*/
.db-card h2 {
  /* we will hook into its parent via attribute selector */
}
.db-card[data-setup="highlight"] {
}

/* We tag the Setup Checklist card using a unique attribute via CSS only */
section.db-card h2:where(:not(.db-stat-title))::before {
  content: "";
}

/* REAL WORKING SOLUTION — safe and clean */
.db-card.setup-checklist {
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(120,180,255,0.3);

  /* soft glow */
  box-shadow:
    0 0 12px rgba(120,160,255,0.35),
    0 0 22px rgba(120,160,255,0.15);

  /* subtle breathing animation */
  animation: setupGlow 4s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.db-card.setup-checklist:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 18px rgba(120,160,255,0.55),
    0 0 28px rgba(120,160,255,0.25);
}

/* Animation */
@keyframes setupGlow {
  0%   { box-shadow: 0 0 10px rgba(120,160,255,0.25); }
  50%  { box-shadow: 0 0 22px rgba(120,160,255,0.45); }
  100% { box-shadow: 0 0 10px rgba(120,160,255,0.25); }
}

/* NIGHT MODE BOOST (balo-night class on body) */
body.balo-night .db-card.setup-checklist {
  background: rgba(30,40,70,0.45);
  border-color: rgba(140,200,255,0.45);
  box-shadow:
    0 0 14px rgba(140,200,255,0.5),
    0 0 32px rgba(140,200,255,0.25);
}
.notif-close-btn {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 12px;
}

.notif-close-btn:hover {
    background: rgba(255,255,255,0.30);
}
/* ===========================================================
   Dashboard Notification Glow
   (matches Setup Checklist style, slightly softer)
   =========================================================== */

.db-dashboard-notif {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 18px;
  margin-top: 10px;
  border-radius: 14px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(120,180,255,0.35);

  /* breathing Zen glow */
  box-shadow:
    0 0 10px rgba(120,160,255,0.30),
    0 0 18px rgba(120,160,255,0.20);

  animation: notifGlow 4s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover lift effect */
.db-dashboard-notif:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 16px rgba(120,160,255,0.50),
    0 0 26px rgba(120,160,255,0.25);
}

/* Glow animation */
@keyframes notifGlow {
  0%   { box-shadow: 0 0 8px rgba(120,160,255,0.25); }
  50%  { box-shadow: 0 0 18px rgba(120,160,255,0.45); }
  100% { box-shadow: 0 0 8px rgba(120,160,255,0.25); }
}

/* NIGHT MODE BOOST (balo-night body class) */
body.balo-night .db-dashboard-notif {
  background: rgba(25,35,60,0.40);
  border-color: rgba(140,200,255,0.40);
  box-shadow:
    0 0 14px rgba(140,200,255,0.45),
    0 0 22px rgba(140,200,255,0.25);
}
.db-dashboard-notif .notif-close-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.db-dashboard-notif .notif-close-btn:hover {
  background: rgba(255,255,255,0.25);
}
/* ===============================
   Dashboard modals (centered)
   Affects: edit, disputes, contact, panel modal
   =============================== */

.db-modal {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  z-index: 9999;
  display: none;              /* JS switches to block/flex */
  align-items: center;        /* center vertically */
  justify-content: center;    /* center horizontally */
  padding: 16px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.75); /* dark overlay */
}

/* When JS adds .open, use flex to center it */
.db-modal.open {
  display: flex;
}

/* Inner modal box */
.db-modal-inner {
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #020617;                  /* or #ffffff for light */
  color: #e5e7eb;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  position: relative;
}

/* Close button in top-right of the popup */
.db-modal-close,
.db-panel-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Optional: modal title spacing */
.db-modal-title {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
}
/* ============================================================
   Balo Disputes Pro — Frontend Timeline (Phase 12.5)
   Zen Calm Visual Styling (fully scoped)
   ============================================================ */

.balo-timeline-user {
    margin: 20px 0;
    padding-left: 14px;
    border-left: 3px solid var(--zen-accent, #4f46e5);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual timeline entry */
.balo-tl-item {
    position: relative;
    padding: 10px 14px 10px 22px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Subtle glowing dot */
.balo-tl-item:before {
    content: "";
    position: absolute;
    left: -13px;
    top: 20px;
    width: 12px;
    height: 12px;
    background: var(--zen-accent, #4f46e5);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--zen-accent, #4f46e5);
}

/* Time text */
.balo-tl-time {
    font-size: 12px;
    color: var(--zen-muted, #8891a8);
    margin-bottom: 4px;
}

/* Body wrapper */
.balo-tl-body {
    color: var(--zen-text, #e6eaff);
    line-height: 1.45;
}

/* Message text */
.balo-tl-item.balo-tl-message strong {
    color: var(--zen-accent, #4f46e5);
}

.balo-tl-item.balo-tl-message p {
    margin: 4px 0 0;
    font-size: 14px;
}

/* Evidence preview */
.balo-tl-item.balo-tl-evidence img {
    margin-top: 6px;
    border-radius: 10px;
    max-width: 160px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 8px rgba(0,0,0,0.35);
}

.balo-tl-item.balo-tl-evidence a {
    display: inline-block;
    margin-top: 6px;
    color: var(--zen-accent, #4f46e5);
    font-weight: 600;
}

/* Status updates */
.balo-tl-item.balo-tl-status strong {
    color: var(--zen-accent-2, #10b981);
    font-size: 14px;
}

/* Full refund */
.balo-tl-item.balo-tl-refund strong {
    color: #22c55e;
}

/* Partial refund */
.balo-tl-item.balo-tl-refund_partial strong {
    color: #eab308;
}

/* Hover effect for better feel */
.balo-tl-item:hover {
    background: rgba(255,255,255,0.08);
    transition: background 0.25s ease;
}
/* ============================================================
   Balo Timeline — Phase 12.6 Animation Layer
   ============================================================ */

/* Base state (hidden before reveal) */
.balo-timeline-user .balo-tl-item {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}

/* Reveal animation */
.balo-timeline-user .balo-tl-item.balo-show {
    opacity: 1;
    transform: translateY(0px);
}

/* Optional glowing pulse for major events */
@keyframes balodp-pulse {
    0% { box-shadow: 0 0 0px var(--zen-accent, #4f46e5); }
    50% { box-shadow: 0 0 14px var(--zen-accent, #4f46e5); }
    100% { box-shadow: 0 0 0px var(--zen-accent, #4f46e5); }
}

.balo-timeline-user .balo-tl-item.balo-pulse:before {
    animation: balodp-pulse 2.8s infinite ease-in-out;
}
.db-dispute-notice {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  background: rgba(239, 68, 68, 0.08); /* soft red */
  color: #b91c1c;
}

.db-dispute-notice.muted {
  background: rgba(148, 163, 184, 0.08);
  color: #64748b;
}
/* Dispute card header + badge */
.db-dispute-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-dispute-pill {
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;          /* red */
  color: #fff;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3),
              0 0 12px rgba(248, 113, 113, 0.4);
}

/* Notice strip under description */
.db-dispute-notice {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

.db-dispute-notice.muted {
  background: rgba(148, 163, 184, 0.08);
  color: #64748b;
}

/* =========================================================
   ZEN STYLING — Welcome Message & User Name
   ========================================================= */

/* Welcome text with subtle styling */
.db-body .db-welcome-text {
  color: var(--db-text, #e9eefb);
  opacity: 0.9;
}

/* User name with gradient standout effect */
.db-body .db-user-name {
  font-weight: 800;
  background: linear-gradient(135deg, #e0f2fe 0%, #a5b4fc 40%, #c4b5fd 70%, #f0abfc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
  animation: nameGlow 4s ease-in-out infinite;
}

/* Subtle glow animation for the name */
@keyframes nameGlow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(196, 181, 253, 0.5));
  }
}

/* Day mode styling */
.db-body.balo-day .db-welcome-text,
body.balo-day .db-body .db-welcome-text {
  color: #1e293b;
  opacity: 1;
}

.db-body.balo-day .db-user-name,
body.balo-day .db-body .db-user-name {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 40%, #7c3aed 70%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes nameGlowDay {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(79, 70, 229, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.35));
  }
}

.db-body.balo-day .db-user-name,
body.balo-day .db-body .db-user-name {
  animation: nameGlowDay 4s ease-in-out infinite;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .db-body .db-user-name {
    animation: none !important;
    filter: none !important;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .db-body .db-title {
    text-align: center;
  }

  .db-body .db-user-name {
    display: block;
    margin-top: 4px;
  }
}

/* =========================================================
   SKILLSWITCH EXCHANGE FORM — Clear Visual Distinction
   ========================================================= */

/* Exchange Box Base */
.ss-exchange-box {
  position: relative;
  padding: 20px;
  border-radius: 14px;
  margin-bottom: 0;
  border: 2px solid;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-exchange-box:hover {
  transform: translateY(-2px);
}

/* OFFER BOX — Green theme (what you're GIVING) */
.ss-offer-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1);
}

.ss-offer-box:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2);
}

.ss-offer-box .ss-box-header {
  color: #059669;
}

.ss-offer-box .ss-box-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

/* WANT BOX — Blue theme (what you're SEEKING) */
.ss-want-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}

.ss-want-box:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}

.ss-want-box .ss-box-header {
  color: #2563eb;
}

.ss-want-box .ss-box-icon {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

/* Box Header */
.ss-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.ss-box-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
}

.ss-box-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hint text */
.ss-box-hint {
  font-size: 0.85rem;
  color: var(--db-muted, #64748b);
  margin: 0 0 12px 0;
  padding-left: 42px;
}

/* Input inside boxes */
.ss-exchange-box .db-input {
  margin-top: 0;
}

/* Swap Indicator */
.ss-swap-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
  margin: 4px 0;
}

.ss-swap-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);
  border: 2px solid rgba(147, 51, 234, 0.3);
  border-radius: 50%;
  font-size: 20px;
  color: #7c3aed;
  animation: swapPulse 2s ease-in-out infinite;
}

.ss-swap-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@keyframes swapPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* NIGHT MODE — Darker backgrounds with preserved colors */
body.balo-night .ss-offer-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.06) 100%);
  border-color: rgba(16, 185, 129, 0.5);
}

body.balo-night .ss-offer-box .ss-box-header {
  color: #34d399;
}

body.balo-night .ss-offer-box .ss-box-icon {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}

body.balo-night .ss-want-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
  border-color: rgba(59, 130, 246, 0.5);
}

body.balo-night .ss-want-box .ss-box-header {
  color: #60a5fa;
}

body.balo-night .ss-want-box .ss-box-icon {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

body.balo-night .ss-box-hint {
  color: var(--db-muted, #9ca3af);
}

body.balo-night .ss-swap-arrow {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.25) 0%, rgba(124, 58, 237, 0.15) 100%);
  border-color: rgba(147, 51, 234, 0.5);
  color: #a78bfa;
}

body.balo-night .ss-swap-text {
  color: var(--db-muted, #9ca3af);
}

/* Mobile adjustments for SkillSwitch */
@media (max-width: 640px) {
  .ss-exchange-box {
    padding: 16px;
  }

  .ss-box-hint {
    padding-left: 0;
    margin-top: 4px;
  }

  .ss-box-header {
    font-size: 0.8rem;
  }

  .ss-swap-arrow {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}

/* Detail label inside exchange boxes */
.ss-detail-label {
  display: block;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-muted, #64748b);
}

.ss-detail-textarea {
  margin-top: 6px;
}

/* =========================================================
   SKILLSWITCH LISTING DISPLAY — Offer & Want Sections
   ========================================================= */

/* Section container */
.db-ss-section {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 0;
}

/* Offer section - Green */
.db-ss-offer {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.03) 100%);
  border-left: 3px solid #10b981;
}

/* Want section - Blue */
.db-ss-want {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
  border-left: 3px solid #3b82f6;
}

/* Section header */
.db-ss-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.db-ss-icon {
  font-size: 14px;
}

.db-ss-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-muted, #64748b);
}

.db-ss-offer .db-ss-label {
  color: #059669;
}

.db-ss-want .db-ss-label {
  color: #2563eb;
}

/* Title */
.db-ss-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--db-text, #1f2937);
}

/* Description */
.db-ss-description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--db-muted, #4b5563);
  line-height: 1.5;
}

/* Swap divider between sections */
.db-ss-swap-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.db-ss-swap-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(147, 51, 234, 0.1);
  border: 1px solid rgba(147, 51, 234, 0.25);
  border-radius: 50%;
  font-size: 14px;
  color: #7c3aed;
}

/* Night mode */
body.balo-night .db-ss-offer {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.05) 100%);
}

body.balo-night .db-ss-want {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.05) 100%);
}

body.balo-night .db-ss-offer .db-ss-label {
  color: #34d399;
}

body.balo-night .db-ss-want .db-ss-label {
  color: #60a5fa;
}

body.balo-night .db-ss-title {
  color: var(--db-text, #e5e7eb);
}

body.balo-night .db-ss-description {
  color: var(--db-muted, #9ca3af);
}

body.balo-night .db-ss-swap-divider span {
  background: rgba(147, 51, 234, 0.2);
  border-color: rgba(147, 51, 234, 0.4);
  color: #a78bfa;
}

/* =========================================================
   SKILLSWITCH LISTING CARDS — Grid & Card Container
   ========================================================= */

/* Grid container */
.db-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 10px 0;
}

/* Individual listing card */
.db-listing-card {
  background: var(--db-card-bg, #ffffff);
  border: 1px solid var(--db-border, #e5e7eb);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.db-listing-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

/* Sections inside the card */
.db-listing-card .db-ss-section {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-bottom: none;
}

.db-listing-card .db-ss-offer {
  border-radius: 16px 16px 0 0;
  border-top: 4px solid #10b981;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.db-listing-card .db-ss-want {
  border-radius: 0;
  border-top: none;
  border-bottom: 4px solid #3b82f6;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.02) 0%, rgba(59, 130, 246, 0.1) 100%);
}

/* Meta information row */
.db-listing-meta {
  padding: 12px 16px;
  background: var(--db-bg-subtle, #f9fafb);
  border-top: 1px solid var(--db-border, #e5e7eb);
}

.db-meta-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.8rem;
  color: var(--db-muted, #6b7280);
}

/* Action buttons row */
.db-listing-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--db-border, #e5e7eb);
  background: var(--db-card-bg, #ffffff);
}

.db-listing-actions .btn {
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.db-listing-actions .btn-secondary {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
}

.db-listing-actions .btn-secondary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.db-listing-actions .btn-danger-outline {
  background: transparent;
  border: 1px solid #fca5a5;
  color: #dc2626;
}

.db-listing-actions .btn-danger-outline:hover {
  background: #fef2f2;
  border-color: #f87171;
}

.db-delete-status {
  font-size: 0.8rem;
  color: var(--db-muted, #6b7280);
  margin-left: auto;
}

/* Category badge in header */
.db-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 6px;
  text-transform: capitalize;
  margin-left: auto;
}

.db-badge-info {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Empty state */
.db-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--db-bg-subtle, #f9fafb);
  border-radius: 12px;
  border: 2px dashed var(--db-border, #e5e7eb);
}

.db-empty-state p.muted {
  color: var(--db-muted, #6b7280);
  margin: 0 0 8px;
}

.db-empty-state p.small {
  font-size: 0.85rem;
}

/* Night mode - Listing cards */
body.balo-night .db-listing-card {
  background: var(--db-card-bg, #1f2937);
  border-color: var(--db-border, #374151);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
}

body.balo-night .db-listing-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.2);
}

body.balo-night .db-listing-card .db-ss-offer {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.03) 100%);
}

body.balo-night .db-listing-card .db-ss-want {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, rgba(59, 130, 246, 0.15) 100%);
}

body.balo-night .db-listing-meta {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--db-border, #374151);
}

body.balo-night .db-listing-actions {
  background: var(--db-card-bg, #1f2937);
  border-color: var(--db-border, #374151);
}

body.balo-night .db-listing-actions .btn-secondary {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.balo-night .db-listing-actions .btn-secondary:hover {
  background: #4b5563;
  border-color: #6b7280;
}

body.balo-night .db-listing-actions .btn-danger-outline {
  border-color: #b91c1c;
  color: #f87171;
}

body.balo-night .db-listing-actions .btn-danger-outline:hover {
  background: rgba(185, 28, 28, 0.15);
}

body.balo-night .db-badge-info {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.3);
}

body.balo-night .db-empty-state {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--db-border, #374151);
}

/* Responsive - Single column on mobile */
@media (max-width: 640px) {
  .db-listing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .db-listing-card .db-ss-section {
    padding: 12px 14px;
  }

  .db-listing-actions {
    flex-wrap: wrap;
  }

  .db-listing-actions .btn {
    flex: 1;
    min-width: 100px;
  }
}

/* =========================================================
   FORM DETAILS SECTION — Location, Mode & Details Grid
   ========================================================= */

.ss-details-section {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.04) 0%, rgba(99, 102, 241, 0.02) 100%);
  border: 1px solid rgba(147, 51, 234, 0.15);
  border-radius: 16px;
  padding: 20px;
  margin: 24px 0;
}

.ss-details-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(147, 51, 234, 0.12);
}

.ss-details-icon {
  font-size: 20px;
}

.ss-details-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7c3aed;
}

.ss-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ss-detail-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-detail-item.ss-detail-full {
  grid-column: 1 / -1;
}

.ss-detail-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-text, #374151);
}

.ss-label-icon {
  font-size: 14px;
  opacity: 0.8;
}

.ss-select {
  padding-right: 32px !important;
}

.ss-file-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-file-hint {
  font-size: 0.8rem;
  color: var(--db-muted, #6b7280);
}

.ss-media-upload {
  padding-top: 8px;
  border-top: 1px dashed rgba(147, 51, 234, 0.15);
  margin-top: 8px;
}

.ss-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.ss-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.btn-icon {
  font-size: 18px;
}

/* Service form section - Orange theme */
.svc-details-section {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.04) 0%, rgba(234, 88, 12, 0.02) 100%);
  border-color: rgba(249, 115, 22, 0.15);
}

.svc-header .ss-details-title {
  color: #ea580c;
}

.svc-details-section .ss-details-header {
  border-bottom-color: rgba(249, 115, 22, 0.12);
}

/* Mentorship form section - Teal theme */
.ment-details-section {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, rgba(13, 148, 136, 0.02) 100%);
  border-color: rgba(20, 184, 166, 0.15);
}

.ment-header .ss-details-title {
  color: #0d9488;
}

.ment-details-section .ss-details-header {
  border-bottom-color: rgba(20, 184, 166, 0.12);
}

/* Night mode - Form sections */
body.balo-night .ss-details-section {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
  border-color: rgba(147, 51, 234, 0.25);
}

body.balo-night .ss-details-header {
  border-bottom-color: rgba(147, 51, 234, 0.2);
}

body.balo-night .ss-details-title {
  color: #a78bfa;
}

body.balo-night .ss-detail-label {
  color: var(--db-text, #e5e7eb);
}

body.balo-night .svc-details-section {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(234, 88, 12, 0.04) 100%);
  border-color: rgba(249, 115, 22, 0.25);
}

body.balo-night .svc-header .ss-details-title {
  color: #fb923c;
}

body.balo-night .ment-details-section {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(13, 148, 136, 0.04) 100%);
  border-color: rgba(20, 184, 166, 0.25);
}

body.balo-night .ment-header .ss-details-title {
  color: #2dd4bf;
}

/* =========================================================
   SERVICE LISTING CARDS — Professional Orange Theme
   ========================================================= */

.db-svc-card {
  border-top: 4px solid #f97316;
}

.db-svc-section {
  padding: 16px 18px;
}

.db-svc-header-section {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0.02) 100%);
}

.db-svc-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.db-svc-icon {
  font-size: 16px;
}

.db-svc-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ea580c;
}

.db-badge-svc {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
  border: 1px solid rgba(249, 115, 22, 0.2);
  margin-left: auto;
}

.db-svc-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-text, #1f2937);
}

.db-svc-description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--db-muted, #4b5563);
  line-height: 1.5;
}

/* Pricing section */
.db-svc-pricing-section {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.06) 0%, rgba(202, 138, 4, 0.02) 100%);
  border-top: 1px solid var(--db-border, #e5e7eb);
  border-bottom: 1px solid var(--db-border, #e5e7eb);
  padding: 14px 18px;
}

.db-svc-pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.db-svc-price-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-svc-price-icon {
  font-size: 18px;
}

.db-svc-price-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #b45309;
}

.db-svc-duration {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 20px;
  font-size: 0.85rem;
  color: #4f46e5;
}

.db-svc-duration-icon {
  font-size: 14px;
}

.db-svc-meta {
  border-top: none;
}

/* =========================================================
   MENTORSHIP LISTING CARDS — Professional Purple Theme
   ========================================================= */

.db-ment-card {
  border-top: 4px solid #8b5cf6;
}

.db-ment-section {
  padding: 16px 18px;
}

.db-ment-header-section {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 100%);
}

.db-ment-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.db-ment-icon {
  font-size: 16px;
}

.db-ment-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c3aed;
}

.db-badge-ment {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
  border: 1px solid rgba(139, 92, 246, 0.2);
  margin-left: auto;
}

.db-ment-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-text, #1f2937);
}

.db-ment-description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--db-muted, #4b5563);
  line-height: 1.5;
}

/* Details section */
.db-ment-details-section {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.05) 0%, rgba(6, 182, 212, 0.02) 100%);
  border-top: 1px solid var(--db-border, #e5e7eb);
  padding: 16px 18px;
}

.db-ment-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.db-ment-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.db-ment-detail-icon {
  font-size: 16px;
  margin-top: 2px;
}

.db-ment-detail-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-ment-detail-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-muted, #6b7280);
}

.db-ment-detail-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--db-text, #374151);
}

.db-ment-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d9488;
}

.db-ment-meta {
  border-top: none;
}

/* =========================================================
   NIGHT MODE — Service & Mentorship Cards
   ========================================================= */

body.balo-night .db-svc-card {
  border-top-color: #fb923c;
}

body.balo-night .db-svc-header-section {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0.04) 100%);
}

body.balo-night .db-svc-label {
  color: #fb923c;
}

body.balo-night .db-badge-svc {
  background: rgba(249, 115, 22, 0.15);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.3);
}

body.balo-night .db-svc-title,
body.balo-night .db-ment-title {
  color: var(--db-text, #f3f4f6);
}

body.balo-night .db-svc-description,
body.balo-night .db-ment-description {
  color: var(--db-muted, #9ca3af);
}

body.balo-night .db-svc-pricing-section {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.1) 0%, rgba(202, 138, 4, 0.04) 100%);
  border-color: var(--db-border, #374151);
}

body.balo-night .db-svc-price-amount {
  color: #fcd34d;
}

body.balo-night .db-svc-duration {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

body.balo-night .db-ment-card {
  border-top-color: #a78bfa;
}

body.balo-night .db-ment-header-section {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.04) 100%);
}

body.balo-night .db-ment-label {
  color: #a78bfa;
}

body.balo-night .db-badge-ment {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.3);
}

body.balo-night .db-ment-details-section {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
  border-color: var(--db-border, #374151);
}

body.balo-night .db-ment-detail-value {
  color: var(--db-text, #e5e7eb);
}

body.balo-night .db-ment-price {
  color: #2dd4bf;
}

/* =========================================================
   FORM PRICING SECTIONS — Service & Mentorship
   ========================================================= */

/* Service pricing section - Gold/Amber theme */
.svc-pricing-section {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(217, 119, 6, 0.02) 100%);
  border-color: rgba(245, 158, 11, 0.2);
}

.svc-pricing-header .ss-details-title {
  color: #b45309;
}

.svc-pricing-section .ss-details-header {
  border-bottom-color: rgba(245, 158, 11, 0.15);
}

/* Mentorship pricing section - Teal theme */
.ment-pricing-section {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.06) 0%, rgba(13, 148, 136, 0.02) 100%);
  border-color: rgba(20, 184, 166, 0.2);
}

.ment-pricing-header .ss-details-title {
  color: #0d9488;
}

.ment-pricing-section .ss-details-header {
  border-bottom-color: rgba(20, 184, 166, 0.15);
}

/* Media section styling */
.ss-media-section {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.04) 0%, rgba(75, 85, 99, 0.02) 100%);
  border-color: rgba(107, 114, 128, 0.15);
}

.ss-media-section .ss-details-header {
  border-bottom-color: rgba(107, 114, 128, 0.12);
}

.ss-media-section .ss-details-title {
  color: #6b7280;
}

.ss-file-upload-area {
  padding: 8px 0;
}

.ss-file-upload-area .db-input[type="file"] {
  padding: 12px;
  border: 2px dashed rgba(107, 114, 128, 0.25);
  border-radius: 10px;
  background: rgba(249, 250, 251, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ss-file-upload-area .db-input[type="file"]:hover {
  border-color: rgba(107, 114, 128, 0.4);
  background: rgba(249, 250, 251, 0.8);
}

/* Required field indicator */
.required {
  color: #ef4444;
  font-weight: 700;
}

/* Service submit button - Orange */
.svc-submit-btn {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
}

.svc-submit-btn:hover {
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}

/* Mentorship submit button - Teal */
.ment-submit-btn {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25);
}

.ment-submit-btn:hover {
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.35);
}

/* Night mode - Pricing sections */
body.balo-night .svc-pricing-section {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.04) 100%);
  border-color: rgba(245, 158, 11, 0.3);
}

body.balo-night .svc-pricing-header .ss-details-title {
  color: #fbbf24;
}

body.balo-night .svc-pricing-section .ss-details-header {
  border-bottom-color: rgba(245, 158, 11, 0.25);
}

body.balo-night .ment-pricing-section {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(13, 148, 136, 0.04) 100%);
  border-color: rgba(20, 184, 166, 0.3);
}

body.balo-night .ment-pricing-header .ss-details-title {
  color: #2dd4bf;
}

body.balo-night .ment-pricing-section .ss-details-header {
  border-bottom-color: rgba(20, 184, 166, 0.25);
}

body.balo-night .ss-media-section {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.08) 0%, rgba(75, 85, 99, 0.04) 100%);
  border-color: rgba(107, 114, 128, 0.25);
}

body.balo-night .ss-media-section .ss-details-title {
  color: #9ca3af;
}

body.balo-night .ss-file-upload-area .db-input[type="file"] {
  border-color: rgba(107, 114, 128, 0.35);
  background: rgba(31, 41, 55, 0.5);
}

body.balo-night .ss-file-upload-area .db-input[type="file"]:hover {
  border-color: rgba(107, 114, 128, 0.5);
  background: rgba(31, 41, 55, 0.8);
}

/* =========================================================
   RESPONSIVE — Form & Card Adjustments
   ========================================================= */

@media (max-width: 640px) {
  .ss-details-grid {
    grid-template-columns: 1fr;
  }

  .ss-detail-item.ss-detail-full {
    grid-column: 1;
  }

  .db-ment-details-grid {
    grid-template-columns: 1fr;
  }

  .db-svc-pricing-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-submit-btn {
    width: 100%;
  }
}

/* =========================================================
   SKILLSWITCH INFO BOX — What is SkillSwitch
   ========================================================= */

.ss-info-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.ss-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ss-info-icon {
  font-size: 24px;
}

.ss-info-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #059669;
}

.ss-info-text {
  font-size: 0.95rem;
  color: var(--db-text, #374151);
  line-height: 1.6;
  margin: 0 0 16px;
}

.ss-free-highlight {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 1.05em;
}

.ss-info-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 14px 16px;
}

.ss-warning-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ss-info-warning p {
  margin: 0;
  font-size: 0.9rem;
  color: #92400e;
  line-height: 1.5;
}

.ss-info-warning strong {
  color: #b45309;
}

/* Night mode - Info box */
body.balo-night .ss-info-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.06) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

body.balo-night .ss-info-title {
  color: #34d399;
}

body.balo-night .ss-info-text {
  color: var(--db-text, #e5e7eb);
}

body.balo-night .ss-free-highlight {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.balo-night .ss-info-warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}

body.balo-night .ss-info-warning p {
  color: #fcd34d;
}

body.balo-night .ss-info-warning strong {
  color: #fbbf24;
}