/* =================================================================
   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: 440px) {
  .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: 441px) {
  .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); }