.topbar-mascot,
.topbar-notifications {
  display: none;
}

.register-landing-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #dbe2ef;
  border-radius: 999px;
  color: #25334d;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.register-landing-back:hover {
  border-color: #a8baf0;
  background: #f4f7ff;
}

.register-landing-back svg {
  width: 16px;
  height: 16px;
}

.register-landing-back[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .register-landing-back {
    min-height: 38px;
    padding: 0 11px;
    font-size: 12px;
  }
}

.topbar-notifications {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
}

.topbar-notifications svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.topbar-notifications span:not([hidden]) {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--surface);
  border-radius: 50%;
  background: #2f66ec;
}

.max-channel-prompt[hidden] {
  display: none;
}

.max-channel-prompt {
  position: fixed;
  z-index: 79;
  left: 24px;
  bottom: 24px;
  width: min(326px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 16px 40px rgba(28, 59, 119, 0.16);
  backdrop-filter: blur(22px);
}

.max-channel-prompt > img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.max-channel-prompt > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.max-channel-prompt strong { font-size: 13px; }
.max-channel-prompt span { color: var(--muted); font-size: 11px; }
.max-channel-prompt a { width: fit-content; margin-top: 3px; color: #2457db; font-size: 12px; font-weight: 700; text-decoration: none; }
.max-channel-prompt a span { color: inherit; }
.max-channel-prompt > button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; }
.max-channel-prompt > button:hover { background: var(--surface-2); }
.max-channel-prompt > button svg { width: 17px; height: 17px; }

@media (min-width: 900px) {
  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-notifications {
    display: flex;
    order: 2;
  }
  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-user { order: 3; }
}

@media (max-width: 899px) {
  body:not(.is-landing):not(.is-auth):not(.is-registering),
  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .views {
    background: #f7faff;
  }

  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar {
    display: flex;
    flex-wrap: nowrap;
    min-height: 66px;
    padding-inline: 18px;
    gap: 9px;
    background: color-mix(in srgb, #f7faff 89%, transparent);
    backdrop-filter: blur(20px);
  }

  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-mascot {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 43px;
    margin-right: auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 14px;
    background: linear-gradient(145deg, #a5d7ff, #2668e9);
    box-shadow: 0 5px 14px rgba(39, 105, 219, .18);
  }

  .topbar-mascot img { width: 48px; height: 48px; object-fit: cover; object-position: center; transform: translateY(2px) scale(1.18); }

  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-user {
    order: 3;
    flex: 0 0 42px;
    margin-right: 0;
  }

  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-user > span {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 5px 15px rgba(23, 58, 111, .12);
  }

  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-user strong,
  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-mobile-search { display: none; }

  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar-notifications {
    display: flex;
    order: 2;
  }

  .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .views {
    padding: 12px 16px 118px;
  }

  .mobile-home-tabs {
    gap: 7px;
    margin-top: 2px;
  }

  .mobile-home-tabs > button {
    min-height: 82px;
    display: grid;
    grid-template-rows: 42px auto;
    gap: 5px;
    padding: 7px 2px;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 18px;
    color: #405572;
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(228,240,255,.5));
    box-shadow: 0 9px 22px rgba(42,94,166,.09), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(92,140,213,.12);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    font-size: 10px;
    font-weight: 650;
  }

  .mobile-home-tabs > button > span {
    width: 37px;
    height: 37px;
    border-radius: 12px;
  }

  .mobile-home-tabs > button.is-active {
    color: #15429a;
    border-color: rgba(144,184,255,.95);
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(199,222,255,.86));
    box-shadow: 0 12px 25px rgba(44,101,204,.17), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(69,123,222,.18);
  }

  .home-guide {
    position: relative;
    width: 100%;
    min-height: 218px;
    display: block;
    margin-top: 16px;
    padding: 22px 18px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 24px;
    color: #10203d;
    background: linear-gradient(122deg, #f5faff 0%, #cfe7ff 46%, #6da8ef 100%);
    box-shadow: 0 16px 34px rgba(48,105,203,.16), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(63,113,204,.11);
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .home-guide:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(48,105,203,.22), inset 0 1px 0 #fff; }
  .home-guide:focus-visible { outline: 3px solid #315bd8; outline-offset: 3px; }

  .home-guide::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -24%;
    bottom: -74%;
    width: 118%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 0 0 38px rgba(255,255,255,.08), 0 0 0 80px rgba(255,255,255,.07);
  }

  .home-guide-main { position: relative; z-index: 2; display: block; max-width: 63%; }
  .home-guide-eyebrow { display: block; color: #2559ae; font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .home-guide #home-guide-title { display: block; margin: 19px 0 8px; max-width: 10ch; color: #132246; font-size: 25px; line-height: 1.08; font-weight: 780; }
  .home-guide-copy { display: block; max-width: 26ch; color: #365473; font-size: 11px; line-height: 1.35; }
  .home-guide-cta { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; margin-top: 17px; padding: 0 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 17px; color: #fff; background: linear-gradient(125deg, rgba(27,83,221,.94), rgba(56,118,239,.88)); box-shadow: 0 7px 16px rgba(37,92,231,.2), inset 0 1px 0 rgba(255,255,255,.5); font-size: 10px; font-weight: 750; backdrop-filter: blur(12px); }
  .home-guide-cta svg { width: 14px; height: 14px; }
  .home-guide-mascot { position: absolute; z-index: 1; right: -20px; bottom: -4px; width: min(57%, 220px); height: auto; filter: drop-shadow(0 13px 14px rgba(33,92,183,.15)); pointer-events: none; }

  .mobile-home-feed { margin-top: 22px; }
  .mobile-home-feed-head { display: flex; align-items: center; gap: 8px; }
  .mobile-home-feed-head h2 { min-width: 0; flex: 1; }
  .mobile-feed-search { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid #dce8fb; border-radius: 11px; color: #2454b5; background: rgba(255,255,255,.85); }
  .mobile-feed-search svg { width: 17px; height: 17px; }

  .max-channel-prompt {
    right: 14px;
    bottom: calc(168px + env(safe-area-inset-bottom));
    left: auto;
    width: min(300px, calc(100vw - 28px));
  }
}

@media (max-width: 370px) {
  .home-guide { min-height: 230px; padding-inline: 14px; }
  .home-guide #home-guide-title { font-size: 22px; }
  .home-guide-mascot { right: -31px; width: 59%; }
  .mobile-home-tabs > button { font-size: 9px; }
}

:root[data-theme="dark"] .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .topbar,
:root[data-theme="dark"] .phone-shell:not(.is-landing):not(.is-auth):not(.is-registering) .views { background: #111b2a; }
:root[data-theme="dark"] .mobile-home-tabs > button { color: #dce8f8; border-color: rgba(185,213,255,.22); background: linear-gradient(145deg, rgba(80,109,153,.38), rgba(32,53,87,.62)); box-shadow: 0 8px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18); }
:root[data-theme="dark"] .mobile-home-tabs > button.is-active { color: #fff; border-color: rgba(182,213,255,.5); background: linear-gradient(145deg, rgba(63,123,225,.8), rgba(36,79,155,.74)); box-shadow: 0 10px 22px rgba(28,75,164,.24), inset 0 1px 0 rgba(255,255,255,.35); }
:root[data-theme="dark"] .topbar-notifications { color: #fff; border-color: rgba(184,212,255,.34); background: rgba(113,144,190,.34); }
:root[data-theme="dark"] .mobile-feed-search { color: #c8dcff; border-color: rgba(184,212,255,.34); background: rgba(113,144,190,.34); }

@media (prefers-reduced-motion: reduce) {
  .home-guide { transition: none; }
}

@media (max-width: 899px) {
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav {
    right: 12px;
    left: 12px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    min-height: 68px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(213,231,253,.65));
    box-shadow: 0 14px 36px rgba(25,65,129,.21), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(91,135,202,.14);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
  }

  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button {
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 18px;
    color: #536780;
    background: transparent;
    box-shadow: none;
  }

  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button::before { display: none; }
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button[data-target="discovery"] {
    color: #1451ae;
    background: rgba(118,169,249,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  }
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button[data-target="discovery"] svg { color: inherit; }
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button.is-active {
    border-color: rgba(255,255,255,.95);
    color: #fff;
    background: linear-gradient(145deg, rgba(39,101,226,.92), rgba(61,137,237,.78));
    box-shadow: 0 7px 14px rgba(27,91,196,.27), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(20,72,153,.26);
  }
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button.is-active svg { color: #fff; }
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button > span { font-size: 9px; font-weight: 700; }

  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .primary-button,
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .profile-hero > .primary-button {
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(125deg, rgba(34,89,205,.96), rgba(64,137,232,.88));
    box-shadow: 0 9px 20px rgba(37,92,185,.2), inset 0 1px 0 rgba(255,255,255,.38);
    backdrop-filter: blur(16px) saturate(155%);
  }
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .secondary-button,
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .topbar-notifications,
  .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .mobile-feed-search {
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(224,238,255,.62));
    box-shadow: 0 6px 14px rgba(34,84,151,.1), inset 0 1px 0 #fff;
    backdrop-filter: blur(18px) saturate(160%);
  }
}

.product-tour {
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  background: linear-gradient(155deg, #fff, #eff6ff);
  box-shadow: 0 28px 80px rgba(16,47,100,.29), inset 0 1px 0 #fff;
}
.tour-shell { padding: 26px; }
.tour-shell h2 { font-size: 26px; }
.tour-hint { border-radius: 14px; }
.tour-actions .primary-button {
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 15px;
  background: linear-gradient(125deg, #255fe1, #5097ee);
  box-shadow: 0 8px 20px rgba(45,104,209,.2), inset 0 1px 0 rgba(255,255,255,.4);
}

:root[data-theme="dark"] .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav {
  border-color: rgba(173,205,255,.26);
  background: linear-gradient(160deg, rgba(46,71,112,.78), rgba(24,43,75,.85));
  box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.19);
}
:root[data-theme="dark"] .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button { color: #d4e2f5; }
:root[data-theme="dark"] .phone-shell:not(.is-auth):not(.is-landing):not(.is-registering) .bottom-nav > button.is-active { color: #fff; }
:root[data-theme="dark"] .product-tour { color: #ecf4ff; background: linear-gradient(145deg, #192941, #263d5c); }

/* The two banners share one footprint so changing slides never shifts the feed. */
@media (max-width: 899px) {
  .home-carousel { margin-top: 16px; }
  .home-carousel .home-guide { height: 236px; min-height: 0; margin-top: 0; }
  .home-carousel-slide[hidden] { display: none; }
  .home-carousel .home-guide-main { max-width: 66%; }
  .home-carousel .home-guide #home-guide-title { max-width: none; margin-top: 25px; font-size: 25px; white-space: nowrap; }
  .home-carousel .home-guide-copy { max-width: 22ch; }
  .home-carousel .home-guide-mascot { right: -21px; bottom: -3px; width: min(56%, 208px); }
  .home-track-slide {
    background: linear-gradient(125deg, #e9efff 0%, #d0dfff 52%, #a9a8ea 100%);
  }
  .home-track-slide .home-guide-main { max-width: 60%; }
  .home-track-slide .home-guide-main > strong { display: block; max-width: 10ch; margin: 21px 0 8px; color: #22234d; font-size: 24px; line-height: 1.07; }
  .home-track-slide .home-guide-eyebrow { color: #5c3f9a; }
  .home-track-slide .home-guide-copy { color: #44446c; }
  .home-track-slide .home-guide-cta { background: linear-gradient(125deg, #492eaa, #7559d3); }
  .mobile-event-links { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 2; }
  .mobile-event-links .mobile-event-cta { margin-top: 12px; padding-inline: 11px; font-size: 10px; }
  .mobile-event-links .mobile-event-cta + .mobile-event-cta { color: #fff; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(12px); }
  .home-track-cat { position: absolute; z-index: 1; right: -20px; bottom: -4px; width: min(61%, 220px); height: 232px; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 12px 14px rgba(54,48,106,.15)); pointer-events: none; }
  .home-carousel-controls { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 8px; color: #6380ae; font-size: 10px; font-weight: 800; }
  .home-carousel-controls button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.92); border-radius: 50%; color: #2f5da4; background: rgba(255,255,255,.74); box-shadow: 0 4px 10px rgba(48,93,161,.08), inset 0 1px 0 #fff; backdrop-filter: blur(12px); }
  .home-carousel-controls button svg { width: 15px; height: 15px; }
  .mobile-home-feed { margin-top: 16px; }
  .person-request .person-request-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .mobile-home-person.is-expanded .person-request-text { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .person-request-more { display: inline-flex; align-items: center; min-height: 28px; margin-top: 7px; padding: 0; border: 0; color: #246cba; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
  .person-request-more[hidden] { display: none; }
  .person-request-more:focus-visible { outline: 2px solid #246cba; outline-offset: 3px; border-radius: 2px; }
  :root[data-theme="dark"] .person-request-more { color: #8bbcff; }
}

@media (max-width: 370px) {
  .home-carousel .home-guide #home-guide-title { font-size: 23px; }
  .home-track-slide .home-guide-main > strong { font-size: 22px; }
  .home-track-cat { right: -33px; width: 62%; }
}

.product-tour {
  width: min(420px, calc(100vw - 28px));
  max-height: min(380px, calc(100dvh - 140px));
  position: fixed;
  top: auto;
  right: 26px;
  bottom: 28px;
  left: auto;
  margin: 0;
  overflow: visible;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(230,243,255,.96));
  box-shadow: 0 20px 70px rgba(15,40,85,.24), inset 0 1px 0 #fff;
}
.product-tour::backdrop { background: rgba(9,23,48,.2); backdrop-filter: blur(1.5px); }
body.tour-is-active .phone-shell { filter: blur(1px); pointer-events: none; transform: none; }
.product-tour .tour-shell { padding: 23px; }
.product-tour .tour-progress { margin-right: 84px; }
.product-tour .tour-mascot { width: 92px; height: 92px; position: absolute; top: -38px; right: 14px; object-fit: contain; filter: drop-shadow(0 9px 13px rgba(26,77,153,.22)); pointer-events: none; }
.product-tour .panel-kicker { display: block; margin-top: 18px; color: #2b60b9; font-size: 10px; }
.product-tour .tour-shell h2 { max-width: 310px; margin: 9px 0 0; color: #172747; font-size: 24px; line-height: 1.08; }
.product-tour .tour-shell > p { max-width: 340px; margin: 10px 0 0; color: #50617b; font-size: 13px; line-height: 1.45; }
.product-tour .tour-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(100,141,200,.2); }
.product-tour .tour-actions button { min-height: 42px; border-radius: 13px; }
.product-tour .tour-actions .tour-skip { color: #5e7292; }

@media (max-width: 899px) {
  .product-tour { right: auto; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
  .product-tour .tour-shell { padding: 18px; }
  .product-tour .tour-mascot { width: 79px; height: 79px; top: -34px; }
  .product-tour .tour-shell h2 { max-width: 265px; font-size: 21px; }
}

:root[data-theme="dark"] .product-tour { border-color: rgba(171,206,255,.32); background: linear-gradient(145deg, rgba(34,55,88,.98), rgba(23,39,66,.97)); }
:root[data-theme="dark"] .product-tour .tour-shell h2 { color: #f2f7ff; }
:root[data-theme="dark"] .product-tour .tour-shell > p { color: #c6d5ea; }

.level-overview {
  min-height: 286px;
  grid-template-columns: 140px minmax(0, 1fr);
  grid-template-areas: "emblem copy";
  gap: 30px;
  padding: 32px;
  border: 1px solid rgba(178,206,245,.8);
  border-radius: 22px;
  color: #1c3151;
  background: linear-gradient(125deg, #f8fcff 0%, #e7f2ff 60%, #c8e0fa 100%);
  box-shadow: 0 16px 40px rgba(55,103,173,.11), inset 0 1px 0 #fff;
}
.level-emblem { width: 136px; height: 136px; border: 1px solid rgba(255,255,255,.9); background: linear-gradient(145deg, #2159c7, #5f9bea); box-shadow: 0 15px 28px rgba(38,89,171,.22), inset 0 1px 0 rgba(255,255,255,.5); }
.level-emblem::before { inset: -9px; border: 1px solid rgba(70,121,200,.26); border-style: solid; }
.level-emblem::after { inset: 9px; border-color: rgba(255,255,255,.35); }
.level-emblem strong { font-size: 62px; }
.level-emblem small { color: rgba(255,255,255,.84); }
.level-name { color: #5274a7; }
.level-overview h3 { max-width: 540px; margin-top: 11px; color: #172b50; font-size: 42px; font-weight: 720; }
.level-overview h3 > span { color: #2866c9; }
.level-overview p { margin-top: 13px; color: #5e708c; font-size: 14px; }
.level-progress-meta { margin-top: 22px; color: #597499; }
.level-progress { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(66,112,184,.16); }
.level-progress > span { border-radius: 8px; background: linear-gradient(90deg, #2b62d5, #51b5bb); }
.level-scale { color: #7090ba; }

@media (max-width: 899px) {
  .level-overview { min-height: 0; grid-template-columns: 82px minmax(0, 1fr); gap: 15px; padding: 24px 18px; border-radius: 20px; }
  .level-emblem { width: 78px; height: 78px; }
  .level-emblem strong { font-size: 38px; }
  .level-emblem small { margin-top: 4px; font-size: 8px; }
  .level-overview h3 { font-size: 25px; line-height: 1.08; }
  .level-overview p { font-size: 11px; line-height: 1.4; }
  .level-progress-meta { gap: 8px; font-size: 9px; }
}

:root[data-theme="dark"] .level-overview { border-color: rgba(166,202,255,.22); color: #f0f6ff; background: linear-gradient(125deg, #1e314f, #2e5279); }
:root[data-theme="dark"] .level-overview h3 { color: #fff; }
:root[data-theme="dark"] .level-overview h3 > span { color: #8ec5ff; }
:root[data-theme="dark"] .level-overview p,
:root[data-theme="dark"] .level-progress-meta,
:root[data-theme="dark"] .level-name { color: #c2d7ee; }

.notifications-view.is-active { max-width: 850px; }
.topbar-notifications.is-active { color: #245cce; border-color: rgba(123,170,246,.75); background: linear-gradient(145deg, #f6faff, #d6e8ff); box-shadow: 0 7px 18px rgba(41,102,196,.13), inset 0 1px 0 #fff; }
.notifications-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.notifications-head .icon-button { flex: 0 0 42px; border: 1px solid rgba(174,197,229,.75); border-radius: 14px; background: var(--surface); }
.notifications-head .icon-button svg { width: 19px; height: 19px; }
.push-setup:not([hidden]) { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 14px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: color-mix(in srgb, var(--surface) 82%, #d7e9ff); }
.push-setup-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: #2866d4; background: #e0edff; }
.push-setup-icon svg { width: 22px; height: 22px; }
.push-setup-copy { min-width: 0; display: grid; gap: 4px; }
.push-setup-copy strong { font-size: 15px; }
.push-setup-copy small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.push-setup button { min-height: 40px; padding: 0 16px; border-radius: 8px; color: #fff; background: #2866d4; font-size: 12px; font-weight: 700; }
.push-setup button:hover { background: #1d51b3; }
.notifications-list { margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 28px rgba(46,83,135,.07); }
.notification-row { width: 100%; min-height: 102px; display: grid; grid-template-columns: 54px minmax(0,1fr) 18px; align-items: center; gap: 15px; padding: 17px 22px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover { background: color-mix(in srgb, var(--surface-2) 68%, transparent); }
.notification-row.is-unread { background: color-mix(in srgb, #e5f0ff 60%, var(--surface)); }
.notification-icon { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.88); border-radius: 17px; background: linear-gradient(140deg, #d9ebff, #8bb8f6); box-shadow: inset 0 1px 0 #fff; }
.notification-icon img { width: 100%; height: 100%; object-fit: contain; }
.notification-text { min-width: 0; display: grid; gap: 3px; }
.notification-text small { color: #3b6ab2; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.notification-text strong { font-size: 17px; line-height: 1.2; }
.notification-text > span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.notification-row-end { color: #2964cf; text-align: center; font-size: 21px; }
.notification-row.is-unread .notification-row-end { font-size: 10px; }

.notification-letter { width: min(460px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.85); border-radius: 22px; color: #1d2d49; background: linear-gradient(155deg, #fff, #ecf5ff); box-shadow: 0 25px 72px rgba(13,34,71,.27); }
.notification-letter::backdrop { background: rgba(10,28,55,.34); backdrop-filter: blur(5px); }
.notification-letter-shell { position: relative; display: grid; justify-items: start; gap: 13px; padding: 28px; }
.notification-letter-shell > img { width: 80px; height: 80px; border-radius: 22px; background: linear-gradient(145deg, #deecff, #7eb4ef); }
.notification-letter .dialog-close { top: 18px; right: 18px; border-radius: 50%; }
.notification-letter h2 { margin: 4px 0 0; font-size: 28px; line-height: 1.12; }
.notification-letter p { margin: 0; color: #52627b; font-size: 15px; line-height: 1.6; }
.notification-letter .primary-button { margin-top: 10px; border-radius: 14px; background: linear-gradient(120deg, #2459d2, #5195ee); }

#support-launcher { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.85); background: linear-gradient(145deg, #2259c8, #64b1f4); box-shadow: 0 10px 24px rgba(28,77,157,.26), inset 0 1px 0 rgba(255,255,255,.45); }
#support-widget { width: min(370px, calc(100vw - 24px)); border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: linear-gradient(155deg, #fff, #f3f8ff); box-shadow: 0 24px 65px rgba(20,53,102,.25), inset 0 1px 0 #fff; overflow: hidden; }
#support-widget header { display: grid; grid-template-columns: 48px minmax(0,1fr) 32px; gap: 11px; align-items: center; padding: 15px; border-bottom: 1px solid rgba(125,164,218,.16); background: linear-gradient(120deg, #e9f4ff, #d7e9ff); }
#support-widget header > img { width: 48px; height: 48px; border-radius: 15px; object-fit: cover; background: linear-gradient(145deg, #a5d7ff, #447feb); }
#support-widget header > div { min-width: 0; display: grid; gap: 1px; }
#support-widget header strong { color: #19345c; font-size: 17px; }
#support-widget header span { color: #587399; font-size: 11px; }
#support-widget header a { width: fit-content; color: #255cb9; font-size: 11px; }
#support-widget header button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.65); }
#support-widget .support-history { min-height: 170px; padding: 18px; }
#support-widget .support-empty { max-width: 25ch; margin: 0; padding: 12px 14px; border-radius: 16px 16px 16px 5px; color: #385371; background: #e9f2fc; }
#support-widget .support-message { border-radius: 16px 16px 16px 5px; background: #ebf3fc; }
#support-widget .support-message.is-user { border-radius: 16px 16px 5px 16px; background: #dceaff; }
#support-widget .support-chat-form { align-items: flex-end; background: rgba(255,255,255,.7); }
#support-widget textarea,
#support-widget .support-guest-form textarea,
#support-widget .support-guest-form input[type=email] { border: 1px solid #ccddf1; border-radius: 12px; background: rgba(255,255,255,.95); }
#support-widget form button,
#support-widget .support-guest-form button { border-radius: 12px; background: linear-gradient(130deg, #235ddb, #5596ea); box-shadow: inset 0 1px 0 rgba(255,255,255,.36); }
#support-widget footer { padding-top: 8px; }

@media (max-width: 899px) {
  .push-setup:not([hidden]) { grid-template-columns: 40px minmax(0,1fr); gap: 10px; margin-top: 16px; padding: 14px; }
  .push-setup-icon { width: 40px; height: 40px; }
  .push-setup button { grid-column: 1 / -1; width: 100%; }
  .notifications-list { margin-top: 16px; border-radius: 17px; }
  .notification-row { min-height: 92px; grid-template-columns: 46px minmax(0,1fr) 14px; gap: 12px; padding: 14px; }
  .notification-icon { width: 46px; height: 46px; border-radius: 14px; }
  .notification-text strong { font-size: 14px; }
  .notification-text > span { font-size: 11px; }
  .notification-letter-shell { padding: 23px; }
  #support-launcher { width: 46px; height: 46px; right: 14px; bottom: calc(100px + env(safe-area-inset-bottom)); }
  #support-widget { right: 12px; bottom: calc(154px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 172px); }
}

:root[data-theme="dark"] .notification-row.is-unread { background: #233b5b; }
:root[data-theme="dark"] .push-setup:not([hidden]) { border-color: #344e70; background: #1a2b43; }
:root[data-theme="dark"] .push-setup-icon { color: #b7d5ff; background: #294466; }
:root[data-theme="dark"] .notifications-list { border-color: #344e70; background: #1a2b43; }
:root[data-theme="dark"] .notification-row { border-color: #344e70; color: #f2f7ff; }
:root[data-theme="dark"] .notification-row:hover { background: #294466; }
:root[data-theme="dark"] .notification-text > span { color: #b9cce4; }
:root[data-theme="dark"] .notification-text small { color: #9bc3ff; }
:root[data-theme="dark"] .notification-letter { color: #f2f7ff; background: linear-gradient(145deg, #1d304e, #2b4262); }
:root[data-theme="dark"] .notification-letter p { color: #cbd8eb; }

/* Conversation actions and media viewer */
.chat-panel:has(.chat-pinned-messages) { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.chat-pinned-messages { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); color: #375fa9; background: color-mix(in srgb, #e9f2ff 78%, var(--surface)); font-size: 11px; font-weight: 700; }
.chat-pinned-messages > svg { width: 15px; height: 15px; flex: none; }
.chat-pinned-messages > span { flex: none; }
.chat-pinned-messages button { max-width: 26ch; flex: none; overflow: hidden; padding: 6px 9px; border: 1px solid #c9d9f5; border-radius: 8px; color: #294d87; background: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-stack { background: color-mix(in srgb, #edf3fa 70%, var(--surface)); }
.bubble { position: relative; overflow-wrap: anywhere; }
.bubble.me { border: 1px solid #cbdcf5; color: #20334e; background: #e4effd; }
.bubble.them { color: #20334e; background: #fff; }
.bubble.is-important { border-color: #e4bf65; background: #fff3cc; }
.bubble.is-message-pinned { box-shadow: inset 3px 0 0 #5481dc; }
.bubble.system { border: 0; color: var(--muted); background: transparent; box-shadow: none; }
.message-copy { white-space: pre-wrap; }
.message-meta { min-height: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 4px; color: #72839c; font-size: 10px; }
.message-receipt { color: #547397; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.message-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 5px; border-top: 1px solid rgba(70,102,148,.13); padding-top: 4px; }
.message-actions button, .message-actions .safety-message-action { width: 28px; height: 28px; display: grid; place-items: center; float: none; margin: 0; padding: 0; border: 0; border-radius: 7px; color: #6e7e97; background: transparent; opacity: 1; cursor: pointer; }
.message-actions button:hover, .message-actions button:focus-visible { color: #235ac4; background: rgba(77,119,208,.12); }
.message-actions button[aria-pressed="true"] { color: #bd8115; }
.message-actions svg { width: 15px; height: 15px; }
.message-edit-form { display: grid; gap: 7px; margin-top: 8px; }
.message-edit-form textarea { width: min(420px, 100%); min-height: 80px; padding: 9px 11px; border: 1px solid #98b5e8; border-radius: 9px; color: #1d304d; background: #fff; font: inherit; resize: vertical; }
.message-edit-form > div { display: flex; justify-content: flex-end; gap: 7px; }
.message-edit-form button { min-height: 32px; padding: 0 11px; border: 1px solid #b9c9e5; border-radius: 8px; color: #294d87; background: #fff; font-size: 11px; font-weight: 700; }
.message-edit-form button[type="submit"] { border-color: #315fd3; color: #fff; background: #315fd3; }
.bubble.is-editing .message-copy, .bubble.is-editing .message-meta, .bubble.is-editing .message-actions { display: none; }
.message-image-open { display: block; max-width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: zoom-in; }
.message-image-open img { margin-top: 8px; }
.image-viewer { width: min(92vw, 1400px); max-width: none; max-height: 92dvh; padding: 0; border: 1px solid #d7e2f2; border-radius: 14px; color: #1a2b45; background: #fff; box-shadow: 0 25px 80px rgba(14,31,59,.32); }
.image-viewer::backdrop { background: rgba(11,25,47,.7); backdrop-filter: blur(5px); }
.image-viewer-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.image-viewer-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e1e8f3; }
.image-viewer-toolbar strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.image-viewer-toolbar > div { display: flex; align-items: center; gap: 6px; }
.image-viewer-toolbar button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #dbe4f2; border-radius: 8px; color: #355982; background: #f7faff; }
.image-viewer-toolbar svg { width: 17px; height: 17px; }
.image-viewer-toolbar span { min-width: 43px; font-size: 11px; font-weight: 700; text-align: center; }
.image-viewer-stage { width: 100%; height: min(78dvh, 900px); display: grid; place-items: center; overflow: auto; padding: 14px; background: #edf2f9; }
.image-viewer-stage img { display: block; max-width: none; height: auto; box-shadow: 0 8px 30px rgba(20,38,67,.16); }
:root[data-theme="dark"] .bubble.me { border-color: #557194; color: #f2f7ff; background: #344c6c; }
:root[data-theme="dark"] .bubble.them { border-color: #465a77; color: #f2f7ff; background: #2b3e59; }
:root[data-theme="dark"] .bubble.is-important { border-color: #c69743; color: #fff5dd; background: #624f2f; }
:root[data-theme="dark"] .chat-pinned-messages { color: #b9d2fc; background: #233955; }
:root[data-theme="dark"] .chat-pinned-messages button { border-color: #4c6893; color: #e2eeff; background: #2b4262; }

/* Keep the conversation calm and give the composer room for a real message. */
.messages-layout { grid-template-columns: minmax(270px, 310px) minmax(0, 1fr); }
.thread-row { border-top-color: color-mix(in srgb, var(--line) 72%, transparent); }
.thread-row .thread-item { min-height: 78px; padding-block: 10px; }
.thread-copy > span { font-size: 12px; line-height: 1.35; }
.thread-copy small { font-size: 10px; }
.chat-head { min-height: 72px; }
.message-stack { padding: 20px 24px 24px; }
.bubble { max-width: min(78%, 680px); margin: 7px 0; padding: 11px 13px; box-shadow: 0 3px 12px rgba(37, 63, 103, .04); }
.message-form { grid-template-columns: 40px minmax(0, 1fr) 48px; align-items: end; gap: 10px; padding: 12px 16px; }
.message-form textarea[name="message"] { min-width: 0; min-height: 76px; max-height: 180px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--surface-2); font: inherit; font-size: 14px; line-height: 1.45; resize: none; overflow-y: auto; }
.message-form textarea[name="message"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.message-form .attach-button { align-self: end; }
.message-form button[type="submit"] { align-self: end; }
.message-actions { position: relative; display: flex; justify-content: flex-end; margin-top: 3px; padding: 0; border: 0; }
.message-actions summary { width: 24px; height: 20px; display: grid; place-items: center; border-radius: 5px; color: #6e7e97; cursor: pointer; list-style: none; }
.message-actions summary::-webkit-details-marker { display: none; }
.message-actions summary:hover, .message-actions[open] summary { color: #235ac4; background: rgba(77,119,208,.12); }
.message-actions summary svg { width: 15px; height: 15px; }
.message-actions-menu { position: absolute; z-index: 20; right: 0; bottom: calc(100% + 5px); width: 188px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 14px 32px rgba(23, 43, 76, .18); }
.message-actions .message-actions-menu button, .message-actions .message-actions-menu .safety-message-action { width: 100%; height: 34px; display: flex; justify-content: flex-start; gap: 9px; padding: 0 9px; border-radius: 6px; color: var(--ink); background: transparent; font-size: 12px; text-align: left; white-space: nowrap; }
.message-actions .message-actions-menu button:hover { color: var(--accent-strong); background: var(--accent-faint); }
.message-actions-menu button svg { width: 15px; height: 15px; flex: none; }
.message-actions-menu button[aria-pressed="true"] { color: #a67315; }
:root[data-theme="dark"] .message-form textarea[name="message"] { border-color: var(--line); color: var(--ink); background: var(--surface-2); }
:root[data-theme="dark"] .message-actions-menu { border-color: var(--line); background: var(--surface); }
:root[data-theme="dark"] .message-actions .message-actions-menu button { color: var(--ink); background: transparent; }
:root[data-theme="dark"] .message-actions .message-actions-menu button:hover { background: var(--surface-3); }
@media (max-width: 899px) {
  .messages-layout { grid-template-columns: minmax(0, 1fr); }
  .phone-shell.is-chat-open .message-form { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
  .message-form textarea[name="message"] { min-height: 48px; max-height: min(200px, 30dvh); }
  .message-stack { padding: 16px 12px 20px; }
  .bubble { max-width: 88%; }
}

/* Carousel controls sit on the image, with the page count kept unobtrusive. */
.home-carousel { position: relative; }
.home-carousel-controls { position: absolute; z-index: 4; inset: 0; margin: 0; pointer-events: none; }
.home-carousel-controls button { width: 40px; height: 40px; position: absolute; top: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: #2357a3; background: rgba(255,255,255,.86); box-shadow: 0 8px 22px rgba(22,60,126,.16); backdrop-filter: blur(15px); transform: translateY(-50%); pointer-events: auto; }
.home-carousel-controls button:first-child { left: 10px; }
.home-carousel-controls button:last-child { right: 10px; }
.home-carousel-controls button svg { width: 17px; height: 17px; }
.home-carousel-controls > span { position: absolute; bottom: 9px; left: 50%; padding: 4px 9px; border-radius: 20px; color: #36537b; background: rgba(255,255,255,.75); font-size: 10px; transform: translateX(-50%); }

@media (min-width: 900px) {
  .messages-layout { height: min(640px, calc(100dvh - 290px)); min-height: 480px; }
  .mobile-home { display: block; }
  .mobile-home-search-row, .mobile-home-feed { display: none; }
  .mobile-feed-search { display: none; }
  .mobile-home-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
  .mobile-home-tabs > button { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 7px; border: 1px solid #dbe4f2; border-radius: 12px; color: #354968; background: #fff; font-size: 13px; font-weight: 700; }
  .mobile-home-tabs > button > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #2d61bd; background: #e7f0ff; }
  .mobile-home-tabs > button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .mobile-home-tabs > button.is-active { border-color: #7399e7; color: #1d50a9; background: #eaf2ff; }
  .mobile-home-tabs > button:nth-child(2) > span { color: #15806f; background: #e4f6f0; }
  .mobile-home-tabs > button:nth-child(3) > span { color: #18755f; background: #e4f6ef; }
  .mobile-home-tabs > button:nth-child(4) > span { color: #ac3f37; background: #fff0ed; }
  .home-carousel { display: none; }
  .discovery-view.is-desktop-alt > .hero-strip, .discovery-view.is-desktop-alt > .discovery-toolbar, .discovery-view.is-desktop-alt > .filter-status, .discovery-view.is-desktop-alt > .deck { display: none; }
  .discovery-view.is-desktop-alt .mobile-home-feed { display: block; margin: 22px 0; }
  .discovery-view.is-desktop-alt .mobile-home-feed-head { display: flex; align-items: center; gap: 12px; }
  .discovery-view.is-desktop-alt .mobile-home-feed-head h2 { margin: 0 0 16px; font-size: 26px; }
  .discovery-view.is-desktop-alt .mobile-home-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .discovery-view.is-desktop-alt .mobile-home-project, .discovery-view.is-desktop-alt .mobile-home-person, .discovery-view.is-desktop-alt .mobile-event-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .discovery-view.is-desktop-alt .mobile-home-project > button, .discovery-view.is-desktop-alt .mobile-home-person-main { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px; border: 0; color: var(--ink); background: transparent; text-align: left; }
  .discovery-view.is-desktop-alt .mobile-home-avatar { width: 52px; height: 52px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: #174b9e; background: #e6f0ff; font-weight: 800; }
  .discovery-view.is-desktop-alt .mobile-home-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .discovery-view.is-desktop-alt .mobile-home-person-copy, .discovery-view.is-desktop-alt .mobile-home-project-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
  .discovery-view.is-desktop-alt .mobile-home-person-copy strong, .discovery-view.is-desktop-alt .mobile-home-project-copy strong { font-size: 16px; }
  .discovery-view.is-desktop-alt .mobile-home-person-copy small, .discovery-view.is-desktop-alt .mobile-home-project-copy small, .discovery-view.is-desktop-alt .mobile-home-project-copy p { margin: 0; color: var(--muted); font-size: 12px; }
  .discovery-view.is-desktop-alt .mobile-home-arrow, .discovery-view.is-desktop-alt .mobile-swipe-cue { display: none; }
  .discovery-view.is-desktop-alt .mobile-home-match, .discovery-view.is-desktop-alt .mobile-home-project-score { color: #2459aa; font-size: 13px; font-weight: 800; }
  .discovery-view.is-desktop-alt .person-request { padding: 0 16px 12px; color: var(--ink); font-size: 13px; }
  .discovery-view.is-desktop-alt .person-request > small { display: block; margin-bottom: 4px; color: #2d63a9; font-size: 11px; }
  .discovery-view.is-desktop-alt .person-request-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .discovery-view.is-desktop-alt .mobile-home-person.is-expanded .person-request-text { display: block; }
  .discovery-view.is-desktop-alt .mobile-home-card-actions { display: flex; border-top: 1px solid var(--line); }
  .discovery-view.is-desktop-alt .mobile-home-card-actions button { width: 50%; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; color: var(--ink); background: transparent; }
  .discovery-view.is-desktop-alt .mobile-home-card-actions button + button { border-left: 1px solid var(--line); color: #2459aa; }
  .discovery-view.is-desktop-alt .mobile-home-card-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .discovery-view.is-desktop-alt .mobile-interest-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .discovery-view.is-desktop-alt .mobile-interest-list button { min-height: 60px; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); text-align: left; }
  .discovery-view.is-desktop-alt .mobile-interest-list button span { color: #16806a; font-size: 20px; }
  .discovery-view.is-desktop-alt .mobile-interest-list button strong { flex: 1; }
  .discovery-view.is-desktop-alt .mobile-interest-list svg { width: 16px; height: 16px; }
  .discovery-view.is-desktop-alt .mobile-event-cover { position: relative; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 22px; color: #fff; }
  .discovery-view.is-desktop-alt .mobile-event-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .discovery-view.is-desktop-alt .mobile-event-cover::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(9,24,50,.82)); }
  .discovery-view.is-desktop-alt .mobile-event-cover-top, .discovery-view.is-desktop-alt .mobile-event-cover-copy, .discovery-view.is-desktop-alt .mobile-event-links { position: relative; z-index: 1; }
  .discovery-view.is-desktop-alt .mobile-event-cover-top { display: flex; gap: 10px; margin-bottom: auto; font-size: 12px; font-weight: 700; }
  .discovery-view.is-desktop-alt .mobile-event-cover-copy strong { display: block; margin-top: 10px; font-size: 25px; }
  .discovery-view.is-desktop-alt .mobile-event-cover-copy p { max-width: 46ch; font-size: 13px; }
  .discovery-view.is-desktop-alt .mobile-event-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .discovery-view.is-desktop-alt .mobile-event-cta { padding: 8px 12px; border: 1px solid #fff8; border-radius: 7px; color: #fff; background: #244dad; font-size: 12px; text-decoration: none; }
}

@media (max-width: 899px) {
  body[data-view="messages"].is-chat-open .phone-shell .topbar,
  body[data-view="messages"].is-chat-open .messages-head { display: none !important; }
  body[data-view="messages"].is-chat-open .phone-shell .views { padding: 0 !important; }
  .home-carousel-controls button { width: 34px; height: 34px; }
  .home-carousel-controls button:first-child { left: -17px; }
  .home-carousel-controls button:last-child { right: -17px; }
  .image-viewer { width: calc(100vw - 20px); max-height: 90dvh; }
  .image-viewer-stage { height: 72dvh; }
}

@media (max-width: 899px) {
  .home-carousel .home-banner-title {
    display: block;
    max-width: 15ch;
    margin: 16px 0 8px;
    font-size: 23px;
    line-height: 1.06;
    font-weight: 780;
    overflow-wrap: anywhere;
  }

  .home-invite-slide {
    padding-left: 32px;
    background: linear-gradient(122deg, #f2fff5 0%, #c4f1d5 49%, #75cda6 100%);
    box-shadow: 0 16px 34px rgba(37, 132, 94, .17), inset 0 1px 0 #fff;
  }
  .home-invite-slide .home-guide-main { max-width: 75%; }
  .home-invite-slide .home-guide-eyebrow { color: #217351; }
  .home-invite-slide .home-banner-title { max-width: none; margin-top: 10px; margin-bottom: 6px; color: #123d32; font-size: 20px; overflow-wrap: normal; }
  .home-invite-slide .home-guide-copy { max-width: 20ch; color: #315e4d; }
  .home-invite-slide .home-guide-cta { margin-top: 10px; background: linear-gradient(125deg, #16845e, #34aa76); box-shadow: 0 7px 16px rgba(19, 114, 80, .2); }
  .home-invite-portraits { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
  .home-invite-portraits img { position: absolute; width: 74px; height: 74px; object-fit: cover; border: 4px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 9px 20px rgba(23, 93, 67, .2); }
  .home-invite-portraits img:first-child { top: 33px; right: 19px; width: 88px; height: 88px; }
  .home-invite-portraits img:nth-child(2) { right: 87px; bottom: 15px; width: 62px; height: 62px; }
  .home-invite-portraits img:nth-child(3) { right: -4px; bottom: 10px; }

  .home-audit-slide {
    padding: 20px 18px 20px 30px;
    background: linear-gradient(122deg, #fffaf4 0%, #f4e6d7 52%, #eabfa9 100%);
    box-shadow: 0 16px 34px rgba(158, 95, 65, .14), inset 0 1px 0 #fff;
  }
  .home-audit-slide .home-guide-main { max-width: 69%; }
  .home-audit-slide .home-guide-eyebrow { color: #9b5c42; }
  .home-audit-slide .home-banner-title { margin: 8px 0 5px; color: #392d31; font-size: 19px; line-height: 1.04; }
  .home-audit-slide .home-guide-copy { color: #685256; }
  .home-audit-slide .home-guide-cta { margin-top: 7px; background: linear-gradient(125deg, #9b5945, #cb7961); box-shadow: 0 7px 16px rgba(144, 74, 53, .18); }
  .home-audit-visual { position: absolute; z-index: 1; right: -19px; bottom: -17px; width: 137px; height: 154px; display: flex; flex-direction: column; padding: 15px; border: 1px solid rgba(255,255,255,.9); border-radius: 13px; color: #634743; background: rgba(255,255,255,.78); box-shadow: 0 12px 26px rgba(107, 67, 52, .15); transform: rotate(-7deg); pointer-events: none; }
  .home-audit-visual span { font-size: 8px; font-weight: 800; }
  .home-audit-visual strong { margin: 6px 0 10px; font-size: 52px; line-height: 1; }
  .home-audit-visual i { width: 100%; height: 7px; display: block; margin-top: 7px; border-radius: 4px; background: #e4cfbd; }
  .home-audit-visual i:nth-of-type(2) { width: 76%; background: #be7964; }
  .home-audit-visual i:nth-of-type(3) { width: 53%; }
}

@media (max-width: 370px) {
  .home-carousel .home-banner-title { font-size: 21px; }
  .home-carousel .home-invite-slide .home-banner-title { font-size: 19px; }
  .home-carousel .home-audit-slide .home-banner-title { font-size: 18px; }
  .home-invite-portraits img:first-child { right: -8px; width: 64px; height: 64px; }
  .home-invite-portraits img:nth-child(2) { right: 65px; }
  .home-audit-visual { right: -37px; }
}

/* A stable catalog of interests, independent of the current recommendation feed. */
.interest-catalog {
  min-width: 0;
  grid-column: 1 / -1;
}

.discovery-view.is-interest-catalog .mobile-feed-search { display: none; }

.interest-catalog-search {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border: 1px solid #dbe5f4;
  border-radius: 12px;
  color: #7183a2;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 18px rgba(32, 78, 147, 0.04);
}

.interest-catalog-search:focus-within {
  border-color: #83a9ed;
  box-shadow: 0 0 0 3px rgba(84, 137, 228, 0.12);
}

.interest-catalog-search svg { width: 19px; height: 19px; flex: none; }
.interest-catalog-search input {
  width: 100%;
  min-width: 0;
  height: 50px;
  border: 0;
  outline: 0;
  color: #17263e;
  background: transparent;
  font: inherit;
  font-size: 14px;
}
.interest-catalog-search input::placeholder { color: #8998ad; }

.interest-catalog-group { margin-top: 23px; }
.interest-catalog-group h3 {
  margin: 0 0 11px;
  color: #667895;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.interest-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.interest-category {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dce6f4;
  border-radius: 12px;
  color: #17263e;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(32, 78, 147, 0.035);
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.interest-category:hover,
.interest-category:focus-visible {
  border-color: #94b5e9;
  box-shadow: 0 11px 22px rgba(32, 78, 147, 0.09);
  transform: translateY(-2px);
}

.interest-category-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #3168c5;
  background: #e6efff;
}
.interest-category.tone-coral .interest-category-icon { color: #b96054; background: #ffede9; }
.interest-category.tone-green .interest-category-icon { color: #18846d; background: #e2f6ef; }
.interest-category.tone-violet .interest-category-icon { color: #7761b8; background: #f0edff; }
.interest-category-icon svg { width: 22px; height: 22px; stroke-width: 1.9; }

.interest-category-copy { min-width: 0; display: grid; gap: 4px; }
.interest-category-copy strong { font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; }
.interest-category-copy small { color: #718098; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.interest-category-arrow { width: 17px; height: 17px; color: #8ba0bc; }
.interest-catalog-empty { padding: 22px 0; color: #718098; font-size: 13px; }

@media (max-width: 899px) {
  .interest-catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .interest-category { min-height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .interest-category { transition: none; }
}

.mobile-home-person .person-request {
  display: grid;
  gap: 0;
  padding: 4px 18px 10px;
}

.person-request-row {
  min-width: 0;
  padding: 12px 0;
}

.person-request-row + .person-request-row {
  border-top: 1px solid var(--line);
}

.person-request-row > small {
  display: block;
  margin-bottom: 5px;
  color: #367fbe;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.mobile-home-person .person-request-row > .person-request-text {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mobile-home-person .person-request-more {
  justify-self: start;
  margin-top: 0;
}

@media (max-width: 899px) {
  .mobile-home-person.has-portrait .mobile-home-person-main { min-height: 220px; }
}

.mobile-like-feedback {
  position: fixed;
  z-index: 1200;
  top: 50%;
  left: 50%;
  width: 102px;
  height: 102px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #f26782;
  background: rgba(255,255,255,.88);
  box-shadow: 0 16px 48px rgba(31,81,156,.2), inset 0 1px 0 #fff;
  backdrop-filter: blur(16px);
  pointer-events: none;
  animation: mobile-like-pop 850ms ease-out both;
}

.mobile-like-feedback svg {
  width: 52px;
  height: 52px;
  fill: currentColor;
  stroke: #fff;
  stroke-width: 1.5;
}

@keyframes mobile-like-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-like-feedback { animation: none; transform: translate(-50%, -50%); }
}

.discovery-view.is-region-catalog .mobile-feed-search { display: none; }
.mobile-home-feed-head > #mobile-home-feed-meta { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.region-catalog {
  min-width: 0;
  grid-column: 1 / -1;
}

.region-catalog-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.region-catalog-shortcuts > button {
  min-width: 0;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #dce6f4;
  border-radius: 12px;
  color: #214267;
  background: #f2f8ff;
  text-align: left;
}

.region-catalog-shortcuts > button + button { background: #f1f8f5; }
.region-catalog-shortcuts > button > svg { width: 23px; height: 23px; flex: none; color: #2a69c7; }
.region-catalog-shortcuts > button + button > svg { color: #23836f; }
.region-catalog-shortcuts span { min-width: 0; display: grid; gap: 4px; }
.region-catalog-shortcuts strong { font-size: 13px; line-height: 1.2; }
.region-catalog-shortcuts small { color: #63768e; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }

.region-catalog-results {
  max-height: min(42dvh, 380px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  margin-top: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.region-catalog-option {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #dce6f4;
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.region-catalog-option svg { width: 17px; height: 17px; color: #5c87bf; }
.region-catalog-option svg:last-child { color: #93a5bd; }
.region-catalog-option span { overflow-wrap: anywhere; }
.region-catalog-option:hover,
.region-catalog-option:focus-visible,
.region-catalog-shortcuts > button:hover,
.region-catalog-shortcuts > button:focus-visible { border-color: #8fb2e8; outline: 0; }

@media (max-width: 899px) {
  .region-catalog-results { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 370px) {
  .region-catalog-shortcuts { grid-template-columns: minmax(0, 1fr); }
}