:root {
  --rg-panel: rgba(18, 31, 29, 0.92);
  --rg-panel-2: rgba(17, 24, 33, 0.94);
  --rg-cream: #f6e7c1;
  --rg-muted: #cfc6aa;
  --rg-mint: #76eec6;
  --rg-orange: #f4a259;
  --rg-gold: #c9a227;
  --rg-radius-lg: 22px;
  --rg-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  --rg-topbar-h: 58px;
  --rg-bottomnav-h: 78px;
  --rg-page-max: 1120px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body:not(.chat-mode) {
  padding: 0 !important;
}

body:not(.chat-mode) .main-content {
  width: min(100%, var(--rg-page-max));
  margin: 0 auto;
  padding: calc(var(--rg-topbar-h) + 0.85rem) 0.9rem calc(var(--rg-bottomnav-h) + 1rem) !important;
  box-sizing: border-box;
}

body:not(.chat-mode) #top-bar {
  min-height: var(--rg-topbar-h) !important;
  height: var(--rg-topbar-h) !important;
  padding: 0.35rem 0.75rem !important;
  gap: 0.55rem !important;
  justify-content: flex-start !important;
  background: linear-gradient(180deg, rgba(8,12,14,.84), rgba(18,31,29,.76)) !important;
  border-bottom: 1px solid rgba(201,162,39,.24);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(10px) !important;
  box-sizing: border-box;
}

#hamburger-menu {
  margin-left: 0 !important;
  flex: 0 0 auto;
}

.menu-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px;
  border: 1px solid rgba(201,162,39,.42);
  background: radial-gradient(circle at center, rgba(246,231,193,.1), rgba(0,0,0,.28));
  box-shadow: inset 0 0 14px rgba(201,162,39,.1), 0 0 14px rgba(0,0,0,.2);
}

.menu-icon::before {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  background: var(--rg-cream);
  clip-path: polygon(50% 0%, 87% 19%, 87% 64%, 50% 100%, 13% 64%, 13% 19%);
  box-shadow: 0 0 0 2px var(--rg-gold);
  opacity: .96;
}

.menu-icon span {
  display: none !important;
}

.profile-icon {
  width: 36px !important;
  height: 36px !important;
  margin-left: 0.3rem !important;
  box-shadow: 0 0 0 2px rgba(244, 162, 89, 0.55), 0 0 14px rgba(244, 162, 89, 0.28) !important;
}

#points-badge {
  margin-left: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 38px;
  padding: 0 0.35rem;
  color: var(--rg-cream);
  font-size: 1.15rem !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.side-nav {
  width: min(82vw, 320px) !important;
  left: min(-82vw, -320px) !important;
  padding: calc(var(--rg-topbar-h) + 1rem) .85rem 1rem !important;
  background: linear-gradient(145deg, rgba(17,24,33,.97), rgba(31,62,54,.96)) !important;
  border-right: 2px solid rgba(201,162,39,.38);
  box-shadow: 12px 0 44px rgba(0,0,0,.5) !important;
}

#menu-toggle:checked + #sidebar-backdrop + .menu-icon + .side-nav {
  left: 0 !important;
}

.side-nav::before {
  content: "STATE OF INNER";
  display: block;
  color: var(--rg-mint);
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 900;
  margin: 0 0 .7rem .25rem;
}

.side-nav ul {
  display: grid;
  gap: .55rem;
}

.side-nav ul li {
  padding: 0 !important;
  border: 0 !important;
}

.side-nav ul li a {
  min-height: 50px;
  padding: .68rem .75rem;
  border-radius: 16px;
  background: rgba(246,231,193,.08);
  border: 1px solid rgba(246,231,193,.13);
  color: var(--rg-cream) !important;
  font-size: .98rem !important;
  letter-spacing: .02em;
}

.side-nav ul li a::before {
  content: "";
  width: 16px;
  height: 19px;
  margin-right: .65rem;
  flex: 0 0 auto;
  background: var(--rg-gold);
  clip-path: polygon(50% 0%, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
  opacity: .92;
}

.side-nav ul li img,
.side-nav ul li span {
  display: none !important;
}

.bottom-nav {
  min-height: var(--rg-bottomnav-h) !important;
  height: var(--rg-bottomnav-h) !important;
  padding: 0.35rem 0.7rem calc(0.35rem + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(18,35,32,.96), rgba(11,18,19,.98)) !important;
  border-top: 2px solid var(--rg-orange) !important;
  box-shadow: 0 -14px 34px rgba(0,0,0,.32);
}

.nav-item {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0.25rem !important;
  border-radius: 16px;
  position: relative;
  background: rgba(246,231,193,.05);
  border: 1px solid rgba(246,231,193,.08);
}

.nav-item:hover,
.nav-item:focus {
  background: rgba(246,231,193,.1);
}

.nav-icon {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.35));
}

.nav-left .nav-item:first-child .nav-icon {
  content: url('/static/icons/rg-nav-journal.svg');
}

.nav-left .nav-item:nth-child(2) > div {
  width: 42px !important;
  height: 42px !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.nav-left .nav-item:nth-child(2) > div span {
  font-size: 0 !important;
  width: 42px;
  height: 42px;
  display: block;
  background: center / contain no-repeat url('/static/icons/rg-nav-support.svg');
}

.nav-right .nav-item:first-child .nav-icon {
  content: url('/static/icons/rg-nav-circle.svg');
}

.nav-right .nav-item:nth-child(2) .nav-icon {
  filter: sepia(.28) saturate(1.2) brightness(1.05) drop-shadow(0 4px 4px rgba(0,0,0,.35));
}

.plus-button {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.journey-button > div {
  width: 58px !important;
  height: 58px !important;
  box-shadow: 0 0 18px rgba(161, 98, 232, 0.62) !important;
  border: 1px solid rgba(201,162,39,.32);
}

.journey-button img {
  width: 42px !important;
  height: 42px !important;
}

.rg-page,
.profile-page,
.circle-page {
  width: min(100%, var(--rg-page-max));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.rg-card {
  background: linear-gradient(145deg, var(--rg-panel), var(--rg-panel-2));
  border: 1px solid rgba(246, 231, 193, 0.16);
  border-radius: var(--rg-radius-lg);
  box-shadow: var(--rg-shadow);
  color: var(--rg-cream);
}

.rg-kicker {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--rg-mint);
  font-weight: 900;
}

.primary-button,
.hero-chat-button,
.send-button {
  background: var(--rg-orange) !important;
  color: #102018 !important;
  border-color: transparent !important;
}

#top-bar button,
.bottom-nav button,
.chat-mini-action,
.back-link,
.send-button,
.spotlight-close {
  min-width: 0 !important;
}

@media (max-width: 620px) {
  :root {
    --rg-topbar-h: 54px;
    --rg-bottomnav-h: 72px;
  }

  body:not(.chat-mode) .main-content {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  body:not(.chat-mode) #top-bar {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    gap: 0.42rem !important;
  }

  .menu-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .profile-icon {
    width: 34px !important;
    height: 34px !important;
  }

  #points-badge {
    min-width: 48px;
    height: 34px;
    font-size: 1.03rem !important;
  }

  .bottom-nav {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  .nav-item {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .nav-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .journey-button > div {
    width: 54px !important;
    height: 54px !important;
  }

  .journey-button img {
    width: 38px !important;
    height: 38px !important;
  }
}