/* Sipnelo luxury theme — Step 4D visual polish only.
   Keeps the same navy + rose-gold palette while making the app canvas
   slightly lighter and giving every bottom-menu item its own rose-gold frame. */

/* A paler rose-gold canvas across every screen. */
html body{
  background:
    radial-gradient(circle at 8% 0%,rgba(207,154,141,.16),transparent 36%),
    radial-gradient(circle at 92% 10%,rgba(185,121,110,.08),transparent 33%),
    linear-gradient(180deg,#fffaf8 0%,#fbf4f1 52%,#f8eeea 100%)!important;
  background-attachment:fixed!important;
}

/* Outer bottom-navigation capsule. */
html body .nav>div{
  border:1px solid rgba(207,154,141,.86)!important;
  border-radius:22px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}

/* Every bottom item gets a visible rose-gold outline, not only the active one. */
html body .nav button,
html body .nav button[id^="n-"],
html body .nav #n-home,
html body .nav #n-chat,
html body .nav #n-discover,
html body .nav #n-offers,
html body .nav #n-finance,
html body .nav #n-admin,
html body .nav #n-profile,
html body .nav #n-safety{
  border:1px solid rgba(207,154,141,.46)!important;
  border-radius:14px!important;
}

/* Active item stays a little stronger so navigation state remains obvious. */
html body .nav button.active,
html body .nav button[id^="n-"].active,
html body .nav #n-home.active,
html body .nav #n-chat.active,
html body .nav #n-discover.active,
html body .nav #n-offers.active,
html body .nav #n-finance.active,
html body .nav #n-admin.active,
html body .nav #n-profile.active,
html body .nav #n-safety.active{
  border-color:var(--sip-rose-2)!important;
  box-shadow:inset 0 0 0 1px rgba(241,196,184,.14),0 0 0 1px rgba(185,121,110,.08)!important;
}

@media(max-width:520px){
  html body{
    background:
      radial-gradient(circle at 10% 0%,rgba(207,154,141,.15),transparent 38%),
      linear-gradient(180deg,#fffaf8 0%,#fbf3ef 54%,#f7ece8 100%)!important;
    background-attachment:fixed!important;
  }

  html body .nav>div{
    border-color:rgba(207,154,141,.88)!important;
    border-radius:20px!important;
  }

  html body .nav button,
  html body .nav button[id^="n-"],
  html body .nav #n-home,
  html body .nav #n-chat,
  html body .nav #n-discover,
  html body .nav #n-offers,
  html body .nav #n-finance,
  html body .nav #n-admin,
  html body .nav #n-profile,
  html body .nav #n-safety{
    border-color:rgba(207,154,141,.50)!important;
    border-radius:13px!important;
  }

  html body .nav button.active,
  html body .nav button[id^="n-"].active,
  html body .nav #n-finance.active{
    border-color:var(--sip-rose-2)!important;
  }
}