:root {
  --color-bg: #f5f8fc;
  --color-surface: #eef3f8;
  --color-card: #ffffff;
  --color-text: #16181d;
  --color-muted: #6b7280;
  --color-accent: #b8860b;
  --color-accent-light: #d4af37;
  --gold-gradient: linear-gradient(135deg, #fdf6d8 0%, #e6c757 22%, #b8860b 55%, #8a6d1d 78%, #d4af37 100%);
  --color-accent2: #2563eb;
  --color-accent3: #16a34a;
  --border-color: rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --color-bg: #0a0a0d;
  --color-surface: #131318;
  --color-card: #1a1a22;
  --color-text: #f5f5f7;
  --color-muted: #9797a3;
  --color-accent: #8b7cff;
  --color-accent-light: #a596ff;
  --color-accent2: #3b82f6;
  --color-accent3: #22c55e;
  --border-color: rgba(255,255,255,0.09);
  --clay-shadow-dark: rgba(0,0,0,0.6);
  --clay-shadow-light: rgba(255,255,255,0.05);
  --card-highlight: linear-gradient(155deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%);
}
[data-theme="dark"] .glass-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .mini-stat-card,
[data-theme="dark"] .gig-box,
[data-theme="dark"] .listing-card {
  background-image: var(--card-highlight);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.2s, color 0.2s;
}

.bg-surface { background-color: var(--color-surface); }
.bg-card { background-color: var(--color-card); border: 1px solid var(--border-color); }
.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.border-base { border-color: var(--border-color); }

.btn-primary {
  background: var(--color-accent);
  border-radius: 9999px;
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary {
  background-color: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.input-field {
  width: 100%;
  margin-top: 0.25rem;
  background-color: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  outline: none;
  color: var(--color-text);
}
.input-field:focus { box-shadow: 0 0 0 2px var(--color-accent); }

.card-rounded { border-radius: 1.5rem; }

.icon-badge {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
}
.icon-badge-gigs, .icon-badge-market, .icon-badge-earnings, .icon-badge-referral {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

.logo-badge {
  width: 2.25rem; height: 2.25rem;
  background-image: url('/images/qelvo-mark.png?v=2') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.25));
}

.hero-blob {
  position: relative;
  background: var(--gold-gradient);
  border-radius: 2.5rem;
  overflow: hidden;
}

.phone-frame {
  width: 220px;
  background: #0a0a0a;
  border-radius: 2.2rem;
  padding: 10px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.08);
  position: relative;
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 16px;
  background: #0a0a0a;
  border-radius: 0 0 12px 12px;
  z-index: 5;
}
.phone-frame::after {
  content: "";
  position: absolute;
  right: -3px; top: 90px;
  width: 3px; height: 50px;
  background: #050505;
  border-radius: 2px;
}
.phone-screen {
  background: var(--color-surface);
  border-radius: 1.6rem;
  padding: 1.4rem 1rem 1.2rem;
  min-height: 380px;
  overflow: hidden;
}

.star-row { color: #f59e0b; display: inline-flex; gap: 2px; }

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.app-nav {
  background-color: var(--color-card);
  border-bottom: 1px solid var(--border-color);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.app-nav-links a {
  color: var(--color-muted);
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
}
.app-nav-links a.active {
  color: var(--color-accent);
  background: rgba(194,65,12,0.1);
  font-weight: 600;
}

.stat-card {
  background-color: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: 1.25rem;
  transition: transform 0.15s;
}
.stat-card:hover { transform: translateY(-2px); }

.list-row {
  background-color: var(--color-surface);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Gig boxes: curved, with a colored top stripe that cycles through accents */
.gig-box {
  display: block;
  position: relative;
  background-color: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  padding: 1.4rem 1.25rem 1.25rem;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gig-box::before {
  content: "";
  position: absolute;
  top: 0; left: 1.25rem; right: 1.25rem;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: var(--color-accent);
}
.gig-box.stripe-blue::before { background: var(--color-accent2); }
.gig-box.stripe-green::before { background: var(--color-accent3); }

.gig-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

/* Background: cooler sky-blue-white */
:root { --color-bg: #eaf4fb; --color-surface: #f2f8fd; }

.hamburger-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.6rem;
  background: var(--color-surface);
}
@media (min-width: 768px) { .hamburger-btn { display: none; } }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--color-card);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 1.5rem 1rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a, .mobile-menu button {
  padding: 0.6rem 0.25rem;
  color: var(--color-text);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-color);
}

.search-dropdown {
  position: absolute;
  top: 110%; left: 0; right: 0;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  max-height: 280px;
  overflow-y: auto;
  z-index: 40;
}
.search-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}
.search-item:last-child { border-bottom: none; }
.search-type {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(194,65,12,0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
}

/* Small pill tag instead of full-width stripe */
.gig-box::before { content: none; }
.tag-dot {
  display: inline-block;
  width: 1.6rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: var(--color-accent);
}
.gig-box.stripe-blue .tag-dot { background: var(--color-accent2); }
.gig-box.stripe-green .tag-dot { background: var(--color-accent3); }

/* Mobile menu as true overlay, not pushing content */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 65%;
  max-width: 260px;
  background: var(--color-card);
  backdrop-filter: blur(10px);
  box-shadow: -10px 0 40px rgba(0,0,0,0.25);
  padding: 5rem 1.5rem 1.5rem;
  flex-direction: column;
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.mobile-menu.open {
  display: flex;
  transform: translateX(0);
}
.mobile-menu a, .mobile-menu button {
  padding: 0.7rem 0.25rem;
  color: var(--color-text);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  z-index: 50;
}
.menu-backdrop.open { display: block; }

/* Search bar: pop-out style */
.input-field#navSearch {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  padding-left: 2.4rem;
}
[data-theme="dark"] .input-field#navSearch {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.input-field#navSearch:focus {
  box-shadow: 0 0 0 3px rgba(194,65,12,0.25), 0 4px 18px rgba(0,0,0,0.1);
  background: var(--color-card);
}
.search-wrap { position: relative; }
.search-wrap .search-icon {
  position: absolute;
  left: 0.8rem; top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}

/* Nav layout adjustments */
.app-nav {
  justify-content: space-between;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.search-wrap input#navSearch {
  width: 100%;
}
@media (min-width: 768px) {
  .search-wrap { width: 320px; }
}

/* Mobile menu: hug content, rounded, not full height */
.mobile-menu {
  height: auto;
  max-height: 70vh;
  top: 0.75rem;
  right: 0.75rem;
  bottom: auto;
  border-radius: 1.25rem;
  padding: 4.5rem 1.25rem 1.25rem;
  overflow-y: auto;
}

/* Fintech-style balance card */
.balance-card {
  position: relative;
  background: var(--gold-gradient);
  border-radius: 1.75rem;
  padding: 1.75rem;
  overflow: hidden;
  color: white;
}
.balance-card::before {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  top: -60px; right: -40px;
}
.balance-card::after {
  content: "";
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  bottom: -50px; right: 30px;
}
.balance-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
}
.balance-amount {
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: 0.25rem;
}
.balance-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
}
.balance-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  border-radius: 9999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.balance-chip.primary {
  background: white;
  color: var(--color-accent);
}

/* Search dropdown: wider, no cramped truncation */
.search-dropdown {
  position: fixed;
  top: 4.2rem;
  left: 1rem;
  right: 1rem;
  width: auto;
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .search-dropdown {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    max-width: none;
  }
}
.search-item {
  white-space: normal;
  align-items: flex-start;
}
.search-item span:not(.search-type) {
  overflow-wrap: anywhere;
}

/* Page background photo with blur + gradient overlay */
.photo-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('https://source.unsplash.com/1600x1200/?university,students,campus');
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(1);
  transform: scale(1.1);
}
.photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,0.3) 0%, rgba(10,10,15,0.7) 100%);
}
[data-theme="light"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(245,248,252,0.35) 0%, rgba(245,248,252,0.65) 100%) !important;
}
[data-theme="light"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(245,248,252,0.35) 0%, rgba(245,248,252,0.65) 100%) !important;
}
[data-theme="dark"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(13,15,18,0.55) 0%, rgba(13,15,18,0.95) 100%);
}

/* Glass cards */
.glass-card {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
[data-theme="dark"] .glass-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.stat-card, .gig-box, .bg-card {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.35);
}
[data-theme="dark"] .stat-card,
[data-theme="dark"] .gig-box,
[data-theme="dark"] .bg-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Jiji-style listing cards */
.listing-card {
  display: block;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.listing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.listing-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-surface);
}
.listing-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.verified-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0,0,0,0.65);
  color: #4ade80;
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.cat-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.cat-link.active {
  background: rgba(194,65,12,0.1);
  color: var(--color-accent);
  font-weight: 600;
}

.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Horizontal category pill bar, no sidebar, no push-down */
.cat-scroll {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-pill {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  color: var(--color-muted);
  white-space: nowrap;
}
.cat-pill.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

/* Prevent content from spreading edge to edge on desktop */
main.max-w-6xl, main.max-w-4xl, main.max-w-3xl, main.max-w-2xl, main.max-w-xl {
  width: 100%;
}
.balance-card {
  max-width: 100%;
}
.balance-card .flex.justify-between {
  justify-content: flex-start;
  gap: 2rem;
}
@media (min-width: 1024px) {
  main {
    max-width: 1400px !important;
    margin-left: auto;
    margin-right: auto;
  }
  .app-nav {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    gap: 2rem;
  }
}

/* Bottom app-style navigation (mobile) */
.bottom-nav {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 1.75rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.6rem 0.5rem;
  z-index: 70;
}
[data-theme="dark"] .bottom-nav {
  background: rgba(25,25,28,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 1rem;
  color: var(--color-muted);
  transition: transform 0.15s, box-shadow 0.15s;
  background: transparent;
}
.nav-btn.active {
  background: var(--gold-gradient);
  color: white;
  box-shadow: 0 8px 20px rgba(194,65,12,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-4px);
}
.nav-btn:not(.active):active {
  transform: scale(0.92);
}

@media (min-width: 768px) {
  .bottom-nav { display: none; }
}
@media (max-width: 767px) {
  .app-nav .app-nav-links,
  .app-nav .hamburger-btn { display: none; }
  main { padding-bottom: 6rem; }
}

/* Clean placeholder tile for listings without a real photo */
.listing-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(194,65,12,0.15), rgba(234,88,12,0.08));
  color: var(--color-accent);
}

@media (max-width: 767px) {
  main {
    padding-bottom: 7.5rem !important;
  }
}

.search-wrap .search-icon {
  z-index: 2;
  color: var(--color-muted);
}
.input-field#navSearch {
  padding-left: 2.5rem !important;
}

.photo-bg {
  position: fixed;
  top: -5%; left: -5%;
  width: 110%; height: 110%;
  background-image: url('https://source.unsplash.com/1920x1080/?students,college,campus');
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: none;
  z-index: -1;
}
.photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,0.35) 0%, rgba(10,10,15,0.75) 100%);
}
[data-theme="dark"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(13,15,18,0.6) 0%, rgba(13,15,18,0.96) 100%);
}

/* Bottom nav — proper centering and even spacing */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 3rem;
  margin: 0 0.25rem;
  border-radius: 1rem;
}
.nav-btn i {
  display: block;
  margin: 0 auto;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  padding: 1rem;
  overflow-y: auto;
}
.modal-overlay.open { display: block; }

/* Glow accents on cards, fintech style */
.stat-card, .glass-card, .gig-box, .listing-card {
  box-shadow: 0 0 0 1px var(--border-color), 0 10px 30px rgba(0,0,0,0.25);
}
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .gig-box:hover {
  box-shadow: 0 0 0 1px rgba(184,134,11,0.4), 0 0 24px rgba(184,134,11,0.25), 0 10px 30px rgba(0,0,0,0.4);
}

/* Thin glowing trend line like the reference dashboard */
[data-theme="dark"] canvas { filter: drop-shadow(0 0 3px rgba(184,134,11,0.25)); }


}

.mini-stat-card {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.mini-stat-card .stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.mini-stat-card .stat-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent-light);
  background: rgba(184,134,11,0.15);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}
.mini-stat-card { position: relative; padding-bottom: 3.25rem; }
.mini-stat-card canvas {
  position: absolute !important;
  bottom: 0.75rem;
  left: 1rem;
  right: 1rem;
  height: 40px !important;
  width: calc(100% - 2rem) !important;
  margin-top: 0;
}

.tab-row {
  display: flex;
  gap: 0.25rem;
  background: var(--color-surface);
  border-radius: 0.75rem;
  padding: 0.25rem;
  width: fit-content;
  margin-bottom: 1rem;
}
.tab-btn {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  border-radius: 0.6rem;
  color: var(--color-muted);
}
.tab-btn.active {
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: 0 0 0 1px var(--border-color);
}

.tx-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}
.tx-table-row:last-child { border-bottom: none; }
.tx-status {
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  width: fit-content;
}
.tx-status.done { background: rgba(184,134,11,0.15); color: var(--color-accent-light); }
.tx-status.pending { background: rgba(234,179,8,0.15); color: #eab308; }

.gauge-panel {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: 1.5rem;
  text-align: center;
}
.gauge-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto; }
.gauge-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.gauge-center .amt { font-size: 1.3rem; font-weight: 700; }
.gauge-center .lbl { font-size: 0.7rem; color: var(--color-muted); }


.mini-stat-card {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.mini-stat-card .stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.mini-stat-card .stat-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent-light);
  background: rgba(184,134,11,0.15);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}
.mini-stat-card { position: relative; padding-bottom: 3.25rem; }
.mini-stat-card canvas {
  position: absolute !important;
  bottom: 0.75rem;
  left: 1rem;
  right: 1rem;
  height: 40px !important;
  width: calc(100% - 2rem) !important;
  margin-top: 0;
}

.tab-row {
  display: flex;
  gap: 0.25rem;
  background: var(--color-surface);
  border-radius: 0.75rem;
  padding: 0.25rem;
  width: fit-content;
  margin-bottom: 1rem;
}
.tab-btn {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  border-radius: 0.6rem;
  color: var(--color-muted);
}
.tab-btn.active {
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: 0 0 0 1px var(--border-color);
}

.tx-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}
.tx-table-row:last-child { border-bottom: none; }
.tx-status {
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  width: fit-content;
}
.tx-status.done { background: rgba(184,134,11,0.15); color: var(--color-accent-light); }
.tx-status.pending { background: rgba(234,179,8,0.15); color: #eab308; }

.gauge-panel {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: 1.5rem;
  text-align: center;
}
.gauge-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto; }
.gauge-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.gauge-center .amt { font-size: 1.3rem; font-weight: 700; }
.gauge-center .lbl { font-size: 0.7rem; color: var(--color-muted); }

/* Force bottom nav off on desktop mode, no exceptions */
@media (min-width: 900px) {
  .bottom-nav { display: none !important; }
  main { padding-bottom: 2rem !important; }
}

/* Compact balance card matching reference proportions */
.balance-card {
  max-width: 320px;
  padding: 1.1rem 1.25rem;
  border-radius: 1.1rem;
}
.balance-card::before { width: 100px; height: 100px; top: -30px; right: -20px; }
.balance-card::after { width: 70px; height: 70px; bottom: -30px; right: 20px; }
.balance-label { font-size: 0.7rem; }
.balance-amount { font-size: 1.5rem; margin-top: 0.1rem; }
.balance-actions { margin-top: 0.85rem; gap: 0.5rem; }
.balance-chip {
  padding: 0.4rem 0.85rem;
  font-size: 0.75rem;
}

main { min-height: auto !important; }
body { min-height: auto; }

.quick-action {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  color: var(--color-text);
}
.quick-action:hover { border-color: var(--color-accent); color: var(--color-accent); }

.type-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgba(0,0,0,0.55);
  color: white;
  text-transform: uppercase;
}
.type-item { background: rgba(37,99,235,0.7); }
.type-service { background: rgba(22,163,74,0.7); }
.type-rent { background: rgba(202,138,4,0.7); }
.type-store { background: rgba(184,134,11,0.75); }

/* ===== Global Animations ===== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes softPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

main {
  animation: fadeInUp 0.45s ease-out both;
}

.app-nav, .bottom-nav {
  animation: fadeIn 0.4s ease-out both;
}

/* Card hover lift - applies to every card type site-wide */
.gig-box, .listing-card, .mini-stat-card, .glass-card, .stat-card, .bg-card.card-rounded {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gig-box:hover, .listing-card:hover, .mini-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14), 0 0 0 1px var(--border-color);
}

/* Staggered entrance for grid items (gigs, listings, stat cards) */
.grid > .gig-box, .grid > .listing-card, .grid > .mini-stat-card {
  animation: fadeInUp 0.4s ease-out both;
}
.grid > *:nth-child(1) { animation-delay: 0.03s; }
.grid > *:nth-child(2) { animation-delay: 0.08s; }
.grid > *:nth-child(3) { animation-delay: 0.13s; }
.grid > *:nth-child(4) { animation-delay: 0.18s; }
.grid > *:nth-child(5) { animation-delay: 0.23s; }
.grid > *:nth-child(6) { animation-delay: 0.28s; }
.grid > *:nth-child(7) { animation-delay: 0.33s; }
.grid > *:nth-child(8) { animation-delay: 0.38s; }

/* Button feedback */
.btn-primary, .balance-chip, .quick-action, .btn-secondary {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn-primary:hover, .balance-chip:hover, .quick-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(184,134,11,0.25);
}
.btn-primary:active, .balance-chip:active, .quick-action:active {
  transform: translateY(0) scale(0.97);
}

/* Icon badge subtle pulse on hover */
.icon-badge, .icon-badge-gigs, .icon-badge-market, .icon-badge-earnings, .icon-badge-referral {
  transition: transform 0.2s ease;
}
.gig-box:hover .icon-badge,
.listing-card:hover .icon-badge,
a:hover .icon-badge-gigs,
a:hover .icon-badge-market,
a:hover .icon-badge-earnings,
a:hover .icon-badge-referral {
  animation: softPulse 0.5s ease;
}

/* Nav link underline transition */
.app-nav-links a {
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Tab row smooth switching */
.tab-btn {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Modal open/close transition */
.modal-overlay {
  transition: opacity 0.25s ease;
}
.modal-overlay .glass-card {
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform: translateY(-12px);
  opacity: 0;
}
.modal-overlay.open .glass-card {
  transform: translateY(0);
  opacity: 1;
}

/* Sparkline/gauge canvas fade-in */
canvas {
  animation: fadeIn 0.6s ease-out both;
}

/* Balance amount subtle count-up feel */
.balance-amount {
  animation: fadeInUp 0.5s ease-out both;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Scroll Reveal ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-on-scroll.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-on-scroll.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-on-scroll.reveal-delay-3 { transition-delay: 0.3s; }

/* ===== Bolder, rounder aesthetic ===== */
.hero-blob, .glass-card, .bg-card.card-rounded, .stat-card {
  border-radius: 1.5rem;
}
.mini-stat-card, .gig-box, .listing-card {
  border-radius: 1.25rem;
}
.btn-primary {
  border-radius: 9999px;
  font-weight: 700;
}
h1, h2, .balance-amount {
  letter-spacing: -0.02em;
}

/* ===== Per-page accent themes (auto-applied via data-page on body) ===== */
[data-page="marketplace"] {
  --color-accent: #2563eb;
  --color-accent-light: #3b82f6;
  --color-bg: #05070d;
  --color-surface: #0b0f1a;
  --color-card: #0f1420;
  --border-color: rgba(37,99,235,0.18);
}
[data-page="marketplace"] .balance-card,
[data-page="marketplace"] .hero-blob {
  background: linear-gradient(135deg, #0b1220 0%, #1d2b4a 45%, #2563eb 100%) !important;
}
[data-page="marketplace"] .btn-primary,
[data-page="marketplace"] .type-store {
  background: linear-gradient(135deg, #d4af37 0%, #2563eb 100%) !important;
}

[data-page="wallet"] {
  --color-accent: #16a34a;
  --color-accent-light: #22c55e;
}

[data-page="referrals"] {
  --color-accent: #9333ea;
  --color-accent-light: #a855f7;
}
[data-page="referrals"] .hero-blob {
  background: linear-gradient(160deg, #9333ea, #d4af37) !important;
}

[data-page="tier"] {
  --color-accent: #b8860b;
  --color-accent-light: #d4af37;
}

/* ===== Claymorphic 3D Design System ===== */

:root {
  --color-accent: #6d5dfc;
  --color-accent-light: #8b7cff;
  --clay-shadow-light: rgba(255,255,255,0.6);
  --clay-shadow-dark: rgba(148,130,255,0.18);
}

/* Soft embossed depth for every card surface */
.glass-card, .stat-card, .bg-card.card-rounded, .gig-box, .listing-card,
.mini-stat-card, .icon-badge, .tab-row, .gauge-panel {
  border-radius: 1.75rem !important;
  box-shadow:
    8px 8px 20px var(--clay-shadow-dark),
    -6px -6px 16px var(--clay-shadow-light);
  border: none !important;
}

.icon-badge, .icon-badge-gigs, .icon-badge-market, .icon-badge-earnings, .icon-badge-referral {
  border-radius: 1.1rem !important;
  box-shadow:
    4px 4px 10px var(--clay-shadow-dark),
    -3px -3px 8px var(--clay-shadow-light);
}

/* Pill-shaped, soft-pressed buttons */
.btn-primary, .balance-chip, .quick-action, .btn-secondary, .tab-btn {
  border-radius: 9999px !important;
  border: none !important;
  box-shadow:
    5px 5px 14px var(--clay-shadow-dark),
    -4px -4px 10px var(--clay-shadow-light);
}
.btn-primary {
  background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent)) !important;
}
.btn-primary:active, .balance-chip:active, .quick-action:active {
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,0.25),
    inset -3px -3px 8px rgba(255,255,255,0.08);
}

/* Redesigned Balance Card - soft 3D hero surface */
.balance-card {
  background: linear-gradient(155deg, #7c6ff5 0%, #6d5dfc 45%, #4c3fd9 100%) !important;
  border-radius: 2rem !important;
  box-shadow: 12px 12px 30px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
.balance-card::before, .balance-card::after { display: none !important; }
.balance-label { opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.7rem; }
.balance-amount { text-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.balance-chip {
  background: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(6px);
  color: white !important;
}
.balance-chip.primary {
  background: rgba(255,255,255,0.95) !important;
  color: var(--color-accent) !important;
}

/* Mini stat cards get a subtle gradient sheen */
.mini-stat-card {
  background: linear-gradient(155deg, var(--color-card) 0%, var(--color-surface) 100%) !important;
}

/* Nav bar gets soft floating depth too */
.app-nav {
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-bottom: none !important;
}

/* Hero blob - soft 3D floating panel */
.hero-blob {
  border-radius: 2rem !important;
  box-shadow:
    14px 14px 34px rgba(0,0,0,0.18),
    -8px -8px 20px var(--clay-shadow-light);
}



@media (min-width: 768px) {
  body:has(.app-sidebar) main,
  body:has(.app-sidebar) .app-nav {
    margin-left: 262px !important;
  }
  body:has(.app-sidebar) main {
    max-width: calc(1400px) !important;
  }
}

/* ===== Mobile Top Bar ===== */
.mobile-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--color-card);
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.mobile-search-wrap {
  position: relative;
  padding: 0.75rem 1.25rem;
  background: var(--color-card);
}

/* ===== Mobile Dock: always-visible bar + expandable extras ===== */
.dock-wrap {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: 92vw;
  max-width: 380px;
}
.dock-bar {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--color-card);
  padding: 0.6rem 1.1rem 0.5rem;
  border-radius: 1.75rem;
  box-shadow: 8px 8px 20px var(--clay-shadow-dark), -6px -6px 16px var(--clay-shadow-light);
  mask-image: radial-gradient(circle 30px at 50% -2px, transparent 30px, black 31px);
  -webkit-mask-image: radial-gradient(circle 30px at 50% -2px, transparent 30px, black 31px);
}
.dock-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--color-muted);
  padding: 0.4rem 0.5rem;
  border-radius: 1rem;
  transition: color 0.2s ease;
}
.dock-bar-item span { font-size: 0.62rem; font-weight: 500; }
.dock-bar-item.active, .dock-bar-item:hover {
  color: var(--color-accent);
}
.dock-spacer { width: 3.4rem; flex-shrink: 0; }
.dock-center-btn {
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.6rem; height: 3.6rem;
  border-radius: 9999px;
  background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent));
  color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 6px 16px var(--clay-shadow-dark),
    0 0 22px 4px rgba(139,124,255,0.55);
  border: 4px solid var(--color-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dock-center-btn:active { transform: translateX(-50%) scale(0.92); }
.dock-center-btn.active {
  box-shadow:
    0 6px 16px var(--clay-shadow-dark),
    0 0 30px 6px rgba(139,124,255,0.8);
}
/* ===== Sidebar Navigation (Desktop) - two synced pill panels ===== */
.app-sidebar-wrap {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  gap: 0.85rem;
}

.app-sidebar-icons {
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
  border-radius: 9999px;
  padding: 1.25rem 0;
  box-shadow: 10px 10px 26px var(--clay-shadow-dark);
  overflow-y: auto;
}
.sidebar-icon-logo { margin-bottom: 0.5rem; }
.app-sidebar-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 9999px;
  color: rgba(255,255,255,0.75);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.app-sidebar-icons a:hover { color: white; transform: scale(1.08); }
.app-sidebar-icons a.active {
  background: white;
  color: var(--color-accent);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.app-sidebar-labels {
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border-radius: 2rem;
  padding: 1.5rem 1rem;
  box-shadow: 10px 10px 26px var(--clay-shadow-dark), -6px -6px 16px var(--clay-shadow-light);
  gap: 1rem;
  overflow-y: auto;
}
.sidebar-logo { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.35rem; }
.sidebar-logo .logo-badge { background-image: url('/images/qelvo-mark.png?v=2') !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; background-color: transparent !important; }
.sidebar-search { position: relative; }
.sidebar-links { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.sidebar-links a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.9rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-links a:hover { background: var(--color-surface); color: var(--color-text); }
.sidebar-links a.active {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  color: white;
  box-shadow: 4px 4px 10px var(--clay-shadow-dark);
}
.sidebar-footer { display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-footer .theme-toggle {
  background: var(--color-surface); border-radius: 9999px;
  width: 100%; padding: 0.6rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.sidebar-footer button[type="submit"] {
  width: 100%; border-radius: 9999px !important;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}

@media (min-width: 768px) {
  body:has(.app-sidebar-wrap) main,
  body:has(.app-sidebar-wrap) .app-nav {
    margin-left: 340px !important;
  }
}

/* Rotating wheel menu - bigger glassy squircle buttons, real spacing, no overlap */
.dock-wheel {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  width: 0; height: 0;
  z-index: 10;
}
.dock-wheel-item {
  position: absolute;
  top: 0; left: 0;
  width: 3.4rem; height: 3.4rem;
  border-radius: 1.1rem;
  background: var(--color-card);
  background: color-mix(in srgb, var(--color-card) 75%, transparent);
  backdrop-filter: blur(10px);
  color: var(--color-muted);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 6px 6px 16px var(--clay-shadow-dark), -4px -4px 10px var(--clay-shadow-light);
  border: 1px solid var(--border-color);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--angle, -90deg)) translateX(0) rotate(calc(-1 * var(--angle, -90deg))) scale(0.3);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dock-wheel.open .dock-wheel-item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(6.2rem) rotate(calc(-1 * var(--angle))) scale(1);
}
.dock-wheel-item.active { background: var(--color-accent); color: white; }
.dock-wheel.open { touch-action: none; }

.dock-plus-icon { transition: transform 0.35s ease; }
.dock-center-btn.open .dock-plus-icon { transform: rotate(135deg); }

/* Smooth continuously moving glow ring around the center button (not a blink) */
.dock-center-btn {
  box-shadow: 0 8px 20px var(--clay-shadow-dark), 0 2px 6px rgba(0,0,0,0.3);
}
.dock-glow-ring { display: none; }

.dock-bar-item.active,
.dock-wheel-item.active,
.dock-center-btn.active {
  box-shadow: 0 4px 10px var(--clay-shadow-dark);
}

/* ===== Team Switcher (Boys navy/teal vs Girls pink/light) ===== */
.team-switcher {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 100;
  display: flex;
  gap: 0.2rem;
  background: var(--color-card);
  padding: 0.25rem;
  border-radius: 9999px;
  box-shadow: 4px 4px 12px var(--clay-shadow-dark), -3px -3px 8px var(--clay-shadow-light);
}
.team-btn {
  padding: 0.35rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 9999px;
  color: var(--color-muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.team-btn.active {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  color: white;
}

/* Boys Team - deep navy + cyan/teal */
[data-team="boys"] {
  --color-accent: #1ea7c9;
  --color-accent-light: #38d9e8;
}
[data-team="boys"][data-theme="dark"] {
  --color-bg: #060d1f;
  --color-surface: #0b1730;
  --color-card: #0f1e3d;
  --border-color: rgba(56,217,232,0.15);
}
[data-team="boys"] .balance-card,
[data-team="boys"] .hero-blob {
  background: linear-gradient(155deg, #0b1730 0%, #0f2a52 45%, #1ea7c9 100%) !important;
}

/* Girls Team - pink accent, supports both light and dark */
[data-team="girls"] {
  --color-accent: #ec4899;
  --color-accent-light: #f472b6;
}
[data-team="girls"][data-theme="light"] {
  --color-bg: #fff5f8;
  --color-surface: #ffe9f1;
  --color-card: #ffffff;
  --border-color: rgba(236,72,153,0.12);
}
[data-team="girls"][data-theme="dark"] {
  --color-bg: #170a12;
  --color-surface: #240f1c;
  --color-card: #2e1322;
  --color-text: #ffffff;
  --color-muted: #d19bb8;
  --border-color: rgba(244,114,182,0.18);
}
[data-team="girls"] .balance-card,
[data-team="girls"] .hero-blob {
  background: linear-gradient(155deg, #f9a8d4 0%, #ec4899 55%, #be185d 100%) !important;
}

/* ===== Decorative blob shapes (coffee-shop style organic backdrop) ===== */
.deco-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.deco-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
}
[data-team="boys"] .deco-blob { background: radial-gradient(circle, #38d9e8, transparent 70%); }
[data-team="girls"] .deco-blob { background: radial-gradient(circle, #f472b6, transparent 70%); }
.deco-blob-1 { width: 340px; height: 340px; top: -80px; right: -100px; }
.deco-blob-2 { width: 220px; height: 220px; bottom: 10%; left: -80px; }
.deco-blob-3 { width: 160px; height: 160px; top: 40%; right: 8%; opacity: 0.2; }
.deco-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
[data-team="boys"] .deco-dot { color: #38d9e8; }
[data-team="girls"] .deco-dot { color: #f472b6; }

/* ===== Hero Poster Card (coffee-shop style composition) ===== */
.hero-poster {
  position: relative;
  border-radius: 2.5rem;
  padding: 1.25rem;
  overflow: hidden;
  color: white;
  box-shadow: 16px 16px 40px rgba(0,0,0,0.25);
}
[data-team="boys"] .hero-poster {
  background: linear-gradient(150deg, #081226 0%, #0d1f45 55%, #12406b 100%);
}
[data-team="girls"] .hero-poster {
  background: linear-gradient(150deg, #831843 0%, #be185d 55%, #f472b6 100%);
}
.hero-poster-muted { color: rgba(255,255,255,0.68) !important; }
.hero-poster .text-muted { color: rgba(255,255,255,0.68) !important; }
.hero-poster h1 { color: white; }
.hero-poster .btn-secondary {
  background: rgba(255,255,255,0.12) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.logo-badge-ring {
  width: 2.6rem; height: 2.6rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  padding: 0.3rem;
}
.logo-badge-ring .logo-badge { width: 100%; height: 100%; }

.leaf-deco {
  position: absolute;
  width: 140px; height: 140px;
  top: 8%;
  right: 4%;
  z-index: 1;
  opacity: 0.9;
}

/* Fix contrast: phone mockup and trust pill keep dark text even inside the white-text hero poster */
.hero-poster .phone-screen,
.hero-poster .phone-screen * {
  color: var(--color-text, #16181d) !important;
}
[data-theme="dark"] .hero-poster .phone-screen,
[data-theme="dark"] .hero-poster .phone-screen * {
  color: #16181d !important;
}
.hero-poster .trust-pill,
.hero-poster .trust-pill * {
  color: #16181d !important;
}
.hero-poster .trust-pill { background: white !important; }

/* Polish: refine the leaf decoration into a cleaner accent shape + add a soft glow ring behind the phone */
.leaf-deco { opacity: 0.5; }
.hero-blob::before {
  content: "";
  display: none;
}

/* Elegant touch: subtle glowing ring around the "Get Started" pill button inside the poster */
.hero-poster .btn-primary {
  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}

/* Floating cards get a touch more elegance */
.hero-poster .floating-card {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Safety net: force correct mobile/desktop layout even if Tailwind's CDN script fails to load */
@media (max-width: 767px) {
  .app-sidebar-wrap { display: none !important; }
}
@media (min-width: 768px) {
  .mobile-topbar, .mobile-search-wrap, .dock-wrap { display: none !important; }
}

/* Tinted card surfaces matching team color instead of plain white */
.mini-stat-card, .stat-card, .gauge-panel, .bg-card.card-rounded {
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-card)) !important;
}
[data-theme="dark"] .mini-stat-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .gauge-panel,
[data-theme="dark"] .bg-card.card-rounded {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-card)) !important;
}

/* Horizontally scrollable news carousel */
.news-scroll {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.news-scroll::-webkit-scrollbar { display: none; }
.news-scroll-card {
  flex: 0 0 auto;
  width: 210px;
  background: var(--color-card);
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: 6px 6px 16px var(--clay-shadow-dark), -4px -4px 10px var(--clay-shadow-light);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

/* ===================================================
   NEUMORPHIC / GLASSMORPHIC REDESIGN (works in light AND dark)
=================================================== */

body { background-color: var(--color-bg) !important; }

.glass-card, .stat-card, .mini-stat-card, .gig-box, .listing-card,
.bg-card.card-rounded, .gauge-panel {
  background: color-mix(in srgb, var(--color-card) 70%, transparent) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color) !important;
  box-shadow:
    8px 8px 18px var(--clay-shadow-dark),
    -8px -8px 18px var(--clay-shadow-light) !important;
}

.btn-secondary, .quick-action, .tab-btn, .balance-chip:not(.primary) {
  background: color-mix(in srgb, var(--color-card) 80%, transparent) !important;
  color: var(--color-text) !important;
  border: none !important;
  box-shadow:
    5px 5px 12px var(--clay-shadow-dark),
    -5px -5px 12px var(--clay-shadow-light) !important;
}

.btn-primary, .tab-btn.active, .sidebar-links a.active, .dock-bar-item.active {
  background: var(--color-accent) !important;
  color: white !important;
  box-shadow: 4px 4px 10px var(--clay-shadow-dark) !important;
}

.icon-badge, .icon-badge-gigs, .icon-badge-market, .icon-badge-earnings, .icon-badge-referral {
  background: color-mix(in srgb, var(--color-card) 80%, transparent) !important;
  box-shadow:
    4px 4px 10px var(--clay-shadow-dark),
    -4px -4px 10px var(--clay-shadow-light) !important;
  color: var(--color-accent) !important;
}

.dock-bar, .app-sidebar-labels {
  background: color-mix(in srgb, var(--color-card) 82%, transparent) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
}
.dock-center-btn {
  background: var(--color-accent) !important;
  box-shadow: 4px 4px 12px var(--clay-shadow-dark) !important;
  border-color: var(--color-bg) !important;
}
.app-sidebar-icons { background: var(--color-accent) !important; }

.balance-card { box-shadow: 8px 8px 20px var(--clay-shadow-dark) !important; }

.input-field {
  background: color-mix(in srgb, var(--color-card) 80%, transparent) !important;
  border: none !important;
  box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light);
}

/* ===================================================
   NEUMORPHIC / GLASSMORPHIC REDESIGN (works in light AND dark)
=================================================== */

body { background-color: var(--color-bg) !important; }

.glass-card, .stat-card, .mini-stat-card, .gig-box, .listing-card,
.bg-card.card-rounded, .gauge-panel {
  background: color-mix(in srgb, var(--color-card) 70%, transparent) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color) !important;
  box-shadow:
    8px 8px 18px var(--clay-shadow-dark),
    -8px -8px 18px var(--clay-shadow-light) !important;
}

.btn-secondary, .quick-action, .tab-btn, .balance-chip:not(.primary) {
  background: color-mix(in srgb, var(--color-card) 80%, transparent) !important;
  color: var(--color-text) !important;
  border: none !important;
  box-shadow:
    5px 5px 12px var(--clay-shadow-dark),
    -5px -5px 12px var(--clay-shadow-light) !important;
}

.btn-primary, .tab-btn.active, .sidebar-links a.active, .dock-bar-item.active {
  background: var(--color-accent) !important;
  color: white !important;
  box-shadow: 4px 4px 10px var(--clay-shadow-dark) !important;
}

.icon-badge, .icon-badge-gigs, .icon-badge-market, .icon-badge-earnings, .icon-badge-referral {
  background: color-mix(in srgb, var(--color-card) 80%, transparent) !important;
  box-shadow:
    4px 4px 10px var(--clay-shadow-dark),
    -4px -4px 10px var(--clay-shadow-light) !important;
  color: var(--color-accent) !important;
}

.dock-bar, .app-sidebar-labels {
  background: color-mix(in srgb, var(--color-card) 82%, transparent) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
}
.dock-center-btn {
  background: var(--color-accent) !important;
  box-shadow: 4px 4px 12px var(--clay-shadow-dark) !important;
  border-color: var(--color-bg) !important;
}
.app-sidebar-icons { background: var(--color-accent) !important; }

.balance-card { box-shadow: 8px 8px 20px var(--clay-shadow-dark) !important; }

.input-field {
  background: color-mix(in srgb, var(--color-card) 80%, transparent) !important;
  border: none !important;
  box-shadow: inset 3px 3px 8px var(--clay-shadow-dark), inset -3px -3px 8px var(--clay-shadow-light);
}

/* FINAL FIX: remove all blur/haze effects site-wide. Solid, crisp, no glow. */
.photo-bg, .photo-bg::after { display: none !important; }

.glass-card, .stat-card, .mini-stat-card, .gig-box, .listing-card,
.bg-card.card-rounded, .gauge-panel {
  background: var(--color-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.btn-secondary, .quick-action, .tab-btn, .balance-chip:not(.primary) {
  background: var(--color-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.icon-badge, .icon-badge-gigs, .icon-badge-market, .icon-badge-earnings, .icon-badge-referral {
  background: var(--color-surface) !important;
}

.dock-bar, .app-sidebar-labels {
  background: var(--color-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.input-field {
  background: var(--color-surface) !important;
  backdrop-filter: none !important;
}

.bottom-nav {
  background: var(--color-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* NUCLEAR FIX: kill every remaining glow/halo site-wide by neutralizing the light-shadow channel used in the dual embossed shadow system */
:root, [data-theme="light"], [data-theme="dark"],
[data-team="boys"], [data-team="girls"],
[data-team="boys"][data-theme="dark"], [data-team="girls"][data-theme="dark"] {
  --clay-shadow-light: transparent !important;
}
.dock-center-btn { box-shadow: 0 6px 14px rgba(0,0,0,0.4) !important; }

/* ===================================================
   GLASSMORPHISM AUTH SYSTEM
   Dedicated classes so the rest of the site (which was
   flattened on purpose) is untouched.
=================================================== */

.auth-scene {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.5), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,182,193,0.55), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(224,150,170,0.6), transparent 55%),
    linear-gradient(160deg, #f3d9d6 0%, #e7b8bc 35%, #d99aa6 65%, #c98494 100%);
  background-size: cover;
}
[data-theme="dark"] .auth-scene {
  background:
    radial-gradient(circle at 15% 20%, rgba(120,90,255,0.35), transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(56,217,232,0.25), transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(244,114,182,0.25), transparent 55%),
    linear-gradient(160deg, #0d0d14 0%, #14141f 45%, #1a1826 100%);
}

/* Optional: drop a real photo at public/images/auth-bg.jpg and it
   layers on top automatically once the file exists */
.auth-scene.has-photo {
  background-image:
    radial-gradient(circle at 50% 30%, rgba(0,0,0,0.05), rgba(0,0,0,0.25)),
    url('/images/auth-bg.jpg');
  background-size: cover;
  background-position: center;
}

.auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  border-radius: 2rem;
  padding: 2.25rem 2rem;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="dark"] .auth-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.auth-logo-badge {
  width: 2.6rem; height: 2.6rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
[data-theme="dark"] .auth-logo-badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

.glass-input {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.85rem 1.1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.glass-input::placeholder { color: rgba(60,40,45,0.55); }
.glass-input:focus {
  background: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.9);
}
[data-theme="dark"] .glass-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
}
[data-theme="dark"] .glass-input::placeholder { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .glass-input:focus {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}

/* Gradient-rimmed glass button, like the reference shots */
.glass-btn-wrap {
  padding: 2px;
  border-radius: 9999px;
  background: linear-gradient(120deg, #ff9ecd, #a78bfa, #38d9e8);
}
.glass-btn {
  width: 100%;
  padding: 0.85rem 1.5rem;
  border-radius: 9999px;
  border: none;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #2a2a2a;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.glass-btn:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); }
[data-theme="dark"] .glass-btn {
  background: rgba(20,20,28,0.75);
  color: #f2f2f2;
}
[data-theme="dark"] .glass-btn:hover { background: rgba(20,20,28,0.9); }

.auth-footnote {
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(50,35,40,0.7);
  text-align: center;
}
[data-theme="dark"] .auth-footnote { color: rgba(255,255,255,0.5); }

/* ===================================================
   TRUE LIQUID GLASS — Balance Card
   Final override, wins cascade over all earlier rules.
=================================================== */
.balance-card {
  position: relative !important;
  overflow: hidden !important;
  max-width: 100% !important;
  border-radius: 2rem !important;
  padding: 1.75rem 1.5rem !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .balance-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Water-droplet light pool, top right */
.balance-card::before {
  content: "" !important;
  position: absolute !important;
  top: -30% !important; right: -15% !important;
  width: 220px !important; height: 220px !important;
  border-radius: 9999px !important;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgba(255,255,255,0.15) 45%, transparent 70%) !important;
  filter: blur(2px) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}
[data-team="boys"] .balance-card::before {
  background: radial-gradient(circle at 35% 35%, rgba(56,217,232,0.9), rgba(56,217,232,0.1) 45%, transparent 70%) !important;
}
[data-team="girls"] .balance-card::before {
  background: radial-gradient(circle at 35% 35%, rgba(244,114,182,0.9), rgba(244,114,182,0.1) 45%, transparent 70%) !important;
}

/* Second smaller droplet, bottom left, for depth */
.balance-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: -20% !important; left: -10% !important;
  width: 130px !important; height: 130px !important;
  border-radius: 9999px !important;
  background: radial-gradient(circle at 60% 60%, rgba(255,255,255,0.4), transparent 70%) !important;
  filter: blur(1px) !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
}

.balance-card > * { position: relative !important; z-index: 2 !important; }

.balance-label { font-size: 0.82rem !important; opacity: 0.75 !important; margin-bottom: 0.25rem !important; }
.balance-amount { font-size: 2rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }

.balance-actions { display: flex !important; gap: 0.6rem !important; margin-top: 1.25rem !important; }
.balance-chip {
  background: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  color: inherit !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
[data-theme="dark"] .balance-chip {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
.balance-chip.primary {
  background: rgba(255,255,255,0.55) !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .balance-chip.primary {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}

/* ===================================================
   FINAL: Page background — no more hotlinked Unsplash.
   URL is set inline per-page by the layout (server-side
   file_exists check), this block just handles the look.
=================================================== */
.photo-bg {
  position: fixed !important;
  top: -5% !important; left: -5% !important;
  width: 110% !important; height: 110% !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--color-bg) !important;
  filter: blur(8px) !important;
  transform: none !important;
  z-index: -1 !important;
}
.photo-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(245,248,252,0.35) 0%, rgba(245,248,252,0.7) 100%) !important;
}
[data-theme="dark"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(10,10,15,0.5) 0%, rgba(10,10,15,0.92) 100%) !important;
}

/* ===================================================
   GLASS SIDEBAR — single rail, expands on hover
=================================================== */
.app-sidebar {
  position: fixed !important;
  top: 1.25rem; left: 1.25rem; bottom: 1.25rem;
  z-index: 40;
  width: 78px;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 0.9rem;
  border-radius: 2rem;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] .app-sidebar {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.app-sidebar:hover { width: 240px; }

.sidebar-logo-row { display:flex; align-items:center; gap:0.85rem; padding:0 0.35rem 1rem; flex-shrink:0; }
.sidebar-logo-text, .app-sidebar .label {
  opacity: 0; white-space: nowrap;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.app-sidebar:hover .sidebar-logo-text,
.app-sidebar:hover .label {
  opacity: 1; transform: translateX(0);
  transition-delay: 0.12s;
}

.sidebar-search-row { position:relative; display:flex; align-items:center; margin-bottom:0.75rem; flex-shrink:0; }
.sidebar-search-row .search-icon { position:absolute; left:0.9rem; z-index:2; color:var(--color-muted); }
.sidebar-search-input { padding-left:2.5rem !important; opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
.app-sidebar:hover .sidebar-search-input { opacity:1; pointer-events:auto; }

.sidebar-links { display:flex; flex-direction:column; gap:0.3rem; flex:1; overflow-y:auto; overflow-x:hidden; }
.sidebar-links a {
  display:flex; align-items:center; gap:0.9rem;
  padding:0.65rem 0.7rem;
  border-radius:1rem;
  color: var(--color-muted);
  white-space:nowrap;
  flex-shrink:0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-links a i { flex-shrink:0; }
.sidebar-links a:hover { background: rgba(255,255,255,0.25); color: var(--color-text); }
[data-theme="dark"] .sidebar-links a:hover { background: rgba(255,255,255,0.08); }
.sidebar-links a.active {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  color: white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 0 24px 2px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.sidebar-footer { display:flex; flex-direction:column; gap:0.5rem; flex-shrink:0; padding-top:0.75rem; }
.sidebar-footer-btn {
  display:flex; align-items:center; gap:0.9rem;
  padding:0.65rem 0.7rem;
  border-radius:1rem;
  width:100%;
  white-space:nowrap;
  background: rgba(255,255,255,0.2);
}
[data-theme="dark"] .sidebar-footer-btn { background: rgba(255,255,255,0.06); }

@media (min-width: 768px) {
  body:has(.app-sidebar) main,
  body:has(.app-sidebar) .app-nav {
    margin-left: 122px !important;
    transition: margin-left 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  body:has(.app-sidebar:hover) main,
  body:has(.app-sidebar:hover) .app-nav {
    margin-left: 284px !important;
  }
}

/* ===================================================
   TRUE GLASS RESTORE — overrides the earlier
   "FINAL FIX" / "NUCLEAR FIX" blocks that disabled
   blur, hid the background photo, and killed the
   light-shadow highlight. This is the last word.
=================================================== */

/* Bring the background photo back */
.photo-bg {
  display: block !important;
  position: fixed !important;
  top: -5% !important; left: -5% !important;
  width: 110% !important; height: 110% !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(10px) saturate(115%) !important;
  transform: none !important;
  z-index: -1 !important;
}
.photo-bg::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.55) 100%) !important;
}
[data-theme="dark"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(8,8,14,0.45) 0%, rgba(8,8,14,0.85) 100%) !important;
}

/* Restore the light-shadow channel the nuclear fix wiped out */
:root, [data-theme="light"], [data-theme="dark"],
[data-team="boys"], [data-team="girls"] {
  --clay-shadow-light: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] {
  --clay-shadow-light: rgba(255,255,255,0.08) !important;
}

/* Every card/panel/pill genuinely glass, everywhere */
.glass-card, .stat-card, .mini-stat-card, .gig-box, .listing-card,
.bg-card.card-rounded, .gauge-panel, .news-scroll-card, .hero-poster,
.hero-blob, .phone-frame {
  background: rgba(255,255,255,0.32) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
[data-theme="dark"] .glass-card, [data-theme="dark"] .stat-card,
[data-theme="dark"] .mini-stat-card, [data-theme="dark"] .gig-box,
[data-theme="dark"] .listing-card, [data-theme="dark"] .bg-card.card-rounded,
[data-theme="dark"] .gauge-panel, [data-theme="dark"] .news-scroll-card,
[data-theme="dark"] .hero-poster, [data-theme="dark"] .hero-blob,
[data-theme="dark"] .phone-frame {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Pills / buttons / inputs / dock / topbar — glass too */
.quick-action, .btn-secondary, .tab-btn, .trust-pill,
.input-field, .theme-toggle, .dock-bar, .mobile-topbar,
.app-sidebar-labels, .dock-center-btn {
  background: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
}
[data-theme="dark"] .quick-action, [data-theme="dark"] .btn-secondary,
[data-theme="dark"] .tab-btn, [data-theme="dark"] .trust-pill,
[data-theme="dark"] .input-field, [data-theme="dark"] .theme-toggle,
[data-theme="dark"] .dock-bar, [data-theme="dark"] .mobile-topbar,
[data-theme="dark"] .app-sidebar-labels, [data-theme="dark"] .dock-center-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.icon-badge, .icon-badge-gigs, .icon-badge-market,
.icon-badge-earnings, .icon-badge-referral {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
[data-theme="dark"] .icon-badge, [data-theme="dark"] .icon-badge-gigs,
[data-theme="dark"] .icon-badge-market, [data-theme="dark"] .icon-badge-earnings,
[data-theme="dark"] .icon-badge-referral {
  background: rgba(255,255,255,0.09) !important;
}

/* ===================================================
   GLASS TUNING PASS — lighter blur, remove heavy
   white glow, fix invisible sidebar icons, true
   liquid-glass rail with water-bubble highlights
=================================================== */

/* 1. Reduce blur + kill the heavy white glow */
.photo-bg {
  filter: blur(3px) saturate(115%) !important;
}
.photo-bg::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.22) 100%) !important;
}
[data-theme="dark"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(8,8,14,0.35) 0%, rgba(8,8,14,0.7) 100%) !important;
}

/* 2. Fix invisible sidebar icons — explicit color, not inherited */
.app-sidebar .sidebar-links a,
.app-sidebar .sidebar-footer-btn {
  color: #2a2a2a !important;
}
.app-sidebar .sidebar-links a i,
.app-sidebar .sidebar-footer-btn i {
  color: #2a2a2a !important;
  stroke: #2a2a2a !important;
}
[data-theme="dark"] .app-sidebar .sidebar-links a,
[data-theme="dark"] .app-sidebar .sidebar-footer-btn {
  color: #f0f0f0 !important;
}
[data-theme="dark"] .app-sidebar .sidebar-links a i,
[data-theme="dark"] .app-sidebar .sidebar-footer-btn i {
  color: #f0f0f0 !important;
  stroke: #f0f0f0 !important;
}
.app-sidebar .sidebar-links a.active,
.app-sidebar .sidebar-links a.active i {
  color: white !important;
  stroke: white !important;
}
.app-sidebar .sidebar-logo-text {
  color: #2a2a2a !important;
}
[data-theme="dark"] .app-sidebar .sidebar-logo-text {
  color: #f0f0f0 !important;
}

/* 3. New concept: true liquid-glass rail — thinner, brighter rim,
      water-bubble light pooling instead of a flat colored fill */
.app-sidebar {
  background: rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.5) !important;
  position: fixed !important;
  overflow: visible !important;
}
[data-theme="dark"] .app-sidebar {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Water-bubble highlight, top of rail */
.app-sidebar::before {
  content: "";
  position: absolute;
  top: -10%; left: -20%;
  width: 90px; height: 90px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.85), transparent 70%);
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.app-sidebar::after {
  content: "";
  position: absolute;
  bottom: -8%; right: -25%;
  width: 70px; height: 70px;
  border-radius: 9999px;
  background: radial-gradient(circle at 60% 60%, rgba(255,255,255,0.5), transparent 70%);
  filter: blur(1px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.app-sidebar > * { position: relative; z-index: 1; }

/* Active link: soft glass pill with color glow, not flat fill */
.app-sidebar .sidebar-links a.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 85%, white), var(--color-accent)) !important;
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--color-accent) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* Hover state: subtle glass lift, not solid fill */
.app-sidebar .sidebar-links a:hover {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(6px);
}
[data-theme="dark"] .app-sidebar .sidebar-links a:hover {
  background: rgba(255,255,255,0.07) !important;
}

/* ===================================================
   CLEAR GLASS PASS + NEW "PILL GLASS" CONCEPT
=================================================== */
.glass-card, .stat-card, .mini-stat-card, .gig-box, .listing-card,
.bg-card.card-rounded, .gauge-panel, .news-scroll-card,
.mobile-topbar, .dock-bar, .trust-pill, .quick-action {
  position: relative !important;
  background: rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-radius: 1.75rem !important;
  overflow: hidden !important;
}
.glass-card::before, .stat-card::before, .mini-stat-card::before,
.gig-box::before, .listing-card::before, .bg-card.card-rounded::before,
.gauge-panel::before, .news-scroll-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 1.5rem;
  border: 1.5px solid rgba(255,255,255,0.65);
  pointer-events: none;
  z-index: 1;
}
.glass-card::after, .stat-card::after, .mini-stat-card::after,
.gig-box::after, .listing-card::after, .bg-card.card-rounded::after,
.gauge-panel::after, .news-scroll-card::after {
  content: "";
  position: absolute;
  top: -40%; left: -20%;
  width: 70%; height: 140%;
  background: linear-gradient(120deg, rgba(255,255,255,0.35), transparent 60%);
  transform: rotate(-15deg);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .glass-card, [data-theme="dark"] .stat-card,
[data-theme="dark"] .mini-stat-card, [data-theme="dark"] .gig-box,
[data-theme="dark"] .listing-card, [data-theme="dark"] .bg-card.card-rounded,
[data-theme="dark"] .gauge-panel, [data-theme="dark"] .news-scroll-card {
  background: rgba(255,255,255,0.05) !important;
}
[data-theme="dark"] .glass-card::before, [data-theme="dark"] .stat-card::before,
[data-theme="dark"] .mini-stat-card::before, [data-theme="dark"] .gig-box::before,
[data-theme="dark"] .listing-card::before, [data-theme="dark"] .bg-card.card-rounded::before,
[data-theme="dark"] .gauge-panel::before, [data-theme="dark"] .news-scroll-card::before {
  border: 1.5px solid rgba(255,255,255,0.18);
}
.glass-card > *, .stat-card > *, .mini-stat-card > *, .gig-box > *,
.listing-card > *, .bg-card.card-rounded > *, .gauge-panel > * {
  position: relative;
  z-index: 2;
}

/* Photo dimming overlay, lighter */
.photo-bg::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.12) 100%) !important;
}
[data-theme="dark"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(8,8,14,0.2) 0%, rgba(8,8,14,0.5) 100%) !important;
}

/* ===================================================
   REMOVE HALO — kill leftover neumorphic glow on pills
=================================================== */
.quick-action, .trust-pill, .btn-secondary, .tab-btn, .icon-badge {
  box-shadow: 0 3px 10px rgba(0,0,0,0.10) !important;
  filter: none !important;
}
[data-theme="dark"] .quick-action, [data-theme="dark"] .trust-pill,
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .tab-btn,
[data-theme="dark"] .icon-badge {
  box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;
}

/* ===================================================
   BALANCE CARD — modern fintech redesign
=================================================== */
.balance-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 1.75rem !important;
  padding: 1.75rem 1.5rem !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px, transparent 2px, transparent 14px),
    linear-gradient(150deg, #1a1f3d 0%, #2a2560 45%, #4c3fd9 100%) !important;
  box-shadow:
    0 20px 44px rgba(30,20,90,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  color: white !important;
}
.balance-card::before {
  content: "" !important;
  position: absolute !important;
  top: -35% !important; right: -20% !important;
  width: 240px !important; height: 240px !important;
  border-radius: 9999px !important;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.25), transparent 65%) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}
.balance-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: 1.5rem !important; right: 1.5rem !important;
  width: 34px !important; height: 24px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15)) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
}
.balance-card > * { position: relative !important; z-index: 2 !important; }
.balance-label {
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.65 !important;
}
.balance-amount {
  font-size: 2.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-top: 0.15rem !important;
}
.balance-actions { margin-top: 1.5rem !important; }
.balance-chip {
  background: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: white !important;
  box-shadow: none !important;
}
.balance-chip.primary {
  background: rgba(255,255,255,0.9) !important;
  color: #2a2560 !important;
  font-weight: 600 !important;
}

/* ===================================================
   FORCE DOCK VISIBLE — final override
=================================================== */
@media (max-width: 767px) {
  .dock-wrap {
    display: flex !important;
    position: fixed !important;
    bottom: 0.75rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 380px !important;
    z-index: 999 !important;
  }
}

/* ===================================================
   WATER-DROPLET GLASS DOCK — 3D bubble buttons
=================================================== */
.dock-wheel-item {
  background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.15)) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.18),
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.08) !important;
  color: #2a2a2a !important;
}
[data-theme="dark"] .dock-wheel-item {
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)) !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  color: #f0f0f0 !important;
}
.dock-wheel-item.active {
  background: linear-gradient(160deg, var(--color-accent-light), var(--color-accent)) !important;
  color: white !important;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--color-accent) 55%, transparent),
    inset 0 2px 4px rgba(255,255,255,0.5) !important;
}

/* Wobble-in animation when the wheel opens */
.dock-wheel.open .dock-wheel-item {
  animation: bubblePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.dock-wheel.open .dock-wheel-item:nth-child(1) { animation-delay: 0.02s; }
.dock-wheel.open .dock-wheel-item:nth-child(2) { animation-delay: 0.06s; }
.dock-wheel.open .dock-wheel-item:nth-child(3) { animation-delay: 0.10s; }
.dock-wheel.open .dock-wheel-item:nth-child(4) { animation-delay: 0.14s; }
.dock-wheel.open .dock-wheel-item:nth-child(5) { animation-delay: 0.18s; }
.dock-wheel.open .dock-wheel-item:nth-child(6) { animation-delay: 0.22s; }
@keyframes bubblePop {
  0% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle))) scale(0); opacity: 0; }
  60% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(4.9rem) rotate(calc(-1 * var(--angle))) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(4.6rem) rotate(calc(-1 * var(--angle))) scale(1); opacity: 1; }
}

/* Center button — glossy 3D droplet, pops out of the screen */
.dock-center-btn {
  background: linear-gradient(155deg, rgba(255,255,255,0.5), var(--color-accent) 55%, color-mix(in srgb, var(--color-accent) 70%, black) 100%) !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--color-accent) 50%, transparent),
    inset 0 3px 6px rgba(255,255,255,0.5),
    inset 0 -4px 8px rgba(0,0,0,0.15) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.dock-center-btn.open {
  transform: translateX(-50%) rotate(135deg) scale(1.05) !important;
}
.dock-center-btn:active {
  transform: translateX(-50%) scale(0.9) !important;
}

/* Dock bar itself, glass pill */
.dock-bar {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
}
[data-theme="dark"] .dock-bar {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
}

/* ===================================================
   MOTION UPGRADE — snake indicator + dock magnify
=================================================== */
.dock-bar {
  position: relative !important;
}
.dock-snake {
  position: absolute;
  top: 0.4rem; bottom: 0.4rem;
  left: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 50%, transparent);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  z-index: 0;
  opacity: 0;
}
.dock-bar-item {
  position: relative;
  z-index: 1;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
.dock-bar-item.active, .dock-bar-item:hover {
  transform: translateY(-4px) scale(1.12);
  color: white !important;
}
.dock-bar-item:hover ~ .dock-bar-item,
.dock-bar-item:has(+ .dock-bar-item:hover) {
  transform: scale(1.04);
}

/* Sidebar sliding active-indicator */
.sidebar-links { position: relative; }
.sidebar-links a {
  transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}
.sidebar-links a:hover {
  transform: translateX(4px);
}
.sidebar-links a.active {
  transform: scale(1.02);
}

/* ===================================================
   FIX HORIZONTAL OVERFLOW — mobile
=================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
main {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
.grid, .flex {
  max-width: 100% !important;
}
@media (max-width: 767px) {
  main, .app-nav {
    margin-left: 0 !important;
  }
}

/* ===================================================
   PROPER FIX: phone mockup text — real light/dark modes
   (overrides the old "always force dark text" hack)
=================================================== */
.hero-poster .phone-screen,
.hero-poster .phone-screen * {
  color: var(--color-text) !important;
}
.hero-poster .phone-screen {
  background: var(--color-surface) !important;
}
.hero-poster .trust-pill,
.hero-poster .trust-pill * {
  color: var(--color-text) !important;
}

/* ===================================================
   Low-opacity theme-color gradient wash over the
   background photo, tinted to match team + theme
=================================================== */
.photo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
[data-team="boys"] .photo-bg::before {
  background: linear-gradient(160deg, rgba(56,217,232,0.18) 0%, transparent 60%);
}
[data-team="girls"] .photo-bg::before {
  background: linear-gradient(160deg, rgba(244,114,182,0.18) 0%, transparent 60%);
}
[data-theme="dark"] .photo-bg::before {
  opacity: 0.6;
}

/* ===================================================
   FINAL: phone mockup always light + readable,
   regardless of site theme (it's decorative demo content)
=================================================== */
.hero-poster .phone-screen {
  background: #f4f6fa !important;
}
.hero-poster .phone-screen,
.hero-poster .phone-screen * {
  color: #16181d !important;
}
.hero-poster .phone-screen .bg-card {
  background: rgba(0,0,0,0.045) !important;
}
.hero-poster .phone-screen .text-accent {
  color: var(--color-accent) !important;
}
.hero-poster .phone-screen .text-muted {
  color: rgba(22,24,29,0.55) !important;
}

/* ===================================================
   BACKGROUND TUNING — less blur, lighter/cleaner tint
=================================================== */
.photo-bg {
  filter: blur(1.5px) saturate(105%) !important;
}

.photo-bg::before {
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 55%) !important;
  opacity: 1 !important;
}
[data-team="boys"] .photo-bg::before {
  background: linear-gradient(160deg, rgba(56,217,232,0.08) 0%, transparent 55%) !important;
}
[data-team="girls"] .photo-bg::before {
  background: linear-gradient(160deg, rgba(244,114,182,0.08) 0%, transparent 55%) !important;
}
[data-theme="dark"] .photo-bg::before {
  opacity: 0.35 !important;
}

/* Slightly lighter dimming overlay so the photo itself reads more clearly */
.photo-bg::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.15) 100%) !important;
}
[data-theme="dark"] .photo-bg::after {
  background: linear-gradient(180deg, rgba(8,8,14,0.15) 0%, rgba(8,8,14,0.4) 100%) !important;
}

/* ===================================================
   DOCK REDESIGN — proper floating glass pill,
   with room for content so it never covers the page
=================================================== */
@media (max-width: 767px) {
  main {
    padding-bottom: 6.5rem !important;
  }
}

.dock-bar {
  background: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  border-radius: 9999px !important;
  padding: 0.65rem 1.4rem !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
  align-items: center !important;
}
[data-theme="dark"] .dock-bar {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.dock-bar-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.2rem !important;
  color: rgba(30,30,35,0.65) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.3rem !important;
}
[data-theme="dark"] .dock-bar-item {
  color: rgba(255,255,255,0.6) !important;
}
.dock-bar-item.active {
  color: white !important;
}

.dock-spacer {
  width: 3.4rem !important;
  flex-shrink: 0 !important;
}

/* Center button sits proud, above the bar, not overlapping content behind it */
.dock-center-btn {
  width: 3.6rem !important;
  height: 3.6rem !important;
  border-radius: 9999px !important;
  position: absolute !important;
  bottom: 1.1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

/* ===================================================
   DOCK WIDTH + SPACING FIX
=================================================== */
.dock-wrap {
  width: 92vw !important;
  max-width: 420px !important;
}
.dock-bar {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}

/* ===================================================
   HOME TEASER SLIDER — fading preview cards on the home page
=================================================== */
.teaser-slider {
  position: relative;
  min-height: 170px;
  max-width: 640px;
  margin: 0 auto;
}
.teaser-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  background: var(--color-surface, #fff);
  border-radius: 1rem;
  padding: 1.5rem;
  pointer-events: none;
}
.teaser-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ===== Fintech Glass Balance Card ===== */
.glass-balance-card {
  position: relative;
  border-radius: 1.75rem;
  padding: 2rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #fff;
  isolation: isolate;
}
.glass-balance-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 40%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  background-size: 250% 250%;
  animation: glassSheen 6s ease-in-out infinite;
}
@keyframes glassSheen {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
.glass-balance-card::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,180,255,0.25), transparent 70%);
  top: -100px; right: -80px;
  z-index: 0;
}
.glass-balance-card > * { position: relative; z-index: 3; }

.glass-balance-eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.glass-balance-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  display: inline-block; margin-right: 6px;
}
.glass-balance-amount {
  font-size: 2.6rem;
  font-weight: 700;
  margin-top: 0.6rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.glass-balance-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.25rem;
}
.glass-balance-actions {
  display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap;
}
.glass-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
}
.glass-chip:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.glass-chip.primary {
  background: linear-gradient(135deg, #6ea8ff, #8b6bff);
  border: none;
}
.glass-balance-card { transform-style: preserve-3d; will-change: transform; }

/* ===== Unified single-panel sidebar (reference-matched) ===== */
.app-sidebar-single {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  bottom: 1.25rem;
  width: 248px;
  z-index: 40;
  background: var(--color-card);
  border-radius: 1.75rem;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 10px 34px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  border: 1px solid var(--border-color);
  overflow-y: auto;
}
.app-sidebar-single .sidebar-logo { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.35rem; }
.app-sidebar-single .sidebar-search { position: relative; }
.app-sidebar-single .sidebar-nav-list { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.app-sidebar-single .sidebar-nav-list a {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.85rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.app-sidebar-single .sidebar-nav-list a:hover { background: var(--color-surface); color: var(--color-text); }
.app-sidebar-single .sidebar-nav-list a.active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
}
.app-sidebar-single .sidebar-nav-list a.active::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: var(--color-accent2);
  border-radius: 4px;
}
.app-sidebar-single .sidebar-bottom { display: flex; flex-direction: column; gap: 0.5rem; }
.app-sidebar-single .sidebar-bottom .theme-toggle {
  background: var(--color-surface); border-radius: 9999px;
  width: 100%; padding: 0.6rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.app-sidebar-single .sidebar-bottom button[type="submit"] {
  width: 100%; border-radius: 9999px !important;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}

@media (min-width: 768px) {
  body:has(.app-sidebar-single) main,
  body:has(.app-sidebar-single) .app-nav {
    margin-left: 300px !important;
  }
}

/* ===== Clean Auth Scene (replaces water-glass look) ===== */
.auth-scene-clean {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 2rem 1rem;
}
.auth-card-clean {
  width: 100%;
  max-width: 440px;
  background: var(--color-card);
  border-radius: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 50px rgba(16,24,40,0.08), 0 2px 6px rgba(16,24,40,0.04);
  padding: 2.25rem 2rem;
}
.plan-tile {
  background: var(--color-card);
  border-radius: 1.25rem;
  border: 1px solid var(--border-color);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 12px 30px rgba(16,24,40,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plan-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,0.10); }
.plan-tile.featured {
  border: 2px solid var(--color-accent2);
  position: relative;
}
.plan-tile.featured::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -0.65rem; left: 50%; transform: translateX(-50%);
  background: var(--color-accent2);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}
.plan-tile ul { list-style: none; padding: 0; }
.plan-tile ul li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.plan-tile ul li::before {
  content: "✓";
  color: var(--color-accent3);
  font-weight: 700;
}

/* ===== Reference-style dashboard: KPI tiles + chart cards ===== */
.dash-header-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dash-tab {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  color: var(--color-muted);
}
.dash-tab.active { background: #16181d; color: #fff; border-color: #16181d; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.kpi-tile {
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(16,24,40,0.05);
}
.kpi-tile.featured {
  background: linear-gradient(135deg, #6ea8ff, #4f7bff);
  color: #fff;
  border: none;
}
.kpi-tile-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.kpi-tile-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.05);
}
.kpi-tile.featured .kpi-tile-icon { background: rgba(255,255,255,0.2); }
.kpi-tile-delta { font-size: 0.75rem; font-weight: 700; color: var(--color-accent3); }
.kpi-tile.featured .kpi-tile-delta { color: #d7ffea; }
.kpi-tile-value { font-size: 1.5rem; font-weight: 700; }
.kpi-tile-label { font-size: 0.78rem; color: var(--color-muted); margin-top: 0.15rem; }
.kpi-tile.featured .kpi-tile-label { color: rgba(255,255,255,0.85); }

.chart-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }

.chart-card {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(16,24,40,0.05);
}
.chart-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.chart-card canvas { max-height: 220px; }

.ring-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .ring-grid { grid-template-columns: 1fr; } }

.ring-card { background: var(--color-card); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 8px 24px rgba(16,24,40,0.05); }
.ring-card-body { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ring-legend { flex: 1; min-width: 160px; font-size: 0.82rem; }
.ring-legend-row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--border-color); }
.ring-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.5rem; }
.ring-chart-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.ring-chart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-chart-center strong { font-size: 1.1rem; }
.ring-chart-center span { font-size: 0.7rem; color: var(--color-muted); }

/* ===== Quick Actions - 3D tilt, colored icon badges ===== */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.5rem;
}
.qa-card {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.1rem;
  padding: 1.1rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  text-decoration: none;
  color: var(--color-text);
  transform-style: preserve-3d;
  transition: box-shadow 0.25s ease;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  will-change: transform;
}
.qa-card:hover { box-shadow: 0 16px 34px rgba(16,24,40,0.14); }
.qa-icon {
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 10px rgba(0,0,0,0.15);
}
.qa-label { font-size: 0.82rem; font-weight: 600; }
.qa-card[data-color="blue"] .qa-icon { background: linear-gradient(135deg,#6ea8ff,#4f7bff); }
.qa-card[data-color="orange"] .qa-icon { background: linear-gradient(135deg,#fbbf24,#f4a261); }
.qa-card[data-color="green"] .qa-icon { background: linear-gradient(135deg,#4ade80,#22c55e); }
.qa-card[data-color="purple"] .qa-icon { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.qa-card[data-color="pink"] .qa-icon { background: linear-gradient(135deg,#f472b6,#ec4899); }
.qa-card[data-color="cyan"] .qa-icon { background: linear-gradient(135deg,#22d3ee,#06b6d4); }

/* Auto page-enter animation (no scroll needed) */
main { animation: pageEnter 0.5s ease both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== FIX: prevent any container from ever overflowing viewport width ===== */
* { box-sizing: border-box; }
main, .kpi-row, .chart-grid, .ring-grid, .quick-grid, .quick-actions-grid {
  max-width: 100%;
}

/* Mobile-first: single column by default, expand only on wider screens */
.kpi-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }

.chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) { .chart-grid { grid-template-columns: 2fr 1fr 1fr; } }

.ring-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 900px) { .ring-grid { grid-template-columns: 1fr 1fr; } }

/* ===== Quick Actions grid — was completely unstyled, fixing now ===== */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
@media (min-width: 640px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .quick-grid { grid-template-columns: repeat(4, 1fr); } }

.quick-grid-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.1rem;
  padding: 1.1rem 0.9rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  transform-style: preserve-3d;
  transition: box-shadow 0.25s ease;
  will-change: transform;
}
.quick-grid-item:hover { box-shadow: 0 16px 34px rgba(16,24,40,0.14); }
.quick-grid-icon {
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.12);
}

@media (max-width: 767px) {
  main { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ===== FIX: main content should flex full width next to sidebar, not stay narrow ===== */
@media (min-width: 768px) {
  body:has(.app-sidebar-single) main {
    max-width: none !important;
    margin-left: 300px !important;
    width: calc(100% - 300px) !important;
    padding: 2rem 2.5rem !important;
  }
}
@media (min-width: 1440px) {
  body:has(.app-sidebar-single) main {
    padding: 2.5rem 4rem !important;
  }
}

/* Prevent any fixed-width child from causing horizontal scroll */
main, main > * { max-width: 100%; }
img, canvas, svg { max-width: 100%; height: auto; }

/* ===== Quick Actions — compact icon buttons, not big cards ===== */
.quick-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 1rem 0 1.5rem;
}
.quick-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 600;
  width: 4.2rem;
}
.quick-icon-circle {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.quick-icon-btn:hover .quick-icon-circle { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,0.2); }
.quick-icon-btn[data-color="cyan"] .quick-icon-circle { background: linear-gradient(135deg,#22d3ee,#06b6d4); }
.quick-icon-btn[data-color="purple"] .quick-icon-circle { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.quick-icon-btn[data-color="pink"] .quick-icon-circle { background: linear-gradient(135deg,#f472b6,#ec4899); }
.quick-icon-btn[data-color="orange"] .quick-icon-circle { background: linear-gradient(135deg,#fbbf24,#f4a261); }
.quick-icon-btn[data-color="green"] .quick-icon-circle { background: linear-gradient(135deg,#4ade80,#22c55e); }
.quick-icon-btn[data-color="blue"] .quick-icon-circle { background: linear-gradient(135deg,#6ea8ff,#4f7bff); }

/* ===== Proper wide-screen scaling — centered, roomy, no overflow ===== */
@media (min-width: 768px) {
  body:has(.app-sidebar-single) main {
    max-width: none !important;
    margin-left: 300px !important;
    width: calc(100% - 300px) !important;
    padding: 2rem 2.5rem !important;
    overflow-x: hidden;
  }
}
@media (min-width: 1440px) {
  body:has(.app-sidebar-single) main {
    padding: 3rem 5rem !important;
  }
  .kpi-row { grid-template-columns: repeat(4, 1fr); }
  .chart-grid { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr); }
}
html, body { overflow-x: hidden; }

/* ===== Balance tile — alive, human-feeling interactivity ===== */
.kpi-tile.featured {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
}
.kpi-tile.featured::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.kpi-tile.featured:hover::after { opacity: 1; }
.kpi-tile.featured .kpi-tile-icon {
  animation: pulseSoft 2.4s ease-in-out infinite;
}
@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
  50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
.kpi-tile-value.digit-roll span {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ===== Consolidated Analytics card with sliding tab toggle ===== */
.analytics-card {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(16,24,40,0.05);
}
.analytics-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.analytics-tabs {
  position: relative;
  display: flex;
  background: var(--color-surface);
  border-radius: 999px;
  padding: 0.25rem;
  gap: 0.15rem;
}
.analytics-tab {
  position: relative;
  z-index: 2;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.25s ease;
  white-space: nowrap;
}
.analytics-tab.active { color: #fff; }
.analytics-tab-indicator {
  position: absolute;
  top: 0.25rem; bottom: 0.25rem; left: 0.25rem;
  width: 90px;
  background: linear-gradient(135deg,#6ea8ff,#4f7bff);
  border-radius: 999px;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(79,123,255,0.35);
}
.analytics-stat-row { display: flex; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.analytics-stat-row .stat-item { font-size: 0.8rem; color: var(--color-muted); }
.analytics-stat-row .stat-item strong { display: block; font-size: 1.1rem; color: var(--color-text); }
.analytics-canvas-wrap { position: relative; height: 260px; }
.analytics-canvas-wrap.ring-mode { height: 220px; display: flex; align-items: center; gap: 1.5rem; }

/* Quick Actions responsive override */
/* REMOVED: hardcoded 3/8-col grid, replaced by auto-fill rule in theme-presets.css */

/* ===== Campus News toast notifications ===== */
.news-toast-stack {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 300px;
}
@media (max-width: 767px) {
  .news-toast-stack { left: 1rem; right: 1rem; max-width: none; top: 4.5rem; }
}
.news-toast {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 12px 30px rgba(16,24,40,0.15);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.news-toast.show { transform: translateX(0); opacity: 1; }
.news-toast-icon {
  width: 2rem; height: 2rem; border-radius: 0.6rem;
  background: linear-gradient(135deg,#6ea8ff,#4f7bff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.news-toast-title { font-size: 0.82rem; font-weight: 700; }
.news-toast-body { font-size: 0.74rem; color: var(--color-muted); margin-top: 0.15rem; }
.news-toast-close { margin-left: auto; cursor: pointer; color: var(--color-muted); font-size: 0.9rem; }

/* ===== Leaderboard podium ===== */
.podium-row { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; margin: 2rem 0; }
.podium-place { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.podium-avatar {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 1.1rem;
}
.podium-place.first .podium-avatar { width: 4rem; height: 4rem; background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow: 0 0 0 4px rgba(251,191,36,0.25); }
.podium-place.second .podium-avatar { background: linear-gradient(135deg,#cbd5e1,#94a3b8); }
.podium-place.third .podium-avatar { background: linear-gradient(135deg,#fb923c,#ea580c); }
.podium-bar { border-radius: 0.75rem 0.75rem 0 0; width: 5.5rem; display: flex; align-items: flex-start; justify-content: center; padding-top: 0.5rem; font-weight: 700; color: #fff; }
.podium-place.first .podium-bar { height: 90px; background: linear-gradient(180deg,#fbbf24,#f59e0b); }
.podium-place.second .podium-bar { height: 65px; background: linear-gradient(180deg,#cbd5e1,#94a3b8); }
.podium-place.third .podium-bar { height: 45px; background: linear-gradient(180deg,#fb923c,#ea580c); }
.podium-name { font-size: 0.8rem; font-weight: 600; }
.podium-amount { font-size: 0.72rem; color: var(--color-muted); }

/* News toast — bigger, glass/transparent */
.news-toast {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 1.1rem 1.25rem;
  border-radius: 1.25rem;
}
[data-theme="dark"] .news-toast {
  background: rgba(26,26,34,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}
.news-toast-title { font-size: 0.92rem; }
.news-toast-body { font-size: 0.82rem; }
.news-toast-icon { width: 2.4rem; height: 2.4rem; }
.news-toast-stack { max-width: 340px; }
@media (max-width: 767px) { .news-toast-stack { max-width: none; } }

/* ===== Dock items — quick-action style icons, kept transparent ===== */
.dock-bar-item, .dock-wheel-item {
  background: rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3) !important;
}
[data-theme="dark"] .dock-bar-item, [data-theme="dark"] .dock-wheel-item {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.dock-wheel-item[data-idx="0"] i { color: #4f7bff; }
.dock-wheel-item[data-idx="1"] i { color: #22c55e; }
.dock-wheel-item[data-idx="2"] i { color: #ec4899; }
.dock-wheel-item[data-idx="3"] i { color: #f59e0b; }
.dock-wheel-item[data-idx="4"] i { color: #a78bfa; }
.dock-wheel-item[data-idx="5"] i { color: #06b6d4; }
.dock-wheel-item.active i { color: #fff !important; }
.dock-bar-item i { color: #6ea8ff; }
.dock-bar-item.active i { color: #fff; }

/* ===== Mobile top bar — icon buttons + settings dropdown ===== */
.mobile-topbar-icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  color: var(--color-text);
}
.mobile-settings-dropdown {
  position: absolute;
  top: 2.8rem; right: 0;
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(16,24,40,0.15);
  min-width: 170px;
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 70;
}
.mobile-settings-dropdown.show { display: flex; }
.mobile-settings-dropdown a, .mobile-settings-dropdown button {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-text);
  text-align: left;
  width: 100%;
  background: none;
}
.mobile-settings-dropdown a:hover, .mobile-settings-dropdown button:hover { background: var(--color-surface); }

/* FIX: ring charts overflow on mobile — force stack + shrink */
@media (max-width: 480px) {
  .analytics-canvas-wrap.ring-mode {
    flex-direction: column;
    height: auto;
  }
  .ring-chart-wrap {
    width: 120px !important;
    height: 120px !important;
  }
  .ring-legend {
    min-width: 0 !important;
    width: 100%;
  }
  .analytics-canvas-wrap.ring-mode,
  .ring-card-body {
    flex-wrap: wrap;
  }
}

/* ===== Fiverr/Stripe-hybrid gig cards ===== */
.gig-card-v2 {
  background: var(--color-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: 1.4rem;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 8px 22px rgba(16,24,40,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.gig-card-v2:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16,24,40,0.12); }
.gig-card-v2-top { display: flex; justify-content: space-between; align-items: flex-start; }
.gig-card-category {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-accent2);
  background: color-mix(in srgb, var(--color-accent2) 12%, transparent);
  padding: 0.25rem 0.6rem; border-radius: 999px;
}
.gig-card-status {
  font-size: 0.68rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px;
}
.gig-card-status.open { background: rgba(34,197,94,0.15); color: #16a34a; }
.gig-card-status.taken { background: rgba(148,163,184,0.2); color: #64748b; }
.gig-card-title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.gig-card-poster { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--color-muted); }
.gig-card-poster-avatar {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: linear-gradient(135deg,#6ea8ff,#4f7bff);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
}
.gig-card-rating { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; }
.gig-card-rating .stars { color: #fbbf24; }
.gig-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.gig-card-price {
  font-size: 1.1rem; font-weight: 800;
  background: linear-gradient(135deg,#6ea8ff,#8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gig-card-views { font-size: 0.72rem; color: var(--color-muted); display: flex; align-items: center; gap: 0.25rem; }

.gig-filter-bar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.gig-filter-chip {
  padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: var(--color-card); border: 1px solid var(--border-color); color: var(--color-muted);
  cursor: pointer;
}
.gig-filter-chip.active { background: #16181d; color: #fff; border-color: #16181d; }

/* ===== Balance / Gig Income flip card ===== */
.kpi-tile.flip-card{ padding:0; }
.flip-card-inner{ position:relative; width:100%; height:100%; min-height:118px; transform-style:preserve-3d; transition:transform 0.8s cubic-bezier(.4,.2,.2,1); cursor:pointer; }
.flip-card-inner.flipped{ transform:rotateY(180deg); }
.flip-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; padding:1.25rem; border-radius:1.25rem; box-sizing:border-box; }
.flip-face-front{ background:linear-gradient(135deg,#6ea8ff,#4f7bff); color:#fff; }
.flip-face-back{ background:linear-gradient(135deg,#34d399,#059669); color:#fff; transform:rotateY(180deg); }
.flip-face .kpi-tile-icon{ background:rgba(255,255,255,0.2); }
.flip-face .kpi-tile-label{ color:rgba(255,255,255,0.85); }
.flip-dots{ position:absolute; bottom:0.7rem; right:1rem; display:flex; gap:5px; z-index:3; }
.flip-dots span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.4); transition:background 0.3s ease,width 0.3s ease; }
.flip-dots span.active{ background:#fff; width:14px; border-radius:3px; }
.kpi-row{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ===== Real physical card design (replaces flat gradient tile) ===== */
.kpi-tile.flip-card{ padding:0; background:none; border:none; box-shadow:none; aspect-ratio:1.6; max-width:420px; perspective:1000px; }
.flip-card-inner{ min-height:0; }
.flip-face{
  border-radius:1.25rem; padding:1.4rem 1.6rem; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 22px 44px -14px rgba(10,15,30,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.10);
}
.flip-face-front{ background:radial-gradient(130% 150% at var(--mx,25%) var(--my,15%), rgba(255,255,255,0.16), transparent 55%), linear-gradient(155deg,#22314f 0%,#141d34 55%,#090d1a 100%); color:#eef1ff; }
.flip-face-back{ background:radial-gradient(130% 150% at var(--mx,25%) var(--my,15%), rgba(255,255,255,0.14), transparent 55%), linear-gradient(155deg,#123328 0%,#0c231c 55%,#070f0c 100%); color:#eafff4; }
.flip-face::after{ content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,0.07) 46%,transparent 58%); pointer-events:none; }
.card-row-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:2; }
.card-chip{ width:2.3rem; height:1.6rem; border-radius:0.35rem; background:linear-gradient(135deg,#f3d98a,#c9a227); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15); }
.card-chip-alt{ background:linear-gradient(135deg,#a8e8c9,#4fae7f); }
.card-signal{ opacity:0.55; }
.card-mid{ position:relative; z-index:2; }
.card-label{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.6; margin-bottom:0.3rem; }
.card-value{ font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:0.01em; }
.card-row-bottom{ display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; }
.card-mask{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; opacity:0.6; }
.card-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:0.08em; font-size:0.8rem; opacity:0.85; }
.flip-dots{ position:absolute; bottom:0.9rem; right:1.1rem; z-index:3; }

/* ===== Analytics header, restyled to match glowing-bar reference (light mode) ===== */
.analytics-card{ background:#fff; }
.analytics-header{ align-items:flex-start; }
.analytics-header .an-headline{ font-size:2rem; font-weight:700; color:#0f172a; line-height:1; margin-top:0.35rem; }
.analytics-header .an-delta{ font-size:0.8rem; font-weight:700; margin-left:0.5rem; }
.analytics-header .an-delta.up{ color:#16a34a; }
.analytics-header .an-delta.down{ color:#dc2626; }
.analytics-tabs{ display:flex; flex-wrap:wrap; gap:0.4rem; background:none; position:static; }
.analytics-tab{ border-radius:999px; padding:0.45rem 0.95rem; font-size:0.8rem; font-weight:600; background:#f1f5f9; color:#64748b; border:none; }
.analytics-tab.active{ background:#0f172a; color:#fff; }
.analytics-tab-indicator{ display:none; }

/* ===== Holographic HUD balance card — replaces flip-toggle ===== */
.kpi-tile.flip-card{ perspective:1400px; }
.flip-card-inner{ transition:none; cursor:grab; }
.flip-card-inner:active{ cursor:grabbing; }
.flip-face{ border:1px solid rgba(120,170,255,0.35); box-shadow:0 0 0 1px rgba(120,170,255,0.08), 0 22px 50px -18px rgba(10,15,30,0.6), inset 0 1px 0 rgba(255,255,255,0.08); }
.flip-face-front{ background:radial-gradient(130% 150% at var(--mx,25%) var(--my,15%), rgba(120,190,255,0.14), transparent 55%), linear-gradient(155deg,#0e1830 0%,#0a1120 55%,#050810 100%); }
.flip-face-back{ background:radial-gradient(130% 150% at var(--mx,25%) var(--my,15%), rgba(120,255,200,0.12), transparent 55%), linear-gradient(155deg,#0a2420 0%,#071813 55%,#040c09 100%); }

/* glowing rim pulse, arc-reactor style */
.hud-glow{ position:absolute; inset:-1px; border-radius:1.25rem; pointer-events:none; z-index:1;
  box-shadow:0 0 18px 1px rgba(90,170,255,0.35), 0 0 2px 1px rgba(150,210,255,0.5) inset;
  animation:hudPulse 2.8s ease-in-out infinite; }
.flip-face-back .hud-glow{ box-shadow:0 0 18px 1px rgba(90,255,190,0.35), 0 0 2px 1px rgba(150,255,210,0.5) inset; }
@keyframes hudPulse{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }

/* scanline sweep */
.hud-scan{ position:absolute; left:0; right:0; height:40%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(150,210,255,0.10), transparent);
  animation:hudScan 3.6s linear infinite; }
@keyframes hudScan{ 0%{ top:-40%; } 100%{ top:100%; } }

/* HUD corner brackets */
.hud-corner{ position:absolute; width:14px; height:14px; border:2px solid rgba(150,210,255,0.55); z-index:2; pointer-events:none; }
.hud-corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.hud-corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.hud-corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.hud-corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; }

.card-label{ font-family:'JetBrains Mono',monospace; }
.card-value{ text-shadow:0 0 18px rgba(140,190,255,0.5); }
.flip-face-back .card-value{ text-shadow:0 0 18px rgba(140,255,210,0.5); }
.card-brand{ font-family:'JetBrains Mono',monospace; font-weight:600; letter-spacing:0.14em; font-size:0.68rem; opacity:0.65; }
.flip-dots{ display:none; }
.hud-hint{ position:absolute; bottom:0.7rem; right:1rem; font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.08em; color:rgba(150,210,255,0.5); z-index:3; text-transform:uppercase; }

/* fix: card wasn't responding to touch-drag — browser was intercepting
   the horizontal swipe as a page-scroll gesture before JS ever saw it */
#balanceFlipCard{ touch-action: pan-y; }
.hud-glow, .hud-scan, .hud-corner, .hud-hint{ pointer-events: none; }

/* ===== HUD card v2 — real height, real depth (overrides earlier rules) ===== */
.kpi-tile.flip-card{
  aspect-ratio:unset !important;
  max-width:480px !important;
  min-height:240px !important;
  height:240px !important;
  margin:0 auto 1.5rem !important;
  perspective:1400px !important;
}
.flip-card-inner{ min-height:240px !important; height:100% !important; }
.flip-face{
  min-height:240px !important;
  padding:1.75rem 2rem !important;
  border-radius:1.5rem !important;
}
.card-value{ font-size:2.1rem !important; }
.card-label{ font-size:0.72rem !important; }

/* floating elevation shadow beneath the card — the actual "it's a real
   object" cue that was missing */
.kpi-tile.flip-card::before{
  content:'';
  position:absolute;
  left:8%; right:8%; bottom:-18px;
  height:28px;
  background:radial-gradient(ellipse at center, rgba(10,15,30,0.45), transparent 72%);
  filter:blur(6px);
  z-index:-1;
}

/* proper EMV chip graphic instead of a flat gold square */
.card-chip{
  width:2.6rem !important; height:1.9rem !important; border-radius:0.3rem !important;
  background:linear-gradient(135deg,#f6e2a0,#d4af37) !important;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25) !important;
}
.card-chip::before{
  content:''; position:absolute; inset:0.25rem;
  background:
    linear-gradient(rgba(0,0,0,0.25) 1px, transparent 1px) 0 0/100% 33%,
    linear-gradient(90deg, rgba(0,0,0,0.25) 1px, transparent 1px) 33% 0/33% 100%;
  border-radius:0.15rem;
}
.card-chip-alt{ background:linear-gradient(135deg,#bdf0d8,#4fae7f) !important; }

/* stronger glossy sweep + edge highlight for real depth */
.flip-face{
  box-shadow:
    0 30px 60px -20px rgba(5,8,16,0.65),
    0 2px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset !important;
}
.flip-face::after{
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,0.14) 44%,rgba(255,255,255,0.02) 52%,transparent 62%) !important;
}

@media (min-width:640px){
  .kpi-tile.flip-card{ height:260px !important; }
  .flip-face{ min-height:260px !important; }
}

/* ===== Dashboard polish pass — KPI tiles + analytics container ===== */
.kpi-tile:not(.featured){
  transition:transform 0.2s ease, box-shadow 0.2s ease !important;
}
.kpi-tile:not(.featured):hover{
  transform:translateY(-3px) !important;
}
.kpi-tile:nth-of-type(3) .kpi-tile-icon{
  background:linear-gradient(135deg,#f472b6,#ec4899) !important;
  color:#fff !important;
}
.kpi-tile:nth-of-type(4) .kpi-tile-icon{
  background:linear-gradient(135deg,#fbbf24,#f4a261) !important;
  color:#fff !important;
}
.kpi-row .kpi-tile:not(.featured) .kpi-tile-icon i{ color:#fff !important; }

.analytics-card{
  border-radius:1.5rem !important;
  border:1px solid var(--border-color) !important;
  box-shadow:0 18px 40px -22px rgba(16,24,40,0.18) !important;
  padding:1.5rem !important;
}
.analytics-header{ margin-bottom:1.25rem !important; }

/* ===== Full dashboard finishing pass ===== */

/* Quick Actions row: lift + shadow on hover, consistent spacing */
.quick-icon-row{ margin-top:0.5rem !important; }
.quick-icon-btn{ transition:transform 0.2s ease !important; }
.quick-icon-btn:hover{ transform:translateY(-2px) !important; }

/* Section containers (Available Gigs/Marketplace, Referrals, Recent Activity):
   consistent card treatment matching the analytics card fix */
.stat-card{
  border-radius:1.5rem !important;
  border:1px solid var(--border-color) !important;
  box-shadow:0 18px 40px -22px rgba(16,24,40,0.16) !important;
  padding:1.5rem !important;
  background:var(--color-card) !important;
}
.stat-card h2, .stat-card h3{ font-size:1.05rem !important; }

/* Tab row (Available Gigs / Marketplace toggle) */
.tab-row{ display:flex; gap:0.5rem; margin-bottom:1rem; }
.tab-btn{
  font-size:0.82rem !important; font-weight:600 !important;
  padding:0.5rem 1rem !important; border-radius:999px !important;
  background:color-mix(in srgb, var(--color-text) 6%, transparent) !important;
  color:var(--color-muted) !important; cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.tab-btn.active{ background:var(--color-accent) !important; color:#fff !important; }

/* Transaction / gig / listing rows inside cards: hover feedback, tighter rhythm */
.tx-table-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85rem 0.25rem !important; border-bottom:1px solid var(--border-color);
  transition:background 0.15s ease;
}
.tx-table-row:last-child{ border-bottom:none; }
.tx-table-row:hover{ background:color-mix(in srgb, var(--color-accent) 4%, transparent); border-radius:0.75rem; }

/* Referrals section: active vs inactive rows get clearer visual separation */
.stat-card .grid > div > p.text-xs.text-muted{ font-weight:600 !important; letter-spacing:0.02em; }

/* Ring/legend chart rows: hover + consistent dot sizing already set, add spacing polish */
.ring-legend-row:last-child{ border-bottom:none !important; }
.ring-legend{ display:flex; flex-direction:column; gap:0.1rem; }

/* Consistent vertical rhythm between all dashboard sections */
main > div.mb-6, main > div.grid.mb-6{ margin-bottom:1.75rem !important; }

/* Gauge panel (Total Asset): align visually with the new stat-card radius */
.gauge-panel{ border-radius:1.5rem !important; }

/* ===== Gig / Listing detail pages — consistency + polish pass ===== */
.glass-card{
  border-radius:1.5rem !important;
  border:1px solid var(--border-color) !important;
  box-shadow:0 18px 40px -22px rgba(16,24,40,0.16) !important;
}

/* Chat bubbles: rounded consistently, sender bubble uses accent not raw btn-primary look */
.glass-card [class*="justify-end"] > div{ border-bottom-right-radius:0.35rem !important; }
.glass-card [class*="justify-start"] > div{ border-bottom-left-radius:0.35rem !important; }

/* Star rating picker: bigger tap targets, smooth color transition */
.star-btn{ transition:color 0.15s ease, transform 0.15s ease; cursor:pointer; padding:0.2rem !important; }
.star-btn:hover{ transform:scale(1.15); }

/* Claim/Buy CTA buttons: slightly stronger presence since they're the main action on these pages */
main .btn-primary.mt-6.w-full{ padding:0.9rem !important; font-size:0.95rem !important; box-shadow:0 10px 26px -8px rgba(184,134,11,0.4) !important; }

/* Seller/poster identity row: hover lift since it's a clickable link on marketplace */
a.glass-card:hover{ transform:translateY(-2px); box-shadow:0 22px 46px -22px rgba(16,24,40,0.22) !important; }

/* Reviews list rows: match tx-table-row hover treatment */
.glass-card .tx-table-row{ padding:0.85rem 0.25rem !important; }
.glass-card .tx-table-row:hover{ background:color-mix(in srgb, var(--color-accent) 4%, transparent); border-radius:0.75rem; }

/* ===== Subscriptions page polish ===== */
.subscriptions-page .glass-card, main .grid.md\:grid-cols-3 .glass-card{
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
main .grid.md\:grid-cols-3 .glass-card:hover{ transform:translateY(-4px); }
main .grid.md\:grid-cols-3 .glass-card:has(.tx-status.done){
  border:1.5px solid var(--color-accent) !important;
  box-shadow:0 22px 46px -20px color-mix(in srgb, var(--color-accent) 35%, transparent) !important;
}

/* ===== Balance card — 3D folder ===== */
.balance-folder{
  position: relative;
  height: 190px;
  margin-bottom: 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(155deg,#26262a,#0a0a0c);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: visible;
}
.folder-tab{
  position: absolute;
  top: -14px; left: 24px;
  width: 74px; height: 20px;
  background: linear-gradient(155deg,#26262a,#0a0a0c);
  border-radius: 10px 10px 0 0;
  z-index: 1;
}
.folder-stack-edge{
  position: absolute;
  left: 14px; right: 14px; bottom: 26px;
  height: 60%;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  transform: translateY(10px) scale(.97);
  z-index: 5;
  filter: blur(.3px);
}
.folder-card-slot{
  position: absolute;
  left: 10px; right: 10px; bottom: -30px;
  z-index: 10;
  transform: translateY(112px);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
  cursor: pointer;
}
.balance-folder.is-peek .folder-card-slot{
  transform: translateY(42px) scale(1.01);
}
.balance-folder.is-open .folder-card-slot{
  transform: translateY(-90px) scale(1.035);
  transition: transform .9s cubic-bezier(.16,1,.3,1), box-shadow .9s ease;
  z-index: 30;
  box-shadow: 0 34px 60px rgba(0,0,0,.55);
}
.folder-front{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  z-index: 20;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px dashed rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: opacity .5s ease;
  pointer-events: none;
}
.balance-folder.is-open .folder-front{ opacity: .55; }
.balance-folder .glass-balance-card{ box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }

/* ===== Force kpi-row to clean 2x2 on phone, featured tile stays full-width ===== */
@media (max-width: 640px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .kpi-tile.featured {
    grid-column: 1 / -1 !important;
  }
}