/* rclao bento profile - PC author page. Self-contained: every colour, radius
   and rule lives here, nothing is inherited from the site bundle. */

.rcbu,
.rcbu-preset {
  --rcbu-ink: #141824;
  --rcbu-sub: #566074;
  --rcbu-mute: #9199a8;
  --rcbu-line: #e8eaf0;
  --rcbu-soft: #f6f7fa;
  --rcbu-accent: #ff6a3d;
  --rcbu-accent-soft: #fff1eb;
  --rcbu-gold: #f59e0b;
  --rcbu-warn: #b45309;
  --rcbu-warn-bg: #fff7ed;
  --rcbu-danger: #e11d48;
  --rcbu-bg: #f2f3f7;

  /* Same content column as the rest of the site (--ls-width is 1450px here);
     body-level insertion means nothing else constrains the width. */
  width: var(--ls-width, 1450px);
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 24px 0 60px;
  color: var(--rcbu-ink);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.rcbu *,
.rcbu-modal * { box-sizing: border-box; }

/* `:where()` keeps this reset at specificity 0,0,1. Written as `.rcbu button`
   it scored 0,1,1 and silently beat every one of the component rules below -
   which is why buttons rendered as bare outlines with no plate under them. */
:where(.rcbu, .rcbu-modal) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.rcbu img { display: block; max-width: 100%; }
.rcbu a { color: inherit; text-decoration: none; }
.rcbu p { margin: 0; }

/* ---------- punishment banner ---------- */
.rcbu-status {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 0 18px; height: 44px;
  border-radius: 14px; background: var(--rcbu-warn-bg); color: var(--rcbu-warn);
  font-size: 13.5px;
}
.rcbu-status svg { flex: none; width: 17px; height: 17px; }
.rcbu-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- head card ---------- */
.rcbu-head { position: relative; border-radius: 22px; background: #fff; overflow: hidden; }
.rcbu-hero { position: relative; height: 340px; background: linear-gradient(135deg, #2a3040, #1b1f2b 70%); }
.rcbu-hero > .rcbu-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #2a3040; }
.rcbu-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(10, 12, 20, .78));
}

.rcbu-tr { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; gap: 8px; }
/* Opaque white chips: the cover behind them can be any photo, and the earlier
   translucent versions either vanished into a light image or into the dark
   gradient at the bottom. A solid chip is the only thing that always reads. */
.rcbu-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-width: 36px; padding: 0 10px; border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--rcbu-ink); font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(10, 12, 20, .22);
  transition: background .2s, transform .2s;
}
.rcbu-glass:hover { background: #f2f3f7; }
.rcbu-glass svg { width: 17px; height: 17px; }
.rcbu-tr .rcbu-glass { font-size: 13px; }

.rcbu-cap {
  position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2;
  display: flex; align-items: flex-end; gap: 18px;
}
/* 84px matches the theme's .ls-avatar-2xl the demo profile uses. */
.rcbu-av { position: relative; flex: none; width: 84px; height: 84px; }
.rcbu-av > img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #e3e6ee; box-shadow: 0 0 0 3px rgba(255, 255, 255, .92); }
.rcbu-av .rcbu-online {
  position: absolute; top: 2px; left: 2px; z-index: 3;
  width: 14px; height: 14px; border-radius: 50%;
  background: #07c160; border: 2px solid #fff;
}
.rcbu-av .rcbu-verify { position: absolute; bottom: 2px; right: 0; z-index: 3; width: 22px; height: 22px; }
.rcbu-av .rcbu-verify img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }

.rcbu-who { flex: 1; min-width: 0; padding-bottom: 2px; }
.rcbu-name { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; color: #fff; }
.rcbu-nick { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-badges { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.rcbu-badges :is(img, svg) { width: 18px; height: 18px; }
.rcbu-mark { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; }
.rcbu-mark.punish { background: var(--rcbu-danger); color: #fff; cursor: help; }

/* .rcbu p{margin:0} below would win on specificity, hence the longer selector */
.rcbu .rcbu-who .rcbu-bio { margin: 6px 0 0; max-width: 520px; color: rgba(255, 255, 255, .82); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-nums { display: flex; gap: 22px; margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.rcbu-nums button,
.rcbu-nums span { display: flex; align-items: baseline; gap: 5px; padding: 0; }
.rcbu-nums b { font-size: 16px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.rcbu-nums button:hover b { text-decoration: underline; text-underline-offset: 3px; }

.rcbu-act { flex: none; display: flex; align-items: center; gap: 8px; }
/* Icon-only chips in the action row: same solid treatment as the top-right
   ones, so 关注 / 私信 never sit on the cover as bare outlines. */
.rcbu-actbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: #fff; color: var(--rcbu-ink);
  box-shadow: 0 2px 10px rgba(10, 12, 20, .22);
  transition: background .2s;
}
.rcbu-actbtn:hover { background: #f2f3f7; }
.rcbu-actbtn svg { width: 18px; height: 18px; }
.rcbu-main {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; min-width: 96px; padding: 0 20px; border-radius: 12px;
  background: #fff; color: var(--rcbu-ink); font-size: 14px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 2px 10px rgba(10, 12, 20, .22);
  transition: background .2s, filter .2s;
}
.rcbu-main svg { width: 17px; height: 17px; }
/* Already following: keeps the same readable chip, just muted. */
.rcbu-main.had { background: rgba(255, 255, 255, .88); color: var(--rcbu-sub); }
.rcbu-main:hover { filter: brightness(.96); }
.rcbu-main:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- profile rows ---------- */
.rcbu-sub { padding: 18px 28px 20px; }
.rcbu-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--rcbu-sub); font-size: 13.5px; line-height: 20px; }
.rcbu-meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rcbu-meta > span > svg { color: var(--rcbu-mute); width: 16px; height: 16px; }
.rcbu-meta a { color: var(--rcbu-accent); }

/* verification gets a chip of its own, so the type name and the note the admin
   wrote do not read as one run-on sentence */
.rcbu-meta > .rcbu-mv {
  gap: 5px; padding: 3px 10px 3px 9px; border-radius: 999px;
  background: var(--rcbu-accent-soft); color: var(--rcbu-accent);
  font-weight: 600; font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(255, 106, 61, .16);
}
.rcbu-meta > .rcbu-mv > svg { color: var(--rcbu-accent); }
.rcbu-meta > .rcbu-mv > em {
  margin-left: 1px; padding-left: 8px;
  border-left: 1px solid rgba(255, 106, 61, .35);
  color: var(--rcbu-sub); font-style: normal; font-weight: 400;
}
.rcbu-copy { display: inline-flex; padding: 0; color: var(--rcbu-mute); }
.rcbu-copy:hover { color: var(--rcbu-accent); }

/* ---------- social strip ---------- */
/* Three EQUAL-width columns with a hairline between them. Inside a column only
   the picture row is elastic: it takes whatever room is left and clips its
   tail, while the label and the trailing button keep their natural size. So a
   user with 22 gifts fills the row instead of showing five icons and a hole. */
.rcbu-social {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--rcbu-line);
}
.rcbu-grp { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 20px; }
.rcbu-grp:first-child { padding-left: 0; }
.rcbu-grp:last-child { padding-right: 0; }
.rcbu-grp + .rcbu-grp { border-left: 1px solid var(--rcbu-line); }
.rcbu-sendgift {
  flex: none; height: 32px; padding: 0 14px; border-radius: 16px;
  background: #fff; color: var(--rcbu-accent);
  border: 1px solid var(--rcbu-accent);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(255, 106, 61, .18);
  transition: background .2s, color .2s;
}
.rcbu-sendgift:hover { background: var(--rcbu-accent); color: #fff; }
.rcbu-grp-t { flex: none; color: var(--rcbu-ink); font-size: 13.5px; font-weight: 500; }
/* `flex: 0 1 auto` (not 1 1 auto): the row takes only as much as its icons need
   and shrinks when there are too many, so the trailing count stays glued to the
   last icon instead of being pushed to the far edge of the column. The
   padding/margin pair keeps room for the hover zoom inside the clip box. */
.rcbu-pics {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 0; margin: -6px 0;
}
.rcbu-pics img {
  width: 28px; height: 28px; border-radius: 50%; background: #e3e6ee; object-fit: cover;
  transition: transform .18s ease;
}
.rcbu-pics img:hover,
.rcbu-pics a:hover img { transform: scale(1.32); }
.rcbu-pics img.is-gift { border-radius: 0; background: none; object-fit: contain; }
.rcbu-pics img.is-board { border-radius: 8px; }
.rcbu-cnt { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--rcbu-mute); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
button.rcbu-cnt:hover { color: var(--rcbu-accent); }
.rcbu-cnt svg { width: 15px; height: 15px; }
.rcbu-empty { color: var(--rcbu-mute); font-size: 12.5px; }

/* ---------- feed ---------- */
.rcbu-feedh { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; }
.rcbu-feedh h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--rcbu-ink); }
.rcbu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rcbu-chip {
  height: 30px; padding: 0 14px; border-radius: 15px; background: #fff;
  color: var(--rcbu-sub); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.rcbu-chip:hover { color: var(--rcbu-accent); }
.rcbu-chip.on { background: var(--rcbu-accent); color: #fff; }

.rcbu-mason { position: relative; width: 100%; min-height: 120px; }
/* Position lives on .rcbu-wc (its transform is rewritten on every layout), so
   the hover lift sits on the inner node - otherwise the two would overwrite
   each other and the card would jump back to the top-left corner on hover. */
.rcbu-wc { position: absolute; top: 0; left: 0; width: 100%; cursor: pointer; }
.rcbu-wc:hover { z-index: 6; }
.rcbu-wi {
  padding: 0 0 12px; border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 24, 40, .05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.rcbu-wc:hover .rcbu-wi {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 16px 34px rgba(20, 24, 40, .16);
}
.rcbu-cv { position: relative; overflow: hidden; background: #eceef3; }
.rcbu-cv > img { width: 100%; height: 100%; object-fit: cover; }
.rcbu-br {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 7px; border-radius: 7px; background: rgba(10, 12, 20, .55);
  color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rcbu-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; background: rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: #fff;
}
.rcbu-bd { padding: 10px 12px 0; }
.rcbu-tl { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--rcbu-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcbu-ex { margin: 3px 0 0; color: var(--rcbu-sub); font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* card footer: date left, likes right - nothing else */
.rcbu-ft {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 0 12px; font-size: 12.5px; color: var(--rcbu-mute);
}
.rcbu-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-ft .rcbu-like { display: flex; align-items: center; gap: 3px; flex: none; font-variant-numeric: tabular-nums; cursor: pointer; }
.rcbu-ft .rcbu-like.on { color: #ff3b6b; }
.rcbu-ft .rcbu-like svg { width: 14px; height: 14px; }

/* hover "..." button on each feed card - top right; opens the native menu */
.rcbu-dot {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #444;
  box-shadow: 0 2px 8px rgba(20, 24, 40, .18);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}
.rcbu-wc:hover .rcbu-dot { opacity: 1; transform: translateY(0); }
.rcbu-dot:hover { background: #fff; color: var(--rcbu-accent); }
.rcbu-dot svg { width: 18px; height: 18px; display: block; }

/* text card: six preset gradients keyed off the post id */
/* a short text post would otherwise hug the top and leave a big empty tail -
   centre the block and let a long one grow normally */
.rcbu-txt {
  position: relative; padding: 18px 16px 16px; min-height: 150px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.rcbu-txt::before {
  content: ""; position: absolute; right: -24px; top: -24px;
  width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 255, 255, .35);
}
.rcbu-mk { position: relative; display: block; margin-bottom: 6px; font: 900 38px/.7 Georgia, serif; color: #23212f; opacity: .35; text-align: left; }
.rcbu-tq {
  position: relative; font-size: 15px; font-weight: 600; line-height: 1.65; color: #23212f;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-line; overflow-wrap: anywhere;
}
.rcbu-g0 { background: linear-gradient(155deg, #e0e7ff, #fce7f3); }
.rcbu-g1 { background: linear-gradient(155deg, #dcfce7, #e0f2fe); }
.rcbu-g2 { background: linear-gradient(155deg, #fef3c7, #fee2e2); }
.rcbu-g3 { background: linear-gradient(155deg, #ede9fe, #e0f2fe); }
.rcbu-g4 { background: linear-gradient(155deg, #ffedd5, #fef9c3); }
.rcbu-g5 { background: linear-gradient(155deg, #cffafe, #ede9fe); }

/* shared inline-icon wrapper used by the newer card types */
.rcbu-ic { display: inline-flex; align-items: center; justify-content: center; }
.rcbu-ic svg { width: 16px; height: 16px; display: block; }

/* 笔记 (article) - three shapes, mirroring the official cards
   1 picture : 4/3 cover, 笔记 badge floating on it (top-left)
   3 pictures: 2fr/1fr mosaic, first picture spans both rows
   no picture: 笔记 kicker, title, excerpt, read time · views              */
.rcbu-note { padding: 14px 14px 12px; }
.rcbu-note.has-pic { padding: 0 0 12px; }
/* cover badge - dark translucent pill, exactly where the official one sits */
.rcbu-cvtag { position: absolute; left: 8px; top: 8px; display: flex; gap: 5px; z-index: 2; }
.rcbu-cvtag span {
  display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px;
  border-radius: 7px; background: rgba(10, 12, 20, .5); color: #fff;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rcbu-cvtag span i[class*="ri-"] { font-size: 13px; }
/* title / excerpt: the small size is the card body, the big one is the
   text-only note where the title leads the card */
.rcbu-art-t { margin: 0; font-size: 14.5px; font-weight: 650; line-height: 1.5; color: var(--rcbu-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcbu-art0 { padding: 16px 16px 4px; }
.rcbu-art0 .rcbu-art-t { margin-top: 10px; font-size: 16.5px; font-weight: 800; line-height: 1.45; -webkit-line-clamp: 3; }
.rcbu-art0 .rcbu-ex { -webkit-line-clamp: 4; margin-top: 6px; }
.rcbu-rt { margin-top: 10px; font-size: 12px; color: var(--rcbu-mute); }
/* 3+ pictures: big left, two stacked right, whole block kept at 4/3 */
.rcbu-mosaic {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 3px; aspect-ratio: 4 / 3;
}
.rcbu-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; background: #eceef3; }
.rcbu-mosaic img:first-child { grid-row: 1 / 3; }
.rcbu-mosaic img:only-child { grid-column: 1 / 3; }

/* picture block: 1-2 pictures show the first; 3+ go big-left + two stacked */
.rcbu-md-wrap { position: relative; }
.rcbu-md { display: block; background: #eceef3; overflow: hidden; }
.rcbu-md1 { aspect-ratio: 16 / 10; }
.rcbu-md1 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcbu-md3 { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; height: 186px; }
.rcbu-md-l,
.rcbu-md-r { overflow: hidden; }
.rcbu-md-r { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
.rcbu-md3 img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 动态 without a picture: title (preferred) or body text */
.rcbu-wtxt { padding: 14px 14px 4px; }
.rcbu-wtxt-ex { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--rcbu-sub); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 转发 (repost): own comment + quoted original */
.rcbu-rp { padding: 12px 14px 14px; }
.rcbu-rp-who { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--rcbu-accent); }
.rcbu-rp-who .rcbu-ic { color: var(--rcbu-accent); }
.rcbu-rp-q { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--rcbu-soft); }
/* the repost's own words sit inside the quoted card, above the original */
.rcbu-rp-cm { margin: 0 0 9px; padding-bottom: 9px; font-size: 14px; line-height: 1.6; color: var(--rcbu-ink); border-bottom: 1px dashed var(--rcbu-line); }
.rcbu-rp-src p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--rcbu-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rcbu-rp-src .rcbu-md { margin-top: 8px; border-radius: 8px; }
.rcbu-rp-src .rcbu-md1 { aspect-ratio: 16 / 9; }
.rcbu-rp-src .rcbu-md3 { height: 116px; }
.rcbu-rp-at { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: var(--rcbu-sub); }
.rcbu-rp-del { color: var(--rcbu-mute); }
.rcbu-rp-del span { font-size: 13px; }
.rcbu-rp-media { display: flex; gap: 4px; margin-top: 8px; }
.rcbu-rp-media img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.rcbu-rp-voice { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--rcbu-sub); font-size: 12.5px; }
.rcbu-rp-voice b { font-weight: 600; }
.rcbu-rp-voice em { font-style: normal; color: var(--rcbu-mute); }

/* 语音 (voice) - the official gradient player: round play button, waveform,
   "语音 · 0:05" line, then the caption. Playback is this module's own <audio>,
   driven by module.js (the theme's voice-card.css/js targets another markup). */
.rcbu-voc { position: relative; padding: 16px; overflow: hidden; color: #fff; background: linear-gradient(150deg, #4f46e5, #7c3aed 60%, #a855f7); }
.rcbu-voc::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.rcbu-vrow { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.rcbu-pb {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #5b21b6;
  display: grid; place-items: center; font-size: 22px; cursor: pointer;
}
.rcbu-pb i[class*="ri-"] { font-size: 22px; line-height: 1; }
.rcbu-wv { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 34px; }
.rcbu-wv i { flex: 1; max-width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.rcbu-wv i.is-p { background: #fff; }
.rcbu-du { position: relative; z-index: 1; margin-top: 8px; font-size: 12px; color: #ddd6fe; }
.rcbu-du i[class*="ri-"] { font-size: 13px; vertical-align: -2px; }
.rcbu-vcap { position: relative; z-index: 1; margin: 10px 0 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: #fff; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 投票 (vote). Same story: native `.ls-vote-card` markup, real styles live in
   the base bundle and the submit handler is a document-level listener. */
.rcbu-vote { padding: 12px 14px 14px; }
.rcbu-vote .ls-vote-card { margin: 0; }

/* 红包 (red packet) - the official panel: word, desc, gold 開 seal, then the
   faces of whoever got one. Own markup, so the theme's redbag.css (which lays
   an inline card out at 60% width) can not interfere. Clicking opens the
   theme's own dialog through LSRedbag.openInfo(). */
.rcbu-rbw {
  position: relative; padding: 18px 16px 16px; overflow: hidden;
  background: linear-gradient(165deg, #f5484a, #d92d3a); color: #fff; text-align: center;
  cursor: pointer;
}
.rcbu-rbw::before {
  content: ""; position: absolute; left: -30%; right: -30%; top: -58%; height: 100%;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #ff6163, #ee3e45);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.rcbu-rbw > * { position: relative; }
.rcbu-rbw-t { font-size: 14px; font-weight: 700; color: #ffe3a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-rbw-d { margin-top: 2px; font-size: 12px; color: #ffd0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-rbw-op {
  width: 64px; height: 64px; margin: 16px auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7a8, #f5c451 60%, #e3a529);
  color: #9a3412; font-size: 26px; font-weight: 900;
  display: grid; place-items: center; box-shadow: 0 5px 14px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.rcbu-rbw:hover .rcbu-rbw-op { transform: scale(1.08) rotate(-6deg); }
.rcbu-rbw-rv { display: flex; justify-content: center; align-items: center; font-size: 11.5px; color: #ffd9d9; }
.rcbu-rbw-rv img { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #f5484a; margin-left: -6px; background: #f7c7c7; object-fit: cover; }
.rcbu-rbw-rv img:first-child { margin-left: 0; }
.rcbu-rbw-rv em { font-style: normal; margin-left: 6px; }
/* already claimed by me -> the seal is spent */
.rcbu-rbw.is-got .rcbu-rbw-op { background: rgba(255, 255, 255, .2); color: #fff; font-size: 24px; }
/* nobody left to claim -> greyed out, seal becomes a word */
.rcbu-rbw.is-off { background: linear-gradient(165deg, #d5a8a8, #bf8b8b); cursor: default; }
.rcbu-rbw.is-off::before { background: linear-gradient(180deg, #dcb3b3, #cfa0a0); }
.rcbu-rbw.is-off .rcbu-rbw-op { background: rgba(255, 255, 255, .25); color: #fff; font-size: 14px; }
.rcbu-rbw.is-off:hover .rcbu-rbw-op { transform: none; }

/* inline video player opened by the card's play button */
.rcbu-vplayer { background: #000; border-radius: 12px; overflow: hidden; }
.rcbu-vplayer video { width: 100%; max-height: 68vh; display: block; background: #000; }

/* pinned badge - the native class, restyled for this layout */
.rcbu-wc > .ls-sticky-badge { position: absolute; top: 10px; right: 10px; z-index: 7; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; margin: 0; border-radius: 999px; background: linear-gradient(135deg, #ff8f5e, #ff4d4f); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(255, 77, 79, .35); }
.rcbu-wc > .ls-sticky-badge .remix-icon { font-size: 13px; }

/* 隐私设置：列表被隐藏时数字还在，但按钮不再可点 */
.rcbu-nums .rcbu-num.is-off { cursor: default; opacity: .55; }
.rcbu-nums .rcbu-num.is-off:hover b { text-decoration: none; }

/* link-style chip (admin's custom menu rows) */
.rcbu-chip.is-link { text-decoration: none; }

/* empty state + "看看其他内容吧" */
.rcbu-blank { padding: 42px 0 30px; text-align: center; color: var(--rcbu-mute); font-size: 14px; }
.rcbu-rec-h { margin-top: 6px; border-top: 1px solid var(--rcbu-line); padding-top: 18px; }

/* --- v1.8.2 fixes ------------------------------------------------------- */

/* A pinned card wears the badge top-right, which is exactly where the "..." 
   button sits. Drop the button below the badge instead of moving the badge
   (keyed off the attribute the card already carries, so no :has() needed). */
.rcbu-wc[data-is-author-sticky="1"] .rcbu-dot { top: 44px; }
.rcbu-wc[data-is-author-sticky="1"] > .ls-sticky-badge { right: 10px; }

/* repost original: up to three pictures in one horizontal row */
.rcbu-rp-row { display: flex; gap: 6px; margin-top: 8px; align-items: flex-start; }
.rcbu-rp-row img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; display: block; border-radius: 8px; background: #e9ebf1; }

/* voice: waveform progress + play/pause icon are owned by module.js now */
.rcbu-voc .rcbu-pb.is-playing i[class*="ri-"] { opacity: .85; }

/* copy-the-ID button: was too faint to notice */
.rcbu-copy {
  margin-left: 4px; width: 20px; height: 20px; padding: 0; border-radius: 6px;
  background: var(--rcbu-soft); color: var(--rcbu-sub);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .16s, color .16s;
}
.rcbu-copy svg { width: 12px; height: 12px; display: block; }
.rcbu-copy:hover { background: var(--rcbu-accent-soft); color: var(--rcbu-accent); }

/* note / 动态 sitting on the gradient quote card */
.rcbu-txt .rcbu-note-tag { margin-bottom: 10px; }
.rcbu-txt .rcbu-note-t { color: #23212f; }
.rcbu-txt .rcbu-note-ex { color: #4b4858; }
.rcbu-txt .rcbu-note-meta { color: #6b6878; }

/* --- v1.8.5 fixes ------------------------------------------------------- */

/* a liked post gets a FILLED heart - the icon is a stroked outline, so colour
   alone still reads as empty */
.rcbu-ft .rcbu-like.on svg { fill: currentColor; }

/* menu chips: the admin's icon markup */
.rcbu-chip .remix-icon { margin-right: 5px; font-size: 14px; vertical-align: -1px; }

/* inline emoji inside a post body - the platform ships them as <img>, and a
   body that is nothing but emoji has to still look like something */
.rcbu-emo {
  width: 22px; height: 22px; margin: 0 1px;
  vertical-align: -5px; display: inline-block; object-fit: contain;
}
/* the blanket `.rcbu img { display: block }` above outranks `.rcbu-emo` and
   would put every emoji on its own row - three emoji in a row became three
   stacked. Needs the extra element selector to win. */
.rcbu img.rcbu-emo { display: inline-block; }
.rcbu-tq .rcbu-emo { width: 28px; height: 28px; vertical-align: -7px; }
/* oversized stickers stay oversized */
.rcbu-emo.is-big { width: 38px; height: 38px; vertical-align: -9px; }
.rcbu-tq .rcbu-emo.is-big { width: 46px; height: 46px; vertical-align: -11px; }
.rcbu-note-ex .rcbu-emo,
.rcbu-ex .rcbu-emo { width: 20px; height: 20px; vertical-align: -4px; }
.rcbu-tl .rcbu-emo,
.rcbu-note-t .rcbu-emo { width: 20px; height: 20px; vertical-align: -4px; }
.rcbu-rp-cm .rcbu-emo { width: 20px; height: 20px; vertical-align: -4px; }
/* a body of only emoji should not be clamped away */
.rcbu-tq { overflow-wrap: anywhere; }

/* --- v1.8.8 fixes ------------------------------------------------------- */

/* 附件 card: 附件 kicker, then the title/body, then one row per file.
   Mirrors the official bento attachment card. */
.rcbu-flc { padding: 14px 14px 12px; }
/* same block appended under a note card the author attached files to */
.rcbu-flc-sub { padding: 0 14px 12px; }
.rcbu-kick {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: 7px; background: var(--rcbu-accent-soft); color: var(--rcbu-accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.rcbu-kick i[class*="ri-"] { font-size: 13px; }
.rcbu-flc-t { margin: 9px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--rcbu-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcbu-flc-ex { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--rcbu-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcbu-flc .rcbu-fr:first-of-type { margin-top: 10px; }
.rcbu-fr {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 9px 11px; border-radius: 12px; background: var(--rcbu-soft);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.rcbu-fr:hover { background: #eef0f6; }
.rcbu-fr > i[class*="ri-"]:first-child { flex: none; font-size: 26px; line-height: 1; }
.rcbu-fr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rcbu-fr-tx b { font-size: 13.5px; font-weight: 600; color: var(--rcbu-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-fr-tx span { margin-top: 2px; font-size: 12px; color: var(--rcbu-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-fx { flex: none; font-size: 17px; color: var(--rcbu-mute); }
.rcbu-fr:hover .rcbu-fx { color: var(--rcbu-accent); }
.rcbu-fr.is-locked { opacity: .72; cursor: default; }

/* 阅读权限: the permission's own name, straight from the admin's settings.
   "login" gets a real sign-in box - the only requirement the viewer can
   satisfy from the feed. */
.rcbu-pw {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 12px 0; padding: 8px 11px; border-radius: 10px;
  background: var(--rcbu-warn-bg); color: var(--rcbu-warn);
  font-size: 12.5px; line-height: 1.4;
}
.rcbu-pw > i[class*="ri-"] { flex: none; font-size: 15px; }
.rcbu-pw-tx { flex: 1; min-width: 0; }
.rcbu-pw-n { flex: none; font-style: normal; font-size: 11.5px; opacity: .8; }
.rcbu-pw-btn {
  flex: none; height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--rcbu-accent); color: #fff; font-size: 12px; font-weight: 600;
}

/* an empty column explains itself instead of collapsing */
.rcbu-grp .rcbu-empty { flex: 1 1 auto; min-width: 0; line-height: 1.5; text-align: center; padding-right: 8px; }

/* 礼物墙：礼物系统模块自己的组件，进弹窗后去掉侧栏卡片的外壳，只留内容 */
.rcbu-mb .ls-sidebar-wrap.rclao-pc-widget-gift-system {
  width: 100%; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.rcbu-mb .ls-sidebar-wrap.rclao-pc-widget-gift-system > .rgc { margin: 0; }
.rcbu-mb .rgc { --rgc-radius: 14px; }

/* 视频 (video): cover + duration + play + view count / collection */
.rcbu-coll { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 12px; font-size: 12.5px; color: var(--rcbu-sub); }
.rcbu-coll .rcbu-ic { color: var(--rcbu-accent); }
.rcbu-bl { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 7px; background: rgba(10, 12, 20, .55); color: #fff; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rcbu-bl .rcbu-ic { color: #fff; }
.rcbu-bl .rcbu-ic svg { width: 12px; height: 12px; }

/* bounty card - gold panel, big amount, status line, answer row */
.rcbu-btc {
  position: relative; padding: 16px; overflow: hidden;
  background: linear-gradient(160deg, #fff4d6, #fffaf0 70%);
  border-bottom: 1px solid #fbe3a8;
}
.rcbu-btc > * { position: relative; }
.rcbu-bic {
  position: absolute; right: -10px; top: -6px; width: 84px; height: 84px;
  color: rgba(245, 158, 11, .14);
}
.rcbu-bic svg { width: 84px; height: 84px; }
.rcbu-adopted .rcbu-bic { display: none; }
.rcbu-stamp {
  position: absolute; right: 12px; top: 14px; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%;
  border: 2.5px solid #16a34a; color: #16a34a;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 900; letter-spacing: .05em;
  transform: rotate(-18deg); opacity: .8;
}
.rcbu-stamp::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 1px dashed #16a34a;
}
.rcbu-am { display: flex; align-items: baseline; gap: 4px; color: #b45309; }
.rcbu-am b { font-size: 34px; font-weight: 900; line-height: 1; }
.rcbu-am span { font-size: 13px; font-weight: 700; }
.rcbu-btc .rcbu-sub { margin-top: 4px; font-size: 12px; color: #a16207; }
.rcbu-btc .rcbu-btl { margin-top: 10px; font-size: 15px; font-weight: 700; color: #3b2a06; }
.rcbu-wins { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: #a16207; }
.rcbu-wins img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-right: -10px; }
.rcbu-wins span { margin-left: 14px; }
.rcbu-btc .rcbu-go {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; font-size: 12px; color: #a16207;
}
.rcbu-ans {
  height: 30px; padding: 0 14px; border-radius: 15px;
  background: #f59e0b; color: #fff; font-size: 13px; font-weight: 600;
}
.rcbu-ans:hover { filter: brightness(.95); }

/* preset cover list inside the site's own modal. Copied VERBATIM from the
   theme's /pc/css/author.css (an overridden route does not load that file), so
   the dialog is pixel-identical to the built-in one - 2 columns, 16:7 tiles,
   name plate along the bottom, gold crown for VIP-only presets. Do not restyle
   these: any override is what makes it look "not native". */
.ls-preset-covers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 0;
}
.ls-preset-cover-item {
  position: relative;
  border-radius: var(--ls-radius, 10px);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 7;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.ls-preset-cover-item:hover {
  border-color: var(--ls-primary, #6366f1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--ls-primary-rgb, 59, 130, 246), 0.2);
}
.ls-preset-cover-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-preset-cover-name {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  padding: 4px 8px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ls-preset-cover-vip {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #78350f;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}
.rcbu-vicon { width: 16px; height: 16px; border-radius: 50%; }

.rcbu-more { display: flex; justify-content: center; margin-top: 24px; }
.rcbu-load { display: block; height: 46px; padding: 0 34px; border-radius: 14px; background: #fff; font-weight: 600; color: var(--rcbu-sub); }
.rcbu-load:disabled { opacity: .5; cursor: default; }
.rcbu-end { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--rcbu-mute); font-size: 12.5px; }
.rcbu-blank { padding: 60px 0; text-align: center; color: var(--rcbu-mute); font-size: 14px; }

/* ---------- modal (mounted on body) ---------- */
.rcbu-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.rcbu-mask { position: absolute; inset: 0; background: rgba(10, 12, 20, .45); }
.rcbu-box {
  position: relative; width: 480px; max-width: calc(100vw - 40px); max-height: 82vh;
  display: flex; flex-direction: column; border-radius: 18px; background: #fff;
  box-shadow: 0 24px 60px rgba(10, 12, 20, .28); overflow: hidden;
}
.rcbu-mh { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.rcbu-mh b { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; color: #111827; }
.rcbu-mx { flex: none; width: 28px; height: 28px; border-radius: 8px; color: #9ca3af; display: grid; place-items: center; }
.rcbu-mx:hover { background: #f3f4f6; color: #374151; }
.rcbu-mb { padding: 0 18px 18px; overflow-y: auto; overflow-x: hidden; }

/* gift wall inside the modal */
.rcwall-top {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(90deg, #fff7ed, #fff);
}
.rcwall-charm { display: flex; align-items: baseline; gap: 6px; }
.rcwall-charm span { color: #9ca3af; font-size: 12.5px; }
.rcwall-charm b { font-size: 21px; font-weight: 700; color: var(--rcbu-gold); font-variant-numeric: tabular-nums; }
.rcwall-sub { margin-left: auto; color: #9ca3af; font-size: 12.5px; }
.rcwall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rcwall-g { padding: 12px 6px 9px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgba(20, 24, 40, .05); }
.rcwall-g img { width: 46px; height: 46px; margin: 0 auto; object-fit: contain; }
.rcwall-g .n { display: block; margin-top: 5px; color: #374151; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcwall-g .q { display: block; margin-top: 1px; color: var(--rcbu-gold); font-size: 12px; font-weight: 600; }
.rcwall-rank-t { margin: 20px 0 6px; color: #111827; font-size: 13.5px; font-weight: 600; }
.rcwall-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f1f2f6; }
.rcwall-row img { width: 32px; height: 32px; border-radius: 50%; background: #e3e6ee; object-fit: cover; }
.rcwall-row b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcwall-row em { font-style: normal; color: var(--rcbu-gold); font-size: 12.5px; font-weight: 600; }
.rcwall-row span { color: #9ca3af; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* visitor list inside the modal */
.rcbu-mrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rcbu-mrow + .rcbu-mrow { border-top: 1px solid #f1f2f6; }
.rcbu-mrow img { width: 36px; height: 36px; border-radius: 50%; background: #e3e6ee; object-fit: cover; }
.rcbu-mrow > div { flex: 1; min-width: 0; }
.rcbu-mrow b { display: block; font-size: 14px; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-mrow small { display: block; margin-top: 2px; color: #9ca3af; font-size: 12.5px; }
.rcbu-mrow > span { flex: none; color: #9ca3af; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* reply list inside the modal */
.rcbu-reply { display: block; padding: 12px 0; }
.rcbu-reply + .rcbu-reply { border-top: 1px solid #f1f2f6; }
.rcbu-reply p { margin: 0; color: #1f2937; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.rcbu-reply small { display: block; margin-top: 5px; color: #9ca3af; font-size: 12.5px; }
.rcbu-reply:hover p { color: var(--rcbu-accent); }
.rcbu-mend { margin-top: 12px; text-align: center; color: #9ca3af; font-size: 12.5px; }

/* "more" dropdown under the cover buttons */
.rcbu-menu {
  position: fixed; z-index: 10000; min-width: 160px; padding: 6px;
  border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(10, 12, 20, .18);
}
.rcbu-menu button {
  display: block; width: 100%; padding: 9px 12px; border-radius: 8px;
  text-align: left; color: #1f2937; font-size: 13.5px; white-space: nowrap;
}
.rcbu-menu button:hover { background: #f3f4f6; color: var(--rcbu-accent); }

/* cover upload dialog */
.rcbu-hint { margin: 0 0 14px; color: #6b7280; font-size: 13px; line-height: 1.6; }
.rcbu-pick { display: block; }
.rcbu-pick span {
  display: block; height: 44px; border-radius: 12px; background: var(--rcbu-accent);
  color: #fff; font-size: 14px; font-weight: 600; line-height: 44px; text-align: center; cursor: pointer;
}
.rcbu-pick span:hover { filter: brightness(1.05); }
.rcbu-upbar { display: none; height: 4px; margin-top: 12px; border-radius: 2px; background: #eef0f4; overflow: hidden; }
.rcbu-upbar.on { display: block; }
.rcbu-upbar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--rcbu-accent); animation: rcbu-up 1.1s ease-in-out infinite; }
@keyframes rcbu-up { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* send gift dialog */
.rcbu-gifts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.rcbu-gitem {
  padding: 10px 4px 8px; border-radius: 12px; background: #f8f9fb; text-align: center;
  border: 2px solid transparent; transition: border-color .15s, background .15s;
}
.rcbu-gitem.on { border-color: var(--rcbu-accent); background: var(--rcbu-accent-soft); }
.rcbu-gitem img { width: 44px; height: 44px; margin: 0 auto; object-fit: contain; }
.rcbu-gitem b { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcbu-gitem span { display: block; color: var(--rcbu-gold); font-size: 12px; font-weight: 600; }

.rcbu-pay { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.rcbu-cur { color: #6b7280; font-size: 13px; }
.rcbu-qty { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.rcbu-qty button { width: 34px; height: 34px; color: #6b7280; font-size: 16px; }
.rcbu-qty button:hover { background: #f3f4f6; color: var(--rcbu-accent); }
.rcbu-qty input { width: 46px; height: 34px; border: 0; text-align: center; font-size: 14px; color: #111827; background: none; }
.rcbu-pay .rcbu-main { background: var(--rcbu-accent); color: #fff; margin-left: auto; }
.rcbu-pay .rcbu-main:disabled { background: #e5e7eb; color: #9ca3af; }

.rcbu-field { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rcbu-field span { flex: none; width: 42px; color: #6b7280; font-size: 13.5px; }
.rcbu-field input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #e5e7eb;
  border-radius: 10px; font-size: 14px; color: #111827; background: #fff;
}
.rcbu-field input:focus { border-color: var(--rcbu-accent); outline: none; }

.rcbu-toast {
  position: fixed; left: 50%; bottom: 60px; z-index: 10000; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 10px; background: rgba(17, 24, 39, .92); color: #fff; font-size: 13.5px;
}

/* ---------- relation panels: 关注 / 粉丝 user cards ---------- */
.rcbu-users {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.rcbu-uc {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--rcbu-line);
}
.rcbu-uc-av { position: relative; flex: none; }
.rcbu-uc-av img {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--rcbu-soft);
}
.rcbu-uc-vf { position: absolute; right: -1px; bottom: -1px; }
.rcbu-uc-vf img { width: 18px; height: 18px; }
.rcbu-uc-bd { flex: 1; min-width: 0; }
.rcbu-uc-nm {
  display: flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--rcbu-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcbu-uc-nm:hover { color: var(--rcbu-accent); }
.rcbu-uc-badges { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.rcbu-uc-badges :is(img, svg) { width: 16px; height: 16px; }
.rcbu-uc-bio {
  margin-top: 3px; color: var(--rcbu-mute); font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rcbu-uc-btn {
  flex: none; height: 32px; padding: 0 16px; border-radius: 999px;
  background: var(--rcbu-accent); color: #fff; font-size: 13px; font-weight: 500;
  transition: opacity .2s;
}
.rcbu-uc-btn:hover { opacity: .88; }
.rcbu-uc-btn.had { background: var(--rcbu-soft); color: var(--rcbu-sub); }
.rcbu-uc-btn:disabled { opacity: .5; cursor: default; }
.rcbu-uc-self { flex: none; color: var(--rcbu-mute); font-size: 12.5px; }

/* ---------- relation panels: 回复 cards ---------- */
/* Same shape as the official profile demo: a small masonry card holding the
   source post, the reply itself, then time + likes - not a full-width row. */
.rcbu-rc { padding: 16px 16px 14px; }
.rcbu-src {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--rcbu-mute); font-size: 12.5px;
}
.rcbu-src svg { flex: none; width: 14px; height: 14px; }
.rcbu-src span {
  min-width: 0; color: var(--rcbu-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcbu-src:hover span { color: var(--rcbu-accent); }
.rcbu-rtxt {
  margin-top: 8px; color: #1e2026; font-size: 14.5px; line-height: 1.65;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.rcbu-rft {
  display: flex; align-items: center; gap: 14px; margin-top: 10px;
  color: var(--rcbu-mute); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.rcbu-rft span { display: inline-flex; align-items: center; gap: 3px; }

/* the global body-end slot marker that ships module.js to every PC page */
.rcbu-relk { display: none !important; }

@media (max-width: 1100px) {
  .rcbu-hero { height: 260px; }
  .rcbu-cap { left: 20px; right: 20px; bottom: 20px; gap: 14px; }
  .rcbu-av { width: 76px; height: 76px; }
  .rcbu-name { font-size: 22px; }
  .rcbu-sub { padding: 16px 20px 18px; }
}