/* =================================================================
   THEME — colours live here. --brand is set from config.js.
   ================================================================= */
:root { 
  --brand: #C8202F;
  --brand-ink: #fff; 
  --bg: #F2F3F6; 
  --card: #FFFFFF;
  --ink: #12151C; 
  --muted: #5F6778;
  --line: #E1E4EA;
  --hover: #EDEFF3;
  --soft: color-mix(in srgb, var(--brand) 12%, var(--card));
  --danger: #C62F2F;
  --like: #E0245E;
  --ok: #188A4E;
  --r: 14px;
  --shadow: 0 1px 2px rgba(18, 21, 28, .08), 0 0 0 1px rgba(18, 21, 28, .04);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Manrope", "Inter", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1115; --card: #181B22; --ink: #E8EAEF; --muted: #9AA2B2; --line: #2A2F3A; --hover: #222731;
    --danger: #FF7B72; --like: #FF5C8A; --ok: #4CD08A; --shadow: 0 0 0 1px #262B35; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1115; --card: #181B22; --ink: #E8EAEF; --muted: #9AA2B2; --line: #2A2F3A; --hover: #222731;
  --danger: #FF7B72; --like: #FF5C8A; --ok: #4CD08A; --shadow: 0 0 0 1px #262B35; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.btn:focus-visible, .pill:focus-visible { outline-offset: 3px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.ico { display: inline-grid; place-items: center; flex: none; }
.ico svg { width: 1.3em; height: 1.3em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =================================================================
   LAYOUT
   ================================================================= */
.app { display: grid; grid-template-columns: 250px minmax(0, 620px) 330px; gap: 28px; justify-content: center; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.nav, .rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 16px 0 24px; }
.nav { padding-left: 6px; padding-right: 6px; }
.nav { padding-left: 6px; padding-right: 6px; } /* room so focus rings aren't clipped */
.main { min-width: 0; padding: 16px 0 96px; }
.topbar { display: none; }
.tabbar { display: none; }

@media (max-width: 1140px) { .app { grid-template-columns: 84px minmax(0, 620px) 300px; gap: 20px; } .nav .label, .nav .me-card .who, .nav .brand-name { display: none; } .nav .compose-btn span:last-child { display: none; } .nav .compose-btn { width: 52px; height: 52px; padding: 0; border-radius: 50%; display: flex; margin-left: auto; margin-right: auto; } .nav a.item, .nav .brand, .nav .me-card { justify-content: center; } .nav .brand { padding-left: 0; padding-right: 0; } }
@media (max-width: 960px) { .app { grid-template-columns: 84px minmax(0, 1fr); } .rail { display: none; } }
@media (max-width: 640px){
  .app { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .nav { display: none; }
  .main { padding: 8px 0 calc(84px + env(safe-area-inset-bottom, 0px)); }
  .topbar { display: flex; position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; align-items: center; justify-content: space-between; gap: 8px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; }
  .tabbar a { position: relative; display: grid; place-items: center; width: 56px; height: 44px; border-radius: 12px; color: var(--muted); font-size: 1.1rem; }
  .tabbar a[aria-current="page"] { color: var(--brand); }
  .tabbar a.plus { background: var(--brand); color: var(--brand-ink); }
  .card, .page-head { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); margin-bottom: 0 !important; }
}

/* ---------- left nav ---------- */
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.logo { width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 800 1rem/1 var(--display); letter-spacing: -.02em; flex: none; }
.brand-name { font: 800 1.12rem/1.1 var(--display); letter-spacing: -.02em; }
.nav a.item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-size: 1.05rem; position: relative; }
.nav a.item:hover { background: var(--hover); text-decoration: none; }
.nav a.item[aria-current="page"] { font-weight: 700; }
.nav a.item[aria-current="page"] .ico { color: var(--brand); }
.badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; }
.nav .badge, .tabbar .badge { position: absolute; top: 4px; left: 30px; }
.tabbar .badge { left: 32px; top: 2px; }
   
   /* Post button: styled like a nav row so "+" lines up with the icons and "Post" with the labels */
   .nav .compose-btn.btn { margin: 12px 0; width: 100%; justify-content: flex-start; gap: 14px; padding: 10px 12px; font-size: 1.05rem; font-weight: 400; border-radius: 12px; background: none; color: var(--ink); }
.nav .compose-btn.btn:hover { background: var(--hover); filter: none; }
.nav .compose-btn.btn:focus-visible { outline: none; background: var(--hover); }
   @media (max-width: 1140px) { .nav .compose-btn.btn { width: 52px; height: 52px; padding: 0; border-radius: 50%; margin: 12px auto; justify-content: center; gap: 0; } }
.me-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; color: var(--ink); margin-top: 8px; }
.me-card:hover { background: var(--hover); text-decoration: none; }
.me-card .who { min-width: 0; }
.me-card .who b, .me-card .who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- right rail ---------- */
.rail .searchbox { position: sticky; top: 0; background: var(--bg); padding-bottom: 12px; z-index: 2; }
.searchbox label { display: flex; align-items: center; gap: 8px; background: var(--card); box-shadow: var(--shadow); border-radius: 999px; padding: 0 14px; height: 44px; color: var(--muted); }
.searchbox input { border: 0; background: none; outline: none; width: 100%; color: var(--ink); }
.rail h3 { font: 800 1.05rem/1.2 var(--display); margin: 0 0 10px; }
.rail .person .btn .lbl { display: none; }
.rail .person .btn.sm { padding: 7px 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); padding: 4px 6px; }
.footer-links a { color: var(--muted); }

/* =================================================================
   COMPONENTS
   ================================================================= */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; }
.page-head { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.page-head h1 { font: 800 1.35rem/1.2 var(--display); margin: 0; letter-spacing: -.01em; flex: 1; }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 -16px; }
.tabs button { flex: 1; background: none; border: 0; padding: 12px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs button:hover { background: var(--hover); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }

.btn { border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 700; background: var(--hover); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:hover { filter: brightness(.96); text-decoration: none; }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.outline { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.danger { background: none; color: var(--danger); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.sm { padding: 6px 14px; font-size: .88rem; }
.btn.lg { padding: 13px 22px; font-size: 1.02rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: inline-grid; place-items: center; flex: none; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.linkish { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 600; }

.av { border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; color: #fff; font-weight: 700; flex: none; background: var(--hover); font-family: var(--display); }
.av img { width: 100%; height: 100%; object-fit: cover; }

.inp { width: 100%; border: 1.5px solid var(--line); background: var(--card); border-radius: 10px; padding: 10px 12px; outline: none; }
.inp:focus { border-color: var(--brand); }
textarea.inp { resize: vertical; min-height: 90px; }
.field { margin-bottom: 14px; }
.field > label, .field > .lbl { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; }
.field .hint { font-weight: 400; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
.err { color: var(--danger); font-size: .9rem; min-height: 1.2em; margin-top: 6px; }
.prefix { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding-left: 12px; background: var(--card); }
.prefix:focus-within { border-color: var(--brand); }
.prefix span { color: var(--muted); }
.prefix input { border: 0; outline: none; background: none; padding: 10px 12px 10px 2px; width: 100%; }

/* ---------- composer ---------- */
.composer { display: flex; gap: 12px; }
.composer .body { flex: 1; min-width: 0; }
.composer textarea { width: 100%; border: 0; outline: none; background: none; resize: none; font-size: 1.12rem; min-height: 56px; padding: 8px 0; }
.composer .bar { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.composer .bar .icon-btn { color: var(--brand); }
.composer .count { margin-left: auto; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.composer .count.over { color: var(--danger); font-weight: 700; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
.thumbs .t { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--hover); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: .9rem; display: grid; place-items: center; }

/* ---------- posts ---------- */
.post { padding: 14px 16px 6px; }
.post .hd { display: flex; gap: 10px; align-items: flex-start; }
.post .hd .who { flex: 1; min-width: 0; line-height: 1.3; }
.post .hd .who a.name { color: var(--ink); font-weight: 700; }
.post .hd .sub { color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post .hd .sub a { color: var(--muted); }
.post .headline { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-text { margin: 10px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; }
.post-text a { font-weight: 500; }
.gallery { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; margin: 8px 0; background: var(--line); }
.gallery.n1 { grid-template-columns: 1fr; }
.gallery.n2, .gallery.n4 { grid-template-columns: 1fr 1fr; }
.gallery.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery.n3 button:first-child { grid-row: span 2; }
.gallery button { border: 0; padding: 0; background: var(--hover); display: block; aspect-ratio: 4/3; overflow: hidden; }
.gallery.n1 button { aspect-ratio: auto; max-height: 560px; }
.gallery.n3 button { aspect-ratio: auto; min-height: 140px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery.n1 img { max-height: 560px; }
.actions { display: flex; gap: 4px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.actions button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; background: none; border: 0; padding: 8px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: .92rem; }
.actions button:hover { background: var(--hover); }
.actions button.liked { color: var(--like); }
.actions button.liked svg { fill: currentColor; }
.comments { border-top: 1px solid var(--line); padding: 10px 0 8px; }
.cmt { display: flex; gap: 8px; margin-bottom: 10px; }
.cmt .bubble { background: var(--bg); border-radius: 14px; padding: 8px 12px; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.cmt .bubble a.name { color: var(--ink); font-weight: 700; font-size: .88rem; display: block; }
.cmt .meta { font-size: .78rem; color: var(--muted); padding: 2px 12px; display: flex; gap: 10px; }
.cmt .meta button { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 600; }
.cmt-form { display: flex; gap: 8px; align-items: center; }
.cmt-form input { flex: 1; min-width: 0; border: 0; background: var(--bg); border-radius: 999px; padding: 9px 14px; outline: none; }

.pop { position: absolute; z-index: 60; background: var(--card); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px var(--line); padding: 6px; min-width: 190px; }
.pop button { display: flex; width: 100%; gap: 10px; align-items: center; background: none; border: 0; padding: 10px 12px; border-radius: 8px; text-align: left; font-weight: 500; }
.pop button:hover { background: var(--hover); }
.pop button.danger { color: var(--danger); }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty b { display: block; color: var(--ink); font: 800 1.15rem/1.3 var(--display); margin-bottom: 4px; }
.loading { text-align: center; color: var(--muted); padding: 28px; }
.more { display: block; margin: 8px auto 20px; }

/* ---------- people rows ---------- */
.person { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.person + .person { border-top: 1px solid var(--line); }
.person .who { flex: 1; min-width: 0; line-height: 1.3; }
.person .who a { color: var(--ink); font-weight: 700; }
.person .who .sub { color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .btns { display: flex; gap: 6px; flex: none; }
.section-title { font: 800 1.05rem/1.2 var(--display); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }

/* ---------- profile ---------- */
.profile { padding: 0; overflow: hidden; }
.cover { height: 200px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 40%, #000)); background-size: cover; background-position: center; }
.profile .top { padding: 0 20px 16px; }
.profile .row1 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: -56px; gap: 12px; flex-wrap: wrap; }
.profile .row1 .av { border: 4px solid var(--card); }
.profile .row1 .btns { display: flex; gap: 8px; padding-bottom: 6px; flex-wrap: wrap; }
.profile h1 { font: 800 1.6rem/1.15 var(--display); margin: 10px 0 0; letter-spacing: -.02em; overflow-wrap: anywhere; }
.profile .handle { color: var(--muted); }
.profile .headline { font-size: 1.02rem; margin-top: 6px; }
.profile .bio { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile .facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .9rem; margin-top: 10px; }
.profile .facts span, .profile .facts a { display: inline-flex; align-items: center; gap: 5px; }
.profile .stats { display: flex; gap: 18px; margin-top: 10px; }
.profile .stats button { background: none; border: 0; padding: 0; color: var(--muted); }
.profile .stats b { color: var(--ink); }
.profile .tabs { margin: 0; }
@media (max-width: 640px) { .cover { height: 140px; } .profile .row1 { margin-top: -44px; } }

/* ---------- messages ---------- */
.dm { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - 32px); padding: 0; overflow: hidden; }
.dm .list { border-right: 1px solid var(--line); overflow-y: auto; }
.dm .list .hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.dm .list .hd h1 { font: 800 1.25rem/1 var(--display); margin: 0; }
.chat-row { display: flex; gap: 10px; align-items: center; padding: 10px 14px; color: var(--ink); }
.chat-row:hover { background: var(--hover); text-decoration: none; }
.chat-row[aria-current="page"] { background: var(--soft); }
.chat-row .who { flex: 1; min-width: 0; }
.chat-row .who b, .chat-row .who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row .who span { color: var(--muted); font-size: .86rem; }
.chat-row.unread .who span { color: var(--ink); font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; }
.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.thread .hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.thread .hd a { color: var(--ink); }
.msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.msg { max-width: 75%; padding: 8px 13px; border-radius: 18px; background: var(--hover); align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.msg.mine { align-self: flex-end; background: var(--brand); color: var(--brand-ink); }
.msg.mine a { color: inherit; text-decoration: underline; }
.msg-time { align-self: center; font-size: .75rem; color: var(--muted); margin: 10px 0 4px; }
.thread form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.thread textarea { flex: 1; resize: none; border: 0; background: var(--bg); border-radius: 20px; padding: 10px 14px; outline: none; max-height: 140px; min-height: 42px; }
.thread-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 20px; }
@media (max-width: 760px) {
  .dm { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .dm.has-thread .list { display: none; }
  .dm:not(.has-thread) .thread { display: none; }
}

/* ---------- notifications ---------- */
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; color: var(--ink); border-bottom: 1px solid var(--line); }
.notif:hover { background: var(--hover); text-decoration: none; }
.notif.unread { background: var(--soft); }
.notif .ico { color: var(--brand); margin-top: 8px; }
.notif .txt { flex: 1; min-width: 0; }
.notif .snip { color: var(--muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- modal, toast, lightbox ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(8, 10, 14, .55); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--card); border-radius: 18px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.modal .mh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font: 800 1.1rem/1.2 var(--display); position: sticky; top: 0; background: var(--card); z-index: 1; }
.modal .mh span { flex: 1; }
.modal .mb { padding: 16px; }
.modal .mf { display: flex; gap: 8px; justify-content: flex-end; padding: 0 16px 16px; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 24px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.lightbox button { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; background: rgba(255,255,255,.15); color: #fff; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); z-index: 100; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-weight: 600; opacity: 0; transition: .2s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- auth + onboarding ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 520px) 400px; gap: 64px; align-items: center; justify-content: center; padding: 40px 20px; }
.auth .pitch .logo { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 18px; margin-bottom: 22px; }
.auth .pitch h1 { font: 800 clamp(2.2rem, 5vw, 3.4rem)/1.02 var(--display); letter-spacing: -.035em; margin: 0 0 16px; }
.auth .pitch p { font-size: 1.15rem; color: var(--muted); margin: 0; max-width: 28em; }
.auth .box { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 22px; }
.auth .box .inp { padding: 12px 14px; margin-bottom: 10px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 14px 0; font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.google { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
@media (max-width: 880px) { .auth { grid-template-columns: minmax(0, 420px); gap: 28px; } }
.preview-bar { background: #FFF1C2; color: #5A4300; text-align: center; font-size: .84rem; padding: 7px 12px; }
.preview-bar button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font-weight: 600; }
.center-page { max-width: 560px; margin: 40px auto; padding: 0 16px; }
.photo-pick { display: flex; align-items: center; gap: 14px; }
.cover-pick { height: 110px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 40%, #000)); background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.report { padding: 12px 0; border-bottom: 1px solid var(--line); }

/* =================================================================
   LOGIN PAGE (big headline left, big logo right)
   ================================================================= */
.logo-img { background: none !important; border-radius: 0; object-fit: contain; }
.xauth { min-height: calc(100vh - 60px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; max-width: 1280px; margin: 0 auto; padding: 40px 56px 16px; }
.xauth-art { order: 2; display: grid; place-items: center; }
.xauth-art img { width: min(100%, 440px); height: auto; filter: drop-shadow(0 28px 50px color-mix(in srgb, var(--brand) 30%, transparent)); }
.xauth-main { order: 1; }
.xauth h1 { font: 800 clamp(2.2rem, 9vw, 2.6rem)/.98 var(--display); letter-spacing: -.045em; margin: 0 0 40px; white-space: nowrap; max-width: 380px; }
.xauth h1::after { white-space: normal; }
.xauth h2 { font: 800 1.85rem/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 24px; }
.xauth-form { max-width: 380px; }
.xauth .inp { padding: 14px 14px; font-size: 1rem; margin-bottom: 12px; border-radius: 8px; }
.xauth-form > .pill.light { margin-bottom: 12px; }
.xauth .err:empty { display: none; }
.pill { width: 100%; border: 0; border-radius: 999px; padding: 13px 20px; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pill.dark { background: var(--ink); color: var(--card); }
.pill.dark:hover:not(:disabled) { filter: brightness(1.25); }
.pill.dark:disabled { background: var(--line); color: var(--muted); cursor: default; }
.pill.light { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.pill.light:hover { background: var(--hover); }
.consent { margin: 16px 0 0; line-height: 1.5; }
.consent a { color: var(--ink); font-weight: 600; }
.xauth-swap { margin: 28px 0 0; font-weight: 500; }
.xauth-mobile-logo { display: none; }
.xauth-foot .footer-links { justify-content: center; margin: 0 !important; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) {
  .xauth { grid-template-columns: minmax(0, 420px); justify-content: center; padding: 32px 24px 8px; gap: 0; min-height: auto; }
  .xauth-art { display: none; }
  .xauth-mobile-logo { display: block; margin-bottom: 32px; }
  .xauth h1 { margin-bottom: 28px; }
}

   /* Login page: fit the screen and hide the scroll bar (other pages unchanged) */
   .xauth { min-height: calc(100vh - 110px); }
   html:has(.xauth) { scrollbar-width: none; }
   html:has(.xauth)::-webkit-scrollbar { display: none; }

      /* Menu icons in chrome to match the logo */
   .nav a.item .ico svg, .nav .compose-btn .ico svg { stroke: url(#armourGold); stroke-width: 2.4; filter: drop-shadow(0 0 .6px #14171B) drop-shadow(.6px .8px 0 #3C424A); }
   /* Logo: just the G, lined up with the menu icons */
   .nav .brand { padding: 4px 0 18px 5px; }

      /* Menu icons: plain dark in light mode, red in dark mode (no chrome) */
   .nav a.item .ico svg, .nav .compose-btn .ico svg { stroke: currentColor !important; filter: none !important; stroke-width: 2; }
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav a.item .ico, :root:not([data-theme="light"]) .nav .compose-btn .ico { color: #1DA1F2; } }
   :root[data-theme="dark"] .nav a.item .ico, :root[data-theme="dark"] .nav .compose-btn .ico { color: #E8262F; }

/* Verified badge: gold check + mini logo, right after the name */
.verified { display: inline-flex; gap: .18em; margin-left: .22em; vertical-align: -.2em; flex: none; }
.verified svg { width: 1.15em; height: 1.15em; display: block; }

/* Small screens: like X — big logo on top, centred headline, then the buttons */
@media (max-width: 900px) {
  .xauth { grid-template-columns: minmax(0, 560px); justify-content: center; padding-top: 48px; }
  .xauth-art { display: none; }
  .xauth-main { text-align: center; }
  .xauth-mobile-logo { display: flex; justify-content: center; margin-bottom: 20px; }
  .xauth h1 { font-size: clamp(1.8rem, 8vw, 3.6rem); margin-top: 0; margin-bottom: 56px; }
  .xauth h2 { display: none; }
  .xauth-form { margin: 0 auto; max-width: 440px; }
}
/* Keep the badge on the same line in message lists */
.chat-row .who .verified { display: inline-flex; }

/* Tagline under "The future is now." on the login page */
.xauth h1::after { content:"Social is live. Test it today."; display: block; font: 500 1.1rem/1.5 var(--font); letter-spacing: 0; color: var(--muted); margin-top: 14px; text-wrap: balance; }

/* Hide "Join today." on the login page (all screen sizes) */
.xauth h2 { display: none; }

/* ===== Meetups ===== */
.mt-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.mt-chip { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.mt-chip:hover { background: var(--hover); text-decoration: none; }
.mt-chip.on { background: var(--brand); color: var(--brand-ink); }
.mt-card { display: flex; gap: 14px; color: var(--ink); }
.mt-card:hover { text-decoration: none; background: var(--hover); }
.mt-date { flex: none; width: 56px; border-radius: 12px; overflow: hidden; text-align: center; border: 1px solid var(--line); align-self: flex-start; background: var(--card); }
.mt-date .m { display: block; background: var(--brand); color: var(--brand-ink); font-size: .75rem; font-weight: 700; padding: 3px 0; }
.mt-date .d { display: block; font: 800 1.4rem/1.3 var(--display); padding: 2px 0 4px; }
.mt-body { flex: 1; min-width: 0; }
.mt-when { color: var(--brand); font-weight: 700; font-size: .85rem; }
.mt-when.big { font-size: 1rem; margin: 10px 0 4px; }
.mt-title { font: 800 1.1rem/1.3 var(--display); margin: 2px 0; overflow-wrap: anywhere; }
.mt-going { display: flex; align-items: center; margin-top: 8px; }
.mt-going .av { margin-right: -6px; border: 2px solid var(--card); }
.mt-going .muted { margin-left: 14px; }
.mt-tag { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--brand); }
.mt-facts { display: flex; gap: 6px; align-items: center; color: var(--muted); margin-bottom: 6px; }
.mt-desc { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; }
.mt-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mt-safety { background: var(--soft); }
.mt-safety ul { margin: 8px 0 0; padding-left: 1.2em; }
.mt-safety li { margin-bottom: 4px; font-size: .92rem; }
.mt-chat-form { display: flex; gap: 8px; margin-top: 8px; }


/* Views on posts */
.actions .views { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: .92rem; padding: 8px; }
@media (max-width: 520px) { .actions button, .actions .views { gap: 4px; padding: 8px 2px; font-size: .82rem; } }
#pf-handle[readonly] { color: var(--muted); cursor: not-allowed; }
.mc-barrow { display: flex; align-items: center; gap: 12px; }
.mc-barrow .mc-bar { flex: 1; }
.mc-barrow .btn { flex: none; }
/* Member counter on Home */
.mc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; margin-bottom: 10px; }
.mc-row .muted { font-weight: 600; }
.mc-bar { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.mc-fill { height: 100%; width: 2%; border-radius: 999px; background: var(--brand); transition: width .6s ease; }
.mc-goal-text { margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }

/* Login: "You're invited." centered over the sign-up box */
.xauth h1 { max-width: 380px; text-align: center; font-size: clamp(2.2rem, 9vw, 2.8rem); }
.xauth h1::after { white-space: normal; }
@media (max-width: 900px) {
  .xauth-mobile-logo { display: flex; justify-content: center; }
  .xauth h1, .xauth-form { margin-left: auto; margin-right: auto; }
}
/* Private account lock */
.lock-big { display: flex; justify-content: center; margin-bottom: 8px; color: var(--muted); }
.lock-big .ico { width: 28px; height: 28px; }
.name-lock { display: inline-flex; margin-left: .25em; vertical-align: -.1em; color: var(--muted); }
.name-lock .ico svg { width: .8em; height: .8em; }

/* Meetups this week (sidebar) */
.wk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.wk-head h3 { margin: 0; }
.wk-head a { font-weight: 600; font-size: .9rem; }
.wk-row { display: flex; gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 12px; color: var(--ink); }
.wk-row:hover { background: var(--hover); text-decoration: none; }
.wk-row .mt-date { width: 46px; }
.wk-row .mt-date .d { font-size: 1.15rem; }
.wk-row .mt-title { font-size: .95rem; margin: 0 0 2px; }
.show-more { display: block; margin: 8px auto 0; font-weight: 600; }
/* People picker (invite-only meetups) */
.pp-results { display: grid; gap: 2px; margin-top: 6px; }
.pp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; border-radius: 10px; text-align: left; color: var(--ink); cursor: pointer; }
.pp-row:hover { background: var(--hover); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--soft); color: var(--brand); font-weight: 600; font-size: .88rem; }
.pp-chip button { border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.lock-big { display: flex; justify-content: center; margin-bottom: 8px; color: var(--muted); }
/* Training Wheels Protocol (under-18 page) */
.tw-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.tw-label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
/* Faint lavender background (light mode only) */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #F3F0FC; } }
:root[data-theme="light"] { --bg: #F3F0FC; }

/* ===== MESSAGES: iMessage style ===== */
body.on-dm .rail { display: none; }
body.on-dm .app { grid-template-columns: 250px minmax(0, 1fr); }
@media (max-width: 1140px) { body.on-dm .app { grid-template-columns: 84px minmax(0, 1fr); } }
@media (max-width: 640px) { body.on-dm .app { grid-template-columns: minmax(0, 1fr); } }
.dm { border-radius: 18px; }
.dm .list { background: color-mix(in srgb, var(--brand) 4%, var(--card)); padding: 0 8px 8px; }
.dm .list .hd { padding: 16px 8px 12px; }
.chat-row { border-radius: 12px; padding: 10px; gap: 12px; }
.chat-row[aria-current="page"], .chat-row[aria-current="page"]:hover { background: var(--brand); color: var(--brand-ink); }
.chat-row[aria-current="page"] .who span, .chat-row[aria-current="page"] .when { color: var(--brand-ink); opacity: .85; }
.chat-row .when { align-self: flex-start; margin-top: 2px; font-size: .78rem; color: var(--muted); flex: none; }
.thread .hd { position: relative; flex-direction: column; justify-content: center; gap: 0; padding: 12px 14px; }
.thread .hd > a:not(.icon-btn) { flex-direction: column; gap: 4px !important; font-size: .9rem; }
.thread .hd .icon-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
@media (min-width: 761px) { .dm { grid-template-columns: 320px minmax(0, 1fr); } .thread .hd .icon-btn { display: none; } }
.msgs { padding: 18px 20px; gap: 3px; }
.msg { background: var(--soft); color: var(--ink); padding: 8px 14px; font-size: .95rem; }
.msg.mine { background: var(--brand); color: var(--brand-ink); }
.thread form { border-top: 0; padding: 10px 16px 16px; align-items: center; }
.thread textarea { background: var(--card); border: 1.5px solid var(--line); }
.thread textarea:focus { border-color: var(--brand); }
.thread form .btn.primary { width: 42px; height: 42px; padding: 0; border-radius: 50%; }

/* ===== Small screens: nav 2cm, boxes 3.5in ===== */
@media (max-width: 960px) and (min-width: 641px) {
  .app { grid-template-columns: 2cm minmax(0, 3.5in); gap: 12px; }
}

/* ===== Small screens: Messages full width, menu slides out the icon bar ===== */
.dm-menu { display: none; }
@media (max-width: 960px) and (min-width: 441px) {
  body.on-dm .app { grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; max-width: none !important; }
  body.on-dm .nav { display: none !important; }
  body.on-dm.nav-open .app { grid-template-columns: 2cm minmax(0, 1fr) !important; }
  body.on-dm.nav-open .nav { display: block !important; background: var(--card); border-right: 1px solid var(--line); }
  body.on-dm .main { padding: 0 !important; }
  body.on-dm .dm { height: 100vh; border-radius: 0; margin: 0 !important; box-shadow: none; border-left: 0; }
  body.on-dm .app > .nav { padding-top: 16px; min-height: 100vh; }
  .dm-menu { display: grid; margin-left: 8px; margin-right: 8px; }
  .dm .list .hd { justify-content: flex-start; gap: 6px; }
  .dm .list .hd h1 { flex: 1; }
}

/* ===== Fix: hide icon bar on Messages in small windows ===== */
@media (max-width: 960px) and (min-width: 441px) { body.on-dm .nav { display: none !important; } }

/* ===== Say hello ===== */
.hello-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hello-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: .9rem; cursor: pointer; }
.hello-chip:hover { border-color: var(--brand); background: var(--soft); }
.hello-chip .ico { color: var(--brand); }
.hello-chip .ico svg { width: 16px; height: 16px; }

/* ===== Say hello ===== */
.hello-label { font-weight: 700; font-size: .9rem; margin: 2px 0 8px; }
.hello-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hello-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: .9rem; cursor: pointer; }
.hello-chip:hover { border-color: var(--brand); }
.hello-chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.hello-chip .ico { color: var(--brand); }
.hello-chip.on .ico { color: var(--brand-ink); }
.hello-chip .ico svg { width: 16px; height: 16px; }

/* ===== Say hello + Add friend: same size ===== */
.btn.fb { width: 146px !important; min-width: 0 !important; height: 36px !important; padding: 0 14px !important; border: 1.5px solid var(--brand) !important; box-shadow: none !important; justify-content: center !important; gap: 8px !important; font-size: .88rem !important; line-height: 1 !important; box-sizing: border-box !important; }
.btn.fb.outline { background: var(--card) !important; color: var(--brand) !important; }
.btn.fb.primary { background: var(--brand) !important; color: var(--brand-ink) !important; }
.btn.fb .ico, .btn.fb .ico svg { width: 18px !important; height: 18px !important; flex: none; }
.rail .btn.fb { width: auto !important; padding: 0 10px !important; }


/* ===== Messages: hello from someone who isn't a friend yet ===== */
.dm-locked { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--soft); }
.dm-locked > span { color: var(--ink); font-weight: 600; font-size: .92rem; }

/* ===== Social Points card ===== */
.pts-card { position: relative; aspect-ratio: 1.586; max-width: 420px; margin: 0 auto; border-radius: 18px; padding: 22px 24px; color: #fff; overflow: hidden; display: flex; flex-direction: column; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 378' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23DDD6FE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='0 7'%3E%3Cpath d='M0 160L20 176L40 191L60 202L80 208L100 210L120 207L140 201L160 193L180 183L200 175L220 168L240 163L260 161L280 161L300 161L320 161L340 160L360 157L380 151L400 143L420 133L440 123L460 115L480 110L500 109L520 113L540 121L560 133L580 149L600 165' stroke-opacity='0.20'/%3E%3Cpath d='M0 172L20 188L40 202L60 213L80 220L100 221L120 218L140 210L160 200L180 188L200 177L220 167L240 160L260 156L280 154L300 154L320 155L340 156L360 155L380 152L400 147L420 140L440 133L460 127L480 123L500 122L520 126L540 134L560 146L580 161L600 177' stroke-opacity='0.35'/%3E%3Cpath d='M0 183L20 198L40 212L60 222L80 228L100 230L120 226L140 217L160 205L180 191L200 178L220 166L240 156L260 150L280 148L300 148L320 150L340 153L360 154L380 155L400 153L420 150L440 146L460 141L480 138L500 138L520 141L540 148L560 159L580 173L600 188' stroke-opacity='0.49'/%3E%3Cpath d='M0 194L20 207L40 219L60 229L80 234L100 235L120 230L140 221L160 208L180 193L200 178L220 164L240 153L260 146L280 143L300 143L320 146L340 151L360 155L380 159L400 161L420 161L440 160L460 157L480 156L500 155L520 158L540 164L560 173L580 185L600 198' stroke-opacity='0.59'/%3E%3Cpath d='M0 203L20 214L40 224L60 232L80 237L100 237L120 233L140 223L160 210L180 194L200 178L220 163L240 151L260 143L280 139L300 140L320 144L340 151L360 158L380 165L400 171L420 174L440 175L460 175L480 174L500 174L520 175L540 179L560 186L580 196L600 207' stroke-opacity='0.64'/%3E%3Cpath d='M0 210L20 219L40 227L60 234L80 237L100 237L120 232L140 223L160 210L180 194L200 178L220 162L240 150L260 142L280 138L300 139L320 145L340 153L360 163L380 173L400 182L420 188L440 192L460 193L480 193L500 192L520 193L540 195L560 199L580 205L600 214' stroke-opacity='0.64'/%3E%3Cpath d='M0 216L20 221L40 227L60 232L80 235L100 234L120 230L140 221L160 209L180 194L200 178L220 163L240 151L260 143L280 140L300 141L320 148L340 158L360 170L380 182L400 194L420 203L440 208L460 211L480 212L500 211L520 210L540 209L560 210L580 214L600 219' stroke-opacity='0.59'/%3E%3Cpath d='M0 220L20 222L40 225L60 229L80 230L100 230L120 226L140 219L160 208L180 195L200 180L220 166L240 155L260 147L280 144L300 146L320 154L340 165L360 179L380 193L400 206L420 217L440 225L460 229L480 230L500 228L520 225L540 222L560 220L580 220L600 222' stroke-opacity='0.49'/%3E%3Cpath d='M0 223L20 222L40 222L60 223L80 224L100 224L120 221L140 216L160 207L180 196L200 183L220 171L240 161L260 154L280 151L300 154L320 162L340 174L360 189L380 204L400 219L420 232L440 241L460 246L480 247L500 244L520 239L540 234L560 229L580 225L600 223' stroke-opacity='0.35'/%3E%3Cpath d='M0 224L20 219L40 217L60 217L80 218L100 218L120 216L140 213L160 206L180 198L200 188L220 178L240 169L260 163L280 162L300 165L320 173L340 185L360 200L380 216L400 232L420 246L440 255L460 261L480 261L500 258L520 251L540 243L560 235L580 228L600 223' stroke-opacity='0.20'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(160deg, #8B5CF6 0%, #6D28D9 50%, #4C1D95 100%); box-shadow: 0 18px 40px rgba(76, 29, 149, .3), inset 0 0 0 1px rgba(255,255,255,.14); }
.pts-card { font-family: var(--font); }
.pts-top { display: flex; align-items: flex-start; justify-content: space-between; }
.pts-brand { display: flex; align-items: center; gap: 10px; font: 800 1.45rem/1 var(--display); letter-spacing: -.01em; }
.pts-logo { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.pts-logo .logo { background: none !important; border-radius: 0; color: var(--brand); }
.pts-name { text-align: right; line-height: 1.1; }
.pts-name span { display: block; font: 700 1.45rem/1 var(--display); letter-spacing: .02em; margin-top: 8px; }
.pts-name b { display: block; font: 600 .68rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; opacity: .9; }
.pts-chip { width: 50px; height: 38px; border-radius: 8px; margin-top: 22px; position: relative; background: linear-gradient(135deg, #F3F4F6, #BFC3CA 45%, #E5E7EB 60%, #A7ABB3); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.pts-chip::before { content: ""; position: absolute; left: 16px; right: 16px; top: 9px; bottom: 9px; border: 1px solid rgba(0,0,0,.3); border-radius: 6px; }
.pts-chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(0,0,0,.3); }
.pts-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; font: 500 .72rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.pts-foot b { font: 700 .85rem/1 var(--font); letter-spacing: .1em; }
.pts-foot span { opacity: .85; }
.pts-tiles { max-width: 420px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pts-tile { background: var(--soft); border-radius: 14px; padding: 12px; text-align: center; }
.pts-tile span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pts-tile b { display: block; font: 800 1.5rem/1.2 var(--display); color: var(--ink); margin-top: 4px; }
.pts-share { max-width: 420px; margin: 14px auto 0; text-align: center; }
.pts-share p { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }
.pts-panel h3 { font: 800 1rem/1 var(--display); margin: 0 0 2px; padding: 2px 0 12px; border-bottom: 1px solid var(--line); }
.pts-panel .pts-card { margin-top: 4px; }
.pts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); color: var(--ink); }
.pts-panel .pts-row:last-child { border-bottom: 0; padding-bottom: 2px; }
a.pts-row:hover { text-decoration: none; background: var(--hover); }
.pts-row b { display: block; font-size: .92rem; }
.pts-row span { display: block; font-size: .8rem; color: var(--muted); }
.pts-go { color: var(--brand) !important; font-weight: 700; }
.pts-soon { color: var(--muted); font-weight: 600; white-space: nowrap; }
.pts-amt { font: 800 1rem var(--display); color: var(--muted); white-space: nowrap; }
.pts-amt.up { color: var(--ok); }
.pts-none { color: var(--muted); font-size: .88rem; margin: 8px 0; }

/* ===== Pop-up boxes: at the top, lined up with the main column ===== */
.modal-bg { grid-template-columns: 250px minmax(0, 620px) 330px; gap: 28px; justify-content: center; align-items: start; place-items: start stretch; padding: 16px; }
.modal-bg > .modal { grid-column: 2; width: 100%; max-height: calc(100vh - 32px); }
@media (max-width: 1140px) { .modal-bg { grid-template-columns: 84px minmax(0, 620px) 300px; gap: 20px; } }
@media (max-width: 960px) { .modal-bg { grid-template-columns: 84px minmax(0, 1fr); } }
@media (max-width: 960px) and (min-width: 441px) { .modal-bg { grid-template-columns: 2cm minmax(0, 3.5in); gap: 12px; justify-content: start; padding-left: 0; } }
@media (max-width: 440px) { .modal-bg { grid-template-columns: minmax(0, 1fr); padding: 8px 0; } .modal-bg > .modal { grid-column: 1; } }

/* ===== Small screens: Say hello + Add friend become round icon buttons in lists ===== */
@media (max-width: 960px) { .person .btn.fb { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; } .person .btn.fb .lbl { display: none !important; } }

/* ===== Light mode only (dark mode removed) ===== */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --bg: #F3F0FC; --card: #FFFFFF; --ink: #12151C; --muted: #5F6778; --line: #E1E4EA; --hover: #EDEFF3; --danger: #C62F2F; --like: #E0245E; --ok: #188A4E; --shadow: 0 1px 2px rgba(18, 21, 28, .08), 0 0 0 1px rgba(18, 21, 28, .04); color-scheme: light; }

/* ===== Points card: flip to the back ===== */
.pts-flip { max-width: 420px; margin: 0 auto; perspective: 1400px; cursor: pointer; border-radius: 18px; outline: none; }
.pts-flip:focus-visible { box-shadow: 0 0 0 3px var(--soft); }
.pts-flip-in { position: relative; transition: transform .6s ease; transform-style: preserve-3d; }
.pts-flip.flipped .pts-flip-in { transform: rotateY(180deg); }
.pts-flip .pts-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 0; }
.pts-flip .pts-back { position: absolute; inset: 0; transform: rotateY(180deg); padding: 0; background: linear-gradient(160deg, #7C3AED 0%, #5B21B6 55%, #3B0F7A 100%); }
.pts-flip-hint { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 8px; }
.pts-front-num { margin-top: auto; margin-bottom: 14px; font: 700 1.2rem/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pts-front-num + .pts-foot { margin-top: 0; }
.pts-stripe { height: 46px; background: #1A1033; margin-top: 24px; }
.pts-sig { margin: 18px 24px 0; display: flex; align-items: stretch; gap: 10px; }
.pts-sig span { flex: 1; background: repeating-linear-gradient(135deg, #FFFFFF 0 6px, #EDE9FE 6px 12px); color: #3B0F7A; font: italic 600 1rem/1 Georgia, serif; padding: 12px; border-radius: 4px; }
.pts-cvv { background: #fff; color: #12151C; border-radius: 4px; padding: 6px 12px; font: 700 1.05rem/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-align: center; }
.pts-cvv small { display: block; font: 600 .55rem/1 var(--font); letter-spacing: .14em; color: #5F6778; margin-bottom: 4px; }
.pts-back-foot { margin: auto 24px 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-size: .7rem; line-height: 1.35; opacity: .9; }
.pts-back-foot b { font: 800 1rem/1 var(--display); }
.pts-num-in { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; text-align: center; font-size: 1.1rem; }

/* ===== Ask: answer count bubble ===== */
.ans-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--brand); font-weight: 800; font-size: .78rem; }
/* ===== Launch: "Soon" sections ===== */
.nav .soon-tag { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--soft); padding: 3px 8px; border-radius: 999px; }
@media (max-width: 1140px) { .nav .soon-tag { display: none; } }
.soon-box { text-align: center; padding: 6px 4px 4px; }
.soon-ico { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--soft); color: var(--brand); display: grid; place-items: center; }
.soon-ico svg { width: 26px; height: 26px; }
.soon-box h3 { font: 800 1.3rem/1.2 var(--display); margin: 0 0 8px; }
.soon-box p { margin: 0 0 10px; }
.soon-progress { font-weight: 700; color: var(--brand); }
/* ===== Keep the left menu and right sidebar in place while the posts scroll ===== */
html, body { overflow-x: clip !important; }
.app { overflow: visible !important; align-items: start; }
.nav, .rail { position: sticky !important; top: 0 !important; align-self: start; height: 100vh; overflow-y: auto; }
/* ===== Equal-size buttons in people lists (like X) ===== */
.main .person .btns .btn { width: 136px !important; min-width: 0 !important; height: 36px !important; padding: 0 10px !important; justify-content: center !important; font-size: .88rem !important; box-sizing: border-box !important; white-space: nowrap; }
@media (max-width: 960px) {
  .main .person .btns .btn { width: 100px !important; }
  .main .person .btns .btn.fb { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; }
}

/* Unlock window: card number fits inside its box */
.pts-num-in[readonly] { font-size: .95rem; letter-spacing: .04em; padding-left: 8px; padding-right: 8px; min-width: 0; }
.pts-num-in[aria-label="CVV"] { max-width: 80px !important; min-width: 0; }
@media (max-width: 400px) { .pts-num-in[readonly] { font-size: .85rem; letter-spacing: 0; } .pts-num-in[aria-label="CVV"] { max-width: 64px !important; } }

/* Points card: silver CVV strip on the back, and the chip keeps its shape on small screens */
.pts-chip { flex: none; }
.pts-sig { height: 42px; padding: 0 12px; border-radius: 4px; align-items: center; justify-content: flex-end; background: linear-gradient(135deg, #F3F4F6, #BFC3CA 45%, #E5E7EB 60%, #A7ABB3); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.pts-sig .pts-cvv { background: none; padding: 0; color: #12151C; font-style: italic; }
@media (max-width: 400px) {
  .pts-card { padding: 16px 18px; }
  .pts-brand { font-size: 1.15rem; } .pts-logo { width: 32px; height: 32px; }
  .pts-name span { font-size: 1.15rem; margin-top: 4px; }
  .pts-chip { width: 40px; height: 30px; margin-top: 10px; }
  .pts-chip::before { left: 13px; right: 13px; top: 7px; bottom: 7px; }
  .pts-front-num { font-size: 1rem; margin-bottom: 10px; }
  .pts-stripe { height: 36px; margin-top: 18px; }
  .pts-sig { margin: 12px 18px 0; height: 36px; }
  .pts-back-foot { margin: auto 18px 14px; font-size: .62rem; }
  .pts-foot { gap: 8px; font-size: .6rem; letter-spacing: .08em; }
  .pts-foot b { font-size: .72rem; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pts-foot span { white-space: nowrap; }
}

/* ===== Loading screen when logging in or out (same background as the login page) ===== */
.splash { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity .35s ease; }
.splash.out { opacity: 0; pointer-events: none; }
.splash .logo { width: 88px; height: 88px; border-radius: 24px; animation: splash-pulse 1.4s ease-in-out infinite; }
.splash-text { margin: 0; min-height: 1.2em; color: var(--muted); font: 500 .95rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em; }
@keyframes splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ===== "People you may know" title links to its own page ===== */
.h-link { color: inherit; text-decoration: none; }
.h-link:hover { color: var(--brand); text-decoration: underline; }

/* ===== Small screens: names shorten with "…" instead of running under the buttons ===== */
.person .who > a, .person .who > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) { .main .person .btns .btn:not(.fb) { width: 84px !important; padding: 0 6px !important; font-size: .8rem !important; } }
@media (max-width: 960px) and (min-width: 441px) { .main .person .btns .btn:not(.fb) { width: 72px !important; font-size: .76rem !important; } .main .person { gap: 10px; } }

/* ===== Small windows: menu button also shows inside a conversation ===== */
.thread .hd .icon-btn.dm-menu-thread { left: auto; right: 10px; }
/* Settings: Google accounts can add a password */
.pw-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
/* ===== Feed: X-style posts, flat composer, purple lines, hover highlight ===== */
.card.post { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px 6px; transition: background .12s; }
.post .hd { display: contents; }
.post .hd > a:first-child { grid-column: 1; grid-row: 1 / span 30; }
.post .hd .who { grid-column: 2; grid-row: 1; padding-right: 36px; }
.post .hd .icon-btn { grid-column: 2; grid-row: 1; justify-self: end; margin: -6px -8px 0 0; }
.card.post > *:not(.hd) { grid-column: 2; min-width: 0; }
.post-text { margin: 4px 0 8px; }
.post .actions { border-top: 0; margin-top: 2px; }

.card.post, .card.composer { background: transparent; border-radius: 0; box-shadow: none; margin-bottom: 0; border-bottom: 1px solid var(--brand); }
.card.composer { padding: 12px 16px; }
.cmt .bubble, .cmt-form input { background: var(--card); }

@media (hover: hover) {
  .card.post:hover { background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }
  .card.post:hover .actions button:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }
}

@media (min-width: 961px) { .main .members-card { display: none; } }
/* =================================================================
   SMALL SCREENS (640px and under): top bar, composer, feed, tab bar, menu
   ================================================================= */
/* "What's on your mind?" row (all screen sizes) */
.card.composer.mind { display: flex; align-items: center; gap: 12px; }
.composer.mind .ph { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 12px 0; color: var(--muted); font: inherit; font-size: 1.12rem; cursor: text; }
.composer.mind .icon-btn { color: var(--brand); }
.composer.mind .icon-btn .ico svg { width: 1.5em; height: 1.5em; }

.scrim { display: none; }
@media (max-width: 640px) {
  .topbar { gap: 12px; }
  .topbar .icon-btn { width: 42px; height: 42px; color: var(--ink); }
  .topbar .icon-btn .ico svg { width: 1.6em; height: 1.6em; }
  .topbar .row { margin-left: auto; gap: 16px; flex-wrap: nowrap; }
  .topbar .row a[data-topav] { display: inline-flex; }
  .main { padding-top: 0; }

  .card.composer.mind { padding: 14px 16px; }

  /* post actions: comment, like, share (icon only) */
  .actions { justify-content: space-between; }
  .actions button:nth-child(1) { order: 2; justify-content: center; }      /* like */
  .actions button:nth-child(2) { order: 1; justify-content: flex-start; }  /* comment */
  .actions button:nth-child(3) { order: 3; justify-content: flex-end; }    /* share */
  .actions button:nth-child(3) span:not(.ico) { display: none; }

  /* bottom tab bar: wide + button, red count badges */
  .tabbar { justify-content: space-around; align-items: center; }
  .tabbar a.plus { width: 26vw; max-width: 150px; min-width: 84px; height: 46px; border-radius: 14px; }
  .tabbar a .ico svg { width: 1.55em; height: 1.55em; }
  .tabbar .badge { background: var(--like); color: #fff; top: 0; left: auto; right: 6px; }

  /* the menu slides out from the left */
  body.drawer-open .nav { display: block; position: fixed !important; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); height: 100vh; height: 100dvh; z-index: 70; background: var(--card); padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 16px; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  body.drawer-open .nav .label, body.drawer-open .nav .me-card .who { display: inline; }
  body.drawer-open .nav .soon-tag { display: inline-block; }
  body.drawer-open .nav a.item, body.drawer-open .nav .brand, body.drawer-open .nav .me-card { justify-content: flex-start; }

  /* menu shows only: Meetups, Ask, Points, Notifications, Profile, Settings */
  .nav a.item[data-nav="home"], .nav a.item[data-nav="explore"], .nav a.item[data-nav="friends"], .nav a.item[data-nav="messages"],
  .nav .brand, .nav .compose-btn { display: none !important; }

  /* your photo + name at the top of the menu */
  body.drawer-open .nav { display: flex; flex-direction: column; }
  body.drawer-open .nav .me-card { order: -1; margin: 0 0 10px; padding: 8px 12px 16px; border-bottom: 1px solid var(--line); border-radius: 0; gap: 12px; }
  body.drawer-open .nav .me-card .av { width: 48px !important; height: 48px !important; font-size: 1.1rem !important; }
  body.drawer-open .nav .me-card .who b { font: 800 1.05rem/1.2 var(--display); }
  body.drawer-open .nav .me-card .who .muted { display: none; }

  body.drawer-open .scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(15, 17, 21, .45); }
}

/* ===== Top bar (like Facebook): logo + "social" on the left, search on the right ===== */
.sitebar { display: none; }
@media (min-width: 441px) {
  .sitebar { display: block; position: sticky; top: 0; z-index: 40; background: var(--brand); box-shadow: 0 2px 10px rgba(76, 29, 149, .25); }
  .sitebar-in { max-width: 1320px; height: 64px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .sitebar-brand { display: flex; align-items: center; gap: 12px; color: #fff; font: 800 1.6rem/1 var(--display); letter-spacing: -.02em; }
  .sitebar-brand:hover { text-decoration: none; }
  .sitebar-logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
  .sitebar-logo .logo { background: none !important; }
  .sitebar-search { display: flex; align-items: center; gap: 8px; width: min(330px, 42vw); height: 42px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--muted); }
  .sitebar-search input { border: 0; outline: none; background: none; width: 100%; color: var(--ink); font-size: .95rem; }
  /* the logo and search now live in the top bar */
  .nav .brand, .rail .searchbox { display: none !important; }
  .nav, .rail { top: 64px !important; height: calc(100vh - 64px) !important; }
  .dm { height: calc(100vh - 64px - 32px); }
}
@media (max-width: 960px) and (min-width: 441px) {
  .sitebar-brand span:last-child { font-size: 1.35rem; }
  body.on-dm .dm { height: calc(100vh - 64px) !important; }
}
/* ===== Small screens: comment, like and share evenly spaced ===== */
@media (max-width: 640px) {
  .post .actions { justify-content: space-between; }
  .post .actions button { flex: 0 0 auto; justify-content: center !important; padding: 8px 10px; }
}

/* ===== Post buttons: like left, comment middle, share right. Same dark as the menu, purple when clicked. No box on hover. ===== */
.post .actions { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; border-top: 0; margin-top: 4px; padding-top: 2px; }
.post .actions button { flex: none !important; order: 0 !important; width: auto; padding: 6px 4px !important; gap: 8px !important; background: none !important; color: var(--ink); font-size: .85rem !important; font-weight: 600; justify-content: flex-start !important; transition: color .15s; }
.post .actions button:nth-child(1) { justify-self: start; }
.post .actions button:nth-child(2) { justify-self: center; }
.post .actions button:nth-child(3) { justify-self: end; }
.post .actions button .ico svg { width: 1.55em; height: 1.55em; }
.post .actions button span:not(.ico) { display: inline !important; color: var(--muted); }
.post .actions button:hover { color: var(--brand); }
.post .actions button.liked, .post .actions button.on { color: var(--brand); }
.post .actions button.liked span:not(.ico), .post .actions button.on span:not(.ico) { color: var(--brand); }
.post .actions button.liked svg { fill: currentColor; }

/* ===== Settings: on/off switch for the Home feed ===== */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-row > span:first-child { display: grid; gap: 2px; }
.switch { position: relative; flex: none; width: 50px; height: 30px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }

/* date of birth box fits on phones */
input[type="date"].inp { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 46px; text-align: left; }

/* profile pages blend with the feed: no white box, same purple divider as posts */
.card.profile { background: transparent; box-shadow: none; border-radius: 0; margin-bottom: 0; overflow: visible; }
.card.profile .cover { border-radius: 6px; }
.profile .row1 .av { border-color: var(--bg); }
.profile .tabs { border-bottom: 1px solid var(--brand); }
@media (max-width: 640px) { .card.profile .cover { border-radius: 0; } .card.profile { border-bottom: 0; } }

/* Squarer look + faint divider lines (like X) */
:root { --r: 4px; --divider: color-mix(in srgb, var(--brand) 10%, #DCDCE4); }
.card.profile .cover, .gallery, .thumbs .t, .pop, .lightbox img, .cover-pick, .mt-date { border-radius: 4px; }
.modal, .auth .box, .nav a.item, .me-card, .searchbox label, .sitebar-search, .inp, .prefix, .xauth .inp, .cmt .bubble { border-radius: 6px; }
.card.post, .card.composer { border-bottom-color: var(--divider); }
.profile .tabs, .tabs { border-bottom-color: var(--divider); }

@media (max-width: 960px) { .sitebar-search { display: none !important; } }

@media (max-width: 640px) { .sitebar { display: none !important; } }

/* Posts: see-through with a thin lavender outline and a small gap */
.card.post, .card.composer { background: transparent; border: 1px solid color-mix(in srgb, var(--brand) 10%, #DCDCE4); border-radius: var(--r); box-shadow: none; margin-bottom: 5px; }
@media (hover: hover) { .card.post:hover { background: color-mix(in srgb, var(--brand) 5%, var(--bg)); } }
@media (max-width: 640px) { .card.post, .card.composer { border-left: 0; border-right: 0; border-radius: 0; margin-bottom: 4px !important; } }
/* Profile header: same thin lavender outline as the posts */
.card.profile { border: 1px solid color-mix(in srgb, var(--brand) 10%, #DCDCE4); border-radius: var(--r); overflow: hidden; margin-bottom: 5px; }
.card.profile .cover { border-radius: 0; }
.card.profile .tabs { border-bottom: 0; }
@media (max-width: 640px) { .card.profile { border-left: 0; border-right: 0; border-top: 0; border-radius: 0; margin-bottom: 4px !important; } }
.card.profile .tabs { display: none; }

.card.profile .stats a { pointer-events: none; cursor: default; }
/* Smaller verified badges on profile and page names (like Instagram) */
.profile h1 .verified { gap: .14em; margin-left: .25em; vertical-align: .02em; }
.profile h1 .verified svg { width: .72em; height: .72em; }

/* Smaller verified badges on profile and page names (like Instagram) */
.profile h1 .verified { gap: .14em; margin-left: .25em; vertical-align: .02em; }
.profile h1 .verified svg { width: .72em; height: .72em; }

/* About this account window */
.about-top { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 8px; }
.about-top .av { margin: 0; }
.about-name { font-weight: 800; font-size: 1.15rem; }
.about-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.about-row .ico { color: var(--muted); margin-top: 2px; }
.about-label { font-weight: 700; }
.about-value { color: var(--muted); }

/* White info icon in the top-right corner of the cover */
.profile .cover { position: relative; }
.profile .row1 { position: relative; z-index: 1; }
.about-info, .about-info:hover { position: absolute; top: 12px; right: 12px; margin: 0; padding: 0; width: 36px; height: 36px; border: 0; background: none; backdrop-filter: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.about-info .ico svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
/* Square profile photos */
.av, .av img { border-radius: 6px !important; }
.profile .row1 .av { border-radius: 10px !important; }

/* Quick sign-up: only name and birthday (the rest is added later in Edit profile) */
.quick-start .photo-pick, .quick-start .field:has(#pf-head), .quick-start .field:has(#pf-bio), .quick-start .grid2:has(#pf-loc), .quick-start .field:has(#pf-priv), .quick-start .field:has(#pf-school), .quick-start .field:has(#pf-rel) { display: none; }
#pf-dob { width: calc(50% - 6px) !important; max-width: 100%; }
@media (max-width: 520px) { #pf-dob { width: 100% !important; } }

/* Same look in light and dark mode (no blue menu icons or dark form boxes on dark-mode devices) */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav a.item .ico, :root:not([data-theme="light"]) .nav .compose-btn .ico { color: inherit; }
  :root:not([data-theme="light"]) .nav a.item[aria-current="page"] .ico { color: var(--brand); }
}

/* Assistant helpers */
.bot-pic { display: inline-block; flex: none; }
.bot-pic svg { width: 100%; height: 100%; display: block; }
.notif .bot-pic { margin: 0 2px; }
.helper-top { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.helper-bubble { position: relative; background: var(--soft); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.helper-bubble::before { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: var(--soft); }
.helper-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.helper-txt { flex: 1; min-width: 0; }
.setup-flash { animation: setupFlash 2s ease; border-radius: 8px; }
@keyframes setupFlash { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Social AI help chat */
.ai-top { display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--brand) !important; }
.topbar .row a[data-topav] { order: 2; } .topbar .row .ai-top { order: 1; }
.ai-chat { position: fixed; right: 20px; bottom: 20px; z-index: 61; width: 340px; height: min(480px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--card); border-radius: 14px; box-shadow: 0 16px 40px rgba(40, 20, 90, .28); overflow: hidden; animation: aiUp .25s ease-out both; }
.ai-chat.out { animation: aiDown .25s ease-in both; }
@keyframes aiUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aiDown { to { transform: translateY(20px); opacity: 0; } }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); }
.ai-head .icon-btn { margin-left: auto; }
.ai-title { display: flex; flex-direction: column; line-height: 1.2; }
.ai-title span { font-size: .8rem; color: var(--muted); }
.ai-log { flex: 1; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; line-height: 1.4; font-size: .95rem; }
.ai-msg.ai { background: var(--soft); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg.me { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip { border: 1.5px solid var(--brand); background: var(--card); color: var(--brand); border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: .85rem; cursor: pointer; }
.ai-chip:hover { background: var(--soft); }
.ai-form { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.ai-input { flex: 1; min-width: 0; border: 0; background: var(--bg); border-radius: 999px; padding: 10px 14px; outline: none; font-size: .95rem; }
.ai-form .icon-btn { color: var(--brand); }
@media (max-width: 640px) {
  .ai-chat { right: 8px; left: 8px; width: auto; top: calc(66px + env(safe-area-inset-top, 0px)); bottom: auto; height: min(440px, calc(100vh - 150px)); }
}

/* More menu (Ask, Meetups, Points) */
.more-pop { position: fixed; z-index: 80; min-width: 200px; padding: 6px; background: var(--card); border-radius: 14px; box-shadow: 0 12px 32px rgba(40, 20, 90, .22); border: 1px solid var(--line); }
.more-pop a.item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: 1.05rem; }
.more-pop a.item:hover { background: var(--hover); text-decoration: none; }
.more-pop .soon-tag { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--soft); padding: 3px 8px; border-radius: 999px; }

/* Social AI picture */
.ai-pic { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--brand); color: #fff; }
.ai-pic svg { width: 62%; height: 62%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Social AI on phones: full screen, typing box above the keyboard */
@media (max-width: 640px) {
  .ai-chat { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 100vh; height: 100dvh; border-radius: 0; z-index: 90; box-shadow: none; animation: aiFade .2s ease-out both; }
  .ai-chat.out { animation: aiFadeOut .2s ease-in both; }
  .ai-head { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; border-bottom: 0; }
  .ai-log { padding: 16px; gap: 10px; min-height: 0; }
  .ai-head, .ai-form { flex: none; }
  .ai-msg { font-size: 1rem; }
  .ai-form { margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px 6px 6px 4px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: 0 2px 12px rgba(40, 20, 90, .08); }
  .ai-chat.kb .ai-form { margin-bottom: 8px; }
  .ai-input { font-size: 16px; padding: 12px 14px; background: none; }
  .ai-form .icon-btn { width: 40px; height: 40px; background: var(--brand); color: #fff; }
  body.ai-open { overflow: hidden; }
}
@keyframes aiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aiFadeOut { to { opacity: 0; } }

/* Edit post on phones: full-screen editor */
.edit-sheet { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 75; background: var(--card); display: flex; flex-direction: column; animation: esUp .22s ease-out both; }
.edit-sheet.out { animation: esDown .22s ease-in both; }
@keyframes esUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes esDown { to { transform: translateY(24px); opacity: 0; } }
.es-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; border-bottom: 1px solid var(--line); }
.es-head b { font-size: 1.05rem; }
.es-cancel { border: 0; background: none; font: inherit; font-size: 1rem; color: var(--ink); padding: 8px 4px; cursor: pointer; }
.es-head .btn:disabled { opacity: .45; }
.es-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.es-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.es-text { width: 100%; border: 0; outline: none; resize: none; background: none; font: inherit; font-size: 17px; line-height: 1.5; color: var(--ink); min-height: 120px; padding: 0; }
.es-foot { flex: none; display: flex; justify-content: flex-end; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.es-count { font-size: .85rem; color: var(--muted); }
.es-count.warn { color: #D93025; font-weight: 700; }
body.ai-open { overflow: hidden; }
/* Edit post on computers and tablets: the same editor as a centred window */
@media (min-width: 641px) {
  .edit-sheet { top: 10vh; left: 0; right: 0; margin: 0 auto; width: min(600px, calc(100vw - 40px)); height: auto; max-height: 80vh; border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(8, 10, 14, .55), 0 20px 50px rgba(0, 0, 0, .35); overflow: hidden; }
  .es-head { padding: 12px 16px; }
  .es-body { padding: 18px 20px; }
  .es-text { min-height: 160px; }
  .es-foot { padding: 10px 20px; }
}
/* Get the app */
.app-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.app-card img { border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); flex: none; }
.app-card .app-txt { flex: 1; min-width: 0; }
.app-card .icon-btn { margin-left: -4px; }
.app-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.app-hero img { border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.app-step { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.app-step > div { flex: 1; }
.app-step .ico { color: var(--brand); }
.app-num { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--brand); font-weight: 800; display: grid; place-items: center; flex: none; }

   /* Posts: same-size text box; heart and arrow equal distance from the edges */
  .post-text.clamp { height: 4.5em; overflow: hidden; }
  .post .actions { display: flex !important; justify-content: space-between; align-items: center; padding-right: 56px !important; }
  .post .actions button { padding-left: 0 !important; padding-right: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
  .post .actions .more-arrow[hidden] { display: inline-flex !important; visibility: hidden; }
  .post .actions .save-btn.on svg { fill: currentColor; }
  .post .actions .more-arrow .ico svg { transition: transform .2s; }
  .post .actions .more-arrow.open { color: var(--brand); }
  .post .actions .more-arrow.open .ico svg { transform: rotate(180deg); } 

    /* Messages on phones: conversation fills the screen and fits above the keyboard */
  @media (max-width: 640px) {
    body.dm-thread { overflow: hidden; }
    body.dm-thread .dm { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 72; border-radius: 0; margin: 0 !important; box-shadow: none; }
    body.dm-thread .thread .hd { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
    body.dm-thread .thread form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    body.dm-thread .dm.kb .thread form { padding-bottom: 10px; }
    body.dm-thread .thread textarea { font-size: 16px; }
  }

    /* Skeleton loading: grey shimmering placeholders while pages load */
  .sk { background: linear-gradient(90deg, #E8E5F3 0%, #F4F2FA 50%, #E8E5F3 100%) !important; background-size: 200% 100% !important; animation: skShimmer 1.2s linear infinite; border-radius: 4px; }
  @keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .sk-line { height: 11px; margin-bottom: 9px; }
  .sk-post { pointer-events: none; }
  .sk-post .sk-av { grid-column: 1 !important; grid-row: 1; width: 44px; height: 44px; border-radius: 6px; }
  .sk-post .sk-body { grid-column: 2; padding: 4px 0 10px; }
  .sk-post .sk-body .sk-line:nth-child(3) { margin-top: 14px; }
  .sk-profile .top { padding-bottom: 18px; }
  .sk-profile .sk-pav { width: 112px; height: 112px; border-radius: 10px; border: 4px solid var(--bg); }
  .sk-profile .sk-btn { width: 110px; height: 36px; border-radius: 999px; margin-bottom: 6px; }
  .sk-profile .row1 + .sk-line { margin-top: 14px; }
  .card.post, .card.profile { animation: skFade .3s ease; }
  .card.post.sk-post, .card.profile.sk-profile { animation: none; }
  @keyframes skFade { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .sk, .card.post, .card.profile { animation: none; } }

  /* ===== Same boxes everywhere: see-through with a light purple border, like Home and Profile ===== */
.main .card:not(.dm), .main .page-head, .rail .card { background: transparent; border: 1px solid var(--divider); border-radius: var(--r); box-shadow: none; margin-bottom: 5px; }
.main .mt-card:hover { background: color-mix(in srgb, var(--brand) 5%, var(--bg)); }
.main .mt-chip { background: var(--card); box-shadow: inset 0 0 0 1px var(--divider); }
.main .mt-chip.on { background: var(--brand); }
.rail .mc-bar, .main .mc-bar { background: var(--card); box-shadow: inset 0 0 0 1px var(--divider); }


/* ===== Keyboard fix (phones): typing bar sits above the keyboard, bottom tabs hide while typing ===== */
@media (max-width: 640px) {
  .kb-docked { position: fixed !important; left: 0; right: 0; z-index: 70; margin: 0 !important; padding: 8px 10px !important; background: var(--card); border-top: 1px solid var(--divider); box-shadow: 0 -4px 14px rgba(40, 20, 90, .08); }
  body.kb-open .tabbar { display: none; }
}

/* ===== User ID and Check an account ===== */
.pin-code { font: 700 1.02rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--brand); }
.pin-input { font: 700 1.05rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.ck-res { margin-top: 12px; border-radius: var(--r); padding: 12px 14px; }
.ck-res > b { display: block; margin-bottom: 6px; }
.ck-res.yes { background: color-mix(in srgb, var(--ok) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.ck-res.yes > b { color: var(--ok); }
.ck-res.no { background: color-mix(in srgb, var(--danger) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.ck-res.no > b { color: var(--danger); }
.ck-card { display: flex; align-items: center; gap: 12px; color: var(--ink); background: var(--card); border: 1px solid var(--divider); border-radius: var(--r); padding: 10px 12px; }
.ck-card:hover { text-decoration: none; border-color: var(--brand); }
.ck-card > span { display: flex; flex-direction: column; min-width: 0; }
/* ===== Groups ===== */
body.on-wide .rail { display: none; }
body.on-wide .app { grid-template-columns: 250px minmax(0, 1fr); }
@media (max-width: 1140px) { body.on-wide .app { grid-template-columns: 84px minmax(0, 1fr); } }
@media (max-width: 640px) { body.on-wide .app { grid-template-columns: minmax(0, 1fr); } }
.gp-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.gp-menu { padding: 12px 10px; }
.gp-h1 { font: 800 1.3rem/1.2 var(--display); margin: 2px 6px 10px; }
.gp-items { display: flex; flex-direction: column; gap: 2px; }
.gp-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); color: var(--ink); font-weight: 600; }
.gp-item:hover { background: var(--hover); text-decoration: none; }
.gp-item.on { background: var(--card); box-shadow: inset 3px 0 0 var(--brand); font-weight: 800; }
.gp-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.gp-ic .ico svg { width: 1.05em; height: 1.05em; }
.gp-lbl { flex: 1; }
.gp-new { margin-top: 10px; }
.gp-head { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px 10px; }
.gp-head .section-title { font-size: 1.15rem; margin: 0; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.card.gp-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; margin-bottom: 0; background: var(--card); }
.gp-cover { position: relative; height: 120px; display: grid; place-items: center; color: #fff; }
.gp-cover:hover { text-decoration: none; }
.gp-ini { font: 800 2rem/1 var(--display); letter-spacing: .02em; }
.gp-tag { position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, .92); color: var(--brand); font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.gp-tag.off { background: #12151C; color: #fff; }
.gp-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gp-name { color: var(--ink); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.gp-two { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: auto; padding-top: 10px; }
.gp-two .btn { width: 100%; }
.btn.gp-soft { background: var(--soft); color: var(--brand); }
.btn.gp-grey { background: var(--hover); color: var(--ink); box-shadow: none; }
.btn.gp-grey:disabled { opacity: 1; color: var(--muted); }
.card.gp-hero { padding: 0; overflow: hidden; }
.gp-hero-cover { height: 110px; }
.gp-hero-in { padding: 0 16px 14px; }
.gp-hero-ini { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-top: -36px; border-radius: var(--r); border: 3px solid var(--card); color: #fff; font: 800 1.5rem/1 var(--display); }
.gp-hero-name { font: 800 1.4rem/1.2 var(--display); margin: 8px 0 2px; }
.gp-desc { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-tabs { display: flex; border-top: 1px solid var(--divider); }
.gp-tab { flex: 1; text-align: center; padding: 11px 0; font-weight: 700; color: var(--muted); }
.gp-tab:hover { text-decoration: none; background: var(--hover); }
.gp-tab.on { color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.gp-ev { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--divider); }
.gp-ev:first-of-type { border-top: 0; }
@media (max-width: 760px) {
  .gp-page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gp-items { flex-direction: row; overflow-x: auto; }
  .gp-item { flex: none; }
  .gp-item.on { box-shadow: inset 0 -3px 0 var(--brand); }
  .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
}

@media (min-width: 761px) { .gp-menu { margin-top: 34px; } }

/* ===== Groups ===== */
/* On the Groups pages the site menu shrinks to icons, so there's only one full menu (the Groups panel) */
body.on-wide .rail { display: none; }
@media (min-width: 641px) {
  body.on-wide .app { grid-template-columns: 84px minmax(0, 1fr); }
  body.on-wide .nav .label, body.on-wide .nav .me-card .who, body.on-wide .nav .brand-name, body.on-wide .nav .compose-btn span:last-child { display: none; }
  body.on-wide .nav .compose-btn.btn { width: 52px; height: 52px; padding: 0; border-radius: 50%; display: flex; margin: 12px auto; justify-content: center; gap: 0; }
  body.on-wide .nav a.item, body.on-wide .nav .brand, body.on-wide .nav .me-card { justify-content: center; }
  body.on-wide .nav .brand { padding-left: 0; padding-right: 0; }
}
@media (max-width: 640px) { body.on-wide .app { grid-template-columns: minmax(0, 1fr); } }
.gp-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.gp-menu { padding: 14px 10px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.gp-h1 { font: 800 1.3rem/1.2 var(--display); margin: 2px 6px 10px; }
.gp-items { display: flex; flex-direction: column; gap: 2px; }
.gp-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); color: var(--ink); font-weight: 600; }
.gp-item:hover { background: var(--hover); text-decoration: none; }
.gp-item.on { background: var(--card); box-shadow: inset 3px 0 0 var(--brand); font-weight: 800; }
.gp-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.gp-ic .ico svg { width: 1.05em; height: 1.05em; }
.gp-lbl { flex: 1; }
.gp-new { margin-top: 10px; }
.gp-search { display: flex; align-items: center; gap: 8px; background: var(--hover); border-radius: 999px; padding: 0 12px; height: 38px; margin: 0 4px 10px; color: var(--muted); }
.gp-search-in { border: 0; background: none; outline: none; width: 100%; color: var(--ink); font: inherit; }
.gp-joined { border-top: 1px solid var(--divider); margin-top: 14px; padding-top: 12px; }
.gp-joined-hd { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 6px; }
.gp-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r); color: var(--ink); }
.gp-row:hover { background: var(--hover); text-decoration: none; }
.gp-sq { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font: 800 .85rem/1 var(--display); }
.gp-row-txt { min-width: 0; display: flex; flex-direction: column; }
.gp-row-txt b { font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-none { margin: 4px 6px; }
.gp-gap { height: 18px; }
.gp-head { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px 10px; }
.gp-head .section-title { font-size: 1.15rem; margin: 0; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.card.gp-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; margin-bottom: 0; background: var(--card); }
.gp-cover { position: relative; height: 120px; display: grid; place-items: center; color: #fff; }
.gp-cover:hover { text-decoration: none; }
.gp-ini { font: 800 2rem/1 var(--display); letter-spacing: .02em; }
.gp-tag { position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, .92); color: var(--brand); font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.gp-tag.off { background: #12151C; color: #fff; }
.gp-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gp-name { color: var(--ink); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.gp-two { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: auto; padding-top: 10px; }
.gp-two .btn { width: 100%; }
.btn.gp-soft { background: var(--soft); color: var(--brand); }
.btn.gp-grey { background: var(--hover); color: var(--ink); box-shadow: none; }
.btn.gp-grey:disabled { opacity: 1; color: var(--muted); }
.card.gp-hero { padding: 0; overflow: hidden; }
.gp-hero-cover { height: 110px; }
.gp-hero-in { padding: 0 16px 14px; }
.gp-hero-ini { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-top: -36px; border-radius: var(--r); border: 3px solid var(--card); color: #fff; font: 800 1.5rem/1 var(--display); }
.gp-hero-name { font: 800 1.4rem/1.2 var(--display); margin: 8px 0 2px; }
.gp-desc { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-tabs { display: flex; border-top: 1px solid var(--divider); }
.gp-tab { flex: 1; text-align: center; padding: 11px 0; font-weight: 700; color: var(--muted); }
.gp-tab:hover { text-decoration: none; background: var(--hover); }
.gp-tab.on { color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.gp-ev { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--divider); }
.gp-ev:first-of-type { border-top: 0; }
@media (max-width: 760px) {
  .gp-page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gp-menu { position: static; max-height: none; }
  .gp-joined { display: none; }
  .gp-head { margin: 12px 12px 2px; }
  .gp-menu { padding: 10px 8px; }
  .gp-h1 { font-size: 1.15rem; margin: 0 6px 8px; }
  .gp-search { height: 36px; margin-bottom: 6px; }
  .gp-new { margin-top: 6px; }
  .gp-items { flex-direction: row; overflow-x: auto; }
  .gp-item { flex: none; }
  .gp-item.on { box-shadow: inset 0 -3px 0 var(--brand); }
  .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
}
/* Swipe deck (small screens) */
.gp-deck { padding: 10px 10px 12px; }
.gp-stage { position: relative; height: max(300px, calc(100vh - 300px)); height: max(300px, calc(100dvh - 300px)); }
.gp-menu.gp-compact .gp-h1, .gp-menu.gp-compact .gp-search { display: none; }
.gp-menu.gp-compact .gp-new { margin-top: 6px; }
.main .card.gp-swipe { position: absolute; inset: 0; padding: 0; overflow: hidden; margin: 0 !important; background: var(--card) !important; border-radius: 18px !important; border: 1px solid var(--divider) !important; display: flex; flex-direction: column; }
.gp-swipe.top { touch-action: pan-y; cursor: grab; user-select: none; z-index: 2; box-shadow: 0 6px 20px rgba(18, 21, 28, .12) !important; }
.gp-swipe.under { transform: scale(.95) translateY(10px); }
.gp-swipe.under > * { opacity: .55; }
.gp-swipe-cover { position: relative; flex: 1; display: grid; place-items: center; color: #fff; }
.gp-swipe-cover .gp-ini { font-size: 4.2rem; }
.gp-swipe-body { padding: 14px 16px 16px; }
.gp-swipe-name { font: 800 1.35rem/1.2 var(--display); }
.gp-swipe-desc { margin: 6px 0 0; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-round-row { display: flex; justify-content: center; gap: 28px; margin-top: 12px; }
.gp-round { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--divider); background: var(--card); font-size: 1.5rem; font-weight: 800; box-shadow: 0 2px 8px rgba(18, 21, 28, .1); cursor: pointer; }
.gp-round.no { color: var(--danger); }
.gp-round.yes { color: var(--ok); }
.gp-swipe-hint { color: var(--brand); font-size: .8rem; font-weight: 700; margin-top: 2px; }
.gp-link { display: block; margin: 8px auto 0; background: none; border: 0; color: var(--brand); font-weight: 700; cursor: pointer; }
.gp-back-swipe { margin: 10px 12px 0; }
@media (min-width: 761px) { .gp-back-swipe { display: none; } }
/* Phones: Groups buttons in one slim row */
.gp-strip { display: none; }
@media (max-width: 760px) {
  .gp-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; border-bottom: 1px solid var(--divider); }
  .gp-strip::-webkit-scrollbar { display: none; }
  .gp-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--hover); color: var(--ink); font-family: inherit; font-weight: 700; font-size: .85rem; line-height: 1.2; border: 0; cursor: pointer; white-space: nowrap; }
  .gp-pill:hover { text-decoration: none; }
  .gp-pill.on { background: var(--brand); color: var(--brand-ink, #fff); }
  .gp-pill.add { background: var(--soft); color: var(--brand); }
  .gp-pill .badge { margin: 0; }
  .gp-menu .gp-h1, .gp-menu .gp-items, .gp-menu .gp-new { display: none; }
  .gp-menu { border: 0 !important; background: transparent !important; padding: 8px 8px 0; }
  .gp-menu.gp-compact { display: none; }
  .gp-search { margin: 0 4px; }
}
/* Desktop: the Groups menu takes the place of the site menu (with a Home button to go back) */
.gp-home { display: none; }
@media (min-width: 761px) {
  body.on-wide .nav { display: none; }
  body.on-wide .app { grid-template-columns: minmax(0, 1fr); }
  body.on-wide .main { padding-top: 0; }
  .gp-page { gap: 28px; }
  .main .card.gp-menu { background: transparent; border: 1px solid var(--divider); border-radius: var(--r); margin: 52px 0 0; padding: 14px 10px; position: sticky; top: 12px; max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: none; }
  .gp-home { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; border-radius: 12px; color: var(--ink); font-weight: 700; }
  .gp-home:hover { background: var(--hover); text-decoration: none; }
  .gp-h1 { font-size: 1.5rem; margin: 0 8px 12px; }
  .gp-search { margin: 0 4px 12px; background: var(--card); box-shadow: var(--shadow); }
  .gp-items { gap: 4px; }
  .gp-item { padding: 8px; font-weight: 600; border-radius: 12px; }
  .gp-item.on { background: var(--card); box-shadow: var(--shadow); font-weight: 700; }
  .gp-ic { width: 36px; height: 36px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
  .gp-item.on .gp-ic { background: var(--brand); color: #fff; }
  .gp-new { margin-top: 12px; }
  .gp-joined { margin-top: 16px; padding-top: 14px; }
  .gp-joined-hd { padding: 0 8px 8px; font-size: 1.02rem; }
  .gp-joined-hd a { font-weight: 600; }
  .gp-page > div:last-child { padding-top: 18px; }
}
/* Groups menu: small purple Home link, square search box, plain icons like the main menu */
@media (min-width: 761px) {
  .gp-home { gap: 4px; padding: 2px 4px; margin-bottom: 10px; color: var(--brand); font-size: .92rem; }
  .gp-home:hover { background: none; text-decoration: underline; }
  .gp-home .gp-ic { width: auto; height: auto; background: none; box-shadow: none; color: var(--brand); }
  .gp-search { border-radius: 8px; background: var(--card); box-shadow: none; border: 1px solid var(--divider); }
  .gp-item { gap: 14px; padding: 10px 12px; font-size: 1.05rem; font-weight: 400; }
  .gp-item:hover { background: var(--hover); }
  .gp-item.on { background: none; box-shadow: none; font-weight: 700; }
  .gp-ic, .gp-item.on .gp-ic { width: auto; height: auto; background: none; box-shadow: none; color: var(--ink); }
  .gp-item.on .gp-ic { color: var(--brand); }
  .gp-ic .ico svg { width: 1.25em; height: 1.25em; }
}

/* Groups pages: pop-ups (like Create group) sit in the same spot and size as the boxes on the page */
@media (min-width: 761px) {
  body.on-wide .modal-bg { display: grid !important; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; justify-content: stretch; align-items: start; padding: var(--gp-top, 116px) max(16px, calc((100vw - 1320px) / 2 + 16px)) 16px !important; }
  body.on-wide .modal-bg > .modal { grid-column: 2; width: 100% !important; max-height: calc(100vh - var(--gp-top, 116px) - 16px) !important; }
}
/* Computer only: bigger menu icons (like X) */
@media (min-width: 641px) {
  .nav a.item .ico svg { width: 1.6em; height: 1.6em; }
  .gp-ic .ico svg { width: 1.6em !important; height: 1.6em !important; }
}
@media (min-width: 1141px) { .app > .nav { margin-right: -16px; } }

/* Computer: the left menu stays put (no scrolling) inside a lavender outline box */
@media (min-width: 641px) {
  .app > .nav { top: 80px !important; height: calc(100vh - 96px) !important; margin-top: 16px; padding: 10px 6px !important; border: 1px solid var(--divider); border-radius: var(--r); overflow: hidden !important; display: flex; flex-direction: column; }
  .app > .nav > nav { display: flex; flex-direction: column; gap: 0; }
  .app > .nav a.item { padding-top: 8px; padding-bottom: 8px; }
  .app > .nav .me-card { margin-top: auto; }
  body.on-dm .app > .nav { min-height: 0 !important; padding-top: 10px !important; }
}
@media (min-width: 641px) and (max-height: 760px) {
  .app > .nav a.item { padding-top: 5px; padding-bottom: 5px; }
  .app > .nav .compose-btn.btn { margin-top: 6px; margin-bottom: 6px; }
}
@media (min-width: 641px) and (max-height: 640px) {
  .app > .nav a.item .ico svg { width: 1.3em; height: 1.3em; }
  .app > .nav a.item { padding-top: 3px; padding-bottom: 3px; }
}

/* Computer: the Groups menu box never scrolls */
@media (min-width: 761px) {
  .main .card.gp-menu { overflow: hidden !important; }
}

/* ===== Group chat (WhatsApp style) ===== */
.main .card.gscreen { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: max(460px, calc(100vh - 112px)); height: max(460px, calc(100dvh - 112px)); background: var(--card); margin-bottom: 0; }
.gh { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 6px; border-bottom: 1px solid var(--divider); background: var(--card); flex: none; }
.gh-pic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font: 800 .85rem/1 var(--display); flex: none; }
.gh-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gh-txt b { font-size: 1.02rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-sub { font-size: .82rem; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh .btn { flex: none; }
.gs-body { flex: 1; overflow-y: auto; padding: 12px; background: color-mix(in srgb, var(--brand) 5%, var(--bg)); }
.gs-body .card { background: var(--card); margin-bottom: 10px; }
.gs-body .empty { margin: auto; text-align: center; padding: 30px 10px; }
.gc-msgs { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 2px; background: color-mix(in srgb, var(--brand) 5%, var(--bg)); overscroll-behavior: contain; }
.gc-empty { margin: auto; color: var(--muted); text-align: center; padding: 20px; }
.gc-day { align-self: center; margin: 10px 0 6px; }
.gc-day span { display: inline-block; background: var(--card); color: var(--muted); font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow); }
.gc-row { display: flex; align-items: flex-end; gap: 6px; max-width: 80%; }
.gc-row.first { margin-top: 6px; }
.gc-row.mine { align-self: flex-end; }
.gc-pic { width: 30px; flex: none; }
.gc-pic:hover { text-decoration: none; }
.gc-b { background: var(--card); color: var(--ink); padding: 6px 10px; border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 1px rgba(18, 21, 28, .08); min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; cursor: default; }
.gc-b:not(.first) { border-radius: 16px; }
.gc-b.mine { background: var(--brand); color: #fff; border-radius: 16px 4px 16px 16px; cursor: pointer; }
.gc-b.mine:not(.first) { border-radius: 16px; }
.gc-b.mine a { color: #fff; text-decoration: underline; }
.gc-name { display: block; font-size: .8rem; font-weight: 800; margin-bottom: 1px; }
.gc-text { font-size: .95rem; line-height: 1.35; }
.gc-time { float: right; margin: 6px 0 -2px 10px; font-size: .68rem; color: var(--muted); line-height: 1; }
.gc-b.mine .gc-time { color: rgba(255, 255, 255, .8); }
.gc-form { display: flex; gap: 8px; align-items: flex-end; margin: 0; padding: 8px 10px; border-top: 1px solid var(--divider); background: var(--card); flex: none; }
.gc-form textarea { flex: 1; resize: none; border: 1.5px solid var(--line); background: var(--card); border-radius: 20px; padding: 10px 14px; outline: none; max-height: 120px; min-height: 42px; font: inherit; font-size: 16px; color: var(--ink); }
.gc-form textarea:focus { border-color: var(--brand); }
.gc-send.btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; flex: none; display: grid; place-items: center; }
.gc-locked { padding: 14px; text-align: center; color: var(--muted); border-top: 1px solid var(--divider); flex: none; }
@media (max-width: 640px) {
  .main .card.gscreen { position: fixed; left: 0; right: 0; top: 0; z-index: 55; height: 100vh; height: 100dvh; border: 0; border-radius: 0; margin: 0; }
  .gh { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .gc-form { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.kb-open .gc-form { padding-bottom: 8px; }
  .gc-row { max-width: 88%; }
}

/* ===== Report and block ===== */
.rb-more.btn { margin-right: auto; width: 40px; padding: 0; justify-content: center; }
.btn.rb-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.rb-opts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.rb-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.rb-opt:hover { background: var(--hover); }
.rb-opt input { accent-color: var(--brand); width: 18px; height: 18px; }
.card.rb-warn { border-color: var(--danger) !important; color: var(--ink); }
.rb-count { font-weight: 800; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.rb-count.out { color: var(--danger); }
.rb-reasons { margin: 6px 0 10px; padding-left: 18px; font-size: .88rem; }
.rb-blocked b { font-size: 1.3rem; }

/* ===== Business accounts ===== */
/* Businesses get rounded squares instead of circles */
.av.bz-logo { border-radius: 22%; }
.bz-tag { display: inline-block; font-size: .72rem; font-weight: 800; color: var(--brand); background: var(--soft); padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
/* Switcher: your name in the menu */
.me-card { position: relative; cursor: pointer; }
.me-card .bz-chev { margin-left: auto; color: var(--muted); display: inline-flex; }
@media (max-width: 1140px) and (min-width: 641px) { .me-card .bz-chev { display: none; } }
.bz-switch { display: flex; flex-direction: column; gap: 6px; }
.bz-acct { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--divider); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.bz-acct:hover { background: var(--hover); }
.bz-acct.on { border-color: var(--brand); background: var(--soft); }
.bz-acct .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bz-acct .who b, .bz-acct .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-tick { margin-left: auto; color: var(--brand); font-weight: 800; font-size: 1.1rem; }
/* The "+" square for adding a business */
.bz-plus { width: 44px; height: 44px; border-radius: 22%; border: 0; background: var(--soft); color: var(--brand); display: inline-grid; place-items: center; flex: none; }
.bz-plus .ico svg { width: 20px; height: 20px; stroke-width: 2.4; }

/* The business page uses the same look as a personal profile (.profile); these are the extras */
.bz-profile .row1 .av.bz-logo { border-radius: 22%; }
.bz-profile .handle { margin-top: 2px; }
/* The "View more" dropdown: one full-width block inside the card, square like the rest of the site */
.bz-drop { border-top: 1px solid var(--divider); }
.bz-more { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 20px; border: 0; border-radius: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.bz-more:hover { background: var(--hover); }
.bz-more-h { font-weight: 700; }
.bz-more-txt { margin-left: auto; color: var(--brand); font-weight: 700; font-size: .9rem; }
.bz-more .ico { color: var(--brand); transition: transform .2s; }
.bz-more[aria-expanded="true"] .ico { transform: rotate(180deg); }
.bz-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0 20px 14px; }
.bz-info[hidden] { display: none; }
.bz-info.one { grid-template-columns: 1fr; }
/* Visit and Contact: a line between them, labels on the left, details on the right */
.bz-box { min-width: 0; border-top: 1px solid var(--divider); }
.bz-info:not(.one) .bz-box + .bz-box { padding-left: 16px; border-left: 1px solid var(--divider); }
.bz-row { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--divider); font-size: .92rem; color: var(--ink); }
.bz-box .bz-row:first-child { border-top: 0; }
.bz-row > div, .bz-row > a { min-width: 0; overflow-wrap: anywhere; }
.bz-label { color: var(--muted); font-weight: 600; font-size: .84rem; }
.bz-dir { display: inline-block; margin-top: 3px; font-size: .84rem; font-weight: 700; }
.bz-hours { display: flex; flex-direction: column; gap: 3px; }
.bz-hr { display: flex; justify-content: space-between; gap: 10px; }
.bz-hr span:first-child { font-weight: 600; }
.bz-hr span:last-child { color: var(--muted); text-align: right; }

/* The Business page in the menu */
.bz-intro .cb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bz-intro .cb-chips .chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--divider); color: var(--ink); font-size: .84rem; font-weight: 600; }
.bz-intro .cb-chips .chip.on { background: var(--soft); color: var(--brand); border-color: var(--brand); }
.bz-intro .cb-chips .chip:hover { text-decoration: none; background: var(--hover); }
.bz-card { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); }
.bz-card:hover { text-decoration: none; border-color: var(--brand); }
.bz-card-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bz-card-txt b { font: 800 1.05rem/1.25 var(--display); }
.bz-card-txt .bz-tag { margin-left: 0; align-self: flex-start; }
.bz-card-txt p { margin: 2px 0 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The Add / Edit form */
.bz-pics { position: relative; margin-bottom: 44px; }
.bz-pic-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.bz-prev-cover { height: 120px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 40%, #000)); background-size: cover; background-position: center; }
.bz-pic-tag { position: absolute; font-size: .74rem; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); padding: 3px 9px; border-radius: 999px; }
.bz-pic-btn > .bz-pic-tag { right: 10px; top: 10px; }
.bz-pic-logo { position: absolute; z-index: 1; left: 14px; bottom: -36px; width: 76px; height: 76px; padding: 0; border: 4px solid var(--card); border-radius: 22%; background: var(--soft); cursor: pointer; overflow: visible; }
.bz-prev-logo { width: 100%; height: 100%; border-radius: 18%; overflow: hidden; display: grid; place-items: center; color: var(--brand); }
.bz-prev-logo img { width: 100%; height: 100%; object-fit: cover; }
.bz-pic-logo > .bz-pic-tag { left: 50%; bottom: -10px; transform: translateX(-50%); }
.bz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.bz-delete { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--danger, #d33); font-weight: 700; cursor: pointer; }
/* "2 photo posts left this month" next to the photo button */
.bz-left { font-size: .8rem; color: var(--muted); margin-right: auto; }

/* The Business page box in Settings */
.bz-set-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bz-set-row > .av { flex: none; }
.bz-set-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; line-height: 1.35; }
.bz-set-who b { margin-bottom: 2px; display: inline-flex; align-items: center; gap: 4px; }
/* Buttons sit on their own line under the name so nothing overlaps */
.bz-set-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex-basis: 100%; }
.bz-vstate { display: inline-flex; align-items: center; gap: 4px; font-size: .84rem; font-weight: 700; color: var(--muted); }
.bz-vstate.ok { color: var(--brand); }
/* Admin page: verification requests */
.bz-vreq { padding: 10px 0; border-top: 1px solid var(--divider); }
.bz-vreq:first-of-type { border-top: 0; }
.bz-vreq .row { margin-top: 8px; gap: 8px; }
/* Businesses in People you may know */
.bz-rail .person { padding-top: 6px; }

/* One more item in the left menu (Business): a little less space between items on shorter screens so it still fits */
@media (min-width: 641px) and (max-height: 840px) { .app > .nav a.item { padding-top: 6px; padding-bottom: 6px; } }
@media (min-width: 641px) and (max-height: 760px) { .app > .nav a.item { padding-top: 3px; padding-bottom: 3px; } }
@media (min-width: 641px) and (max-height: 660px) { .app > .nav a.item { padding-top: 1px; padding-bottom: 1px; } .app > .nav a.item .ico svg { width: 1.25em; height: 1.25em; } }

/* Phones */
@media (max-width: 640px) {
  .bz-two { grid-template-columns: 1fr; }
  .bz-info { grid-template-columns: 1fr; }
  .bz-info:not(.one) .bz-box + .bz-box { padding-left: 0; border-left: 0; }
  .bz-more { padding: 14px 16px; }
  .bz-info { padding: 0 16px 14px; }
  .bz-intro .cb-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bz-intro .cb-chips::-webkit-scrollbar { display: none; }
  .bz-intro .cb-chips .chip { flex: none; }
}
  /* The business setup notification counts as a notification, so hide "No notifications yet" under it */
  .bz-setup ~ .empty { display: none; }

    /* Posts: same text sizes as X (15px text with 20px line spacing, 15px name and @username) */
  .post-text { font-size: 15px; line-height: 20px; }
  .post .hd .sub, .post .hd .headline { font-size: 15px; line-height: 20px; }
  .post-text.clamp { height: 60px; }
    /* Comments: replies sit indented under the comment they answer, and the list scrolls in the feed */
  .cmt-list.scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
  .cmt.reply { margin-left: 40px; }
  .cmt-replying { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px 40px; font-size: .82rem; color: var(--muted); }
  .cmt-replying button { background: none; border: 0; color: var(--muted); font-size: .9rem; cursor: pointer; padding: 4px 6px; }
    .post .hd-line { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
  .post .hd-line .headline { min-width: 0; }
  .post .hd .when { flex: none; color: var(--muted); font-size: 15px; line-height: 20px; white-space: nowrap; }
  .post .hd .when::before { content: "· "; }
  .post .hd .when:hover { text-decoration: underline; }
  /* "Continue setting up your account" to-do list */
  .todo-list { display: flex; flex-direction: column; gap: 8px; }
  .todo-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
  .todo-row:hover { background: var(--hover); }
  .todo-row .ico { color: var(--brand); }
  .todo-row .todo-label { flex: 1; }
  .todo-go { color: var(--muted); font-size: 1.3rem; line-height: 1; }

    /* Messages: typing, Sent / Seen, Edited, conversation menu */
  .msg-status { align-self: flex-end; font-size: .75rem; color: var(--muted); margin: 2px 6px 0; }
  .msg-status.typing { align-self: flex-start; font-style: italic; }
  .msg-edited { font-size: .72rem; opacity: .7; }
  .thread .hd .icon-btn.dm-more { left: auto; right: 10px; display: grid; }
  @media (max-width: 960px) and (min-width: 441px) { .thread .hd .icon-btn.dm-more { right: 56px; } }
  .pop { z-index: 79; }
  /* ===== DARK MODE (neon) — turned on in Settings ===== */
html[data-theme="neon"] {
  --bg: #0B0A14 !important; --card: #14112A !important; --ink: #EDE9FF !important; --muted: #A9A3C9 !important;
  --line: rgba(167,139,250,.28) !important; --hover: rgba(167,139,250,.12) !important; --divider: rgba(167,139,250,.28) !important;
  --brand: #A78BFA !important; --brand-ink: #0B0A14 !important; --soft: rgba(167,139,250,.16) !important;
  --like: #F472B6 !important; --ok: #A3E635 !important; --danger: #FB7185 !important;
  --shadow: 0 0 0 1px rgba(167,139,250,.28) !important; color-scheme: dark !important;
}
html[data-theme="neon"] body { background: #0B0A14 !important; color: #EDE9FF; }
html[data-theme="neon"] body a { color: #22D3EE; }
html[data-theme="neon"] .sitebar { background: #0E0C1C !important; box-shadow: 0 1px 0 #A78BFA, 0 0 24px rgba(167,139,250,.45) !important; }
html[data-theme="neon"] .topbar { background: rgba(20,17,42,.96) !important; border-bottom-color: rgba(167,139,250,.28) !important; }
html[data-theme="neon"] .card, html[data-theme="neon"] .nav { background: #14112A !important; border-color: rgba(167,139,250,.3) !important; }
html[data-theme="neon"] .sitebar-search, html[data-theme="neon"] .searchbox label { background: #0E0C1C !important; border: 1px solid rgba(167,139,250,.45) !important; color: #EDE9FF !important; }
html[data-theme="neon"] .sitebar-search input, html[data-theme="neon"] .searchbox input { background: transparent !important; border: 0 !important; }
/* Neon icons: each section its own colour, with a strong glow */
html[data-theme="neon"] body .nav a.item .ico, html[data-theme="neon"] body .tabbar a .ico { color: #A78BFA !important; }
html[data-theme="neon"] body .nav a.item .ico svg, html[data-theme="neon"] body .tabbar a .ico svg { stroke: currentColor !important; filter: drop-shadow(0 0 3px currentColor) !important; }
html[data-theme="neon"] body .nav a[data-nav="home"] .ico, html[data-theme="neon"] body .tabbar a[data-nav="home"] .ico,
html[data-theme="neon"] body .nav a[data-nav="friends"] .ico, html[data-theme="neon"] body .tabbar a[data-nav="friends"] .ico,
html[data-theme="neon"] body .nav a[data-nav="notifications"] .ico, html[data-theme="neon"] body .tabbar a[data-nav="notifications"] .ico,
html[data-theme="neon"] body .nav a[data-nav="meetups"] .ico { color: #22D3EE !important; }
html[data-theme="neon"] body .nav a[data-nav="explore"] .ico, html[data-theme="neon"] body .nav a[data-nav="groups"] .ico,
html[data-theme="neon"] body .nav a[data-nav="profile"] .ico, html[data-theme="neon"] body .tabbar a[data-nav="profile"] .ico { color: #A78BFA !important; }
html[data-theme="neon"] body .nav a[data-nav="ai"] .ico, html[data-theme="neon"] body .nav a[data-nav="points"] .ico,
html[data-theme="neon"] body .nav a[data-nav="settings"] .ico, html[data-theme="neon"] body .nav a[data-nav="ask"] .ico { color: #F472B6 !important; }
html[data-theme="neon"] body .nav a[data-nav="business"] .ico, html[data-theme="neon"] body .nav a[data-nav="messages"] .ico, html[data-theme="neon"] body .tabbar a[data-nav="messages"] .ico,
html[data-theme="neon"] body .nav a[data-nav="saved"] .ico, html[data-theme="neon"] body .nav a[data-nav="more"] .ico { color: #A3E635 !important; }
html[data-theme="neon"] body .nav a.item { color: #EDE9FF !important; }
html[data-theme="neon"] body .nav a.item[aria-current="page"], html[data-theme="neon"] body .tabbar a[aria-current="page"] { background: rgba(34,211,238,.12) !important; box-shadow: inset 0 0 0 1.5px #22D3EE, 0 0 16px rgba(34,211,238,.45); }
/* Buttons glow */
html[data-theme="neon"] body .btn.primary, html[data-theme="neon"] body .tabbar a.plus, html[data-theme="neon"] body .compose-btn { background: #A78BFA !important; color: #0B0A14 !important; box-shadow: 0 0 10px #A78BFA, 0 0 28px rgba(167,139,250,.6) !important; border: 0 !important; }
html[data-theme="neon"] body .btn.primary .ico svg, html[data-theme="neon"] body .tabbar a.plus .ico svg, html[data-theme="neon"] body .compose-btn .ico svg { stroke: #0B0A14 !important; filter: none !important; }
html[data-theme="neon"] body .btn.outline { color: #EDE9FF !important; border-color: rgba(167,139,250,.6) !important; background: transparent !important; }
html[data-theme="neon"] body .post .actions button { color: #A9A3C9 !important; }
html[data-theme="neon"] body input, html[data-theme="neon"] body textarea, html[data-theme="neon"] body select, html[data-theme="neon"] body .inp { background: #0E0C1C !important; color: #EDE9FF !important; border-color: rgba(167,139,250,.4) !important; }
html[data-theme="neon"] body .badge { background: #F472B6 !important; color: #0B0A14 !important; box-shadow: 0 0 10px #F472B6; }
/* Dark mode: profile "friends" count same colour as "posts" */
html[data-theme="neon"] body .stats a { color: #A9A3C9 !important; }
/* Dark mode: logo (two people on a lavender circle) */
html[data-theme="neon"] body .sitebar-logo { position: relative; background: #C4B5FD !important; box-shadow: 0 0 16px rgba(167,139,250,.7) !important; }
html[data-theme="neon"] body .sitebar-logo img { opacity: 0; }
html[data-theme="neon"] body .sitebar-logo::after { content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='33 39 126 114'><defs><clipPath id='l'><path d='M35 150.5A40 56 0 0 1 115 150.5Z'/></clipPath></defs><circle cx='117' cy='64' r='22.5' fill='%238B7FC7'/><circle cx='75' cy='64' r='22.5' fill='%234C1D95'/><path d='M77 150.5A40 56 0 0 1 157 150.5Z' fill='%238B7FC7'/><path d='M35 150.5A40 56 0 0 1 115 150.5Z' fill='%234C1D95'/><path d='M77 150.5A40 56 0 0 1 157 150.5Z' fill='%232E1065' clip-path='url(%23l)'/></svg>") center / contain no-repeat; }
html[data-theme="neon"] body .sitebar-brand { color: #EDE9FF !important; text-shadow: 0 0 10px rgba(167,139,250,.8); }
/* Dark mode: post box has no black background while typing */
html[data-theme="neon"] body .composer textarea { background: transparent !important; border: 0 !important; color: #EDE9FF !important; }
/* Hide scroll bars (you can still scroll) */
html, body, * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
/* Phones: top and bottom bars slide away while scrolling down */
@media (max-width: 640px) {
  .topbar, .tabbar { transition: transform .25s ease; }
  body.bars-hidden .topbar { transform: translateY(-100%); }
  body.bars-hidden .tabbar { transform: translateY(calc(100% + 30px)); }
}
/* Dark mode: mix the bottom bar colours (phones) */
html[data-theme="neon"] body .tabbar a[data-nav="friends"] .ico { color: #F472B6 !important; }
html[data-theme="neon"] body .tabbar a[data-nav="notifications"] .ico { color: #A78BFA !important; }
/* Dark mode: notifications — names blue, the rest white */
html[data-theme="neon"] body a.notif { color: #EDE9FF !important; }
html[data-theme="neon"] body a.notif .txt b { color: #22D3EE; }
/* Computer: a little more space between the menu items */
@media (min-width: 641px) { .nav a.item { margin-bottom: 5px; } }
/* Dark mode: Social AI chat lifted off the page (computer) */
@media (min-width: 641px) {
  html[data-theme="neon"] .ai-chat { background: #1E1A3A !important; border: 1.5px solid rgba(167,139,250,.7); box-shadow: 0 0 18px rgba(167,139,250,.45), 0 18px 44px rgba(0,0,0,.6); }
  html[data-theme="neon"] .ai-chat .ai-head { background: linear-gradient(90deg, rgba(167,139,250,.28), rgba(34,211,238,.18)); }
  html[data-theme="neon"] .ai-chat .ai-input { background: #14112A !important; }
}
/* Computer: stretch the feed to the right so the space on both sides of it matches */
@media (min-width: 1141px) { body:not(.on-dm):not(.on-wide) .main { margin-right: -16px; } }/* Reposts */
.repost-wrap .repost-by { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px 52px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.repost-wrap .repost-by .ico svg { width: 16px; height: 16px; }
.post .actions button.reposted { color: #16A34A !important; }
html[data-theme="neon"] body .post .actions button.reposted { color: #A3E635 !important; }
/* Profile: the "reposts" count is a link (the other counts aren't) */
.card.profile .stats a.reposts-link { pointer-events: auto; cursor: pointer; }
.card.profile .stats a.reposts-link:hover { text-decoration: underline; }
.card.profile .stats a.reposts-link { pointer-events: auto; cursor: pointer; }

/* =================================================================
   MATCHMAKER SITE (header, login, notifications, test bar)
   ================================================================= */
 :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --brand: #D23A32; --brand-ink: #FFFFFF; --bg: #F5F4EE; --card: #FAF9F5; --ink: #141413; --muted: #6B6A65; --line: #E3E0D6; --hover: #EFEDE5; --divider: #E3E0D6; --soft: #F8E1DF; --shadow: 0 1px 2px rgba(20, 20, 19, .05), 0 0 0 1px rgba(20, 20, 19, .04); color-scheme: light; }  
body { background: var(--bg); }
.mm-top-bar { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--line); }
.mm-top-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
body.on-wide .mm-top-in { max-width: 1180px; }
.mm-brand { display: inline-flex; align-items: center; gap: 8px; font: 900 1.25rem/1 var(--display); color: var(--ink); text-decoration: none !important; letter-spacing: -.01em; }
.mm-brand .ico { color: var(--brand); }
.mm-brand .ico svg { width: 1.4em; height: 1.4em; }
.mm-brand.big { font-size: 1.8rem; justify-content: center; width: 100%; }
.mm-main { max-width: 760px; margin: 0 auto; padding: 16px 16px 60px; }
body.on-wide .mm-main { max-width: 1180px; }
.mm-bell { position: relative; }
.mm-bell-n { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 99px; background: #E11D48; color: #fff; font: 700 .7rem/18px var(--font); text-align: center; padding: 0 4px; }
.mm-me-btn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.mm-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.mm-login-card { width: min(420px, 100%); padding: 28px 24px; text-align: center; }
.mm-login-card .inp { margin-top: 8px; }
.mm-login-card .field { text-align: left; }
.mm-or { margin: 14px 0 4px; color: var(--muted); font-size: .85rem; }
.mm-err { color: var(--danger, #C62F2F); font-size: .88rem; min-height: 1.2em; margin-top: 8px; }
.btn.block { width: 100%; justify-content: center; }
.mm-testbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; background: #FEF3C7; border-bottom: 1px solid #FCD34D; font-size: .88rem; }
.mm-notifs { display: grid; gap: 2px; }
.mm-notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; color: var(--ink); text-decoration: none !important; font-size: .92rem; }
.mm-notif:hover { background: var(--hover); }
.mm-notif.unread { background: var(--soft); }
.mm-coach-card { text-align: center; padding: 24px; }
.mm-coach-card .av { margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 8px; }
.page-head h1 { flex: 1; }
.loading { padding: 40px; text-align: center; color: var(--muted); }

/* =================================================================
   PRESENTER POLISH
   ================================================================= */
/* Demo bar: slim and dark so it doesn't steal attention */
.mm-testbar { background: #262624; color: #fff; border-bottom: 0; padding: 6px 16px; font-size: .8rem; gap: 10px; }
.mm-testbar b { background: #D23A32; padding: 2px 8px; border-radius: 99px; letter-spacing: .06em; font-size: .72rem; }
.mm-testbar .muted { color: #A6A39A; }
.mm-testbar .inp { background: #30302E; color: #fff; border-color: #3D3D3A; padding: 4px 10px; height: auto; font-size: .82rem; }
.mm-testbar .btn { background: transparent; color: #fff; border-color: #3D3D3A; padding: 4px 12px; }
@media (max-width: 640px) { .mm-testbar .muted { display: none; } }

/* Hero at the top of the main page */
.mm-hero { position: relative; overflow: hidden; padding: 28px 24px; margin-bottom: 14px; border-radius: 18px; color: #fff;
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 45%), linear-gradient(120deg, #D23A32 0%, #B32E28 46%, #26498F 54%, #2F5DB0 100%); }
.mm-hero-tag { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.mm-hero h1 { margin: 8px 0 6px; font: 900 clamp(1.6rem, 4vw, 2.2rem)/1.1 var(--display); letter-spacing: -.02em; }
.mm-hero p { margin: 0 0 18px; max-width: 460px; opacity: .9; }
.mm-hero .btn { background: #fff; color: #D23A32; padding: 10px 18px; font-size: .95rem; }

/* Show cards: date block · info · button */
.mm-sheet-row.mm-show-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.mm-date { width: 56px; padding: 6px 0; border-radius: 12px; background: var(--soft); color: var(--brand); text-align: center; line-height: 1; }
.mm-date span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.mm-date b { display: block; margin-top: 3px; font: 900 1.5rem/1 var(--display); }
@media (max-width: 640px) {
  .mm-sheet-row.mm-show-row { grid-template-columns: auto minmax(0, 1fr); }
  .mm-show-row > .btn { grid-column: 2; justify-self: start; }
}

/* Cards lift a little on hover */
.mm-card { transition: transform .15s, box-shadow .15s; }
a.mm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47, 93, 176, 14); }
/* ===== Page layout like Gmail: menu on the left, page on the right ===== */
.mm-top-in, body.on-wide .mm-top-in { max-width: none; gap: 14px; padding: 8px 16px; }
.mm-menu-btn { color: var(--ink); width: 44px; height: 44px; }
.mm-menu-btn .ico svg { width: 22px; height: 22px; }
.mm-brand { min-width: 0; }
.mm-search { display: none; flex: 0 1 720px; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border-radius: 23px; background: var(--hover); color: var(--muted); }
body.on-mail .mm-search { display: flex; }
.mm-search-inp { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--ink); }
.mm-shell { flex: 1 0 auto; width: 100%; display: flex; }
.mm-shell > .mm-main { flex: 1 1 0; min-width: 0; padding: 16px 16px 60px; }
body.on-mail .mm-shell > .mm-main { max-width: none; padding: 12px 16px 16px 0; }
.mm-side { flex: 0 0 256px; position: sticky; top: 62px; align-self: flex-start; max-height: calc(100vh - 62px); overflow-y: auto; padding: 8px 8px 24px 0; display: flex; flex-direction: column; }
body.mm-nav-hide .mm-side { display: none; }
body.mm-nav-hide.on-mail .mm-shell > .mm-main { padding-left: 16px; }
.mm-side hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.mm-side a, .mm-side-btn { display: flex; align-items: center; gap: 18px; min-height: 36px; padding: 0 14px 0 24px; border-radius: 0 18px 18px 0; color: var(--ink); font: inherit; font-size: .93rem; text-decoration: none !important; border: 0; background: none; text-align: left; cursor: pointer; }
.mm-side a:hover, .mm-side-btn:hover { background: var(--hover); }
.mm-side a.on { background: var(--soft); color: var(--brand); font-weight: 700; }
.mm-side .ico svg { width: 20px; height: 20px; }
.mm-side-l { flex: 1; }
.mm-side-n { font-size: .8rem; font-weight: 600; }
.mm-new { display: flex; align-items: center; gap: 18px; height: 54px; margin: 4px 0 12px; padding: 0 24px; border: 0; border-radius: 0 18px 18px 0; background: var(--soft); color: var(--brand); font: inherit; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); cursor: pointer; }
.mm-new .ico svg { width: 22px; height: 22px; }
.mm-scrim, .mm-tabbar, .mm-fab, .mm-side .mm-side-brand { display: none; }

/* ===== A folder (Inbox, Sent...) ===== */
.mm-mail { padding: 0; overflow: hidden; }
.mm-mail-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mm-mail-bar h1 { margin: 0; font-size: 1rem; }
.mm-mail-empty { padding: 40px 18px; text-align: center; }
.mm-mrow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px 0 10px; border-bottom: 1px solid var(--line); background: var(--hover); font-size: .92rem; }
.mm-mrow.unread { background: var(--card); }
.mm-mrow:hover { box-shadow: inset 0 -1px 0 var(--line), 0 1px 3px rgba(0, 0, 0, .08); z-index: 1; }
.mm-mrow-link { display: contents; color: var(--ink); text-decoration: none !important; }
.mm-mrow-link > .av { display: none; }
.mm-mrow-name { flex: 0 0 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-mrow-sub { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-mrow-pre { color: var(--muted); }
.mm-mrow-pre::before { content: " - "; }
.mm-mrow-time { flex: none; font-size: .8rem; color: var(--muted); }
.mm-mrow.unread .mm-mrow-name, .mm-mrow.unread .mm-mrow-subj { font-weight: 700; }
.mm-mrow.unread .mm-mrow-time { color: var(--brand); font-weight: 700; }
.mm-mrow-link:hover .mm-mrow-subj { text-decoration: underline; }
.mm-star { flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.mm-star .ico svg { width: 19px; height: 19px; }
.mm-star.on { color: #E3A008; }
.mm-star.on svg { fill: currentColor; }
.mm-label { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 5px; background: var(--soft); color: var(--brand); font-size: .75rem; font-weight: 700; vertical-align: 1px; }
.mm-label.grey { background: var(--hover); color: var(--muted); }
.mm-mrow:not(.unread) .mm-label.grey { background: var(--card); }

/* ===== One conversation ===== */
.mm-th { max-width: 900px; }
.mm-th-bar { display: flex; align-items: center; gap: 4px; }
.mm-th-bar .icon-btn { width: 40px; height: 40px; color: var(--ink); }
.mm-act.on { color: var(--brand); }
.mm-act.on.fill svg { fill: currentColor; }
.mm-th-subj { margin: 10px 4px 6px; font-size: 1.5rem; line-height: 1.25; }
.mm-th-tags { margin: 0 4px 14px; }
.mm-th-msgs { display: flex; flex-direction: column; gap: 8px; }
.mm-mcard { padding: 16px 18px !important; margin: 0 !important; }
.mm-mcard-top { display: flex; align-items: center; gap: 12px; }
.mm-mcard-text { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.mm-msg-form { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 12px 0; background: var(--bg); }
.mm-msg-form .icon-btn { color: var(--ink); width: 44px; height: 44px; }
.mm-msg-form .mm-msg-inp { flex: 1; resize: none; height: 46px !important; min-height: 46px !important; border-radius: 23px !important; padding: 11px 18px !important; line-height: 1.4; }
.mm-msg-form .mm-send { width: 44px !important; height: 44px !important; border-radius: 50% !important; padding: 0 !important; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.mm-send .ico svg { width: 20px; height: 20px; }
/* Snooze / Schedule send choices */
.mm-when-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mm-when-opt:hover { background: var(--hover); }

/* ===== Settings ===== */
.mm-set-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.mm-set-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }

/* ===== Phones and small windows: the menu slides out from the left ===== */
@media (max-width: 900px) {
  .mm-side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: 300px; max-width: 85vw; max-height: none; padding: 16px 10px 24px 0; background: var(--card); border-radius: 0 18px 18px 0; transform: translateX(-105%); transition: transform .2s; }
  body.mm-nav-open .mm-side { transform: none; }
  body.mm-nav-open .mm-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 19, .4); }
  .mm-side a, .mm-side-btn { min-height: 48px; font-size: 1rem; }
  .mm-side .mm-side-brand { display: flex; gap: 12px; padding: 4px 24px 16px; font-weight: 800; font-size: 1.3rem; background: none !important; color: var(--ink); }
  body.on-mail .mm-shell > .mm-main { padding: 12px 12px 16px; }
}
@media (max-width: 640px) {
  /* Messages pages: the search bar takes the place of the logo, like Gmail */
  body.on-mail .mm-brand { display: none; }
  body.on-mail .mm-search { flex: 1; }
  .mm-top-in, body.on-wide .mm-top-in { gap: 8px; padding: 8px 10px; }
  /* Bottom bar: Messages and Video calls only */
  .mm-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; justify-content: space-evenly; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); }
  .mm-tabbar a, .mm-tabbar button { position: relative; width: 84px; height: 40px; border: 0; border-radius: 20px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
  .mm-tabbar a.on { background: var(--soft); color: var(--brand); }
  .mm-tabbar .ico svg { width: 24px; height: 24px; }
  .mm-tab-n { position: absolute; top: -4px; right: 14px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
  .mm-tab-n[hidden] { display: none; }
  .mm-shell > .mm-main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .mm-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .mm-demo-pill { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  /* New message button above the bottom bar */
  body.on-mail .mm-fab { display: flex; position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 45; align-items: center; gap: 10px; height: 54px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--soft); color: var(--brand); font: inherit; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); cursor: pointer; }
  /* A folder: each conversation is a card with the coach's picture */
  .mm-mail { background: none; border: 0 !important; box-shadow: none !important; }
  .mm-mail-bar { border: 0; padding: 6px 6px 10px; }
  .mm-mail-bar h1 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .mm-mrow { display: block; min-height: 0; margin-bottom: 4px; padding: 14px 14px; border: 0; border-radius: 14px; }
  .mm-mrow-link { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 14px; grid-template-areas: "av name time" "av sub sub"; }
  .mm-mrow-link > .av { display: grid; grid-area: av; }
  .mm-mrow-name { grid-area: name; font-size: 1.02rem; }
  .mm-mrow-time { grid-area: time; }
  .mm-mrow-sub { grid-area: sub; white-space: normal; padding-right: 30px; }
  .mm-mrow-subj, .mm-mrow-pre { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mm-mrow-pre::before { content: none; }
  .mm-mrow .mm-label { margin: 2px 0; }
  .mm-star { position: absolute; right: 6px; bottom: 6px; z-index: 1; }
  /* A conversation: the reply box sits just above the bottom bar */
  .mm-msg-form { position: fixed; left: 0; right: 0; bottom: calc(57px + env(safe-area-inset-bottom, 0px)); z-index: 40; padding: 10px 12px; border-top: 1px solid var(--line); }
  body.on-thread .mm-fab { display: none; }
  body.on-thread .mm-demo-pill { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }
  body.on-thread .mm-shell > .mm-main { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  .mm-th-subj { font-size: 1.3rem; }
}

/* ===== Settings: Your account ===== */
.mm-set-acct { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.mm-set-acct:first-of-type { margin-top: 10px; }
.mm-set-acct .btn { flex: none; }

/* ===== Forms: boxes side by side line up along the bottom ===== */
.mm-two { align-items: end; }

/* ===== Phones: nothing squeezed, one thing per line ===== */
@media (max-width: 640px) {
  /* Forms (Add athlete, Post a show...): every box gets the full width */
  .mm-two, .mm-form .mm-two .mm-two { grid-template-columns: 1fr !important; }
  /* Tabs under the banner stay on one line */
  body .mm-tabs button { white-space: nowrap; padding: 12px 6px; font-size: .92rem; }
  /* A show: "All shows" above the title, the title gets the full width */
  body .mm-showtitle { flex-direction: column-reverse; align-items: flex-start; gap: 6px; padding: 14px 16px; }
  body .mm-showtitle h1 { font-size: 1.35rem; }
  body .mm-showtitle .mm-showback { align-self: flex-start; }
  /* Host info: each label above its answer */
  body .mm-showinfo { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }
  body .mm-showinfo > b:not(:first-child) { margin-top: 10px; }
  /* Show buttons: three per row instead of five squeezed together */
  body .mm-showwrap .mm-showbar { flex-wrap: wrap; }
  body .mm-showwrap .mm-showtab { flex: 1 0 33%; border-bottom: 1px solid var(--line); padding: 12px 4px; }
  /* Settings: the button goes under its explanation */
  .mm-set-acct { flex-direction: column; align-items: stretch; }
  .mm-set-row { flex-wrap: wrap; }
  .mm-set-row b { overflow-wrap: anywhere; }
}

/* ===== Phones: the bout sheet shrinks to fit the screen (pinch to zoom in) ===== */
@media (max-width: 640px) {
  body .mm-tbl { min-width: 0; font-size: .56rem; line-height: 1.25; zoom: .78; }
  body .mm-tbl th, body .mm-tbl td { padding: 3px 2px; }
  body .mm-tbl th { font-size: .5rem; }
  body .mm-tbl th div { display: none; }
  body .mm-tbl td.mm-nm { min-width: 0; }
  body .mm-tbl td.mm-nm div { font-size: .5rem; }
  body .mm-tbl td.mm-dobc { white-space: normal; }
  body .mm-tbl .mm-cell-sel { font-size: .56rem; padding: 0; min-height: 0; height: auto; width: 100%; }
}
@media (max-width: 374px) {
  body .mm-tbl { zoom: .7; }
}

/* ===== Phones and small windows: the menu scrolls ===== */
@media (max-width: 900px) {
  .mm-side { align-self: stretch; overflow-y: auto; overscroll-behavior: contain; }
}

/* ===== Settings: answers sit right beside their labels, on the left ===== */
.mm-set-row { justify-content: flex-start; }
.mm-set-row > span { flex: 0 0 110px; }

/* ===== Menu: "More" hides the folders under Sent until you tap it ===== */
.mm-side:not(.more-open) .mm-extra { display: none; }
.mm-more-btn .ico svg { transition: transform .15s; }
.mm-side.more-open .mm-more-btn .ico svg { transform: rotate(180deg); }

/* ===== Settings: every button the same size (like Facebook: 36px tall) ===== */
.mm-set .btn { height: 36px; min-height: 36px; padding: 0 16px; border-radius: 6px; font-size: .94rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.mm-set-btns { display: flex; gap: 8px; flex: none; }
@media (max-width: 640px) {
  .mm-set-btns .btn { flex: 1; }
}

/* ===== New message: set up like Gmail ===== */
.mm-cmp-bg { position: fixed; inset: 0; z-index: 75; background: rgba(20, 20, 19, .4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mm-cmp { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 22px; background: var(--hover); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.mm-cmp-top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 4px; }
.mm-cmp-round, .mm-cmp-actions { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.mm-cmp-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.mm-cmp-actions { position: relative; display: flex; border-radius: 24px; padding: 2px 6px; }
.mm-cmp-actions > button { width: 44px; height: 40px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.mm-cmp-actions > button:first-child { color: var(--brand); }
.mm-cmp .ico svg { width: 22px; height: 22px; }
.mm-cmp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 2; min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.mm-cmp-menu[hidden] { display: none; }
.mm-cmp-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.mm-cmp-menu button:hover { background: var(--hover); }
.mm-cmp-card { background: var(--card); border-radius: 14px; }
.mm-cmp-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; }
.mm-cmp-card > .mm-cmp-row + .mm-cmp-row { border-top: 1px solid var(--line); }
.mm-cmp-row[hidden] { display: none; }
.mm-cmp-k { color: var(--muted); flex: none; min-width: 44px; }
.mm-cmp-inp { flex: 1; min-width: 0; height: 44px; border: 0; background: none; outline: none; font: inherit; color: var(--ink); }
.mm-cmp-inp[hidden] { display: none; }
.mm-cmp-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-cmp-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 5px; border: 1px solid var(--line); border-radius: 17px; background: var(--hover); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.mm-cmp-chip .ico svg { width: 14px; height: 14px; }
.mm-cmp-suggwrap { padding: 0 16px 10px; }
.mm-cmp-suggwrap[hidden] { display: none; }
.mm-cmp-label { font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.mm-cmp-sugg { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mm-cmp-person { flex: 0 0 84px; width: 84px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.mm-cmp-person b { font-size: .88rem; line-height: 1.2; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-cmp-person span:not(.av) { font-size: .78rem; color: var(--muted); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -4px; }
.mm-cmp .av { border-radius: 50% !important; }
.mm-cmp-none { padding: 6px 0 10px; }
.mm-cmp-grow { flex: 1; display: flex; }
.mm-cmp-body { flex: 1; min-height: 200px; padding: 14px 16px; border: 0; background: none; outline: none; resize: none; font: inherit; color: var(--ink); }
/* Phones: the New message box fills the whole screen */
@media (max-width: 640px) {
  .mm-cmp-bg { padding: 0; align-items: stretch; }
  .mm-cmp { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; }
}