/*
 * Jungle visual system
 * Loaded last on purpose: this is the canonical composition, contrast, and
 * responsive layer shared by every route.
 */
:root {
  --jungle-950: #032317;
  --jungle-900: #053522;
  --jungle-800: #075036;
  --jungle-700: #08724a;
  --jungle-600: #0b8d59;
  --jungle-500: #18a968;
  --leaf-400: #84c94d;
  --leaf-300: #a7d96b;
  --cream-50: #fffef2;
  --cream-100: #f7f6df;
  --cream-200: #eceecf;
  --purple-500: #7341ec;
  --purple-600: #5c2cd5;
  --danger-500: #e83f47;
  --ink: #082f20;
  --ink-muted: #456557;
  --line: rgba(73, 110, 73, .24);
  --glass: rgba(255, 254, 239, .94);
  --glass-strong: rgba(255, 254, 239, .98);
  --shadow-sm: 0 8px 24px rgba(0, 34, 18, .16);
  --shadow-md: 0 20px 54px rgba(0, 30, 15, .26);
  --shadow-lg: 0 32px 90px rgba(0, 24, 12, .34);
  --text-on-video: 0 1px 1px rgba(0, 15, 8, .95), 0 4px 18px rgba(0, 15, 8, .82);
  --video-position: 54% 100%;
  --video-filter: saturate(1.12) contrast(1.06) brightness(.86);
  --video-overlay: linear-gradient(90deg, rgba(1, 28, 16, .36), rgba(2, 37, 20, .12) 48%, rgba(0, 20, 11, .24));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--jungle-950); }

/* Named call-progression ribbons. */
.match-name-row,.profile-name-row,.recent-match-name{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex-wrap:wrap}
.rank-ribbon{--rank-a:#c77b43;--rank-b:#743616;--rank-ink:#fff7e6;position:relative;isolation:isolate;width:42px;min-width:42px;height:54px;min-height:54px;padding:0;border:0;border-radius:0;display:inline-block;overflow:visible;color:var(--rank-ink);background:none;box-shadow:none;font-size:8px;line-height:1;vertical-align:middle}
.rank-ribbon:before,.rank-ribbon:after{content:"";position:absolute;z-index:0;top:27px;width:17px;height:27px;background:linear-gradient(110deg,var(--rank-a),var(--rank-b));filter:drop-shadow(0 3px 2px rgba(0,0,0,.2));clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);pointer-events:none}
.rank-ribbon:before{left:5px;transform:rotate(7deg);transform-origin:top center}
.rank-ribbon:after{right:5px;transform:rotate(-7deg);transform-origin:top center}
.rank-ribbon-gem{position:absolute;z-index:2;left:3px;top:0;width:36px;height:36px;border:2px solid rgba(255,255,255,.76);border-radius:50%;display:grid;place-items:center;color:var(--rank-ink);background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.82),transparent 19%),radial-gradient(circle at 50% 52%,var(--rank-a) 0 48%,var(--rank-b) 50% 63%,var(--rank-a) 65% 72%,var(--rank-b) 74% 100%);box-shadow:0 4px 9px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.3),0 0 0 2px var(--rank-b);font-size:9px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.rank-ribbon-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.ribbon-wallet{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;vertical-align:middle}.ribbon-count-item{position:relative;display:inline-block;width:47px;height:42px;flex:0 0 47px}.ribbon-count{position:absolute;left:23px;top:8px;min-width:10px;color:inherit;font-size:11px;font-weight:900;line-height:1;text-align:left}.ribbon-name{position:absolute;left:0;right:0;bottom:0;display:block!important;overflow:visible!important;color:inherit!important;font-size:7px!important;font-weight:800!important;line-height:1!important;text-align:center!important}.ribbon-count-item .rank-ribbon{position:absolute;left:1px;top:0;transform:scale(.52);transform-origin:left top;margin:0}
.rank-silver{--rank-a:#d8e0e1;--rank-b:#77868c;--rank-ink:#17312d}
.rank-gold{--rank-a:#ffd85a;--rank-b:#b36a08;--rank-ink:#402400;box-shadow:0 5px 16px rgba(201,134,7,.3),inset 0 1px rgba(255,255,255,.58)}
.rank-platinum{--rank-a:#e7fff5;--rank-b:#70a99f;--rank-ink:#103e37;box-shadow:0 0 0 2px rgba(193,255,232,.16),0 6px 18px rgba(79,160,141,.28)}
.rank-diamond{--rank-a:#83e8ff;--rank-b:#416bd2;--rank-ink:#fff;box-shadow:0 0 0 2px rgba(126,228,255,.2),0 0 20px rgba(80,180,255,.42)}
.rank-emerald{--rank-a:#54e69b;--rank-b:#08734a;--rank-ink:#fff;box-shadow:0 0 0 2px rgba(83,231,156,.18),0 0 23px rgba(33,201,119,.4)}
.rank-jungle-crown{--rank-a:#dcff61;--rank-b:#07834e;--rank-ink:#052b1c;box-shadow:0 0 0 2px rgba(218,255,96,.28),0 0 28px rgba(116,239,86,.52);animation:jungle-ribbon-crown 2.4s ease-in-out infinite}
.rank-vip{--rank-a:#17141f;--rank-b:#09080d;--rank-ink:#f8e5a0;border-color:#efd775;background:linear-gradient(120deg,#09080d,#312946 48%,#0d0a12);box-shadow:0 0 0 2px rgba(244,211,102,.2),0 0 28px rgba(222,181,63,.42);animation:jungle-ribbon-vip 2.2s ease-in-out infinite}
.rank-vip .rank-ribbon-gem{color:#17110a;background:linear-gradient(145deg,#fff1a6,#c88a18);box-shadow:0 0 12px rgba(255,219,91,.62)}
.rank-gold,.rank-platinum,.rank-diamond,.rank-emerald,.rank-jungle-crown,.rank-vip{border:0;background:none;box-shadow:none}
@keyframes jungle-ribbon-crown{50%{filter:brightness(1.18);transform:translateY(-1px)}}
@keyframes jungle-ribbon-vip{50%{filter:brightness(1.2);box-shadow:0 0 0 2px rgba(244,211,102,.28),0 0 38px rgba(236,194,58,.58)}}
.match-profile .match-name-row{margin:0 0 10px}.match-profile .match-name-row h2{margin:0}
.profile-name-row{justify-content:flex-start}.profile-name-row h2{margin:0!important}
.recent-match-name{justify-content:flex-start;gap:7px}.recent-match-name .ribbon-wallet{gap:2px}

@media(prefers-reduced-motion:reduce){.rank-jungle-crown,.rank-vip{animation:none}}

/* Rank now lives beside the name; portraits remain clean and neutral. */
.ribbon-avatar{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;object-fit:cover}

/* Conversation exit control and app-wide unread message notifications. */
.chat-detail-page .chat-header{position:relative}
.chat-back-button{min-height:42px;padding:0 12px;border:1px solid rgba(32,111,68,.18);border-radius:12px;display:inline-flex;align-items:center;gap:7px;color:var(--jungle-800);background:#f3f6dc;box-shadow:var(--shadow-sm);font-size:10px;font-weight:800;text-decoration:none;white-space:nowrap}
.chat-back-button>span{font-size:18px;line-height:1}
.nav-unread{min-width:19px;height:19px;margin-left:auto;padding:0 5px;border:2px solid #073522;border-radius:999px;display:inline-grid;place-items:center;color:#fff;background:#ef4454;box-shadow:0 4px 12px rgba(154,25,44,.35);font-size:8px;font-weight:900;line-height:1}
.message-toast-region{position:fixed;z-index:1000;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:min(370px,calc(100vw - 28px));display:grid;gap:10px;pointer-events:none}
.message-toast{width:100%;min-height:82px;padding:12px;border:1px solid rgba(197,225,169,.8);border-radius:18px;display:grid;grid-template-columns:48px minmax(0,1fr) 30px;align-items:center;gap:11px;color:#143a29;background:linear-gradient(145deg,rgba(255,254,237,.98),rgba(229,241,205,.98));box-shadow:0 20px 55px rgba(0,35,18,.34);text-align:left;cursor:pointer;pointer-events:auto;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .2s,transform .2s}
.message-toast.is-visible{opacity:1;transform:none}
.message-toast img{width:48px;height:48px;border:2px solid #fff;border-radius:15px;object-fit:cover;box-shadow:0 5px 14px rgba(5,69,37,.18)}
.message-toast>span{min-width:0;display:grid;gap:3px}.message-toast small{color:#118251;font-size:7px;font-style:normal;font-weight:900;letter-spacing:.14em}.message-toast strong{overflow:hidden;color:#0b3c28;font-size:12px;white-space:nowrap;text-overflow:ellipsis}.message-toast em{overflow:hidden;color:#5d7365;font-size:10px;font-style:normal;white-space:nowrap;text-overflow:ellipsis}.message-toast b{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff;background:#118251;font-size:16px}

@media(max-width:700px){
  .chat-detail-page .chat-header{padding-inline:10px!important;gap:8px}.chat-back-button{width:42px;padding:0;justify-content:center}.chat-back-button strong{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .message-toast-region{top:max(10px,env(safe-area-inset-top));right:14px}.message-toast{min-height:74px}
}

/* Profile layout requested in the annotated desktop mockup. */
.main-page .desktop-brand{display:none!important}
@media(min-width:860px){
  .main-page .bottom-nav{padding:20px 14px 18px}
  .main-page .bottom-nav>.nav-account{
    order:-1;
    min-height:78px;
    margin:0 0 18px;
    padding:12px!important;
    grid-template-columns:1fr;
  }
  .main-page .nav-account-identity{align-items:center;gap:11px}
  .main-page .nav-account img{width:48px;height:48px;border-radius:14px}
  .main-page .nav-account-copy{gap:5px}
  .main-page .nav-account strong{font-size:14px}
  .main-page .nav-account small{font-size:10px}
}

.page-profile .profile-page-inner{position:relative;width:min(1020px,100%);gap:0;align-content:center}
.page-profile .profile-page-heading{margin:0 0 18px}
.page-profile .profile-page-heading h1{
  margin:0;
  color:var(--purple-500);
  font-size:clamp(34px,3.2vw,48px);
  text-shadow:0 3px 18px rgba(0,24,12,.45);
}
.page-profile .profile-page-heading h1:after{
  content:"";
  display:block;
  width:100%;
  height:3px;
  margin-top:9px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--purple-500),rgba(115,65,236,0));
}
.profile-page-tabs{
  position:relative;
  z-index:3;
  margin:0 24px -1px auto;
  display:flex;
  justify-content:flex-end;
  gap:7px;
}
.profile-page-tabs button{
  min-height:48px;
  padding:0 22px;
  border:2px solid rgba(115,65,236,.72);
  border-radius:12px 12px 0 0;
  color:#f3ebff;
  background:rgba(4,54,31,.9);
  box-shadow:0 8px 20px rgba(0,28,14,.2);
  font-size:14px;
  font-weight:850;
  cursor:pointer;
}
.profile-page-tabs button:hover,.profile-page-tabs button.active{
  color:#fff;
  background:linear-gradient(135deg,var(--purple-500),var(--purple-600));
}
.page-profile .profile-workspace{border-radius:28px}
.page-profile .profile-workspace,.page-profile .profile-settings-card{position:relative}
.page-profile .profile-discover-close{
  position:absolute;
  z-index:8;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:2px solid rgba(115,65,236,.72);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--purple-500),var(--purple-600));
  box-shadow:0 8px 20px rgba(48,16,128,.25);
  font-size:25px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}
.page-profile .profile-discover-close:hover,.page-profile .profile-discover-close:focus-visible{outline:3px solid rgba(201,255,134,.75);outline-offset:2px;transform:scale(1.04)}
.page-profile .profile-edit-heading{padding-right:48px}
.page-profile .profile-live-preview{padding:38px 28px;justify-content:center}
.page-profile .profile-live-preview .profile-avatar-wrap{width:154px;height:154px;margin-bottom:20px}
.page-profile .profile-live-preview .photo-upload-button{margin-bottom:20px;padding:10px 16px;font-size:12px}
.page-profile .profile-live-preview .profile-identity h2{margin:0;font-size:30px;line-height:1.1}
.page-profile .profile-edit-heading{margin-bottom:20px}
.page-profile .profile-edit-heading h2{margin:0;color:var(--purple-600);font-size:24px}
.page-profile .profile-field>span{font-size:13px}
.page-profile .profile-field input,.page-profile .profile-field select{min-height:48px;font-size:13px}
.profile-earned-ribbons{padding-top:18px;border-top:1px solid rgba(77,113,70,.2)}
.profile-earned-ribbons h3{margin:0 0 12px;color:#365b43;font-size:15px;font-weight:750}
.profile-earned-ribbons>.ribbon-wallet{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.profile-earned-ribbons .ribbon-count-item{width:100%;height:138px;display:block}
.profile-earned-ribbons .rank-ribbon{left:50%;top:5px;transform:translateX(-50%) scale(1.8);transform-origin:top center}
.profile-earned-ribbons .ribbon-count{left:50%;top:auto;bottom:9px;transform:translateX(-50%);font-size:16px;text-align:center}
.profile-earned-ribbons .ribbon-name{bottom:0;font-size:9px!important}
.profile-settings-tabs{grid-template-columns:repeat(2,1fr)}

@media(max-width:859px){
  .page-profile .profile-page-inner{align-content:start}
  .page-profile .profile-page-heading{margin-bottom:14px}
  .page-profile .profile-page-heading h1{font-size:34px}
  .profile-page-tabs{margin:0 0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .profile-page-tabs button{min-height:44px;padding:0 7px;border-radius:12px;font-size:10px}
  .page-profile .profile-live-preview{min-height:320px;padding:28px 20px}
  .profile-earned-ribbons .ribbon-count-item{height:122px}
  .profile-earned-ribbons .rank-ribbon{transform:translateX(-50%) scale(1.55)}
}

/* Keep the Profile card spacing consistent with Account and Blocked Users. */
.page-profile .profile-page-heading h1::after{content:none!important;display:none!important}
@media(min-width:860px){
  .page-profile .profile-workspace{width:100%!important;height:590px!important;min-height:590px!important}
  .page-profile .profile-settings-center{width:100%!important;height:auto!important;min-height:590px!important}
  .page-profile .profile-settings-card,
  .page-profile .profile-settings-card .settings-panel{height:auto!important;min-height:590px!important}
  .page-profile .profile-workspace{margin-top:22px!important}
  .page-profile .profile-edit-fields{padding-top:64px!important}
}
@media(max-width:859px){
  .page-profile .profile-edit-fields{padding-top:58px!important}
}

.page-profile.profile-settings-active .profile-page-inner,
.page-profile .profile-screen:has(.profile-settings-center:not([hidden])) .profile-page-inner{
  min-height:0!important;
}
.page-profile.profile-settings-active .profile-settings-center,
.page-profile .profile-screen:has(.profile-settings-center:not([hidden])) .profile-settings-center{
  margin-top:0!important;
}

/* Keep Profile, Account, and Blocked Users in one consistent page shell. */
.page-profile .profile-screen{
  flex-direction:column!important;
}
.page-profile .profile-page-inner,
.page-profile .profile-settings-center{
  width:min(1020px,100%)!important;
  flex:0 0 auto;
}
.page-profile .profile-page-inner{
  min-height:0!important;
  margin:0 auto!important;
}
.page-profile .profile-settings-card{
  width:100%!important;
  min-height:590px!important;
  border-radius:28px!important;
}
.page-profile .profile-settings-card .settings-panel{
  min-height:590px!important;
}
@media(max-width:859px){
  .page-profile .profile-settings-card,
  .page-profile .profile-settings-card .settings-panel{
    min-height:440px!important;
  }
}

/* Top-aligned navigation and polished profile workspace. */
@media(min-width:860px){
  .main-page .bottom-nav{
    padding:24px 14px 18px!important;
    justify-content:flex-start;
  }
  .main-page .bottom-nav>.nav-account{
    order:-1;
    margin:0 0 14px!important;
    flex:0 0 auto;
    border-color:rgba(184,226,137,.34);
    background:linear-gradient(145deg,rgba(17,91,55,.9),rgba(7,67,40,.88));
    box-shadow:0 10px 26px rgba(0,25,13,.22),inset 0 1px rgba(255,255,255,.08);
  }
  .main-page .bottom-nav>a:not(.nav-account){flex:0 0 auto}
}

.page-profile .profile-screen{
  padding-top:34px!important;
  padding-bottom:34px!important;
}
.page-profile .profile-page-inner{
  width:min(1080px,100%);
  min-height:0;
  align-content:start!important;
}
.page-profile .profile-page-heading{
  margin-bottom:14px;
}
.page-profile .profile-page-heading h1{
  color:#a978ff;
  font-size:42px;
  text-shadow:0 4px 18px rgba(0,24,12,.72);
}
.page-profile .profile-page-heading h1:after{
  width:128px;
  height:4px;
  margin-top:10px;
  background:linear-gradient(90deg,#9d61ff,#c5a5ff 55%,transparent);
}
.profile-page-tabs{
  width:max-content;
  margin:0 0 12px auto;
  padding:5px;
  gap:4px;
  border:1px solid rgba(187,225,145,.32);
  border-radius:16px;
  background:rgba(3,55,32,.88);
  box-shadow:0 14px 34px rgba(0,25,13,.3),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.profile-page-tabs button{
  min-height:43px;
  padding:0 22px;
  border:0;
  border-radius:11px;
  color:#e7f2dd;
  background:transparent;
  box-shadow:none;
  font-size:12px;
  transition:color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.profile-page-tabs button:hover{
  color:#fff;
  background:rgba(255,255,239,.1);
}
.profile-page-tabs button.active{
  color:#fff;
  background:linear-gradient(135deg,#8248f4,#6130d8);
  box-shadow:0 8px 20px rgba(67,27,153,.34),inset 0 1px rgba(255,255,255,.18);
}
.page-profile .profile-workspace{
  overflow:hidden;
  border:1px solid rgba(207,229,174,.78);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,254,237,.98),rgba(237,243,211,.97));
  box-shadow:0 26px 70px rgba(0,29,15,.36),inset 0 1px rgba(255,255,255,.9);
}
.page-profile .profile-live-preview{
  background:radial-gradient(circle at 50% 25%,rgba(126,210,105,.28),transparent 34%),linear-gradient(155deg,#e2efc9,#f5f4d9);
  border-right:1px solid rgba(88,126,73,.12);
}
.page-profile .profile-edit-fields{padding:30px 34px}
.page-profile .profile-edit-heading h2{
  color:#6432d5;
  font-size:26px;
  letter-spacing:-.025em;
}
.page-profile .profile-field>span,.profile-earned-ribbons h3{color:#155b3c}
.page-profile .profile-field input,.page-profile .profile-field select{
  border-radius:13px;
  background:rgba(255,255,247,.88)!important;
}
.profile-earned-ribbons{
  margin-top:2px;
  padding:18px 10px 0;
  border-top-color:rgba(71,113,65,.2);
  border-radius:0 0 18px 18px;
}
.page-profile .profile-save-row .btn{
  min-width:156px;
  min-height:48px;
  border-radius:13px;
}

@media(max-width:859px){
  .page-profile .profile-screen{padding-top:76px!important;padding-bottom:24px!important}
  .page-profile .profile-page-heading h1{font-size:34px}
  .profile-page-tabs{width:100%;margin:0 0 12px;padding:4px;grid-template-columns:repeat(3,1fr)}
  .profile-page-tabs button{padding:0 6px}
  .page-profile .profile-edit-fields{padding:24px 19px}
  .page-profile .profile-live-preview{border-right:0;border-bottom:1px solid rgba(88,126,73,.12)}
}

/* Navigation alignment and selected-state contrast. */
@media(min-width:860px){
  .main-page .bottom-nav{gap:7px!important}
  .main-page .bottom-nav>a:not(.nav-account){
    min-height:56px!important;
    padding:0 16px!important;
    align-items:center!important;
    gap:12px!important;
    border-radius:13px!important;
  }
  .main-page .bottom-nav>a:not(.nav-account) .nav-icon{
    width:24px!important;
    min-width:24px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    line-height:1!important;
  }
  .main-page .nav-account.active{
    color:#092f20!important;
    border-color:#d7e9ae!important;
    background:linear-gradient(135deg,#f7f7dc,#dff0b7)!important;
    box-shadow:0 9px 25px rgba(0,22,11,.24)!important;
  }
  .main-page .nav-account.active .nav-account-copy>strong{
    color:#092f20!important;
    opacity:1!important;
  }
  .main-page .nav-account.active .nav-account-copy>small{
    color:#43604f!important;
    opacity:1!important;
  }
}

/* Card-aligned, theme-consistent profile section tabs. */
.profile-page-tabs{
  margin:0 0 12px auto!important;
  padding:4px!important;
  gap:4px!important;
  border:1px solid rgba(205,226,169,.72)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(248,249,222,.97),rgba(224,239,190,.96))!important;
  box-shadow:0 12px 30px rgba(0,28,14,.3),inset 0 1px rgba(255,255,255,.82)!important;
}
.profile-page-tabs button{
  min-width:112px;
  min-height:44px!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:11px!important;
  color:#174b34!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12px!important;
  line-height:1!important;
  text-align:center!important;
}
.profile-page-tabs button:last-child{min-width:146px}
.profile-page-tabs button:hover{
  color:#073522!important;
  background:rgba(19,126,77,.11)!important;
}
.profile-page-tabs button.active{
  color:#fff!important;
  background:linear-gradient(135deg,#7540eb,#5d2bd1)!important;
  box-shadow:0 7px 18px rgba(72,31,164,.3),inset 0 1px rgba(255,255,255,.2)!important;
}
@media(max-width:859px){
  .profile-page-tabs{width:100%!important}
  .profile-page-tabs button,.profile-page-tabs button:last-child{min-width:0!important;padding:0 5px!important}
}

/* Account and blocklist are in-place profile tabs, never modal dialogs. */
.page-profile .profile-settings-center{
  position:relative;
  z-index:2;
  inset:auto;
  width:100%;
  padding:0;
  display:block;
}
.page-profile .profile-settings-center[hidden]{display:none!important}
.page-profile .profile-workspace[hidden]{display:none!important}
.page-profile .profile-settings-backdrop,
.page-profile .profile-settings-header,
.page-profile .profile-settings-tabs{display:none!important}
.page-profile .profile-settings-card{
  width:100%;
  height:auto;
  min-height:510px;
  overflow:visible;
  border:1px solid rgba(207,229,174,.78);
  border-radius:26px;
  display:block;
  color:#153a28;
  background:linear-gradient(145deg,rgba(255,254,237,.98),rgba(237,243,211,.97));
  box-shadow:0 26px 70px rgba(0,29,15,.36),inset 0 1px rgba(255,255,255,.9);
}
.page-profile .profile-settings-card .settings-panel{
  width:100%;
  min-height:510px;
  padding:34px 38px;
  overflow:visible;
}
.page-profile .profile-settings-card .settings-section-heading{
  margin-bottom:26px;
}
.page-profile .profile-settings-card .settings-section-heading>span{
  background:linear-gradient(145deg,#20a766,#087747);
}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .settings-section-heading>span{
  background:linear-gradient(145deg,#ee6257,#bd2f2b);
  box-shadow:0 8px 18px rgba(172,41,36,.24);
}
.page-profile .profile-settings-card .settings-section-heading h3{
  color:#6331d5;
  font-size:23px;
}
.page-profile .profile-settings-card #account-settings-form{
  width:min(620px,100%);
}
.page-profile .profile-settings-card .blocked-user-list{
  width:100%;
}
@media(max-width:680px){
  .page-profile .profile-settings-center{padding:0;display:block;place-items:initial}
  .page-profile .profile-settings-card{height:auto;min-height:440px;border-radius:22px;grid-template-columns:1fr;grid-template-rows:auto}
  .page-profile .profile-settings-card .settings-panel{min-height:440px;padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
}

/* Larger profile typography and tighter heading-to-card composition. */
.page-profile .profile-screen{padding-top:18px!important}
.page-profile .profile-page-heading{margin-bottom:2px!important}
.page-profile .profile-page-heading h1{font-size:46px!important;line-height:1!important}
.page-profile .profile-page-heading h1:after{margin-top:8px!important}
.page-profile .profile-page-tabs{margin-bottom:8px!important}
.page-profile .profile-page-tabs button{min-height:48px!important;font-size:14px!important}
.page-profile .profile-edit-heading h2{font-size:29px!important}
.page-profile .profile-field>span{font-size:15px!important}
.page-profile .profile-field input,.page-profile .profile-field select{min-height:54px!important;padding-inline:15px!important;font-size:15px!important}
.page-profile .profile-field small{font-size:11px!important}
.page-profile .profile-live-preview .profile-avatar-wrap{width:168px!important;height:168px!important}
.page-profile .profile-live-preview .photo-upload-button{
  min-height:48px;
  margin-bottom:22px!important;
  padding:0 20px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:14px!important;
}
.page-profile .profile-live-preview .profile-identity h2{font-size:34px!important}
.page-profile .profile-earned-ribbons h3{font-size:17px!important}
.page-profile .profile-earned-ribbons .ribbon-count{font-size:18px!important}
.page-profile .profile-save-row .btn{min-width:170px!important;min-height:52px!important;font-size:15px!important}
.page-profile .profile-settings-card .settings-section-heading h3{font-size:27px!important}
.page-profile .profile-settings-card .settings-section-heading p{font-size:12px!important}
.page-profile .profile-settings-card .settings-field>span{font-size:13px!important}
.page-profile .profile-settings-card .settings-field input{min-height:50px;font-size:14px}
.page-profile .profile-settings-card .settings-field small,
.page-profile .profile-settings-card .managed-account-note p,
.page-profile .profile-settings-card .blocked-user-row small{font-size:11px!important}
.page-profile .profile-settings-card .managed-account-note strong,
.page-profile .profile-settings-card .blocked-user-row strong{font-size:14px!important}
.page-profile .profile-settings-card .blocked-panel-toolbar>span{font-size:12px!important}
.page-profile .profile-settings-card .blocked-panel-toolbar small{font-size:10px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .settings-section-heading h3{font-size:30px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .settings-section-heading p{font-size:15px!important;line-height:1.55}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-panel-toolbar{min-height:52px;padding:11px 14px}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-panel-toolbar>span{font-size:15px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-panel-toolbar>span strong{font-size:18px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-action-status{font-size:12px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-user-row strong{font-size:16px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-user-row small{font-size:13px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-user-row button{min-height:40px;padding-inline:15px;font-size:12px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-empty strong{font-size:18px!important}
.page-profile .profile-settings-card .settings-panel[data-settings-panel="blocked"] .blocked-empty p{font-size:13px!important;line-height:1.5}
@media(max-width:859px){
  .page-profile .profile-screen{padding-top:68px!important}
  .page-profile .profile-page-heading h1{font-size:38px!important}
  .page-profile .profile-page-tabs button{font-size:12px!important}
  .page-profile .profile-live-preview .profile-avatar-wrap{width:142px!important;height:142px!important}
  .page-profile .profile-live-preview .profile-identity h2{font-size:29px!important}
}

/* Place the page title in the open space beside the section tabs. */
@media(min-width:860px){
  .page-profile .profile-screen{
    min-height:100dvh!important;
    padding-top:34px!important;
    padding-bottom:34px!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
  }
  .page-profile .profile-page-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    column-gap:24px;
    row-gap:16px;
    margin:auto;
  }
  .page-profile .profile-page-heading{
    grid-column:1;
    grid-row:1;
    align-self:end;
    margin:0!important;
  }
  .page-profile .profile-page-tabs{
    grid-column:2;
    grid-row:1;
    align-self:end;
    margin:0!important;
    transform:translateY(-2px);
  }
  .page-profile .profile-workspace,
  .page-profile .profile-settings-center{
    grid-column:1/-1;
    grid-row:2;
  }
}
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--jungle-950);
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #c7f17e; outline-offset: 3px; }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 11px 15px;
  border-radius: 10px;
  color: #fff;
  background: var(--jungle-900);
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Full-bleed, focal-point-aware background media. */
.app-shell {
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.jungle-video-bg {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--jungle-900) url('/images/jungle-background-poster.webp') var(--video-position) / cover no-repeat;
}
.jungle-video-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--video-position);
  opacity: 0;
  filter: var(--video-filter);
  transform: none;
  transition: opacity .9s ease;
  will-change: opacity;
}
.jungle-video-ready .jungle-video-bg video,
.jungle-video-playing .jungle-video-bg video { opacity: 1; }
.jungle-video-fallback .jungle-video-bg video,
.jungle-video-reduced-motion .jungle-video-bg video { display: none; }
.jungle-video-overlay {
  position: absolute;
  inset: 0;
  background: var(--video-overlay);
}
.app-shell > .main-content { position: relative; z-index: 1; min-width: 0; min-height: 100dvh; }
.status-bar { display: none !important; }

/* Shared material and controls. */
.btn,
.find-button,
.header-action,
.settings-button,
.search-retry,
.cancel-button,
.recent-match-card button,
.accept-button,
.video-button,
.more-button,
.logout-button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 800;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.btn-primary,
.find-button,
.accept-button {
  color: #fff;
  border-color: rgba(158, 221, 92, .38);
  background: linear-gradient(135deg, var(--jungle-600), var(--jungle-800));
  box-shadow: 0 13px 30px rgba(0, 57, 30, .34), inset 0 1px rgba(255, 255, 255, .2);
}
.btn-secondary {
  color: var(--jungle-800);
  border-color: var(--line);
  background: linear-gradient(180deg, var(--cream-50), var(--cream-200));
  box-shadow: var(--shadow-sm);
}
.btn:not(:disabled):hover,
.find-button:not(:disabled):hover,
.accept-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(0, 57, 30, .4); }
button:disabled, .btn:disabled { opacity: .58; cursor: not-allowed; filter: saturate(.55); transform: none !important; box-shadow: none; }
.button-loading { display: none; }
.find-button.is-loading .button-label,
.find-button.is-loading .people-icon { display: none; }
.find-button.is-loading .button-loading { display: inline; }
input, textarea, select {
  color: var(--ink);
  border-color: rgba(55, 103, 70, .28) !important;
  background: rgba(255, 255, 248, .96) !important;
}
input::placeholder, textarea::placeholder { color: #698075; opacity: 1; }
input:focus, textarea:focus, select:focus {
  border-color: var(--jungle-600) !important;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(12, 142, 87, .15) !important;
}

/* Signed-in shell and navigation. */
.main-page {
  --video-filter: saturate(1.16) contrast(1.08) brightness(.79);
  --video-overlay: linear-gradient(90deg, rgba(0, 27, 15, .24), rgba(0, 25, 14, .04) 54%, rgba(0, 19, 10, .12));
}
.main-page .jungle-video-bg { z-index: 0; }
.main-page .jungle-video-bg video {
  display: block !important;
  opacity: 1 !important;
}
.main-page .jungle-video-overlay { z-index: 1; }
.main-page .app-shell > .main-content { position: relative; z-index: 2; }
.main-page .desktop-brand {
  position: fixed;
  z-index: 50;
  top: 20px;
  left: 4px;
  display: flex;
  width: 220px;
  height: 100px;
  align-items: center;
}
.site-logo { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 19, 10, .35)); }
.main-page .bottom-nav {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: 228px;
  height: 100dvh;
  padding: 120px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  border-right: 1px solid rgba(177, 216, 139, .2);
  background: linear-gradient(180deg, rgba(2, 52, 32, .96), rgba(1, 37, 23, .98));
  box-shadow: 18px 0 42px rgba(0, 25, 13, .2);
  backdrop-filter: blur(14px);
}
.main-page .bottom-nav > a:not(.nav-account) {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 13px;
  border-radius: 14px;
  color: #c8dacd;
  font-size: 13px;
  font-weight: 750;
}
.main-page .bottom-nav > a:not(.nav-account):hover { color: #fff; background: rgba(255, 255, 239, .09); }
.main-page .bottom-nav > a.active {
  color: var(--jungle-950);
  background: linear-gradient(135deg, #f8f7df, #dff0b8);
  box-shadow: 0 9px 25px rgba(0, 22, 11, .24);
}
.main-page .nav-icon { width: 22px; font-size: 18px; text-align: center; }
.main-page .nav-account {
  margin-top: auto;
  min-height: 62px;
  padding: 9px 10px 8px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(176, 214, 137, .25);
  border-radius: 15px;
  color: #f5f8e8;
  background: rgba(13, 78, 48, .68);
}
.main-page .nav-account-identity{width:100%;display:flex;align-items:flex-start;gap:8px}.main-page .nav-account-copy{min-width:0;flex:1;display:grid;align-content:start;gap:2px}.main-page .nav-account-copy>strong{width:100%;line-height:1.05}.main-page .nav-account-copy>.ribbon-wallet{width:100%;display:flex!important;grid-auto-flow:column;justify-content:flex-start;align-items:center;gap:0;margin:0}.main-page .nav-account-copy>.ribbon-wallet .ribbon-count-item{width:35px;height:25px;flex:0 0 35px}.main-page .nav-account-copy>.ribbon-wallet .rank-ribbon{left:2px;transform:scale(.35)}.main-page .nav-account-copy>.ribbon-wallet .ribbon-count{left:17px;top:4px;font-size:8px}.main-page .nav-account-copy>.ribbon-wallet .ribbon-name{display:none!important}.main-page .nav-account>small{margin-top:0;text-align:center;line-height:1}
.main-page .nav-account img,
.main-page .nav-account-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--jungle-700); }
.main-page .nav-account span:last-child { min-width: 0; display: grid; gap: 3px; }
.main-page .nav-account strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.main-page .nav-account small { color: #b9cbbd; font-size: 8px; }
@media(min-width:860px){.main-page .bottom-nav>.nav-account{padding:9px 10px 8px!important}}
.main-page .main-content { margin-left: 228px; min-height: 100dvh; padding: 0; overflow: visible; }

/* Discover composition and protected bird-safe right edge. */
.page-discover { --video-position: 56% 100%; }
.page-discover .desktop-brand {
  z-index: 60;
  left: 4px;
  width: 220px;
  height: 100px;
}
.page-discover .bottom-nav { z-index: 40; }
.main-page .discover-screen {
  width: 100%;
  min-height: 100dvh;
  padding: clamp(76px, 8vh, 108px) clamp(30px, 4vw, 72px) 34px;
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(430px, 1.1fr);
  grid-template-rows: 1fr auto auto;
  align-items: center;
  gap: 0 clamp(35px, 5vw, 86px);
  text-align: left;
  background: transparent;
}
.main-page .settings-button {
  position: fixed;
  z-index: 30;
  top: 24px;
  right: 28px;
  width: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  color: var(--jungle-900);
  border-color: rgba(71, 109, 68, .28);
  background: var(--cream-50);
  box-shadow: var(--shadow-sm);
}
.main-page .discover-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  width: min(500px, 100%);
  padding: clamp(34px, 3.4vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(225, 234, 191, .75);
  border-radius: 28px;
  color: var(--ink);
  background: radial-gradient(ellipse at 93% 10%, rgba(111, 158, 62, .12), transparent 28%), linear-gradient(145deg, var(--glass-strong), rgba(239, 241, 214, .97));
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, .9);
}
.main-page .discover-copy::before { content: "VERIFIED DISCOVERY"; color: var(--purple-600); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.main-page .discover-copy h1 { margin: 15px 0 0; color: var(--jungle-900); font-family: Georgia, serif; font-size: clamp(41px, 4vw, 60px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.main-page .discover-copy p { margin: 0; color: #2d5944; font-size: 15px; font-weight: 550; line-height: 1.6; }
.main-page .discover-divider { margin: 22px 0 18px; }
.main-page .people-orbit {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 3;
  width: min(100%, 560px);
  height: min(62vh, 560px);
  min-height: 420px;
  margin: -4vh auto 8vh;
  transform: translate(-3%, -3%) scale(.84) !important;
  transform-origin: center;
  pointer-events: none;
}
.main-page .track-outer { width: min(88%, 500px); }
.main-page .track-middle { width: min(70%, 400px); }
.main-page .track-inner { width: min(52%, 300px); }
.main-page .globe { width: min(39%, 220px); }
.main-page .orbit-avatar { width: 54px; height: 54px; }
.main-page .city-presence {
  position: absolute;
  z-index: 4;
  min-width: 94px;
  padding: 9px 12px;
  display: grid;
  gap: 2px;
  color: #fff;
  border: 1px solid rgba(170, 218, 104, .7);
  border-radius: 14px;
  background: rgba(3, 48, 29, .88);
  box-shadow: 0 10px 28px rgba(0, 24, 13, .42), inset 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
}
.main-page .city-presence[hidden] { display: none; }
.main-page .city-presence strong { color: #d9ff91; font-size: 17px; line-height: 1; }
.main-page .city-presence span { max-width: 100px; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.main-page .people-orbit .city-presence.avatar-1 { left: 2%; top: 38%; }
.main-page .people-orbit .city-presence.avatar-2 { left: 24%; top: 2%; }
.main-page .people-orbit .city-presence.avatar-3 { right: 0; top: 25%; }
.main-page .people-orbit .city-presence.avatar-4 { right: 10%; bottom: 5%; }
.main-page .people-orbit .city-presence.avatar-5 { left: 17%; bottom: 2%; }
.main-page .presence-center-copy { position: absolute; inset: 24%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; transform: translateZ(0); }
.main-page .presence-center-copy strong { font-size: clamp(30px, 3vw, 46px); line-height: 1; text-shadow: 0 4px 20px rgba(44, 12, 120, .4); }
.main-page .presence-center-copy span { margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.main-page .presence-center-copy b { max-width: 120px; margin-top: 2px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.main-page .presence-live-badge { position: absolute; top: 9%; right: 13%; z-index: 5; padding: 7px 10px; display: flex; align-items: center; gap: 7px; color: #efffd1; border: 1px solid rgba(191,230,132,.42); border-radius: 999px; background: rgba(2,45,27,.74); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.main-page .presence-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #9ee85d; box-shadow: 0 0 0 4px rgba(158,232,93,.14); animation: presence-pulse 1.8s ease-in-out infinite; }
.main-page .presence-privacy { position: absolute; left: 50%; bottom: -1px; width: max-content; max-width: 90%; margin: 0; padding: 7px 11px; color: #e9f3d8; border-radius: 999px; background: rgba(1,35,21,.72); font-size: 9px; font-weight: 650; transform: translateX(-50%); text-align: center; }
@keyframes presence-pulse { 50% { opacity: .55; transform: scale(.82); } }

/* Live city map — softened so it belongs to the jungle scene rather than
   reading like a full navigation product. */
.main-page .city-map-panel {
  width: min(100%, 640px);
  height: min(68vh, 650px);
  min-height: 500px;
  margin: -2vh auto 6vh;
  padding: 58px 13px 48px;
  overflow: hidden;
  border: 2px solid rgba(224, 241, 202, .45);
  border-radius: 31px;
  background: linear-gradient(145deg,rgba(14,63,40,.66),rgba(3,48,29,.74));
  box-shadow: 0 30px 80px rgba(0,25,13,.42), inset 0 1px rgba(255,255,255,.16), inset 0 0 0 9px rgba(16,80,48,.2);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transform: translate(-3%, -3%) !important;
  pointer-events: auto;
}
.main-page .nearby-city-map { position: absolute; z-index: 1; inset: 58px 13px 48px; overflow: hidden; border: 1px solid rgba(201,230,175,.25); border-radius: 20px; background: #224936; }
.main-page .jungle-map-tiles { opacity: .78; filter: grayscale(.25) sepia(.38) hue-rotate(78deg) saturate(.62) brightness(.58) contrast(.95); }
.main-page .nearby-city-map::after {
  content: "";
  position: absolute;
  z-index: 450;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2,39,23,.34), rgba(2,43,25,.06) 38%, rgba(1,31,18,.42)), radial-gradient(circle at 50% 48%, transparent 20%, rgba(1,34,20,.38) 100%);
}
.main-page .nearby-city-map .leaflet-control-attribution { color: rgba(234,246,220,.72); background: rgba(2,39,23,.62); font-size: 7px; }
.main-page .nearby-city-map .leaflet-control-attribution a { color: #d9f4b6; }
.main-page .map-atmosphere { position: absolute; z-index: 2; inset: 58px 13px 48px; pointer-events: none; border-radius: 20px; box-shadow: inset 0 0 95px rgba(1,30,17,.58); }
.main-page .city-map-heading {
  position: absolute;
  z-index: 500;
  top: 10px;
  left: 13px;
  right: 13px;
  min-height: 48px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f7ffe9;
  border: 1px solid rgba(211,238,178,.28);
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(90deg,rgba(1,52,31,.94),rgba(3,61,36,.84));
  box-shadow: 0 10px 30px rgba(0,25,13,.25);
  backdrop-filter: blur(12px);
}
.main-page .city-map-heading span { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.main-page .city-map-heading i { width: 8px; height: 8px; border-radius: 50%; background: #a8ed61; box-shadow: 0 0 0 5px rgba(168,237,97,.13); animation: presence-pulse 1.8s ease-in-out infinite; }
.main-page .city-map-heading small { color: #cfe6bc; font-size: 9px; }
.main-page .map-signal-chip { position: absolute; z-index: 510; top: 70px; left: 26px; min-height: 35px; padding: 0 13px; display: flex; align-items: center; gap: 9px; color: #dcebd1; border: 1px solid rgba(189,226,153,.22); border-radius: 999px; background: rgba(5,65,38,.72); font-size: 9px; backdrop-filter: blur(10px); }
.main-page .map-signal-chip > i { height: 14px; display: flex; align-items: end; gap: 2px; }
.main-page .map-signal-chip b { width: 2px; border-radius: 2px; background: #8fdc53; }
.main-page .map-signal-chip b:nth-child(1) { height: 5px; }.main-page .map-signal-chip b:nth-child(2) { height: 9px; }.main-page .map-signal-chip b:nth-child(3) { height: 14px; }
.main-page .home-city-summary {
  position: absolute;
  z-index: 500;
  left: 27px;
  bottom: 64px;
  min-width: 196px;
  padding: 16px 18px;
  color: #fff;
  border: 1px solid rgba(218,241,186,.34);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(3,66,39,.92),rgba(2,50,30,.94));
  box-shadow: 0 14px 34px rgba(0,25,13,.32);
  backdrop-filter: blur(13px);
}
.main-page .home-city-summary > span { display:flex;align-items:center;gap:7px;color:#9ee85d;font-size:8px;font-weight:850;letter-spacing:.12em;text-transform:uppercase; }
.main-page .home-city-summary > strong { margin-top:9px;display:block;color:#fff;font-family:Inter,sans-serif;font-size:27px;line-height:1; }
.main-page .home-city-summary p { margin:7px 0 0;color:#eef6e7;font-size:10px; }
.main-page .home-city-summary small { margin-top:10px;display:flex;align-items:center;gap:7px;color:#bfd3b8;font-size:9px; }
.main-page .home-city-summary small i { color:#91dc50;font-style:normal; }
.main-page .city-count-marker { border: 0; background: transparent; }
.main-page .city-count-marker > div,
.main-page .city-count-marker { display: grid; place-items: center; }
.main-page .city-count-marker > * { position:relative;z-index:2;pointer-events:none; }
.main-page .city-count-marker:not(.is-home) i { width:16px;height:16px;border-radius:50%;background:#8bcf53;box-shadow:0 0 0 7px rgba(139,207,83,.16),0 3px 12px rgba(0,28,14,.5); }
.main-page .city-count-marker.is-home strong { color:#fff;font-size:30px;line-height:1;text-shadow:0 3px 12px rgba(0,25,13,.55); }
.main-page .city-count-marker.is-home span { margin-top:6px;color:#eef9e7;font-size:8px;font-weight:750;line-height:1.15;text-align:center; }
.main-page .city-count-marker.is-home::before { content:"";position:absolute;inset:0;border:2px solid #aee96d;border-radius:50%;background:linear-gradient(145deg,rgba(70,139,54,.96),rgba(5,78,43,.97));box-shadow:0 0 0 11px rgba(157,226,87,.16),0 0 0 23px rgba(157,226,87,.09),0 12px 30px rgba(0,30,15,.46); }
.main-page .map-loading { position: absolute; z-index: 600; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #eaf7da; background: rgba(3,48,29,.62); font-size: 10px; font-weight: 700; }
.main-page .map-loading[hidden] { display: none; }
.main-page .map-loading i { width: 25px; height: 25px; border: 2px solid rgba(220,244,187,.25); border-top-color: #c9f38e; border-radius: 50%; animation: jungle-spin .8s linear infinite; }
@keyframes jungle-spin { to { transform: rotate(360deg); } }
.main-page .city-map-panel .presence-privacy { z-index:550;bottom:11px;width:calc(100% - 44px);max-width:none;min-height:28px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#dbe9d2;background:rgba(1,43,25,.88);border:1px solid rgba(190,225,157,.18);font-size:9px; }
@media (max-width: 859px) {
  .main-page .city-presence { min-width: 78px; padding: 7px 9px; }
  .main-page .city-presence strong { font-size: 14px; }
  .main-page .city-presence span { max-width: 76px; font-size: 8px; }
  .main-page .people-orbit .city-presence.avatar-4,
  .main-page .people-orbit .city-presence.avatar-5 { display: none; }
  .main-page .presence-center-copy strong { font-size: 27px; }
  .main-page .presence-center-copy b { max-width: 92px; font-size: 11px; }
  .main-page .presence-live-badge { top: 3%; right: 8%; }
  .main-page .presence-privacy { bottom: -7px; font-size: 8px; }
  .main-page .city-map-panel { width: 100%; height: 285px; min-height: 285px; margin: 10px auto 12px; border-radius: 24px; transform: none !important; }
  .main-page .nearby-city-map,.main-page .map-atmosphere { inset: 49px 9px 39px; }
  .main-page .city-map-heading { top: 8px; left: 9px; right: 9px; min-height: 41px; }
  .main-page .map-signal-chip { top: 57px; left: 17px; min-height: 29px; }
  .main-page .home-city-summary { left: 17px; bottom: 48px; min-width: 150px; padding: 10px 12px; }
  .main-page .home-city-summary > strong { font-size: 18px; }
  .main-page .city-map-panel .presence-privacy { bottom: 7px; width: calc(100% - 26px); font-size: 7px; }
}

/* Unified chats and friends workspace. */
.main-page .unified-chats { width: min(1260px, calc(100% - 42px)); height: 100dvh; min-height: 680px; padding: 58px 0 30px; overflow: hidden; }
.main-page .unified-chats{position:relative}
.main-page .screen-discover-close{
  position:absolute;
  z-index:8;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:2px solid rgba(115,65,236,.72);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--purple-500),var(--purple-600));
  box-shadow:0 8px 20px rgba(48,16,128,.25);
  font-size:25px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}
.main-page .screen-discover-close:hover,.main-page .screen-discover-close:focus-visible{outline:3px solid rgba(201,255,134,.75);outline-offset:2px;transform:scale(1.04)}
.main-page .section-title .screen-discover-close{position:static;flex:0 0 38px;margin-left:auto}
.main-page .unified-chats .screen-heading { margin-bottom: 15px; }
.main-page .unified-chats .screen-heading p { margin: 5px 0 0; color: #e3ecd6; font-size: 11px; text-shadow: var(--text-on-video); }
.main-page .unified-chat-layout { height: calc(100% - 74px); display: grid; grid-template-columns: minmax(330px, 400px) minmax(440px, 1fr); gap: 16px; }
.main-page .connections-panel,
.main-page .conversation-panel { min-width: 0; overflow: hidden; border: 1px solid rgba(223, 233, 195, .76); border-radius: 23px; background: linear-gradient(145deg, rgba(255, 254, 240, .97), rgba(235, 240, 207, .96)); box-shadow: var(--shadow-md); }
.main-page .connections-panel { padding: 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(28, 105, 65, .38) transparent; }
.main-page .connections-panel section + section { margin-top: 25px; padding-top: 22px; border-top: 1px solid rgba(40, 91, 56, .14); }
.main-page .section-title { margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.main-page .section-title h2 { margin: 0 0 4px; color: var(--jungle-900); font-size: 17px; }
.main-page .section-title p { margin: 0; color: var(--ink-muted); font-size: 9px; }
.main-page .section-count { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 999px; color: var(--jungle-800); background: rgba(28, 135, 79, .11); font-size: 10px; font-weight: 800; }
.main-page .recent-matches { margin: 0; }
.main-page .recent-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.main-page .recent-match-card { min-width: 0; padding: 11px !important; display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; border-radius: 15px !important; }
.main-page .recent-match-card > img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; }
.main-page .recent-match-copy { min-width: 0; }
.main-page .recent-match-copy strong,
.main-page .recent-match-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.main-page .recent-match-copy strong { font-size: 11px; }
.main-page .recent-match-copy small { margin-top: 3px; font-size: 7px; }
.main-page .recent-match-card button,
.main-page .recent-match-card .match-status { grid-column: 1 / -1; width: 100%; min-height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; font-size: 9px; font-weight: 800; }
.main-page .recent-match-card button:disabled,
.main-page .recent-match-card .match-status { color: #557064; background: #e5ead0; box-shadow: none; }
.main-page .friends-list,
.main-page .request-list { display: grid; gap: 7px; }
.main-page .friend-chat-row,
.main-page .request-card { min-height: 61px; padding: 8px 10px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(41, 92, 57, .1); border-radius: 14px; color: var(--ink); background: rgba(255, 255, 245, .67); text-decoration: none; transition: .18s ease; }
.main-page .friend-chat-row:hover,
.main-page .friend-chat-row.active { border-color: rgba(24, 120, 69, .34); background: #fffef1; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10, 65, 35, .09); }
.main-page .friend-chat-row.active { box-shadow: inset 3px 0 var(--jungle-600), 0 8px 20px rgba(10, 65, 35, .09); }
.main-page .friend-chat-row .avatar,
.main-page .request-card .avatar { width: 42px; height: 42px; border-radius: 13px; object-fit: cover; }
.main-page .friend-chat-row .person-copy,
.main-page .request-card .person-copy { min-width: 0; }
.main-page .friend-chat-row strong,
.main-page .request-card strong { display: block; overflow: hidden; color: var(--jungle-900); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.main-page .friend-chat-row small,
.main-page .request-card small { display: block; margin-top: 4px; overflow: hidden; color: var(--ink-muted); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.main-page .friend-chat-row .chat-row-arrow { color: var(--jungle-600); font-size: 22px; }
.main-page .connections-empty { padding: 22px 14px; display: grid; gap: 4px; border: 1px dashed rgba(42, 96, 58, .2); border-radius: 14px; color: var(--ink-muted); text-align: center; font-size: 9px; }
.main-page .connections-empty strong { color: var(--jungle-900); font-size: 12px; }
.main-page .request-card { grid-template-columns: 42px minmax(0, 1fr); }
.main-page .request-card .request-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.main-page .request-card button { min-height: 32px; border-radius: 9px; font-size: 9px; }
.main-page .request-card .accept-button { color: #fff; background: var(--jungle-700); }
.main-page .conversation-panel { position: relative; }
.main-page .conversation-placeholder { height: 100%; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.main-page .conversation-placeholder > span { color: var(--purple-600); font-size: 42px; }
.main-page .conversation-placeholder h2 { margin: 14px 0 7px; color: var(--jungle-900); font-size: 20px; }
.main-page .conversation-placeholder p { max-width: 290px; margin: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.55; }
.main-page .conversation-panel .chat-screen { width: 100%; height: 100%; padding: 0; display: grid; grid-template-rows: 72px 1fr auto; background: transparent; }
.main-page .conversation-panel .chat-header { padding: 12px 18px; gap: 11px; border-bottom: 1px solid rgba(41, 92, 57, .13); background: rgba(255, 254, 242, .9); }
.main-page .conversation-panel .chat-header h2 { margin: 0 0 3px; color: var(--jungle-900); font-size: 14px; }
.main-page .conversation-panel .chat-header small { color: var(--ink-muted); font-size: 9px; }
.main-page .conversation-panel .chat-header .video-button { width: auto; margin-left: auto; padding-inline: 15px; border-radius: 11px; font-size: 9px; }
.main-page .conversation-panel .message-thread { padding: 22px; background: linear-gradient(180deg, rgba(235, 241, 211, .7), rgba(248, 249, 232, .86)); }
.main-page .conversation-panel .message-form { margin: 0; padding: 12px 14px; border: 0; border-top: 1px solid rgba(41, 92, 57, .13); border-radius: 0; background: rgba(255, 254, 242, .94); box-shadow: none; }
.main-page .conversation-panel .message-form input { background: #fffef5; }
.main-page .conversation-panel .message-form button { background: var(--jungle-700); }
.main-page .chat-welcome { margin: auto; display: grid; justify-items: center; gap: 6px; color: var(--ink-muted); text-align: center; font-size: 10px; }
.main-page .chat-welcome img { width: 66px; height: 66px; margin-bottom: 5px; border-radius: 20px; object-fit: cover; }
.main-page .chat-welcome strong { color: var(--jungle-900); font-size: 13px; }
.main-page .mobile-chat-back { display: none; color: var(--jungle-800); font-size: 24px; text-decoration: none; }

@media (max-width: 1050px) {
  .main-page .unified-chat-layout { grid-template-columns: minmax(300px, 350px) minmax(380px, 1fr); }
  .main-page .recent-match-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .main-page .unified-chats { width: 100%; height: auto; min-height: calc(100dvh - 76px); padding: 25px 14px 22px; overflow: visible; }
  .main-page .unified-chats .screen-heading { align-items: flex-end; }
  .main-page .unified-chats .screen-heading p { display: none; }
  .main-page .unified-chats .search-box { width: min(220px, 55vw); }
  .main-page .unified-chat-layout { height: auto; display: block; }
  .main-page .connections-panel { max-height: none; }
  .main-page .conversation-panel { display: none; min-height: calc(100dvh - 130px); }
  .main-page .has-active-chat .connections-panel { display: none; }
  .main-page .has-active-chat .conversation-panel { display: block; height: calc(100dvh - 130px); }
  .main-page .has-active-chat .search-box { display: none; }
  .main-page .mobile-chat-back { display: block; }
  .main-page .recent-match-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .main-page .unified-chats .screen-heading h1 { font-size: 27px; }
  .main-page .unified-chats .search-box { width: 48vw; min-height: 40px; }
  .main-page .connections-panel { padding: 14px; border-radius: 18px; }
  .main-page .recent-match-grid { grid-template-columns: 1fr; }
  .main-page .conversation-panel { border-radius: 18px; }
  .main-page .conversation-panel .chat-header .video-button { padding-inline: 9px; }
}

/* Friends-first layout: recent matches stay available in a compact bottom tray. */
.main-page .connections-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.main-page .connections-panel .friends-section {
  order: 1;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.main-page .connections-panel .friends-list {
  min-height: 0;
  padding-right: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 105, 65, .34) transparent;
}
.main-page .connections-panel .requests-section {
  order: 2;
  flex: 0 0 auto;
  max-height: 185px;
  overflow-y: auto;
}
.main-page .connections-panel .recent-matches {
  order: 3;
  flex: 0 0 auto;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(40, 91, 56, .14);
}
.main-page .connections-panel .recent-matches .section-title {
  margin-bottom: 7px;
  align-items: center;
}
.main-page .connections-panel .recent-matches .section-title h2 {
  margin: 0;
  font-size: 11px;
}
.main-page .connections-panel .recent-matches .section-title p,
.main-page .connections-panel .recent-matches .section-count {
  display: none;
}
.main-page .connections-panel .recent-match-grid {
  display: flex;
  gap: 7px;
  padding: 1px 1px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 105, 65, .28) transparent;
}
.main-page .connections-panel .recent-match-card {
  width: 154px;
  min-width: 154px;
  min-height: 53px;
  padding: 7px !important;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 6px;
  border-radius: 11px !important;
}
.main-page .connections-panel .recent-match-card > img {
  width: 31px;
  height: 31px;
  border-radius: 9px;
}
.main-page .connections-panel .recent-match-copy strong { font-size: 9px; }
.main-page .connections-panel .recent-match-copy small { display: none; }
.main-page .connections-panel .recent-match-card button,
.main-page .connections-panel .recent-match-card .match-status {
  min-height: 23px;
  border-radius: 7px;
  font-size: 7px;
}

@media (max-width: 800px) {
  .main-page .connections-panel { min-height: calc(100svh - 155px); overflow: hidden; }
  .main-page .connections-panel .friends-section { min-height: 260px; }
  .main-page .connections-panel .recent-match-grid { display: flex; }
}

/* Full-width Friends page with a separate Match history tab. */
.main-page .unified-chats { overflow-y: auto; }
.page-chats .unified-chats{scrollbar-width:none}
.page-chats .unified-chats::-webkit-scrollbar{display:none}
.page-chats .friends-full-panel>.connections-panel{scrollbar-width:none}
.page-chats .friends-full-panel>.connections-panel::-webkit-scrollbar{display:none}
.page-chats .unified-chats .screen-heading h1{font-size:clamp(38px,3.5vw,50px)}
.page-chats .unified-chats .screen-heading h1,
.page-match-history .unified-chats .screen-heading h1{color:#6b32e6;text-shadow:0 4px 16px rgba(19,6,50,.45)}
.page-chats .unified-chats .screen-heading p{font-size:14px;line-height:1.5}
.page-chats .unified-chats .search-box{width:min(360px,42vw);min-height:54px;padding:0 17px;gap:11px;border-radius:15px}
.page-chats .unified-chats .search-box>span{font-size:18px}
.page-chats .unified-chats .search-box input{font-size:14px}
.main-page .friends-page-tabs {
  position:relative;
  z-index:3;
  width:auto;
  height:auto;
  margin:0 0 12px auto;
  padding:5px;
  display:flex;
  justify-content:flex-end;
  gap:4px;
  border:1px solid rgba(205,226,169,.72);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(248,249,222,.97),rgba(224,239,190,.96));
  box-shadow:0 12px 30px rgba(0,28,14,.3),inset 0 1px rgba(255,255,255,.82);
}
.main-page .friends-page-tabs button {
  min-width:128px;
  min-height:52px;
  padding:0 21px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:11px;
  color:#174b34;
  background:transparent;
  box-shadow:none;
  font-size:15px;
  font-weight:850;
  line-height:1;
  text-align:center;
  cursor:pointer;
}
.main-page .friends-page-tabs button:last-child{min-width:180px}
.main-page .friends-page-tabs button:hover{color:#073522;background:rgba(19,126,77,.11)}
.main-page .friends-page-tabs button.active{color:#fff;background:linear-gradient(135deg,#7540eb,#5d2bd1);box-shadow:0 7px 18px rgba(72,31,164,.3),inset 0 1px rgba(255,255,255,.2)}
.main-page .friend-request-notification{min-width:25px;height:25px;padding:0 7px;display:grid;place-items:center;border-radius:999px;color:#fff;background:#f04452;box-shadow:0 0 0 3px rgba(240,68,82,.17);font-size:12px;font-weight:900}
.main-page .friend-request-notification[hidden]{display:none!important}
.main-page .friends-full-panel { height: calc(100% - 136px); min-height: 470px; }
.main-page .friends-full-panel > .connections-panel,
.main-page .match-history-panel {
  width: 100%;
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  border: 1px solid rgba(223, 233, 195, .76);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(255, 254, 240, .97), rgba(235, 240, 207, .96));
  box-shadow: var(--shadow-md);
}
.main-page .friends-full-panel > .connections-panel { display: block; }
.main-page .friends-full-panel .friends-section { display: block; min-height: 0; }
.main-page .friends-full-panel .friends-panel-actions{min-height:38px;margin-bottom:4px;justify-content:flex-end}
.main-page .friends-full-panel .connections-empty{padding:29px 18px;gap:7px;font-size:13px;line-height:1.45}
.main-page .friends-full-panel .connections-empty strong{font-size:17px}
.main-page .friends-full-panel .friends-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; overflow: visible; }
.main-page .friends-full-panel .friend-chat-row { min-height: 72px; padding: 11px 14px; }
.main-page .friends-full-panel .friend-chat-row .recent-match-name{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.main-page .friends-full-panel .friend-chat-row .recent-match-name>strong{width:100%;font-size:14px;line-height:1.1}
.main-page .friends-full-panel .friend-chat-row .ribbon-wallet{display:flex!important;align-items:center;justify-content:flex-start;gap:0}
.main-page .friends-full-panel .friend-chat-row .ribbon-count-item{width:32px;height:23px;flex:0 0 32px}
.main-page .friends-full-panel .friend-chat-row .rank-ribbon{left:2px;transform:scale(.32)}
.main-page .friends-full-panel .friend-chat-row .ribbon-count{left:16px;top:4px;font-size:8px}
.main-page .friends-full-panel .friend-chat-row .ribbon-name{display:none!important}
.main-page .friends-full-panel .friend-chat-row .recent-match-name,
.main-page .friends-full-panel .request-card .recent-match-name{flex-direction:row;align-items:flex-start;gap:10px}
.main-page .friends-full-panel .friend-chat-row .recent-match-name>strong{width:auto;flex:0 1 auto}
.main-page .friends-full-panel .friend-chat-row .ribbon-wallet,
.main-page .friends-full-panel .request-card .ribbon-wallet{position:relative;top:4px;left:6px;flex:0 0 auto}
.main-page .friends-full-panel .request-card .more-button{border:1px solid #ad292f;color:#fff;background:linear-gradient(135deg,#e54d55,#b8222c);box-shadow:0 6px 14px rgba(166,31,39,.2)}
.main-page .friends-full-panel .request-card .more-button:hover{background:linear-gradient(135deg,#d43d46,#9f1721)}
.main-page .friends-full-panel .requests-section { max-height: none; margin-top: 25px; padding-top: 22px; overflow: visible; border-top: 1px solid rgba(40, 91, 56, .14); }
.main-page .friends-full-panel [data-friends-page-panel][hidden]{display:none!important}
.main-page .friends-full-panel .requests-section{margin-top:0;padding-top:0;border-top:0}
.main-page .friends-full-panel .request-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.main-page .match-history-panel .recent-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; overflow: visible; }
.main-page .match-history-panel .recents-panel-actions{min-height:38px;margin-bottom:4px;justify-content:flex-end}
.main-page .match-history-panel .recent-match-card { width: auto; min-width: 0; padding: 16px !important; grid-template-columns: 50px minmax(0, 1fr); align-items:start; gap: 12px; }
.main-page .match-history-panel .recent-match-card > img { width: 44px; height: 44px; }
.main-page .match-history-panel .recent-match-name{min-height:48px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px}
.main-page .match-history-panel .recent-match-copy strong { font-size: 15px; line-height:1.2; }
.main-page .match-history-panel .recent-match-copy small { display: block; }
.main-page .match-history-panel .ribbon-count{font-size:12px}
.main-page .match-history-panel .ribbon-name{font-size:9px!important}
.main-page .match-history-panel .recent-match-stats{margin-top:9px;display:grid;gap:5px;color:#617567}
.main-page .match-history-panel .recent-match-stats span{display:block;overflow:hidden;font-size:12px;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}
.main-page .match-history-panel .recent-match-stats b{color:#173d2b;font-weight:900}
.main-page .match-history-panel .recent-match-card button,
.main-page .match-history-panel .recent-match-card .match-status { min-height: 40px; font-size: 12px; }
.page-match-history .unified-chats .screen-heading h1{font-size:clamp(38px,3.5vw,50px)}
.page-match-history .unified-chats .search-box{min-height:54px;font-size:14px}
.page-match-history .unified-chats .search-box input{font-size:14px}

@media (max-width: 800px) {
  .main-page .friends-page-tabs{width:100%;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .main-page .friends-page-tabs button,.main-page .friends-page-tabs button:last-child{min-width:0;min-height:48px;padding:0 8px;border-radius:11px;font-size:13px}
  .main-page .friends-full-panel { height: auto; min-height: calc(100svh - 210px); }
  .main-page .friends-full-panel > .connections-panel,
  .main-page .match-history-panel { min-height: calc(100svh - 210px); padding: 16px; }
  .main-page .friends-full-panel .friends-list,
  .main-page .friends-full-panel .request-list { grid-template-columns: 1fr; }
}
@media (min-width: 801px) {
  .page-chats .unified-chats{height:100%;min-height:0;overflow:hidden}
  .page-chats .friends-full-panel{height:calc(100% - 153px);min-height:0}
  .page-chats .friends-full-panel>.connections-panel{overflow-y:auto}
}
.main-page .match-search-form {
  position: relative;
  z-index: 20;
  grid-column: 1;
  width: min(500px, 100%);
  height: 64px;
  margin: 16px 0 0;
}
.main-page .find-button { width: 100%; height: 64px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 18px; font-size: 16px; }
.main-page .people-icon { font-size: 17px; }
.main-page .radius-label { grid-column: 1; margin: 13px 0 0; color: #f4f6df; text-align: center; font-size: 11px; text-shadow: var(--text-on-video); }
.main-page .radius-label strong { margin-left: 5px; color: #fff; }
.main-page #adjust-radius { grid-column: 1; justify-self: center; min-height: 36px; margin-top: 7px; padding: 0 13px; color: var(--jungle-800); border: 1px solid rgba(226, 236, 199, .78); border-radius: 10px; background: var(--cream-50); box-shadow: var(--shadow-sm); font-size: 10px; font-weight: 800; }
.main-page #adjust-radius span { display: inline-block; margin-left: 4px; transition: transform .18s ease; }
.main-page #adjust-radius.is-open span { transform: rotate(90deg); }
.main-page .discover-radius-panel { grid-column: 1; width: min(360px, 92%); margin: 10px auto 0; padding: 13px 16px 11px; color: #eef7dc; border: 1px solid rgba(218, 237, 190, .32); border-radius: 14px; background: rgba(2, 52, 31, .88); box-shadow: var(--shadow-sm); text-align: left; }
.main-page .discover-radius-panel[hidden] { display: none; }
.main-page .discover-radius-panel label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 800; }
.main-page .discover-radius-panel input { width: 100%; accent-color: #9be557; cursor: pointer; }
.main-page .discover-radius-scale { display: flex; justify-content: space-between; margin-top: 2px; color: #cbdabd; font-size: 8px; }
.main-page .discover-radius-panel small { display: block; min-height: 12px; margin-top: 4px; color: #dff6c2; font-size: 8px; text-align: center; }

/* Chats and friends. */
.page-chats, .page-friends, .chat-detail-page { --video-filter: saturate(1.12) contrast(1.1) brightness(.64); --video-overlay: linear-gradient(90deg, rgba(0, 28, 16, .55), rgba(0, 30, 16, .24) 60%, rgba(0, 19, 10, .38)); }
.main-page .list-screen {
  width: min(1180px, calc(100% - 48px));
  min-height: 100dvh;
  margin: 0 auto;
  padding: 88px 0 60px;
  color: var(--cream-50);
  background: transparent;
}
.main-page .screen-heading { min-height: 52px; margin-bottom: 22px; display: flex; align-items: center; gap: 18px; }
.main-page .screen-heading h1 { margin: 0; color: #fff; font-size: clamp(30px, 3vw, 43px); text-shadow: var(--text-on-video); }
.main-page .search-box {
  width: min(330px, 40vw);
  min-height: 44px;
  margin-left: auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(218, 233, 192, .65);
  border-radius: 13px;
  color: var(--jungle-900);
  background: rgba(255, 254, 240, .96);
  box-shadow: var(--shadow-sm);
}
.main-page .search-box input { width: 100%; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.main-page .header-action { margin-left: auto; width: 46px; color: var(--jungle-900); background: var(--cream-50); box-shadow: var(--shadow-sm); }
.main-page .friend-tabs {
  width: min(460px, 100%);
  height: 48px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid rgba(219, 232, 188, .74);
  border-radius: 15px;
  background: rgba(255, 254, 238, .95);
  box-shadow: var(--shadow-sm);
}
.main-page .friend-tabs a { border-radius: 11px; color: #3f6251; font-size: 12px; font-weight: 750; }
.main-page .friend-tabs a.active { color: #fff; background: linear-gradient(135deg, var(--jungle-600), var(--jungle-800)); }
.main-page .conversation-list,
.main-page .people-list,
.main-page .empty-state {
  width: 100%;
  margin: 0;
  padding: 12px 22px;
  overflow: hidden;
  border: 1px solid rgba(223, 233, 195, .76);
  border-radius: 22px;
  color: var(--ink);
  background: linear-gradient(145deg, var(--glass-strong), rgba(239, 241, 215, .97)) !important;
  box-shadow: var(--shadow-md);
}
.main-page .empty-state { min-height: 270px; display: grid; place-content: center; text-align: center; }
.main-page .empty-state span { color: var(--purple-600); font-size: 37px; }
.main-page .empty-state h2 { margin: 13px 0 7px; color: var(--jungle-900); font-size: 19px; }
.main-page .empty-state p { margin: 0; color: var(--ink-muted); font-size: 12px; }
.main-page .person-row { min-height: 76px; padding: 10px 5px; border-color: rgba(58, 98, 64, .15); color: var(--ink); }
.main-page .person-copy h2 { color: var(--jungle-900) !important; font-size: 13px; }
.main-page .person-copy p, .main-page .row-meta { color: var(--ink-muted) !important; font-size: 10px; }
.main-page .video-button, .main-page .more-button { min-height: 36px; padding: 0 12px; border-color: var(--line); color: var(--jungle-800); background: #fffef3; }
.main-page .video-button { color: #fff; background: var(--jungle-700); }
.main-page .recent-matches { margin-top: 28px; }
.main-page .recent-matches > h2 { margin: 0 0 5px; color: #fff; font-size: 21px; text-shadow: var(--text-on-video); }
.main-page .recent-matches > p { margin: 0 0 14px; color: #e3ecd6; font-size: 11px; text-shadow: var(--text-on-video); }
.main-page .recent-match-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 13px; }
.main-page .recent-match-card { padding: 14px; border-color: rgba(222, 232, 191, .82) !important; background: linear-gradient(145deg, #fffef0, #ecefce) !important; box-shadow: var(--shadow-sm); }
.main-page .recent-match-copy strong { color: var(--jungle-900) !important; }
.main-page .recent-match-copy small { color: var(--ink-muted) !important; }
.main-page .recent-match-card button { color: #fff; background: linear-gradient(135deg, var(--jungle-600), var(--jungle-800)); }

/* Profile. */
.page-profile { --video-filter: saturate(1.12) contrast(1.1) brightness(.62); --video-overlay: linear-gradient(90deg, rgba(0, 28, 16, .52), rgba(0, 30, 16, .17) 55%, rgba(0, 18, 10, .38)); }
.main-page .profile-screen { min-height: 100dvh; padding: 66px clamp(24px, 5vw, 74px) 50px; color: var(--cream-50); background: transparent; }
.main-page .profile-page-inner { width: min(1100px, 100%); margin: auto; }
.main-page .profile-page-heading { margin-bottom: 20px; text-align: left; }
.main-page .profile-page-heading h1 { color: #fff; font-size: clamp(31px, 3vw, 42px); text-shadow: var(--text-on-video); }
.main-page .profile-page-heading p { color: #e0ead7; text-shadow: var(--text-on-video); }
.main-page .profile-eyebrow { color: #d0baff; text-shadow: var(--text-on-video); }
.main-page .profile-hero-card,
.main-page .about-card,
.main-page .stats-card {
  color: var(--ink);
  border-color: rgba(224, 233, 194, .8) !important;
  background: radial-gradient(ellipse at 96% 6%, rgba(112, 157, 64, .1), transparent 27%), linear-gradient(145deg, var(--glass-strong), rgba(238, 241, 213, .97)) !important;
  box-shadow: var(--shadow-md) !important;
}
.main-page .profile-identity h2, .main-page .card-heading h2, .main-page .stats-grid strong { color: var(--jungle-900); }
.main-page .profile-details, .main-page .profile-distance, .main-page .about-card > p, .main-page .stats-grid span { color: var(--ink-muted) !important; }
.main-page .profile-status { color: var(--jungle-700); background: #e8f6d5; }
.main-page .profile-content-grid { gap: 18px; }
.main-page .profile-content-grid .logout-form { color: #e5eddb; text-shadow: var(--text-on-video); }
.main-page .logout-button { color: #9e2f35; border-color: rgba(210, 90, 94, .28); background: #fff2ed; }
.profile-editor-card { color: var(--ink); border: 1px solid rgba(216, 229, 187, .82); background: linear-gradient(145deg, #fffef0, #edf0d2); box-shadow: var(--shadow-lg); }
.profile-editor-header small, .profile-field > span, .photo-upload-button, .radius-editor output { color: var(--jungle-800); }
.profile-field small { color: var(--ink-muted); }
.profile-save-status { min-height: 20px; height: auto; color: var(--jungle-700); }

/* Landing page. */
.welcome-landing { --video-position: 55% 100%; --video-filter: saturate(1.16) contrast(1.08) brightness(.78); --video-overlay: linear-gradient(90deg, rgba(0, 29, 16, .26), rgba(0, 31, 17, .07) 52%, rgba(0, 18, 10, .19)); }
.welcome-landing .landing-page { min-height: 100dvh; }
.welcome-landing .landing-header { position: relative; z-index: 20; }
.welcome-landing .landing-brand img { width: clamp(190px, 15vw, 245px); filter: drop-shadow(0 4px 10px rgba(0, 20, 11, .35)); }
.welcome-landing .landing-copy,
.welcome-landing .call-preview,
.welcome-landing .trust-strip { border-color: rgba(225, 234, 194, .78); background: linear-gradient(145deg, rgba(255, 254, 239, .97), rgba(239, 241, 215, .95)); box-shadow: var(--shadow-lg); }
.welcome-landing .landing-copy { position: relative; }
.welcome-landing .landing-copy h1 { color: var(--jungle-900); }
.welcome-landing .landing-copy h1 span { color: var(--purple-600); }
.welcome-landing .landing-lead { color: #2f5945; }
.welcome-landing .landing-auth > p:first-child { color: var(--jungle-900); }
.welcome-landing .landing-header nav button { color: var(--jungle-900); background: var(--cream-50); }
.welcome-landing .landing-header nav a:last-child { color: #fff; background: linear-gradient(135deg, var(--purple-500), var(--purple-600)); }
.welcome-landing .person-label { color: #fff; background: rgba(3, 34, 20, .88); }
.welcome-landing .auth-legal { color: #415e51 !important; }

/* Authentication, onboarding, and form surfaces. */
.auth-page:not(.welcome-landing) { --video-filter: saturate(1.05) contrast(1.04) brightness(.8); --video-overlay: linear-gradient(90deg, rgba(2, 40, 23, .22), rgba(244, 247, 220, .5) 46%, rgba(249, 248, 228, .58)); }
.auth-page:not(.welcome-landing) .auth-screen { width: 100%; min-height: 100dvh; background: rgba(246, 248, 225, .76); backdrop-filter: blur(8px); }
.auth-page:not(.welcome-landing) .auth-heading h1 { color: var(--jungle-900); }
.auth-page:not(.welcome-landing) .auth-heading p, .auth-page:not(.welcome-landing) .login-copy, .secure-note { color: var(--ink-muted); }
.auth-page .form-logo { width: 184px; height: 78px; }
.verify-card, .capture-panel, .permission-card, .auth-form .input-row {
  border-color: rgba(65, 111, 74, .24) !important;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255, 254, 241, .98), rgba(238, 242, 217, .97)) !important;
  box-shadow: var(--shadow-sm) !important;
}
.verify-copy h2, .permission-copy strong { color: var(--jungle-900); }
.verify-copy p, .permission-copy small { color: var(--ink-muted); }
.verify-icon, .card-arrow { color: var(--purple-600); }
.auth-camera .capture-panel { box-shadow: var(--shadow-lg) !important; }
.auth-camera .capture-status { color: #365d49; background: rgba(255, 255, 244, .82); }
.auth-camera .capture-status.is-error { color: #9f202d; background: #fff0ed; }
.auth-camera .capture-status.is-warning { color: #805712; background: #fff8dd; }
.auth-camera .verification-metrics span { color: var(--ink-muted); background: #fffef3; }
.auth-camera .verification-metrics strong { color: var(--jungle-900) !important; }
.auth-camera #enable-camera { color: var(--jungle-800); background: linear-gradient(180deg, var(--cream-50), var(--cream-200)); }
.onboarding-page { --video-filter: saturate(1.08) contrast(1.06) brightness(.74); --video-overlay: linear-gradient(110deg, rgba(1, 34, 19, .34), rgba(241, 246, 218, .38) 50%, rgba(250, 249, 229, .54)); }
.onboarding-page .onboarding-shell { min-height: 100dvh; background: transparent; }
.onboarding-page .onboarding-intro { color: #fff; background: linear-gradient(145deg, rgba(2, 39, 23, .9), rgba(6, 78, 44, .7)); }
.onboarding-page .onboarding-intro h1, .onboarding-page .onboarding-intro p, .onboarding-page .onboarding-intro li { text-shadow: var(--text-on-video); }
.onboarding-page .onboarding-card { color: var(--ink); background: rgba(250, 252, 232, .92); }
.onboarding-page .setup-field > span, .onboarding-page .setup-field legend { color: var(--jungle-900); }
.onboarding-page .setup-field > small, .onboarding-photo > small { color: var(--ink-muted); }
.onboarding-page .progress-pill { color: var(--jungle-800); background: #e2f2c4; }

/* Searching, post-call, and chat detail. */
.state-searching.call-page { --video-filter: saturate(1.13) contrast(1.09) brightness(.58); --video-overlay: radial-gradient(circle at 50% 42%, rgba(3, 46, 25, .12), rgba(0, 21, 11, .58)); }
.state-searching .searching-screen {
  min-height: 100dvh;
  padding: clamp(58px, 8vh, 92px) 22px 30px;
  display: grid;
  grid-template-rows: auto minmax(220px, 40vh) 24px minmax(28px, auto) minmax(42px, auto) auto auto;
  align-content: center;
  color: #fff;
  background: transparent;
}
.state-searching .search-copy h1, .state-searching .search-copy p,
.state-searching .search-radius, .state-searching .call-status, .state-searching .search-help { text-shadow: var(--text-on-video); }
.state-searching .search-copy h1 { color: var(--cream-50); }
.state-searching .search-copy p, .state-searching .search-radius, .state-searching .call-status { color: #e5edd8; }
.state-searching .call-status, .state-searching .search-help { min-height: 28px; }
.state-searching .search-retry, .state-searching .cancel-button { justify-self: center; }
.postcall-screen { min-height: 100dvh; background: rgba(246, 248, 226, .82); backdrop-filter: blur(8px); }
.chat-detail-page .chat-screen { width: min(1000px, calc(100% - 48px)); height: calc(100dvh - 56px); margin: 28px auto; overflow: hidden; border: 1px solid rgba(223, 233, 195, .78); border-radius: 24px; background: rgba(249, 250, 232, .96); box-shadow: var(--shadow-lg); }
.chat-detail-page .chat-header { color: var(--ink); background: rgba(255, 254, 242, .96); }
.chat-detail-page .message-thread { background: linear-gradient(180deg, rgba(236, 242, 216, .82), rgba(248, 249, 232, .9)); }
.chat-detail-page .message-bubble.mine { color: #fff; background: var(--jungle-700); }
.chat-detail-page .message-bubble.theirs { color: var(--ink); background: #fffef4; }
.chat-detail-page .message-form { background: #f6f7df; }
.chat-detail-page .message-form button { color: #fff; background: var(--jungle-700); }

/* Motion and responsive composition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 1500px) {
  .main-page .bottom-nav { width: 252px; padding-inline: 20px; }
  .main-page .desktop-brand { left: 16px; width: 220px; }
  .main-page .main-content { margin-left: 252px; }
  .main-page .discover-screen { grid-template-columns: minmax(430px, .88fr) minmax(560px, 1.12fr); }
  .main-page .people-orbit { transform: translate(-5%, -3%) scale(.88) !important; }
}

@media (max-width: 1100px) and (min-width: 860px) {
  .main-page .discover-screen { grid-template-columns: minmax(330px, .95fr) minmax(340px, 1.05fr); gap: 26px; padding-inline: 28px; }
  .main-page .discover-copy { padding: 30px; }
  .main-page .discover-copy h1 { font-size: 41px; }
  .main-page .people-orbit { min-height: 360px; transform: translate(-3%, -4%) scale(.76) !important; }
}

@media (max-width: 859px) {
  :root { --video-position: 62% 50%; }
  .app-shell { overflow: clip; }
  .main-page .desktop-brand { display:none!important; }
  .main-page .main-content { margin: 0; padding-bottom: 0; }
  .main-page .bottom-nav {
    display:none!important;
  }
  .main-page .bottom-nav > a:not(.nav-account) { min-height: 57px; padding: 5px; flex-direction: column; justify-content: center; gap: 3px; font-size: 9px; }
  .main-page .bottom-nav > a.active { color: var(--jungle-950); }
  .main-page .nav-icon { width: auto; font-size: 18px; }
  .main-page .nav-account { display: none; }
  .main-page .settings-button { position: absolute; top: 18px; right: 17px; }
  .main-page .discover-screen { min-height: calc(100dvh - 76px); padding: 86px 18px 24px; display: flex; gap: 0; text-align: center; }
  .main-page .discover-copy { width: 100%; padding: 26px 22px; border-radius: 23px; }
  .main-page .discover-copy h1 { font-size: 33px; }
  .main-page .discover-copy p { font-size: 12px; }
  .main-page .people-orbit { width: 100%; height: 270px; min-height: 270px; margin: 8px auto 0; transform: scale(.82) !important; }
  .main-page .match-search-form { width: 100%; height: 56px; margin-top: auto; }
  .main-page .find-button { height: 56px; }
  .main-page .radius-label { color: #fff; }
  .main-page .list-screen { width: calc(100% - 28px); padding: 82px 0 24px; }
  .main-page .screen-heading { margin-bottom: 15px; }
  .main-page .screen-heading h1 { font-size: 29px; }
  .main-page .search-box { width: min(190px, 50vw); }
  .main-page .conversation-list, .main-page .people-list, .main-page .empty-state { padding: 9px 14px; border-radius: 18px; }
  .main-page .empty-state { min-height: 230px; }
  .main-page .profile-screen { padding: 77px 14px 24px; }
  .main-page .profile-content-grid { grid-template-columns: 1fr; }
  .chat-detail-page .chat-screen { width: 100%; height: calc(100dvh - 76px); margin: 0; border: 0; border-radius: 0; }
}

/* Compact account navigation replaces the persistent navigation rail. */
.mobile-account-menu{display:none}
.mobile-account-menu{
    position:fixed;
    z-index:80;
    top:max(14px,env(safe-area-inset-top));
    left:max(14px,env(safe-area-inset-left));
    display:block;
  }
  .mobile-account-toggle{
    width:48px;
    height:48px;
    padding:3px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(203,239,164,.55);
    border-radius:50%;
    color:#eaffca;
    background:rgba(3,54,32,.9);
    box-shadow:0 10px 28px rgba(0,24,12,.38);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    cursor:pointer;
  }
  .mobile-account-toggle img{width:38px;height:38px;border-radius:50%;object-fit:cover}
  .mobile-account-dropdown{
    position:absolute;
    top:58px;
    left:0;
    width:min(320px,calc(100vw - 28px));
    max-height:calc(100dvh - 90px);
    padding:10px;
    overflow:auto;
    border:1px solid rgba(190,224,157,.36);
    border-radius:20px;
    color:#eff8df;
    background:linear-gradient(155deg,rgba(5,66,40,.98),rgba(2,39,24,.99));
    box-shadow:0 24px 65px rgba(0,21,10,.5);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .mobile-account-dropdown[hidden]{display:none}
  .mobile-account-summary{display:flex;align-items:center;gap:11px;padding:7px 8px 12px;margin-bottom:5px;border-bottom:1px solid rgba(220,240,190,.15)}
  .mobile-account-summary img{width:42px;height:42px;border-radius:13px;object-fit:cover}
  .mobile-account-summary div{min-width:0;display:grid;gap:3px}
  .mobile-account-summary strong{overflow:hidden;color:#fffde9;font-size:18px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-account-summary small{color:#bcd1b8;font-size:14px}
  .mobile-account-dropdown>a,.mobile-account-dropdown form button{
    width:100%;
    min-height:48px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:11px;
    border:0;
    border-radius:12px;
    color:#dbe8d2;
    background:transparent;
    font-size:17px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }
  .mobile-account-dropdown>a span,.mobile-account-dropdown form button span{width:20px;color:#bde276;font-size:17px;text-align:center}
  .mobile-account-dropdown>a.active{color:#103a27;background:linear-gradient(135deg,#f5f7d9,#dcefb3)}
  .mobile-account-dropdown>a.active span{color:#17603e}
  .mobile-account-dropdown form{margin-top:5px;padding-top:5px;border-top:1px solid rgba(220,240,190,.15)}
  .mobile-account-dropdown form button{color:#ffd4cd}

@media(min-width:860px){
  .mobile-account-menu{top:18px;left:18px}
  .mobile-account-toggle{width:96px;height:96px;padding:6px}
  .mobile-account-toggle img{width:82px;height:82px}
  .mobile-account-dropdown{top:108px;width:300px}
}

.main-page .main-content{margin-left:0!important}

@media (max-width: 600px) {
  .welcome-landing { --video-position: 61% 50%; }
  .welcome-landing .landing-copy { background: rgba(255, 254, 239, .95); }
  .onboarding-page .onboarding-shell { display: block; }
  .onboarding-page .onboarding-intro { min-height: 330px; }
  .onboarding-page .onboarding-card { min-height: auto; padding: 34px 18px; }
  .onboarding-page .onboarding-grid { grid-template-columns: 1fr; }
  .onboarding-page .setup-field.full { grid-column: auto; }
  .auth-camera .capture-actions { grid-template-columns: 1fr; }
  .main-page .people-orbit .avatar-3 { right: 4%; }
  .main-page .people-orbit .avatar-4 { right: 13%; }
  .main-page .row-actions { flex-wrap: wrap; justify-content: flex-end; }
  .main-page .video-button, .main-page .more-button { min-height: 34px; padding-inline: 9px; font-size: 9px; }
}

/* Map-free Discover composition with an exact, deduplicated live count. */
.page-discover .discover-screen{
  min-height:100dvh;
  padding:88px clamp(28px,6vw,96px) 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  text-align:center;
}
.page-discover .discover-copy{
  width:min(540px,100%);
  margin:0 auto;
  transform:none!important;
}
.page-discover .match-search-form{
  width:min(540px,100%);
  margin:20px auto 0;
  transform:none!important;
}
.page-discover .radius-label,
.page-discover #adjust-radius{transform:none!important}
.page-discover .site-presence-banner,.page-chats .site-presence-banner,.page-match-history .site-presence-banner{
  position:fixed;
  z-index:35;
  top:23px;
  right:88px;
  min-width:220px;
  min-height:54px;
  padding:8px 13px;
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
  border:1px solid rgba(187,226,151,.36);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(4,75,43,.94),rgba(2,48,29,.96));
  box-shadow:0 13px 34px rgba(0,27,14,.35),inset 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.page-discover .site-presence-banner>i,.page-chats .site-presence-banner>i,.page-match-history .site-presence-banner>i{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:#9ce35a;
  box-shadow:0 0 0 5px rgba(156,227,90,.14);
  animation:presence-pulse 1.8s ease-in-out infinite;
}
.page-discover .site-presence-banner>span,.page-chats .site-presence-banner>span,.page-match-history .site-presence-banner>span{min-width:0;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.page-discover .site-presence-banner strong,.page-chats .site-presence-banner strong,.page-match-history .site-presence-banner strong{color:#e4ffb1;font-size:23px;line-height:1}
.page-discover .site-presence-banner small,.page-chats .site-presence-banner small,.page-match-history .site-presence-banner small{color:#edf7e6;font-size:10px;font-weight:750}
.page-discover .site-presence-banner>b,.page-chats .site-presence-banner>b,.page-match-history .site-presence-banner>b{margin-left:auto;padding:5px 7px;color:#093721;border-radius:7px;background:#c7f38d;font-size:8px;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:859px){
  .page-discover .discover-screen{min-height:calc(100dvh - 76px);padding:150px 18px 28px;justify-content:flex-start}
  .page-discover .discover-copy{padding:30px 24px!important}
  .page-discover .match-search-form{margin-top:16px}
  /* Discover's hero layout reserves generous top padding for this banner to
     sit centered above the fold. Friends/Recents have a normal list header
     up there instead, so they keep the compact corner pill (below) rather
     than this centered layout, to avoid overlapping their heading/search row. */
  .page-discover .site-presence-banner{
    position:absolute;
    top:82px;
    left:50%;
    right:auto;
    min-width:205px;
    min-height:48px;
    transform:translateX(-50%);
  }
  .page-discover .site-presence-banner strong{font-size:20px}
  .page-chats .site-presence-banner,.page-match-history .site-presence-banner{top:16px;right:14px;min-width:0;min-height:40px}
}

@media(max-width:420px){
  .page-discover .discover-screen{padding-top:142px}
  .page-discover .discover-copy{padding:26px 20px!important}
  .page-discover .discover-copy h1{font-size:31px}
  .page-discover .site-presence-banner{top:78px;min-width:196px}
}

/* Final live-map sizing and legibility refinements. Kept after the shared
   responsive rules so the map is not reduced by the former orbit artwork. */
@media (min-width: 111px) {
  .main-page .city-map-panel {
    width: min(100%, 720px);
    height: min(62vh, 590px);
    min-height: 500px;
    margin: -1vh auto 5vh;
    transform: translate(-1%, -2%) !important;
  }
  .main-page .city-map-heading span { font-size: 12px; }
  .main-page .city-map-heading small { font-size: 10px; }
  .main-page .map-signal-chip { font-size: 10.5px; }
  .main-page .home-city-summary > span { font-size: 9.5px; }
  .main-page .home-city-summary p { font-size: 11px; }
  .main-page .home-city-summary small { font-size: 10px; }
  .main-page .city-map-panel .presence-privacy { font-size: 10px; }
  .main-page .city-count-marker.is-home strong {
    position: absolute;
    top: 33px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
  }
  .main-page .city-count-marker.is-home span {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    margin: 0;
    font-size: 9px;
    text-align: center;
  }
  .main-page .find-button::before { display: none; }
  .main-page .find-button .people-icon { margin-right: 2px; }
}

@media (max-width: 1100px) and (min-width: 860px) {
  .main-page .city-map-panel { width: 100%; transform: translate(-1%, -2%) scale(.9) !important; }
}

@media (max-width: 859px) {
  .main-page .city-map-panel { height: 310px; min-height: 310px; margin: 10px auto 12px; transform: none !important; }
  .main-page .city-map-heading span { font-size: 10px; }
  .main-page .city-map-heading small { font-size: 8px; }
  .main-page .map-signal-chip { font-size: 8.5px; }
  .main-page .city-map-panel .presence-privacy { font-size: 7px; }
}

/* Final Discover hero: a clean, centered overlay with no card surface. */
.page-discover .discover-screen{width:100%!important;min-height:100dvh!important;padding:96px clamp(24px,5vw,72px) 48px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.page-discover .discover-copy{position:relative!important;width:min(720px,100%)!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important;background-image:none!important;box-shadow:none!important;transform:none!important}
.page-discover .discover-copy:after{content:none!important;display:none!important}
.page-discover .discover-copy:before{display:block!important;margin:0 0 16px!important;color:#c9ff86!important;font-size:10px!important;font-weight:900!important;letter-spacing:.22em!important;text-shadow:0 3px 14px rgba(0,24,12,.9)!important}
.page-discover .discover-copy h1{max-width:720px!important;margin:0 auto!important;color:#fffdec!important;font-family:Inter,Arial,sans-serif!important;font-size:clamp(48px,5.2vw,74px)!important;font-weight:850!important;line-height:1.01!important;letter-spacing:-.05em!important;text-wrap:balance!important;text-shadow:0 5px 22px rgba(0,25,13,.9),0 2px 3px rgba(0,25,13,.8)!important}
.page-discover .discover-divider{width:min(460px,72%)!important;margin:27px auto 20px!important}
.page-discover .discover-copy p{margin:0 auto!important;color:#f4f8e5!important;font-size:clamp(15px,1.25vw,19px)!important;font-weight:700!important;line-height:1.5!important;text-shadow:0 3px 13px rgba(0,24,12,.92)!important}
.page-discover .match-search-form{width:min(560px,100%)!important;margin:32px auto 0!important;transform:none!important}
.page-discover .radius-label{width:min(620px,100%)!important;margin:14px auto 0!important;transform:none!important;text-align:center!important}

@media(max-width:859px){
  .page-discover .discover-screen{min-height:calc(100dvh - 76px)!important;padding:136px 20px 108px!important;justify-content:center!important}
  .page-discover .discover-copy{padding:0!important}
  .page-discover .discover-copy h1{font-size:clamp(39px,12vw,56px)!important}
  .page-discover .discover-copy p{font-size:14px!important}
  .page-discover .discover-divider{margin:21px auto 16px!important}
  .page-discover .match-search-form{margin-top:25px!important}
}

/* Final profile composition overrides. */
.main-page .desktop-brand{display:none!important}
.page-profile .profile-page-inner{position:relative;width:min(1020px,100%);gap:0;align-content:center}
.page-profile .profile-page-heading{margin:0 0 18px}
.page-profile .profile-page-heading h1{margin:0;color:var(--purple-500);font-size:clamp(34px,3.2vw,48px);text-shadow:0 3px 18px rgba(0,24,12,.45)}
.page-profile .profile-page-heading h1:after{content:"";display:block;width:100%;height:3px;margin-top:9px;border-radius:999px;background:linear-gradient(90deg,var(--purple-500),rgba(115,65,236,0))}
.profile-page-tabs{position:relative;z-index:3;margin:0 24px -1px auto;display:flex;justify-content:flex-end;gap:7px}
.profile-page-tabs button{min-height:48px;padding:0 22px;border:2px solid rgba(115,65,236,.72);border-radius:12px 12px 0 0;color:#f3ebff;background:rgba(4,54,31,.9);box-shadow:0 8px 20px rgba(0,28,14,.2);font-size:14px;font-weight:850;cursor:pointer}
.profile-page-tabs button:hover,.profile-page-tabs button.active{color:#fff;background:linear-gradient(135deg,var(--purple-500),var(--purple-600))}
.page-profile .profile-workspace{border-radius:28px}
.page-profile .profile-live-preview{padding:38px 28px;justify-content:center}
.page-profile .profile-live-preview .profile-avatar-wrap{width:154px;height:154px;margin-bottom:20px}
.page-profile .profile-live-preview .photo-upload-button{margin-bottom:20px;padding:10px 16px;font-size:12px}
.page-profile .profile-live-preview .profile-identity h2{margin:0;font-size:30px;line-height:1.1}
.page-profile .profile-edit-heading{margin-bottom:20px}
.page-profile .profile-edit-heading h2{margin:0;color:var(--purple-600);font-size:24px}
.page-profile .profile-field>span{font-size:13px}
.page-profile .profile-field input,.page-profile .profile-field select{min-height:48px;font-size:13px}
.profile-earned-ribbons{padding-top:18px;border-top:1px solid rgba(77,113,70,.2)}
.profile-earned-ribbons h3{margin:0 0 12px;color:#365b43;font-size:15px;font-weight:750}
.profile-earned-ribbons>.ribbon-wallet{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.profile-earned-ribbons .ribbon-count-item{width:100%;height:138px;display:block}
.profile-earned-ribbons .rank-ribbon{left:50%;top:5px;transform:translateX(-50%) scale(1.8);transform-origin:top center}
.profile-earned-ribbons .ribbon-count{left:50%;top:auto;bottom:9px;transform:translateX(-50%);font-size:16px;text-align:center}
.profile-earned-ribbons .ribbon-name{bottom:0;font-size:9px!important}
.profile-settings-tabs{grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){
  .main-page .bottom-nav{padding:20px 14px 18px}
  .main-page .bottom-nav>.nav-account{order:-1;min-height:78px;margin:0 0 18px;padding:12px!important;grid-template-columns:1fr}
  .main-page .nav-account-identity{align-items:center;gap:11px}
  .main-page .nav-account img{width:48px;height:48px;border-radius:14px}
  .main-page .nav-account-copy{gap:5px}
  .main-page .nav-account strong{font-size:14px}
  .main-page .nav-account small{font-size:10px}
}
@media(max-width:859px){
  .page-profile .profile-page-inner{align-content:start}
  .page-profile .profile-page-heading{margin-bottom:14px}
  .page-profile .profile-page-heading h1{font-size:34px}
  .profile-page-tabs{margin:0 0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .profile-page-tabs button{min-height:44px;padding:0 7px;border-radius:12px;font-size:10px}
  .page-profile .profile-live-preview{min-height:320px;padding:28px 20px}
  .profile-earned-ribbons .ribbon-count-item{height:122px}
  .profile-earned-ribbons .rank-ribbon{transform:translateX(-50%) scale(1.55)}
}
/* Refined pre-verification profile setup. */
.auth-signup .auth-heading,.auth-signup .auth-form,.auth-signup .login-copy,.auth-signup_details .auth-heading,.auth-signup_details .auth-form,.auth-signup_details .login-copy{width:min(760px,calc(100% - 32px))!important}
.auth-signup_details{padding-top:42px!important;align-items:center}
.auth-signup_details .auth-heading{margin:0;padding:22px 30px 16px;border:1px solid rgba(34,96,55,.14);border-bottom:0;border-radius:24px 24px 0 0;background:rgba(255,255,248,.92);position:relative;z-index:2}
.auth-signup_details .auth-form{margin:0;padding:12px 30px 28px;border:1px solid rgba(34,96,55,.14);border-top:0;border-radius:0 0 24px 24px;background:rgba(255,255,248,.92);box-shadow:0 22px 55px rgba(5,55,30,.13);position:relative;z-index:2}
.auth-signup_details .login-copy{background:transparent!important;border:0!important;padding:14px 0 0!important}
.signup-profile-grid{gap:15px 14px}
.setup-input>span,.signup-photo-copy>span{font-size:10px;letter-spacing:.015em;color:#174a34}
.setup-input input,.setup-input select,.setup-input textarea{border-color:rgba(40,105,61,.22);background:#fffef4;transition:border-color .18s,box-shadow .18s}
.setup-input input:focus,.setup-input select:focus,.setup-input textarea:focus{outline:0;border-color:#36a868;box-shadow:0 0 0 3px rgba(54,168,104,.12)}
.location-setup-field{position:relative;z-index:4}.location-input-wrap{position:relative}.location-input-wrap input{padding-right:48px}.location-detect-button{position:absolute;right:5px;top:5px;width:34px;height:34px;border:0;border-radius:10px;color:#087446;background:#e4f5e9;font-size:18px;cursor:pointer}.location-detect-button:disabled{opacity:.5}.location-help{min-height:14px;color:#6a7c72;font-weight:500}.location-suggestions{position:absolute;z-index:20;left:0;right:0;top:68px;display:grid;padding:6px;border:1px solid #cfe2d4;border-radius:12px;background:#fff;box-shadow:0 16px 35px rgba(4,48,26,.16)}.location-suggestions[hidden]{display:none}.location-suggestions button{padding:10px 11px;border:0;border-radius:8px;text-align:left;color:#204c38;background:transparent;font-size:11px;cursor:pointer}.location-suggestions button:hover,.location-suggestions button:focus{outline:0;background:#eaf7ed}
.signup-photo{grid-template-columns:76px minmax(0,1fr);align-items:center;padding:12px!important;border-color:rgba(40,105,61,.18)!important;background:linear-gradient(135deg,#fffef7,#f1faef)!important}.signup-photo-preview{width:68px;height:68px;border-radius:18px;padding:3px;background:#fff;box-shadow:0 7px 18px rgba(4,55,29,.12)}.signup-photo-preview img{width:100%;height:100%;border-radius:15px;object-fit:cover;background:#e7f0e8}.signup-photo-copy{display:grid;gap:5px;min-width:0}.signup-photo-copy strong{font-size:12px;color:#103c29}.signup-photo input[type=file]{width:100%;padding:5px;border:1px dashed #bdd8c5;border-radius:9px;background:#fff}.signup-photo input[type=file]::file-selector-button{background:linear-gradient(135deg,#15915a,#087444)}
@media(max-width:620px){.auth-signup_details{padding-top:75px!important}.auth-signup_details .auth-heading,.auth-signup_details .auth-form{padding-left:18px;padding-right:18px}.signup-photo{grid-template-columns:58px minmax(0,1fr)}.signup-photo-preview{width:54px;height:54px;border-radius:15px}.signup-photo-preview img{border-radius:12px}}