:root {
  --mello-ink: #173b6d;
  --mello-blue: #287cf0;
  --mello-violet: #7454e7;
  --mello-pink: #ed4eb5;
}

.mello-brand {
  color: var(--mello-ink);
  text-decoration: none;
}

.mello-companion {
  --mello-size: 64px;
  position: relative;
  z-index: 0;
  display: inline-block;
  width: var(--mello-size);
  height: calc(var(--mello-size) * .9);
  flex: 0 0 auto;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 42% 42% 36% 36% / 38% 38% 48% 48%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.96) 0 5%, transparent 19%),
    radial-gradient(circle at 67% 24%, rgba(255,255,255,.6) 0 3%, transparent 17%),
    linear-gradient(135deg, #f8fbff 0%, #bff1ff 29%, #5ac6f8 54%, #8b5be7 76%, #f06cc4 100%);
  box-shadow: inset -9px -11px 17px rgba(75, 46, 170, .18), inset 8px 8px 14px rgba(255,255,255,.55), 0 14px 28px rgba(90, 92, 215, .24);
}

.mello-companion::before,
.mello-companion::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4%;
  width: 22%;
  height: 28%;
  border-radius: 60% 60% 38% 38%;
  background: linear-gradient(150deg, #d9f7ff, #7ed7fa 55%, #8c55e3);
}

.mello-companion::before { left: 8%; transform: rotate(-22deg); }
.mello-companion::after { right: 8%; transform: rotate(22deg); }

.mello-glow {
  position: absolute;
  z-index: -2;
  inset: -19%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(119, 218, 255, .34), rgba(232, 99, 209, .22) 48%, transparent 70%);
  filter: blur(7px);
}

.mello-eye {
  position: absolute;
  top: 43%;
  width: 13%;
  height: 17%;
  border-radius: 50%;
  background: #173b6d;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.46);
}

.mello-eye--left { left: 30%; }
.mello-eye--right { right: 30%; }

.mello-cheek {
  position: absolute;
  top: 60%;
  width: 15%;
  height: 8%;
  border-radius: 50%;
  background: rgba(247, 67, 174, .6);
  filter: blur(1px);
}

.mello-cheek--left { left: 16%; }
.mello-cheek--right { right: 16%; }

.mello-smile {
  position: absolute;
  left: 42%;
  top: 59%;
  width: 17%;
  height: 9%;
  border: solid #173b6d;
  border-width: 0 0 3px;
  border-radius: 0 0 50% 50%;
}

.mello-companion--brand { --mello-size: 45px; }
.mello-companion--hero { --mello-size: 142px; animation: mello-float 4.6s ease-in-out infinite; }
.mello-companion--empty { --mello-size: 62px; }
.mello-companion--guide { --mello-size: 74px; }

.hero-companion {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  min-height: 150px;
}

.home-empty { padding: 34px 18px; text-align: center; }
.home-empty .mello-companion { display: block; margin: 0 auto 18px; }
.home-empty h3 { margin: 0 0 8px; color: #21466f; font: 800 18px "Plus Jakarta Sans",sans-serif; }
.home-empty p { max-width: 460px; margin: 0 auto 18px; color: #6a83a0; font-size: 12px; line-height: 1.55; }
.capture-cta { display: inline-flex; text-decoration: none; }

@media (max-width: 1080px) { .hero-companion { transform: scale(.82); transform-origin: right center; } }
@media (max-width: 760px) { .hero-companion { position: absolute; right: 8px; bottom: 72px; transform: scale(.52); transform-origin: right bottom; } }

@keyframes mello-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mello-companion--hero { animation: none; }
}

img.mello-companion { width:var(--mello-size); height:var(--mello-size); border:0; border-radius:0; background:transparent; box-shadow:none; object-fit:contain; }
a, a:visited { text-decoration: none; }

body:not(.mello-page) .shell { width: min(1440px, calc(100% - 48px)); max-width: none; margin: 24px auto; padding: 0; grid-template-columns: 282px minmax(0, 1fr); gap: 28px; }
body:not(.mello-page) .sidebar { top: 24px; min-height: calc(100vh - 48px); padding: 28px 20px 20px; border-radius: 32px; }
body:not(.mello-page) .brand { font-size: 29px; color: #173b6d; }
body:not(.mello-page) .sidebar .eyebrow { margin: 49px 16px 13px; }
body:not(.mello-page) .sidebar nav { gap: 6px; }
body:not(.mello-page) .nav-item { min-height: 52px; padding: 0 16px; border-radius: 17px; color: #42678f; font-size: 14px; }
body:not(.mello-page) .nav-item:hover, body:not(.mello-page) .nav-item.active { color: #214d81; background: rgba(255,255,255,.78); box-shadow: 0 8px 22px rgba(55,105,160,.08); }
body:not(.mello-page) .sidebar-bottom { padding-top: 18px; border-top: 1px solid rgba(89,133,182,.16); }
body:not(.mello-page) .profile-chip { margin-top: 13px; padding: 12px 10px 0; }
.mello-page { font-family: "DM Sans", sans-serif; }
.mello-page-brand, .mello-page-nav-link, .mello-page-top-link { text-decoration: none; }

@media(max-width:900px) { body:not(.mello-page) .shell { width: min(720px,calc(100% - 28px)); margin: 14px auto; } }