/* ===================================================================
   THEME: Sunset Glow  —  override on top of style.css
   Palette: #ff6b35 (orange) · #f7931e (amber) · #e84393 (pink) · #6c5ce7 (indigo)
   =================================================================== */
:root{
  --primary:#ff6b35;
  --primary-dark:#e84393;
  --primary-light:#f7931e;
  --primary-glow:#6c5ce7;

  --info:#6c5ce7;
  --warning:#f7931e;
  --success:#10b981;
  --danger:#e84393;

  --bg:#fff7f2;
  --card:#ffffff;
  --text:#1a0f2e;
  --text-secondary:#4b3b66;
  --text-muted:#8a7fa8;
  --border:#fde2d3;

  --shadow-sm:0 1px 3px rgba(232,67,147,.08);
  --shadow:0 8px 28px rgba(255,107,53,.12);
  --shadow-lg:0 18px 48px rgba(232,67,147,.18);
  --shadow-primary:0 10px 32px rgba(255,107,53,.32);

  --gradient:linear-gradient(135deg,#ff6b35 0%,#f7931e 35%,#e84393 70%,#6c5ce7 100%);
  --gradient-dark:linear-gradient(135deg,#e84393,#6c5ce7);
  --gradient-success:linear-gradient(135deg,#10b981,#34d399);
  --gradient-danger:linear-gradient(135deg,#e84393,#ff6b35);
  --gradient-hero:linear-gradient(135deg,#ff6b35 0%,#e84393 50%,#6c5ce7 100%);
  --gradient-warm:linear-gradient(135deg,#ff6b35,#f7931e);
  --gradient-pink:linear-gradient(135deg,#e84393,#ff6b35);
  --gradient-indigo:linear-gradient(135deg,#6c5ce7,#e84393);
}
body{background:
  radial-gradient(1200px 600px at -10% -10%, rgba(255,107,53,.10), transparent 60%),
  radial-gradient(900px 500px at 110% 10%, rgba(108,92,231,.10), transparent 60%),
  var(--bg) !important;
}
body.dark-mode, html[data-theme="dark"] body{
  --bg:#0e0a1f;
  --card:#1a1430;
  --text:#fce8ff;
  --text-secondary:#c8b8e0;
  --text-muted:#8a7fa8;
  --border:#2d2347;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(255,107,53,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(108,92,231,.22), transparent 60%),
    #0e0a1f !important;
}

/* ---------- Header / wallet badge ---------- */
.header{backdrop-filter:saturate(180%) blur(14px)}
.dark-toggle{background:linear-gradient(135deg,#ff6b35,#e84393);color:#fff;border:none;box-shadow:var(--shadow-sm)}
.dark-toggle:hover{transform:rotate(15deg) scale(1.06)}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--gradient-warm) !important;border:none;color:#fff !important;box-shadow:0 8px 22px rgba(255,107,53,.35)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,67,147,.4)}
.btn-success{background:var(--gradient-success) !important;border:none;color:#fff !important}
.btn-danger{background:var(--gradient-danger) !important;border:none;color:#fff !important}
.btn-info{background:var(--gradient-indigo) !important;border:none;color:#fff !important}

/* ---------- Tabs ---------- */
.tab.active{background:var(--gradient-warm) !important;color:#fff !important;box-shadow:var(--shadow-primary)}

/* ---------- Stat cards (animated, colorful) ---------- */
.stat-card{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--card);border-radius:18px;transition:all .35s cubic-bezier(.2,.8,.2,1)}
.stat-card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:200px;height:200px;border-radius:50%;background:var(--gradient-warm);opacity:.10;transition:transform .6s ease}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.stat-card:hover::after{transform:scale(1.6)}
.stat-card.stat-primary::after{background:var(--gradient-warm)}
.stat-card.stat-success::after{background:var(--gradient-success)}
.stat-card.stat-warning::after{background:linear-gradient(135deg,#f7931e,#fbbf24)}
.stat-card.stat-danger::after{background:var(--gradient-pink)}
.stat-num{font-weight:800;font-size:28px;letter-spacing:-.5px;background:var(--gradient-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-card.stat-success .stat-num{background:var(--gradient-success);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-card.stat-warning .stat-num{background:linear-gradient(135deg,#f7931e,#fbbf24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-card.stat-danger .stat-num{background:var(--gradient-pink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-icon{transition:transform .35s}
.stat-card:hover .stat-icon{transform:scale(1.15) rotate(-6deg)}

/* ---------- Service cards (colorful per-card accent) ---------- */
.dashboard-service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
.dashboard-service-card{background:#fff !important;border-radius:20px !important;padding:22px 14px !important;text-align:center;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.dashboard-service-card::before{content:"";position:absolute;inset:0;background:var(--gradient-warm);opacity:0;transition:opacity .35s;border-radius:20px;z-index:0}
.dashboard-service-card:hover::before{opacity:.08}
.dashboard-service-card:nth-child(4n+1)::before{background:linear-gradient(135deg,#ff6b35,#f7931e)}
.dashboard-service-card:nth-child(4n+2)::before{background:linear-gradient(135deg,#e84393,#ff6b35)}
.dashboard-service-card:nth-child(4n+3)::before{background:linear-gradient(135deg,#6c5ce7,#e84393)}
.dashboard-service-card:nth-child(4n+4)::before{background:linear-gradient(135deg,#f7931e,#fbbf24)}
.dashboard-service-card>*{position:relative;z-index:1}
.dashboard-service-card>div:first-child{width:64px;height:64px;margin:0 auto 14px !important;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:34px !important;background:var(--gradient-warm);color:#fff;box-shadow:0 10px 24px rgba(255,107,53,.35);animation:cardIconFloat 3s ease-in-out infinite}
.dashboard-service-card:nth-child(4n+2)>div:first-child{background:linear-gradient(135deg,#e84393,#ff6b35);box-shadow:0 10px 24px rgba(232,67,147,.4)}
.dashboard-service-card:nth-child(4n+3)>div:first-child{background:linear-gradient(135deg,#6c5ce7,#e84393);box-shadow:0 10px 24px rgba(108,92,231,.4)}
.dashboard-service-card:nth-child(4n+4)>div:first-child{background:linear-gradient(135deg,#f7931e,#fbbf24);box-shadow:0 10px 24px rgba(247,147,30,.4)}
@keyframes cardIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dashboard-service-card p{background:linear-gradient(135deg,#e84393,#ff6b35) !important;color:#fff !important;box-shadow:0 4px 10px rgba(232,67,147,.35) !important}

html[data-theme="dark"] .dashboard-service-card{background:#1a1430 !important;box-shadow:0 6px 20px rgba(0,0,0,.4)}
html[data-theme="dark"] .dashboard-service-card h3{color:#fce8ff !important}

/* ---------- Bottom nav  ---------- */
.bottom-nav{background:rgba(255,247,242,.85) !important;backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(232,67,147,.10)}
body.dark-mode .bottom-nav, html[data-theme="dark"] .bottom-nav{background:rgba(14,10,31,.85) !important}
.nav-item{position:relative;color:var(--text-muted);transition:all .25s}
.nav-item.active{color:#fff !important;background:var(--gradient-warm);box-shadow:0 6px 16px rgba(255,107,53,.4);transform:translateY(-4px)}
.nav-item.active svg{transform:scale(1.2)}
.nav-item:not(.active):hover{color:var(--primary);background:rgba(255,107,53,.08)}

/* ---------- Cards / Forms ---------- */
.card{border-radius:18px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm)}
.form-control:focus,.input-group:focus-within{border-color:var(--primary) !important;box-shadow:0 0 0 4px rgba(255,107,53,.15) !important}

/* ---------- Badges ---------- */
.badge-primary{background:rgba(255,107,53,.12);color:var(--primary)}
.badge-success{background:rgba(16,185,129,.12);color:var(--success)}
.badge-warning{background:rgba(247,147,30,.15);color:var(--warning)}
.badge-danger{background:rgba(232,67,147,.12);color:var(--danger)}

/* ---------- Wallet badge rainbow override ---------- */
.wallet-badge-rainbow{background:linear-gradient(120deg,#ff6b35,#f7931e,#e84393,#6c5ce7,#ff6b35) !important;background-size:300% 300% !important}

/* ---------- Login/Register pages hero ---------- */
.auth-hero, .login-bg, body.auth-bg{
  background:
    radial-gradient(800px 500px at 0% 0%, rgba(255,107,53,.25), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(108,92,231,.30), transparent 60%),
    linear-gradient(135deg,#fff7f2,#fde2e9) !important;
}

/* ---------- Mobile polish ---------- */
@media (max-width:640px){
  .stat-num{font-size:22px}
  .dashboard-service-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .dashboard-service-card{padding:16px 10px !important}
  .dashboard-service-card>div:first-child{width:54px;height:54px;font-size:28px !important}
  .bottom-nav .container{padding:6px 0}
  .nav-item{padding:6px 10px;font-size:9px}
}