:root {
  --pink-900: #4b1528; --pink-700: #993556; --pink-600: #d4537e;
  --pink-500: #e9679b; --pink-100: #fbeaf0; --pink-50: #fdf4f8;
  --ink: #1c1c1e; --ink-2: #6b6b70; --ink-3: #9a9aa0;
  --bg: #f4f2f4; --card: #ffffff; --line: #e8e4e7;
  --nav-h: 58px;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
.top {
  position: sticky; top: 0; z-index: 10; background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
}
.top .logo { width: 34px; height: 34px; border-radius: 9px; }
.top .brand { font-weight: 700; font-size: 19px; color: var(--pink-600); letter-spacing: .01em; }
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.top .spacer { flex: 1; }
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--pink-50);
  color: var(--pink-700); font-size: 19px; display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.wrap { max-width: 640px; margin: 0 auto; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--pink-600); color: #fff; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.composer {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
}
.composer-form { flex: 1; display: flex; gap: 8px; align-items: flex-end; }
.composer-form textarea {
  flex: 1; background: var(--bg); border: none; border-radius: 18px; padding: 10px 16px;
  font: inherit; font-size: 15px; resize: none; outline: none;
}
.btn-post { padding: 9px 18px; }
.card { background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 14px 6px; margin-top: 8px; }
.card .head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.who { line-height: 1.25; }
.who .name { font-weight: 600; font-size: 15px; }
.who .name .feeling { font-weight: 400; color: var(--ink-2); }
.who .meta { font-size: 12.5px; color: var(--ink-3); }
.body { font-size: 15.5px; line-height: 1.5; margin-bottom: 8px; overflow-wrap: anywhere; }
.chip {
  display: inline-block; background: var(--pink-100); color: var(--pink-700);
  border-radius: 999px; padding: 1px 10px 2px; font-size: 14px; font-weight: 500;
}
.hashtag { color: var(--pink-600); font-weight: 500; }
.counts {
  display: flex; align-items: center; gap: 6px; color: var(--ink-2);
  font-size: 13px; padding: 4px 2px 8px; border-bottom: 1px solid var(--line);
}
.actions { display: flex; }
.actions button {
  flex: 1; background: none; border: none; padding: 10px 0; font-size: 14px;
  color: var(--ink-2); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.actions button:disabled { opacity: .45; }
.syscard {
  background: var(--pink-50); border: 1px solid var(--pink-100); border-radius: 14px;
  margin: 8px 14px 0; padding: 12px 14px; display: flex; gap: 12px; align-items: center;
}
.syscard img { width: 44px; height: 44px; border-radius: 10px; }
.syscard .t { font-weight: 600; font-size: 14.5px; color: var(--pink-900); }
.syscard .s { font-size: 13px; color: var(--pink-700); }
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: var(--card); border-top: 1px solid var(--line);
  display: flex; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--ink-3); font-size: 10.5px; font-weight: 600;
}
.nav a .i { font-size: 22px; line-height: 1; }
.nav a.on { color: var(--pink-600); }
.alert {
  background: var(--pink-100); color: var(--pink-900); border: 1px solid var(--pink-500);
  border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px;
}
.gate-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #4a1230 0%, #2b0a1d 55%, #1a0512 100%);
  padding: 20px;
}
.gate-card {
  background: var(--card); border-radius: 20px; padding: 28px 24px; max-width: 420px;
  width: 100%; text-align: center; margin: 0 auto;
}
.gate-logo { width: 110px; height: 110px; border-radius: 22px; margin-bottom: 14px; }
.gate-card h1 { font-size: 23px; margin-bottom: 6px; }
.gate-card .accent { color: var(--pink-600); }
.gate-card .sub { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; }
.btn-primary {
  display: inline-block; background: var(--pink-600); color: #fff; border: none;
  border-radius: 999px; padding: 12px 26px; font-size: 15.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.btn-primary:active { background: var(--pink-700); }
.fine { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; }
.fine a { color: var(--pink-600); }
.letter {
  text-align: left; background: var(--pink-50); border-radius: 14px; padding: 14px 16px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 4px 0 18px;
}
.letter p + p { margin-top: 10px; }
.choose-label { font-weight: 600; font-size: 14.5px; text-align: left; margin-bottom: 8px; }
.choice {
  display: flex; gap: 10px; align-items: center; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--pink-600); background: var(--pink-50); }
.choice span { display: flex; flex-direction: column; }
.choice small { color: var(--ink-2); font-size: 12.5px; }
.choice-locked { opacity: .55; cursor: default; }
.gate-card form .btn-primary { width: 100%; margin-top: 8px; }
.composer-main { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.composer-extras { display: flex; gap: 6px; flex-wrap: wrap; }
.composer-extras select, .composer-extras input {
  font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; background: var(--card); color: var(--ink); max-width: 46%;
}
.composer-extras input { flex: 1; min-width: 100px; }
.composer-row { display: flex; align-items: center; gap: 8px; }
.btn-extras {
  background: none; border: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  padding: 4px 0; cursor: pointer; font-family: inherit;
}
.composer-row .btn-post { margin-left: auto; }
.actions form { flex: 1; display: flex; }
.actions form button { width: 100%; }
.action-link {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 0; font-size: 14px; color: var(--ink-2); font-weight: 600; text-decoration: none;
}
.rx-wrap { flex: 1; position: relative; display: flex; }
.rx-form { width: 100%; display: flex; }
.rx-form .btn-like {
  width: 100%; background: none; border: none; padding: 10px 0; font-size: 14px;
  color: var(--ink-2); font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-like.liked { color: var(--pink-600); }
.rx-picker {
  display: none; position: absolute; bottom: 100%; left: 4px; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 6px; box-shadow: 0 4px 16px rgba(0,0,0,.14); white-space: nowrap;
}
.rx-picker.open { display: block; }
@media (hover: hover) and (pointer: fine) {
  .rx-wrap:hover .rx-picker { display: block; }
}
.rx-picker button {
  background: none; border: none; font-size: 22px; padding: 2px 4px; cursor: pointer;
}
.counts a { color: inherit; text-decoration: none; }
.comments { background: var(--card); padding: 4px 14px 10px; }
.comment { display: flex; gap: 8px; margin-top: 10px; }
.c-main { flex: 1; min-width: 0; }
.c-bubble {
  display: inline-block; background: var(--bg); border-radius: 14px; padding: 7px 12px;
  max-width: 100%;
}
.c-name { display: block; font-weight: 600; font-size: 13px; }
.c-body { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.c-meta {
  display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3);
  padding: 3px 0 0 12px;
}
.c-like { display: inline; }
.c-like button {
  background: none; border: none; font-size: 12px; font-weight: 700; color: var(--ink-3);
  cursor: pointer; padding: 0; font-family: inherit;
}
.c-like button.liked { color: var(--pink-600); }
.c-rx { flex: none; display: inline-flex; }
.c-rx .rx-form { width: auto; }
.c-rx .btn-like {
  width: auto; padding: 0; font-size: 12px; font-weight: 700; color: var(--ink-3);
}
.c-rx .btn-like.liked { color: var(--pink-600); }
.c-rx .rx-picker { left: -10px; }
.c-preview { padding: 6px 14px 12px; border-top: 1px solid var(--line); }
.pc { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; text-decoration: none; color: inherit; }
.pc .c-bubble { position: relative; }
.pc-rx {
  position: absolute; right: -6px; bottom: -8px; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 6px;
  font-size: 11px; color: var(--ink-2);
}
.pc-more {
  display: inline-block; margin: 8px 0 0 34px; font-size: 13px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.comment.is-reply { margin-left: 38px; margin-top: 8px; }
.reply-box { margin: 4px 0 0 12px; }
.reply-box summary {
  font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: pointer;
  list-style: none; display: inline-block;
}
.reply-box summary::-webkit-details-marker { display: none; }
.reply-box[open] summary { color: var(--pink-600); }
.reply-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; }
.reply-form textarea {
  flex: 1; background: var(--bg); border: none; border-radius: 14px; padding: 8px 14px;
  font: inherit; font-size: 14px; resize: none; outline: none;
}
.reply-form .btn-post { padding: 8px 14px; font-size: 14px; }
.avatar-link { flex: none; display: inline-flex; text-decoration: none; }
.photo-btn { cursor: pointer; }
.p-media { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.p-media.n1 { grid-template-columns: 1fr; }
.p-media.n2, .p-media.n4 { grid-template-columns: 1fr 1fr; }
.p-media.n3 { grid-template-columns: 1fr 1fr; }
.p-media.n3 a:first-child { grid-column: 1 / -1; }
.p-media a { display: block; background: var(--bg); }
.p-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-media.n1 img { max-height: 480px; object-fit: contain; background: var(--bg); }
.p-media.n2 img, .p-media.n3 img, .p-media.n4 img { aspect-ratio: 1; }
.name-link { color: inherit; text-decoration: none; }
.profile-cover {
  height: 130px; background: linear-gradient(120deg, var(--pink-600), var(--pink-500), var(--pink-100));
  overflow: hidden;
}
.profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-head {
  background: var(--card); padding: 0 14px 10px; display: flex; gap: 12px; align-items: flex-end;
  border-bottom: 1px solid var(--line);
}
.profile-avatar { margin-top: -32px; }
.profile-avatar .avatar { border: 3px solid var(--card); font-size: 30px; }
.profile-id { flex: 1; padding-bottom: 2px; min-width: 0; }
.p-name { font-size: 19px; font-weight: 700; }
.p-handle { font-size: 13px; color: var(--ink-3); }
.p-badges { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.badge {
  background: var(--bg); border-radius: 999px; padding: 2px 10px; font-size: 11.5px;
  color: var(--ink-2); font-weight: 600;
}
.badge-mod { background: var(--pink-100); color: var(--pink-700); }
.profile-actions { padding-bottom: 6px; }
.btn-sm { padding: 8px 16px; font-size: 13.5px; }
.btn-secondary {
  display: inline-block; background: var(--bg); color: var(--ink); border: none;
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.profile-stats {
  background: var(--card); padding: 8px 14px; display: flex; gap: 18px; font-size: 14px;
  color: var(--ink-2); border-bottom: 1px solid var(--line);
}
.profile-bio { background: var(--card); padding: 10px 14px; font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid var(--line); }
.profile-chips { background: var(--card); padding: 10px 14px; display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.profile-field { background: var(--card); padding: 8px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
.pf-label { font-weight: 700; font-size: 12.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.profile-posts-label { padding: 14px 14px 4px; font-weight: 700; font-size: 15px; }
.edit-card { background: var(--card); margin-top: 10px; padding: 16px 14px 20px; }
.edit-title { font-size: 19px; margin: 0 0 2px; }
.edit-sub { font-size: 13.5px; color: var(--ink-2); margin: 0 0 14px; }
.edit-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.edit-form label small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; margin: 1px 0 4px; }
.edit-form input[type=text], .edit-form textarea, .edit-form select {
  width: 100%; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; background: var(--bg); color: var(--ink); margin-top: 4px;
}
.edit-form input[type=file] { display: block; margin-top: 6px; font-size: 13px; }
.share-row { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 13.5px; }
.share-row input { width: auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bday { display: flex; gap: 8px; }
.edit-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.tag-head {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.chip-big { font-size: 17px; padding: 5px 16px 6px; font-weight: 700; }
.tag-count { color: var(--ink-2); font-size: 14px; }
.tag-suggest { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--pink-600); text-decoration: none; }
.admin-add { display: flex; gap: 8px; margin-bottom: 16px; }
.admin-add input {
  flex: 1; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; background: var(--bg); color: var(--ink);
}
.admin-h { font-size: 14px; margin: 16px 0 6px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.admin-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.admin-name { flex: 1; font-size: 14.5px; font-weight: 600; }
.admin-name small { font-weight: 400; color: var(--ink-3); }
.admin-row.is-retired .admin-name { opacity: .5; }
.mention { color: var(--pink-600); font-weight: 600; text-decoration: none; }
.nav a .i { position: relative; }
.nav-badge {
  position: absolute; top: -4px; right: -12px;
  background: var(--pink-600); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.alerts-list { background: var(--card); }
.alert-row {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.alert-row.is-unread { background: var(--pink-50); }
.alert-text { font-size: 14.5px; line-height: 1.4; }
.alert-text small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.c-report { font-size: 12px; font-weight: 700; color: var(--ink-3); text-decoration: none; }
.admin-tile {
  display: flex; align-items: center; gap: 8px; padding: 14px 12px;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
  text-decoration: none; color: inherit;
}
.report-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.report-meta { font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.report-detail { font-size: 13px; color: var(--pink-700); margin-bottom: 6px; }
.report-body { font-size: 14px; background: var(--bg); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.report-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dm-btn { position: relative; }
.dm-btn .nav-badge { top: -2px; right: -4px; }
.dm-scroll { padding: 10px 14px; }
.msg { display: flex; flex-direction: column; margin-bottom: 8px; max-width: 78%; }
.msg.mine { align-self: flex-end; margin-left: auto; align-items: flex-end; }
.msg.theirs { align-items: flex-start; }
.msg-bubble {
  display: inline-block; padding: 8px 13px; border-radius: 18px; font-size: 15px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.msg.mine .msg-bubble { background: var(--pink-600); color: #fff; border-bottom-right-radius: 6px; }
.msg.theirs .msg-bubble { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-time { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; padding: 0 6px; }
.topic-link { color: var(--pink-600); font-weight: 700; text-decoration: none; }
.gb-flag {
  display: inline-block; background: var(--pink-100); color: var(--pink-700);
  border-radius: 999px; padding: 2px 12px; font-size: 12px; font-weight: 700;
  margin-bottom: 8px; letter-spacing: .02em;
}
@media (min-width: 700px) {
  body { padding-bottom: 0; }
  .nav {
    position: sticky; top: 59px; bottom: auto; border-top: none;
    border-bottom: 1px solid var(--line); height: 48px; max-width: 640px; margin: 0 auto;
  }
  .nav a { flex-direction: row; gap: 8px; font-size: 13px; }
}

/* Testing center (Group buys page + admin editors) */
.gbt-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.gbt-name { flex: 1; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.gbt-name small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.gbt-edit { border-top: 1px solid var(--line); padding: 10px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.gbt-edit input { font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); width: 100%; }
.gbt-grid { display: flex; gap: 8px; }
.gbt-grid input { flex: 1; min-width: 0; }
.gbt-grid input[name="display_order"] { flex: 0 0 70px; }
.gbt-btns { display: flex; gap: 8px; }
.gbt-adder summary { font-size: 13.5px; color: var(--ink-2); cursor: pointer; padding: 8px 0 2px; }
.gbt-entry summary { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; list-style: none; }
.gbt-entry summary::-webkit-details-marker { display: none; }
.gbt-hint { font-size: 12.5px; color: var(--ink-3); }
.gbt-entry[open] .gbt-hint { display: none; }
.gbt-entry .gbt-edit { border-top: 0; padding-top: 2px; }

/* Group buy hub: announcements + update entries (hub-authored HTML) */
.gbu summary { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; list-style: none; }
.gbu summary::-webkit-details-marker { display: none; }
.gbu[open] .gbt-hint { display: none; }
.gbu-content { padding: 2px 0 12px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.gbu-content p { margin: 0 0 8px; }
.gbu-content ul, .gbu-content ol { margin: 0 0 8px; padding-left: 22px; }
.gbu-content img { max-width: 100%; height: auto; border-radius: 10px; }
.gbu-content a { color: var(--pink-600, #d4537e); }

/* Comment images + GIFs */
.c-photo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; flex: none; }
.c-photo input { display: none; }
.c-photo.has-file { background: var(--pink-100); border-color: var(--pink-500); color: var(--pink-700); }
.c-img { display: block; max-width: min(70%, 260px); border-radius: 12px; margin: 6px 0 2px; }

/* GIPHY picker */
.composer-row { flex-wrap: wrap; }
.gif-panel { flex-basis: 100%; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-top: 8px; background: var(--bg); }
.gif-q { width: 100%; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--card); }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 240px; overflow-y: auto; }
.gif-grid img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; }
.gif-credit { font-size: 11px; color: var(--ink-3); text-align: right; margin-top: 6px; }
.gif-pick { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gif-pick .gif-selected { max-height: 120px; border-radius: 10px; }
.gif-clear { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--ink-2); }
.gif-panel[hidden], .gif-pick[hidden] { display: none !important; }
.gbu-content h3 { font-size: 15px; margin: 16px 0 6px; }

/* GB hub launch row: ordering app + SCS store, always on top */
.gbh-launch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.gbh-launch a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 12px 8px; border-radius: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #993556, #d4537e); box-shadow: 0 6px 16px rgba(122,31,78,.25); }
.gbh-launch .gl-icon { font-size: 22px; }
.gbh-launch .gl-t { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.gbh-launch .gl-s { font-size: 11.5px; color: #ffd9e9; }

/* Activity dashboard */
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 6px; }
.act-stat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.act-stat .n { font-size: 22px; font-weight: 800; color: var(--pink-600); }
.act-stat .l { font-size: 12px; color: var(--ink-2); }
.act-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.act-table th, .act-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.act-table th { color: var(--ink-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* View-as banner + group chat */
.viewas-bar { background: #b45309; color: #fff; font-size: 13px; padding: 7px 14px; text-align: center; }
.viewas-bar a { color: #fff; font-weight: 700; }
.msg-sender { display: block; font-size: 11.5px; color: var(--ink-3); margin: 0 0 1px 4px; }
.avatar { display: flex; align-items: center; justify-content: center; }

/* @-tag typeahead */
.tag-suggest { position: absolute; z-index: 3000; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); overflow: hidden; display: none; }
.ts-item { padding: 10px 14px; font-size: 14.5px; cursor: pointer; }
.ts-item:hover, .ts-item:active { background: var(--pink-50); }

/* ── M32 (2026-09-13): Group buys tab v2 + shared GB-app integration components ── */
.hero{margin:10px 14px 0;border-radius:16px;padding:16px;color:#fff;background:linear-gradient(135deg,#993556,#d4537e);box-shadow:0 8px 20px rgba(122,31,78,.25)}
.hero .k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#ffd9e9;font-weight:700}
.hero h2{font-size:21px;margin:2px 0 4px}
.hero .sub{font-size:13.5px;color:#ffe3ee}
.hero .cd{display:flex;gap:8px;margin:12px 0}
.hero .cd div{flex:1;background:rgba(255,255,255,.14);border-radius:10px;padding:8px 0;text-align:center}
.hero .cd b{display:block;font-size:20px}
.hero .cd span{font-size:10.5px;color:#ffd9e9;text-transform:uppercase}
.hero .btns{display:flex;gap:8px}
.btn-white{flex:1;text-align:center;background:#fff;color:var(--pink-700);border-radius:999px;padding:11px;font-weight:700;text-decoration:none;font-size:14.5px}
.btn-ghost{flex:1;text-align:center;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:11px;font-weight:700;text-decoration:none;font-size:14.5px}
.sec{background:var(--card);margin-top:10px;padding:12px 14px 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h3{font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.sec h3 small{margin-left:auto;font-size:12.5px;color:var(--pink-600);font-weight:600}
.sec p.sub{font-size:13px;color:var(--ink-2);margin-bottom:8px}
.attn{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--pink-50);border:1px solid var(--pink-100);margin-bottom:8px;text-decoration:none;color:inherit}
.attn .ic{width:36px;height:36px;border-radius:10px;background:var(--pink-100);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.attn .t{font-weight:600;font-size:14px}.attn .s{font-size:12.5px;color:var(--ink-2)}
.attn .go{margin-left:auto;color:var(--pink-600);font-weight:700;flex:none}
.orow{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.orow.first{border-top:0}
.orow-main{text-decoration:none;color:inherit;min-width:0}
.orow .id{font-weight:700;font-size:14px}.orow .gb{font-size:12.5px;color:var(--ink-2)}
.orow .r{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.orow-sub{font-size:12px}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;white-space:nowrap}
.p-ok{background:#e6f6ec;color:#1b6b3a}.p-warn{background:#fff3cd;color:#7a5200}.p-info{background:#e7f0fb;color:#1f4f8f}.p-bad{background:#fde8e8;color:#8f1d1d}.p-neu{background:var(--bg);color:var(--ink-2)}
.track{font-size:12px;color:var(--pink-600);font-weight:600;text-decoration:none}
.sb{margin:10px 14px 0;border-radius:14px;padding:12px 14px;background:#f3efff;border:1px solid #d9d0ff;display:flex;gap:12px;align-items:center}
.sb .t{font-weight:700;font-size:14.5px;color:#4a3a9c}.sb .s{font-size:12.5px;color:#5b4fa3}
.sb a{margin-left:auto;background:#6c5dd3;color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;text-decoration:none;font-size:13px;white-space:nowrap}
.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 14px 4px}
.chips a{white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--ink-2);text-decoration:none}
.chips a.on{background:var(--pink-600);color:#fff;border-color:var(--pink-600)}
.kv{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;border-top:1px solid var(--line)}
.kv.tot{font-weight:700;font-size:15px}.kv.due{color:var(--pink-700);font-weight:700}
.line{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.line .q{width:34px;font-weight:700;color:var(--pink-600);flex:none}.line .n{flex:1}.line .n small{display:block;color:var(--ink-3);font-size:12px}.line .a{font-weight:600;flex:none}
.tl{display:flex;justify-content:space-between;margin:8px 0 4px}
.tl div{flex:1;text-align:center;font-size:11px;color:var(--ink-3)}
.tl div::before{content:"";display:block;width:12px;height:12px;border-radius:50%;background:var(--line);margin:0 auto 4px}
.tl div.done{color:var(--ink)}.tl div.done::before{background:var(--pink-600)}
.tl div.now{color:var(--pink-700);font-weight:700}.tl div.now::before{background:#fff;border:3px solid var(--pink-600);width:8px;height:8px}
.upload{border:2px dashed var(--pink-500);border-radius:12px;padding:16px;text-align:center;color:var(--pink-700);font-weight:600;background:var(--pink-50);margin:8px 0}
.upload small{display:block;font-weight:400;color:var(--ink-2);margin-top:2px}
.stat{display:flex;gap:8px;margin-bottom:6px}.stat div{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}.stat b{display:block;font-size:20px;color:var(--pink-600)}.stat span{font-size:11.5px;color:var(--ink-2)}
.srow{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.srow .nm{font-weight:600;font-size:14.5px}.srow .mt{font-size:12.5px;color:var(--ink-2)}.srow .star{margin-left:auto;font-weight:700;color:#b7791f;font-size:13.5px;white-space:nowrap;flex:none}
.step{display:flex;gap:10px;padding:8px 0;font-size:14px;align-items:flex-start}.step b{width:26px;height:26px;border-radius:50%;background:var(--pink-100);color:var(--pink-700);display:flex;align-items:center;justify-content:center;flex:none;font-size:13px}
.step small{display:block;color:var(--ink-2);font-size:12.5px}
.tog{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.tog small{display:block;color:var(--ink-3);font-size:12px}
.status-card{border-radius:14px;padding:14px;margin-bottom:10px;display:flex;gap:12px;align-items:center;background:var(--pink-50);border:1px solid var(--pink-100)}
.status-card .big{font-size:28px}.status-card .t{font-weight:700;font-size:15px}.status-card .s{font-size:13px;color:var(--ink-2)}
.status-card.ok{background:#e6f6ec;border-color:#bfe6cc}
.tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.tilegrid a{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;background:var(--card)}
.tilegrid a .i{font-size:22px}.tilegrid a b{font-size:14px}.tilegrid a small{font-size:12px;color:var(--ink-3)}
.fine2{font-size:12.5px;color:var(--ink-3);padding:6px 0 10px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0}
.btnrow .btn-secondary,.btnrow .btn-primary{flex:1;text-align:center;padding:10px 12px;font-size:14px}
a.syscard{display:flex}

/* M34: order/buy alert rows */
.alert-row .kic{width:40px;height:40px;border-radius:50%;background:var(--pink-100);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}