/* Member screens in liquid glass, the same material as the Chats page.
   Applies when body.g-on is set (every signed-in screen). Loaded last. */
body.g-on {
  --gl-bg: linear-gradient(135deg, rgba(14,14,14,.62), rgba(14,14,14,.34) 55%, rgba(255,255,255,.13));
  --gl-bg-hi: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 60%, rgba(255,255,255,.12));
  --gl-line: rgba(255,255,255,.24);
  --gl-edge: inset 0 1.5px 0 rgba(255,255,255,.42);
  --gl-shadow: 0 14px 40px rgba(0,0,0,.42);
  --gl-blur: blur(24px) saturate(1.6);
}

/* the backdrop drifts slowly so the glass always has something to refract */
body.g-on .g-art .o1 { animation: glDrift1 26s ease-in-out infinite alternate; }
body.g-on .g-art .o2 { animation: glDrift2 32s ease-in-out infinite alternate; }
body.g-on .g-art .ring { animation: glRing 40s linear infinite; }
@keyframes glDrift1 { to { transform: translate3d(-60px, -90px, 0) scale(1.08); } }
@keyframes glDrift2 { to { transform: translate3d(70px, -60px, 0) rotate(40deg); } }
@keyframes glRing { to { transform: rotate(1turn); } }
body.g-on .g-art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); }

/* ---- every card surface becomes glass ---- */
body.g-on :is(.dcard, .tile, .row:not(.chat), .job, .inv-card, .ck-card, .ck-item, .acc-row, .acc-card, .acc-group, .warn-card, .req, .proj-pick, .opt, .fs, .card.c3, .lg, .lg-one, .bn, .cat, .herob, .svc2, .es-card, .es-ap, .es-trust, .es-warn, .es-break, .es-quote, .ms-card, .state, .d-empty) {
  background: var(--gl-bg);
  border: 1.5px solid var(--gl-line);
  box-shadow: var(--gl-shadow), var(--gl-edge);
  backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur);
}
/* glass inside glass stays light: no second blur, no second shadow */
body.g-on :is(.dcard, .acc-group, .es-card, .ms-card, .fs) :is(.row, .acc-row, .tile, .ck-item) { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--gl-edge); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
body.g-on .acc-group .acc-row { background: none; box-shadow: none; border-color: transparent; }
body.g-on :is(.dcard, .tile, .job, .inv-card, .card.c3, .opt) { border-radius: 22px; }
body.g-on :is(.row:not(.chat), .ck-item, .acc-row) { border-radius: 18px; }
body.g-on :is(.tile, .row:not(.chat), .job, .opt, .card.c3) { transition: transform .18s cubic-bezier(.2,.9,.3,1.2), border-color .2s, background .25s; }
body.g-on :is(.tile, .row:not(.chat), .job, .opt, .card.c3):hover { border-color: rgba(255,255,255,.62); background: var(--gl-bg-hi); }
body.g-on :is(.tile, .row:not(.chat), .job, .opt):active { transform: scale(.98); }

/* icon chips read as solid white keys on the glass */
body.g-on :is(.tile, .row, .opt) .ic { background: #fff; color: #000; border: 0; border-radius: 13px; box-shadow: 0 8px 20px -8px rgba(255,255,255,.55); }
body.g-on .row .ic.ok { background: #34d399; color: #04210f; }
body.g-on :is(.row, .tile, .dcard, .job) small, body.g-on .dcard p { color: #cfcfcf; }
body.g-on .sec { color: #e6e6e6; opacity: .78; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
body.g-on .d-head h1, body.g-on .d-head .sub, body.g-on .appbar { text-shadow: 0 2px 20px rgba(0,0,0,.6); }

/* ---- the greeting hero is the centrepiece ---- */
body.g-on .hero2 {
  background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 45%, rgba(14,14,14,.4));
  border: 1.5px solid rgba(255,255,255,.34);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7);
  border-radius: 28px;
}
body.g-on .hero2::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform: translateX(-120%); animation: glSheen 7s ease-in-out 1s infinite; }
@keyframes glSheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
body.g-on .hero2 { color: #fff; }
body.g-on .hero2::after { background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); }
body.g-on .hero2 .h-greet { color: #fff; } body.g-on .hero2 .h-greet svg { filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
body.g-on .hero2 .h-time { color: #c9c9c9; } body.g-on .hero2 .h-time b { color: #fff; }
body.g-on .hero2 h1 { color: #fff; font-size: 31px; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
body.g-on .hero2 h1 em { -webkit-text-fill-color: #fff; color: #fff; }
body.g-on .hero2 p { color: #d6d6d6; }
body.g-on .hero2 .h-chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); color: #f0f0f0; backdrop-filter: blur(8px); }
body.g-on .hero2 .h-chip.v { background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.45); color: #bae6fd; }

/* ---- stats: glass tiles with large figures ---- */
body.g-on .dstat { background: var(--gl-bg); border: 1.5px solid var(--gl-line); box-shadow: var(--gl-shadow), var(--gl-edge); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); border-radius: 20px; padding: 14px 8px; }
body.g-on .dstat b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.g-on .dstat .si { background: #fff; color: #000; box-shadow: 0 8px 20px -8px rgba(255,255,255,.55); }

/* ---- money cards ---- */
body.g-on .wallet { background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 50%, rgba(14,14,14,.45)); border: 1.5px solid rgba(255,255,255,.32); border-radius: 26px; box-shadow: 0 26px 60px -20px rgba(0,0,0,.7), inset 0 1.5px 0 rgba(255,255,255,.55); backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7); }
body.g-on .wallet > b { font-size: 34px; }

/* ---- banners, segments, search ---- */
body.g-on .banner { background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(14,14,14,.4)); border: 1.5px solid rgba(255,255,255,.45); border-radius: 20px; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); box-shadow: var(--gl-edge); }
body.g-on .segs { background: rgba(14,14,14,.45); border: 1.5px solid var(--gl-line); border-radius: 18px; padding: 4px; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); box-shadow: var(--gl-edge); }
body.g-on .segs button { background: transparent; border: 0; }
body.g-on .segs button.on { background: #fff; color: #000; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
body.g-on .search { background: var(--gl-bg); border: 1.5px solid var(--gl-line); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); box-shadow: var(--gl-edge); }
body.g-on .bell, body.g-on .icon-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.g-on .skel { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; border: 1px solid rgba(255,255,255,.12); }

/* ---- the bottom bar floats as a glass dock ---- */
body.g-on .nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 8px 10px; border-radius: 26px; border: 1.5px solid rgba(255,255,255,.26); border-top-color: rgba(255,255,255,.4); background: rgba(12,12,12,.84); backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7); box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.35); }
body.g-on .nav button.on { color: #fff; }
body.g-on .nav button.on .ni { background: rgba(255,255,255,.16); border-radius: 12px; padding: 4px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
body.g-on .nav button.on .ni::after { display: none; }
body.g-on .screen { padding-bottom: calc(var(--nav-h, 64px) + 44px + env(safe-area-inset-bottom)); }
body.g-on.hide-nav .screen { padding-bottom: 40px; }
body.g-on .sidebar { background: rgba(14,14,14,.5); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border-right: 1.5px solid rgba(255,255,255,.18); box-shadow: inset -1px 0 0 rgba(255,255,255,.08); }
body.g-on .sidebar button.on { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); border-radius: 14px; }

/* sheets slide up in the same material */
body.g-on .sheet { background: rgba(22,22,22,.72); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); border-top: 1.5px solid rgba(255,255,255,.3); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4); }

/* cards arrive with a short rise when a screen opens */
body.g-on .screen.active :is(.hero2, .dstats, .tiles, .dcard, .wallet) { animation: glIn .55s cubic-bezier(.16,1,.3,1) both; }
body.g-on .screen.active .dstats { animation-delay: .05s; } body.g-on .screen.active .tiles { animation-delay: .1s; }
@keyframes glIn { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  body.g-on .g-art :is(.o1, .o2, .ring), body.g-on .hero2::before, body.g-on .screen.active * { animation: none !important; }
}

/* profile header card and empty states */
body.g-on .acc2 { background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 45%, rgba(14,14,14,.45)); border: 1.5px solid rgba(255,255,255,.3); border-radius: 28px; box-shadow: 0 26px 60px -20px rgba(0,0,0,.7), inset 0 1.5px 0 rgba(255,255,255,.5); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); overflow: hidden; }
body.g-on .acc2 .a-cover::after { background: linear-gradient(180deg, transparent, rgba(14,14,14,.55)); }
body.g-on .acc2 .tags span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(8px); }
body.g-on :is(.state, .d-empty) { border-radius: 22px; }

/* marketplace photo badges read over any photo */
body.g-on :is(.mk-n, .mk-v) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---- members' page: the landing's drawing behind it, a section heading, and the
   member cards with a cover photo (same layout as the app's Home) ---- */
#screen-directory .dir-bg { z-index: 0; }
#screen-directory .dir-bg svg { height: calc(100% + 160px); transform: translateY(calc(-1 * var(--y, 0px))); }
#screen-directory > .wrap { position: relative; z-index: 1; }
/* open, not boxed: the console sits straight on the page drawing */
.dir-head { position: relative; margin: 18px 2px 18px; }
.dh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dh-live { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #a3a3a3; }
.dh-live i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.dh-live i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); animation: dh-ping 1.8s ease-out infinite; }
@keyframes dh-ping { to { inset: -5px; opacity: 0; } }
.dh-top b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dir-head h2 { margin: 14px 0 18px; font-size: 27px; line-height: 1.08; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.dir-head h2 span { color: #8a8a8a; }
.seg { --at: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 62px; padding: 4px; border-radius: 18px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }
.seg .seg-hl { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: 14px; background: #fff; box-shadow: 0 6px 24px -8px rgba(255,255,255,.4);
  transform: translateX(calc(var(--at) * 100%)); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.seg button { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0 2px; transition: color .2s; }
.seg button b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.seg button span { max-width: 100%; font-size: 10.5px; font-weight: 600; color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.seg button.on { color: #000; } .seg button.on span { color: #3a3a3a; }
.dh-meter { margin-top: 16px; }
.dh-mrow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #bdbdbd; }
.dh-mrow b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.dh-bar { margin-top: 8px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.dh-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.5); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.search.dh-search { margin: 16px 0 0; height: 50px; border-radius: 16px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); }
.dh-found { flex: none; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.12); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .dh-live i::after { animation: none; } .seg .seg-hl, .dh-bar i { transition: none; } }

.card.c3.m4, body.g-on .card.c3.m4 { padding: 0; overflow: hidden; border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%, rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 24px 50px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(9px) saturate(1.3); -webkit-backdrop-filter: blur(9px) saturate(1.3); }
.m4 .m-head { position: relative; height: 158px; }
.m4 .m-cover { position: absolute; inset: 0 0 34px; background: #1a1a1a center/cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.m4 .m-cover.none { background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.05)); display: flex; align-items: center; justify-content: flex-end; padding-right: 22px; }
.m4 .m-cover.none span { font-size: 76px; font-weight: 800; letter-spacing: -.06em; color: rgba(255,255,255,.08); }
.m4 .t-kind { position: absolute; top: 12px; right: 12px; margin: 0; padding: 5px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.m4 .t-av { position: absolute; left: 16px; bottom: 0; width: 66px; height: 66px; border-radius: 19px; font-size: 22px; box-shadow: 0 0 0 3px #0b0b0b, 0 8px 20px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.28); }
.m4 .m-joined { position: absolute; right: 16px; bottom: 6px; font-size: 11.5px; color: #9a9a9a; }
.m4 .m-body { padding: 12px 16px 16px; }
.m4 h3 { display: flex; align-items: center; gap: 6px; font-size: 18px; letter-spacing: -.02em; }
.m4 h3 > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4 .t-tag { font-size: 13px; font-weight: 600; }
.m4 .desc { margin-top: 10px; font-size: 13.5px; color: #c4c4c4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m4 .m-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.m4 .m-facts div { min-width: 0; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.m4 .m-facts b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4 .m-facts span { display: block; font-size: 11px; color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4 .t-trust { border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 9px 12px; }