/* Layout: hero centered with a static aside to the right (community moved further right) */
.hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  padding-top: 18px;
  box-sizing: border-box;
  position: relative;
}

/* Hero container and single gradient box */
.hero-content { max-width: 980px; width: min(980px, 92%); }
.hero-box {
  background: #ff69b4;
  padding: 56px 46px;                /* slightly larger vertical padding */
  border-radius: 12px;
  color: #fff;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Make the main title larger and more prominent */
.hero-box h1 {
  margin: 0 0 12px;
  font-size: 4rem;                   /* increased */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 10px 30px rgba(139,0,255,0.12);
}

/* Subtitle / description */
.hero-box p {
  margin: 0 0 12px;
  font-size: 1.05rem;
  opacity: 0.95;
}

/* CTA button inside hero: larger, centered, stronger glow */
.hero-box .cta-button {
  display: inline-block;
  margin: 18px auto 0;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  background: #000;
  border-radius: 12px;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.6),
    0 0 22px rgba(255,105,180,0.12);
  text-decoration: none;
  border: 0;
}

/* Ensure no extra background on parent wrappers */
.hero, .hero-content { background: transparent !important; }

/* Community card (static in layout) — move it further to the right by increasing left margin.
   This lets the hero stay centered while the card sits more toward the open space on the right. */
.community-card {
  width: 200px;
  flex: 0 0 200px;
  background: rgba(10,10,10,0.98);
  border-radius: 12px;
  padding: 16px;
}
@media (max-width: 1200px) {
  .community-card { margin-left: 80px; }
}
@media (max-width: 1000px) {
  .hero-row { flex-direction: column; align-items: center; gap: 18px; padding-top: 12px; }
  .community-card { order: 2; width: 92%; flex-basis: auto; margin-left: 0; }
  .hero-content { width: 92%; }
}

/* Community inner styles */
.community-card .title {
  text-align: center;
  color: #ff93d6;
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 0 0 8px rgba(255,105,180,0.75);
}
.community-card .stat-row {
  display:flex; align-items:center; justify-content:space-between; padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,0.03);
}
.community-card .stat-row:last-of-type { border-bottom:none; }
.community-card .stat-label { color: rgba(255,255,255,0.7); font-size:0.85rem; }
.community-card .stat-value { font-weight:800; font-size:1.35rem; color:#fff; }
.community-card .icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#ff69b4; color:#000; }
.community-card .browse-btn { margin-top:12px; display:block; text-align:center; padding:10px; border-radius:10px; color:#ff69b4; border:1px solid rgba(255,105,180,0.12); text-decoration:none; font-weight:700; }

/* Social feed styles - Instagram/Twitter/TikTok hybrid */
#social-feed-root { max-width:680px; margin: 40px auto; padding: 0 20px; }
.feed-controls { display:flex; flex-direction:column; align-items:center; margin-bottom:20px; gap:8px; }
.feed-tabs { display:flex; gap:12px; align-items:center; justify-content:center; }
.feed-tabs > button[data-filter] { background:transparent; border:1px solid rgba(255,255,255,0.08); color:#ffd9f7; padding:10px 16px; border-radius:20px; cursor:pointer; font-weight:600; transition: all 0.3s ease; }
.feed-tabs > button[data-filter].active { background: #ff69b4; color:#000; box-shadow: 0 4px 15px rgba(255,105,180,0.4); transform: scale(1.05); }
/* The time window is one "24H ▾" trigger at the end of the sub-tab row (Following
   and Popular), opening these four as a small menu, as in the app. */
.feed-controls { position: relative; }
.period-pills { display:none; gap:6px; justify-content:center; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:6px; z-index:60; background:#140e14; border:1px solid rgba(255,105,180,0.35); border-radius:14px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,0.5); }
.period-pills.open { display:flex; }
.content-type-pills > button.period-trigger { color:#ffd9f7; margin-left:8px; }
.content-type-pills > button.period-trigger[aria-expanded="true"] { color:#ff69b4; }
.period-pills button { background:transparent; border:1px solid rgba(255,255,255,0.06); color:#ffd9f7; padding:5px 10px; border-radius:14px; cursor:pointer; font-size:0.78em; font-weight:600; transition: all 0.3s ease; }
.period-pills button.active { background:rgba(255,105,180,0.25); color:#ff69b4; border-color:rgba(255,105,180,0.4); }
/* align-items:center so the joined QT/FT group, which is a touch shorter than the
   round pills, sits on their centre line. flex-wrap so a narrow phone drops it to
   a second line instead of pushing the row off screen. */
/* Underlined text sub-tabs (owner's pick, 2026-10-05): a second level of tabs under
   Latest / Following / Popular, the selected one white with a pink underline. Same
   on the app. '>' so the QT/FT buttons inside the row keep their own look. */
.content-type-pills { display:flex; gap:4px 18px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:10px; }
.content-type-pills > button { background:transparent; border:0; border-radius:0; color:rgba(255,217,247,0.55); padding:4px 1px 6px; cursor:pointer; font-size:0.84em; font-weight:600; box-shadow:inset 0 -2px 0 transparent; transition: color 0.2s, box-shadow 0.2s; }
.content-type-pills > button:hover { color:#ffd9f7; }
.content-type-pills > button.active { color:#fff; background:transparent; box-shadow:inset 0 -2px 0 #ff69b4; }
/* Take-length toggle, Latest tab only. One joined control rather than two loose
   pills, because QT and FT are two states of one thing and spacing them apart
   reads as two independent filters you could have both of. */
.take-type-pills { display:none; justify-content:center; margin-left:4px; }
.take-type-pills.visible { display:flex; }
.take-type-pills .tt-group { display:flex; border:1px solid rgba(255,105,180,0.25); border-radius:8px; overflow:hidden; }
.take-type-pills button { background:transparent; border:0; color:#ffd9f7; padding:5px 14px; cursor:pointer; font-size:0.74em; font-weight:700; letter-spacing:0.04em; transition: background 0.2s, color 0.2s; }
.take-type-pills button + button { border-left:1px solid rgba(255,105,180,0.25); }
.take-type-pills button.active { background:#ff69b4; color:#fff; }

/* Update prompt. Fixed overlay, so where it sits in the DOM does not matter.
   Hidden by default and only revealed by JS once it has confirmed this member
   has not already been told about this post -- rendering it visible and hiding
   it later would flash the modal on every single page load. */
.upd-scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9000; align-items:center; justify-content:center; padding:24px; }
.upd-scrim.open { display:flex; }
.upd-card { background:#111; border:1px solid rgba(255,105,180,0.35); border-radius:18px; padding:24px; max-width:420px; width:100%; }
.upd-top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.upd-ic { width:40px; height:40px; border-radius:20px; background:rgba(255,105,180,0.12); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.upd-top h3 { margin:0; flex:1; color:#fff; font-size:1.15rem; font-weight:800; }
.upd-x { background:none; border:none; color:#888; font-size:1.2rem; cursor:pointer; line-height:1; padding:2px 4px; }
.upd-x:hover { color:#fff; }
.upd-head { color:#fff; font-weight:600; font-size:0.95rem; line-height:1.5; margin:0 0 6px; }
.upd-sub { color:#aaa; font-size:0.85rem; line-height:1.5; margin:0 0 20px; }
.upd-go { display:block; width:100%; background:#ff69b4; color:#fff; border:none; border-radius:12px; padding:13px; font-weight:800; font-size:0.92rem; cursor:pointer; text-align:center; text-decoration:none; }
.upd-go:hover { background:#ff4fa3; }
.upd-later { display:block; width:100%; background:none; border:none; color:#888; font-weight:700; font-size:0.82rem; padding:11px; margin-top:6px; cursor:pointer; }
.upd-later:hover { color:#ccc; }
body.theme-light .upd-card { background:#fff; border-color:rgba(255,105,180,0.45); }
body.theme-light .upd-top h3, body.theme-light .upd-head { color:#111; }
body.theme-light .upd-sub { color:#555; }

/* Unread-update state on the Updates box. Applied by JS, because "have I read
   it" is per browser and the badge is rendered server-side for everyone. */
.dash-badge-new { letter-spacing:0.06em; padding:0 7px !important; }
.home-dash-box.has-new { border-color:#ff69b4; }

.feed-composer { background: #000; border:1px solid rgba(255,105,180,0.2); padding:16px; border-radius:15px; margin-bottom:16px; }
.composer-row { display:flex; gap:16px; align-items: flex-start; }
  .composer-avatar {
    width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.2em;
    background: #ff0080;
  }
.composer-input { flex:1; }
.composer-input textarea { width:100%; min-height:80px; resize:vertical; background:transparent; border:1px solid rgba(255,255,255,0.06); padding:12px; border-radius:12px; color:var(--color-text); font-size:1.1em; }
.composer-meta { display:flex; gap:12px; margin-top:12px; align-items:center; justify-content: space-between; }
.composer-meta input[type=file] { display:inline-block; }
.composer-meta select { background:transparent; border:1px solid rgba(255,255,255,0.08); padding:8px 12px; border-radius:12px; color:var(--color-text); }
.composer-meta .composer-submit { padding:10px 20px; border-radius:12px; background:#ff69b4; color:#000; border:0; cursor:pointer; font-weight:700; transition: all 0.3s ease; }
.composer-meta .composer-submit:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(255,105,180,0.4); }

.feed-list { display:flex; flex-direction:column; gap:16px; }
.feed-item { background: #000; padding:16px; border-radius:15px; border:1px solid rgba(255,105,180,0.2); position:relative; box-shadow: 0 0 12px rgba(255,105,180,0.06); transition: border-color 0.2s; }
.feed-item:hover { border-color: rgba(255,105,180,0.35); }
.post-header { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.post-avatar { width:28px; height:28px; border-radius:14px; flex-shrink:0; border: 1px solid rgba(255,105,180,0.2); overflow:hidden; }
/* No `color` here: this selector is more specific than the global
   .default-avatar rule, so setting one re-exposed the initials that rule
   deliberately hides. */
.post-avatar .default-avatar {
  width:100%; height:100%; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.7em;
}
.post-meta { flex:1; min-width:0; }
.post-meta .post-user { font-weight:600; color:#fff; font-size:14px; }
.post-meta .post-time { color: #ccc; font-size:12px; }
.feed-header-right { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
/* .translate-ugc-link base style now lives in css/buttons.css, which base.html
   loads on every page. Only the page-specific override below stays here. */
/* Attached-take quote's own Translate button (sits directly under
   .feed-take-text-lg) is a SECOND, independent translate control on the same
   card -- the post's own text has one in the header row above. Both are
   functionally correct (a post can be a different language than the take
   it's quoting), but stacked with identical styling they read as one
   confusing duplicated button. De-emphasizing this one signals "nested
   detail attached to the quote below it," not "another primary action" --
   matches how the quote itself is already smaller/secondary to the post. */
.feed-take-text-lg + .translate-ugc-link { font-size:0.68rem; opacity:0.65; margin-left:0; }
.feed-take-text-lg + .translate-ugc-link svg { width:10px; height:10px; }
.feed-take-text-lg + .translate-ugc-link:hover { opacity:0.9; }
.feed-header-icon { background:none; border:none; padding:4px; cursor:pointer; transition:color 0.2s, opacity 0.2s; color:#ccc; font-size:14px; }
.feed-header-icon:hover { color:#ff69b4; }
.feed-header-icon .fa-flag { font-size:13px; }
.post-body {
  margin:8px 0 12px; color:#fff; font-size:16px; line-height:1.4;
  /* Long-string safety: a 1000-char run of "ffffff" with no spaces would
     otherwise overflow the feed card horizontally and push every action
     button off-screen. overflow-wrap:anywhere lets the browser break
     inside any character; word-break:break-word is the fallback for older
     browsers. pre-wrap preserves user line breaks while still wrapping. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
.post-media { margin:0 0 12px; position:relative; overflow:hidden; border-radius:12px;
  /* cqw below resolves against this. */
  container-type: inline-size; }

/* --- POST MEDIA FRAME: always landscape, between 4:3 and 1.91:1 ---------
   One steady shape down the column whatever shape people post, which is the
   same rule the app uses (MIN_ASPECT / MAX_ASPECT in
   src/components/ImageCarousel.tsx). Web and mobile must not diverge here.

   HOW THE CLAMP WORKS. cqw is 1% of the container inline size, so with
   height:auto (natural ratio) and object-fit:cover:
     max-height: 75cqw     height <= 0.75 x width  -> never taller than 4:3
     min-height: 52.36cqw  height >= 0.524 x width -> never wider than 1.91:1
   An image between the two keeps its own shape. This replaces a flat
   max-height: 500px, which is not a shape at all: a portrait photo simply ran
   to the cap and one post took the whole column.

   Worth knowing, because it argues the other way and was measured on
   production 2026-08-29: 42 of 104 posted images are outside this range,
   nearly all phone screenshots at ~0.46 aspect, and cover takes a middle band
   out of those. Clicking the image still opens it whole. */
.post-media > img,
.post-media > .feed-media-img,
.feed-media-img {
  width: 100%;
  max-height: 500px;          /* fallback: no container-query support */
  max-height: 75cqw;
  min-height: 52.36cqw;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.post-media video { width:100%; max-height:600px; border-radius:12px; display:block; }
.post-actions { display:flex; gap:16px; margin-top:12px; align-items: center; }
.post-actions button { background:transparent; border:none; padding:4px; cursor:pointer; color:#ccc; font-weight:600; transition: color 0.2s; display: flex; align-items: center; gap: 4px; font-size:12px; }
.post-actions button:hover { color: #ff69b4; }
.btn-like { color: #ff69b4; }
.btn-like.liked { color: #ff1493; }
.btn-comment { color: #ccc; }
.btn-flag { background:transparent !important; border:none !important; cursor:pointer; padding:4px !important; opacity:0.6; transition: opacity 0.2s; }
.btn-flag:hover { opacity:1; }

@media (max-width: 900px){
  #social-feed-root { padding:0 12px; }
  .composer-row { flex-direction:column; }
  .composer-avatar{align-self:flex-start;}
  .post-actions { gap:8px; }
  .post-actions button { padding:4px; font-size:12px; }
  .feed-item { padding:14px; }
}

/* Heart button styles — Love / Hate reactions */
.heart-btn {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 4px !important;
  transition: color 0.2s ease !important;
}
.heart-btn.active i {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

/* Love pulse animation */
@keyframes lovePulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.5); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.btn-fav.active i {
  animation: lovePulse 0.4s ease-out;
  color: #ff69b4 !important;
  filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.7));
}

/* Hate shake animation */
@keyframes hateShake {
  0% { transform: scale(1); }
  15% { transform: scale(1.3) rotate(-5deg); }
  30% { transform: scale(0.85) rotate(5deg); }
  50% { transform: scale(1.15) rotate(-3deg); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.btn-hate.active i {
  animation: hateShake 0.5s ease-out;
  color: #ff2a2a !important;
  filter: drop-shadow(0 0 6px rgba(255, 42, 42, 0.7));
}

/* Rating dropdown styles */
.rating-dropdown {
  background: rgba(15,15,15,0.95);
  border: 1px solid rgba(255,105,180,0.3);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 220px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
}

.rating-dropdown:hover {
  border-color: rgba(255,105,180,0.6);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,105,180,0.25);
}

.rating-dropdown:focus {
  outline: none;
  border-color: rgba(255,105,180,0.8);
  box-shadow: 0 0 0 3px rgba(255,105,180,0.15);
}

.rating-dropdown option {
  background: #0f0f0f;
  color: #fff;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.rating-dropdown option:hover {
  background: rgba(255,105,180,0.1);
}

.rating-dropdown option[selected] {
  background: rgba(255,105,180,0.2);
  color: #fff;
  font-weight: 700;
}

/* Custom dropdown arrow styling */
.rating-dropdown::-ms-expand {
  display: none;
}

.rating-dropdown {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%), linear-gradient(rgba(255,105,180,0.6), rgba(255,105,180,0.6));
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 15px) 1em;
  background-size: 5px 5px, 12px 12px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

@media (max-width: 900px) {
  .rating-dropdown {
    min-width: 180px;
    font-size: 0.9rem;
    padding: 8px 12px;
  }
}

/* Rating Creation Interface Styles */
.rating-creation-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  min-width: 280px;
  background: rgba(15,15,15,0.95);
  border: 1px solid rgba(255,105,180,0.2);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.rating-search-group {
  position: relative;
  flex: 1;
}

.song-search-input {
  background: transparent;
  border: 1px solid rgba(255,105,180,0.3);
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  position: relative;
}

.song-search-input:hover {
  border-color: rgba(255,105,180,0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,105,180,0.2);
}

.song-search-input:focus {
  outline: none;
  border-color: rgba(255,105,180,0.8);
  box-shadow: 0 0 0 3px rgba(255,105,180,0.15);
}

.song-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0f0f0f;
  border: 1px solid rgba(255,105,180,0.3);
  border-radius: 6px;
  max-height: 160px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.song-search-results.active {
  display: block;
}

.song-search-result-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #fff;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.song-search-result-item:hover {
  background: rgba(255,105,180,0.1);
  color: #fff;
}

.song-search-result-item:last-child {
  border-bottom: none;
}

.song-search-result-item .song-title {
  font-weight: 700;
  display: block;
}

.song-search-result-item .artist-name {
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  margin-top: 1px;
}

.rating-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 120px;
}

.rating-input {
  background: transparent;
  border: 1px solid rgba(255,105,180,0.3);
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  text-align: center;
  width: 60px;
}

.rating-input:hover {
  border-color: rgba(255,105,180,0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,105,180,0.2);
}

.rating-input:focus {
  outline: none;
  border-color: rgba(255,105,180,0.8);
  box-shadow: 0 0 0 3px rgba(255,105,180,0.15);
}

.selected-song-display {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,105,180,0.15);
  border: 1px solid rgba(255,105,180,0.4);
  border-radius: 8px;
  padding: 6px 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  display: none;
}

.selected-song-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clear-rating-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #ff69b4;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* The X is drawn (an SVG, centred in its own box), not the ¹5 character: the character sat off centre in
   the circle (its side bearings), and a button's own padding and line height
   moved it further. Zero both and centre the icon box. */
.clear-rating-btn { padding: 0; line-height: 0; }
.clear-rating-btn svg { display: block; flex: none; }
.clear-rating-btn:hover {
  background: rgba(255,105,180,0.2);
  border-color: rgba(255,105,18ang,0.6);
  transform: scale(1.1);
}

@media (max-width: 900px) {
  .rating-creation-container {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
  }

  .rating-search-group {
    flex: none;
    width: 100%;
  }

  .rating-input-group {
    width: 100%;
    justify-content: flex-start;
  }

  .rating-input {
    width: 60px;
  }
}

/* ─── Feed card structure ─────────────────────────────────────────── */
.feed-author-row { display: flex; gap: 8px; margin-bottom: 8px; }
.feed-author-avatar { width: 28px; height: 28px; border-radius: 14px; border: 1px solid rgba(255,105,180,0.2); object-fit: cover; }
.feed-default-avatar { width: 28px; height: 28px; border-radius: 14px; background: rgba(255,105,180,0.1); display: flex; align-items: center; justify-content: center; }
.feed-author-info { flex: 1; min-width: 0; }
.feed-author-name { font-weight: 600; font-size: 14px; }
.feed-author-username { font-size: 11px; }
.feed-author-time { font-size: 11px; margin-left: auto; }

/* ─── Attached song/album card ────────────────────────────────────── */
.feed-attached-song { display: flex; align-items: center; gap: 10px; background: #161616; border-radius: 10px; padding: 10px; margin: 8px 0; border: 1px solid rgba(255,105,180,0.2); }
.feed-attached-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.feed-attached-cover-placeholder { width: 40px; height: 40px; border-radius: 6px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; }
.feed-attached-info { flex: 1; overflow: hidden; }
.feed-attached-title { font-weight: 600; color: #fff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-attached-artist { font-size: 11px; color: #ccc; margin-top: 1px; }

/* ─── Score badge ─────────────────────────────────────────────────── */
.feed-score-badge { border-width: 1.5px; border-style: solid; border-radius: 8px; padding: 3px 8px; font-weight: 700; font-size: 12px; text-shadow: 0 0 8px currentColor; box-shadow: 0 0 8px currentColor; }
.feed-score-badge-sm { border-width: 1.5px; border-style: solid; border-radius: 8px; padding: 2px 7px; font-weight: 700; font-size: 12px; text-shadow: 0 0 8px currentColor; box-shadow: 0 0 8px currentColor; }

/* ─── Take card ───────────────────────────────────────────────────── */
.feed-take-card { border-radius: 15px; overflow: hidden; position: relative; border: 1px solid rgba(255,105,180,0.2); }
.feed-take-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(25px); transform: scale(1.1); }
.feed-take-content { position: relative; padding: 16px; background: rgba(0,0,0,0.65); }

/* ─── Friends' ratings card (Following only, one per member per day) ─── */
.content-type-pills button[hidden] { display: none; }
.rd-summary { color: #ff69b4; font-weight: 700; font-size: 13px; margin: -4px 0 8px; }
.rd-rows { display: flex; flex-direction: column; }
.rd-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid rgba(255,255,255,0.07); color: #fff; text-decoration: none; border-radius: 8px; min-width: 0; }
.rd-row:first-child { border-top: 0; }
.rd-row:hover { background: rgba(255,255,255,0.05); }
.rd-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; background: #222; }
.rd-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.rd-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sub { color: rgba(255,255,255,0.6); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-songs { color: rgba(255,255,255,0.75); font-size: 12.5px; margin-top: 8px; }
.rd-foot { margin-top: 10px; }
.rd-foot a { color: #ff69b4; font-weight: 700; font-size: 12.5px; text-decoration: none; }
.rd-foot a:hover { text-decoration: underline; }

/* "See all ratings" window: a member's whole day, over the feed. */
.rd-scrim { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.72); align-items: center; justify-content: center; padding: 24px 16px; }
.rd-scrim.open { display: flex; }
body.rd-noscroll { overflow: hidden; }
.rd-sheet { position: relative; overflow: hidden; width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: #140e14; border: 1px solid rgba(255,45,120,0.55); border-radius: 18px; color: #fff; box-shadow: 0 0 24px rgba(255,105,180,0.25); }
.rd-sheet-body { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; min-height: 0; flex: 1; }
.rd-sheet-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.rd-sheet-bg.on { display: block; }
.rd-sheet-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px); transform: scale(1.2); transition: opacity 1.5s ease-in-out; opacity: 0; }
.rd-bg-scrim { position: absolute; inset: 0; background: rgba(12,8,12,0.42); }
/* Glass, the profile's language: a translucent fill over the member's covers and a
   pink hairline. Only the header panel blurs what is behind it; the cards are a
   plain translucent fill, so a 360-song day costs no extra blur work. */
.rd-glass { background: rgba(0,0,0,0.34); border: 1px solid rgba(255,105,180,0.28); border-radius: 14px; }
.rd-headpanel { padding: 12px; display: flex; flex-direction: column; gap: 10px; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.rd-acard { margin-bottom: 8px; }
.rd-acard .rd-srow { border-top: 0; padding: 9px 10px; }
.rd-acard .rd-srow:hover { background: rgba(255,255,255,0.05); border-radius: 14px; }
a.rd-glass.rd-srow { margin-bottom: 8px; padding: 9px 10px; background: rgba(0,0,0,0.34); border: 1px solid rgba(255,105,180,0.28); }
a.rd-glass.rd-srow:hover { background: rgba(255,255,255,0.07); }
.rd-sheet-msg { padding: 28px 8px; text-align: center; color: rgba(255,255,255,0.65); }
.rd-sheet-head { display: flex; align-items: center; gap: 10px; }
.rd-sheet-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.rd-sheet-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rd-sheet-name b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sheet-name span { color: rgba(255,255,255,0.55); font-size: 12px; }
.rd-sheet-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #ddd; cursor: pointer; flex: none; }
.rd-daynav { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.rd-daynav button { background: none; border: 0; color: #ff69b4; font-weight: 700; cursor: pointer; padding: 2px 0; }
.rd-day { color: rgba(255,255,255,0.8); }
.rd-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.rd-seg { display: inline-flex; background: rgba(0,0,0,0.34); border: 1px solid rgba(255,105,180,0.28); border-radius: 999px; padding: 3px; gap: 2px; }
.rd-seg button { background: none; border: 0; color: rgba(255,255,255,0.75); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.rd-seg button.on { background: #ff69b4; color: #160910; }
.rd-sort { background: rgba(0,0,0,0.34); border: 1px solid rgba(255,105,180,0.28); color: rgba(255,255,255,0.8); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rd-slist { overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.rd-srow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-top: 1px solid rgba(255,255,255,0.07); background: none; color: #fff; text-align: left; text-decoration: none; cursor: pointer; font: inherit; border-radius: 8px; min-width: 0; }
.rd-srow:first-child { border-top: 0; }
.rd-srow:hover { background: rgba(255,255,255,0.05); }
.rd-chev { width: 12px; color: rgba(255,255,255,0.5); font-size: 11px; flex: none; }
.rd-cover-sm { width: 34px; height: 34px; }
.rd-tracks { margin: 0 12px 10px 66px; padding: 2px 0 2px 10px; border-left: 2px solid rgba(255,105,180,0.35); display: flex; flex-direction: column; gap: 4px; }
.rd-tracks div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.85); }
.rd-tracks div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-open-album { color: #ff69b4; font-weight: 700; font-size: 12.5px; text-decoration: none; margin-top: 2px; }
.rd-open-album:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .rd-scrim { align-items: flex-end; padding: 0; }
  .rd-sheet { max-width: none; max-height: 90vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
}

/* Sensitive content overlay: moved to css/cards.css (loaded on every page) so
   replies, comments, discussions and board pictures share the post look. */

/* ─── Reaction / action button groups ─────────────────────────────── */
.feed-reaction-group { display: flex; align-items: center; gap: 16px; }
.feed-reaction-pair { display: flex; align-items: center; gap: 4px; }
.feed-icon-pink { color: #ff69b4; font-size: 15px; }
.feed-icon-muted { color: #ff69b4; font-size: 15px; }
.feed-btn-sm { padding: 4px !important; font-size: 15px; background: transparent !important; border: none !important; }
.feed-btn-md { padding: 4px !important; font-size: 15px; background: transparent !important; border: none !important; }
.feed-btn-bare { background: transparent !important; border: none !important; }
.feed-count { font-size: 12px; color: #ccc; font-weight: 400; }
.feed-btn-text { margin-left: 4px; font-size: 12px; color: #ccc; }
.feed-actions-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 0; }

/* ─── Mixtape card ────────────────────────────────────────────────── */
.feed-mixtape-row { display: flex; gap: 12px; align-items: center; }
.feed-mixtape-cover { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.feed-mixtape-cover-placeholder { width: 56px; height: 56px; border-radius: 8px; background: rgba(255,105,180,0.15); display: flex; align-items: center; justify-content: center; }
.feed-mixtape-info { flex: 1; min-width: 0; }
.feed-mixtape-name { font-weight: 700; color: #ffd9f7; font-size: 1em; }
.feed-mixtape-desc { font-size: 0.8em; color: rgba(255,255,255,0.5); margin-top: 2px; }
.feed-mixtape-meta { font-size: 0.75em; color: #bf5fff; margin-top: 4px; }
.feed-mixtape-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 8px;
  background: rgba(192,132,252,0.2); border: 1px solid rgba(192,132,252,0.45);
  color: #c084fc;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ─── Discussion card (Phase 4) ───────────────────────────────────── */
.feed-discussion-card {
  position: relative; overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
.feed-disc-backdrop {
  position: absolute; inset: -30px; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.4);
  opacity: 0.55;
}
.feed-disc-backdrop-gradient {
  background: #2a1a3e;
  filter: none;
  opacity: 1;
}
.feed-disc-backdrop-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(10,10,10,0.55);
}
.feed-disc-inner { position: relative; z-index: 2; }
.feed-disc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.feed-disc-name-block { line-height: 1.1; }
.feed-disc-name { color: #fff; font-weight: 700; font-size: 0.92rem; }
.feed-disc-handle { color: #aaa; font-size: 0.78rem; }
.feed-disc-time { color: #888; font-size: 0.78rem; margin-left: auto; }
.feed-disc-entity {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 8px; background: rgba(0,0,0,0.4); border-radius: 10px;
}
.feed-disc-entity-text { flex: 1; min-width: 0; }
.feed-disc-entity-action {
  color: #aaa; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.feed-disc-entity-title { color: #fff; font-weight: 700; font-size: 0.95rem; }
.feed-disc-entity-sub { color: #bbb; font-size: 0.8rem; }
.feed-disc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 8px;
  background: rgba(255,105,180,0.2); border: 1px solid rgba(255,105,180,0.45);
  color: #ff69b4;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em;
  flex-shrink: 0;
}
/* pre-wrap: a take keeps the line breaks it was typed with, as on the song page.
   The body is injected flush against its tags, so no template whitespace shows. */
.feed-disc-body { color: #eee; font-size: 0.92rem; line-height: 1.45; margin-bottom: 14px; white-space: pre-wrap; overflow-wrap: break-word; }
.feed-disc-react-row {
  display: flex; align-items: center; gap: 14px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.82rem;
}
.feed-disc-react {
  display: inline-flex; align-items: center; gap: 5px;
  color: #ff69b4; font-weight: 600;
}
.feed-disc-react > span { color: #fff; font-weight: 700; }
.feed-disc-react-spacer { flex: 1; }

/* Interactive vote + reply buttons */
.feed-disc-vote-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid rgba(255,105,180,0.3);
  color: #ff69b4; padding: 4px 10px; border-radius: 14px;
  cursor: pointer; font-size: 0.82rem; font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}
.feed-disc-vote-btn:hover { background: rgba(255,105,180,0.1); }
.feed-disc-vote-btn.voted-up { background: rgba(255,105,180,0.2); border-color: #ff69b4; }
.feed-disc-vote-btn-down { color: #ff4d4f; border-color: rgba(255,77,79,0.3); }
.feed-disc-vote-btn-down:hover { background: rgba(255,77,79,0.1); }
.feed-disc-vote-btn-down.voted-down { background: rgba(255,77,79,0.18); border-color: #ff4d4f; }
.feed-disc-reply-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: #ccc; text-decoration: none; font-size: 0.82rem; font-weight: 600;
  padding: 4px 10px; border-radius: 14px;
}
.feed-disc-reply-btn:hover { color: #ff69b4; background: rgba(255,105,180,0.08); }

/* Author links — make username + avatar clickable */
.feed-disc-author-link, .feed-disc-name, .feed-disc-handle {
  text-decoration: none; color: inherit;
}
.feed-disc-name { color: #fff; font-weight: 700; font-size: 0.92rem; }
.feed-disc-name:hover { color: #ff69b4; }
.feed-disc-handle { color: #aaa; font-size: 0.78rem; }
.feed-disc-handle:hover { color: #ff69b4; }

/* ─── Repost card ─────────────────────────────────────────────────── */
.feed-repost-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; color: rgba(255,255,255,0.5); }
.feed-repost-avatar { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.feed-repost-inner { border-radius: 10px; overflow: hidden; }

/* ─── Comments ────────────────────────────────────────────────────── */
.feed-comments-section { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.03); }
.feed-comments-list { margin-bottom: 12px; }
.feed-comment-input { flex: 1; background: transparent; border: 1px solid rgba(255,255,255,0.03); padding: 8px; border-radius: 8px; color: var(--color-text); resize: none; font-family: inherit; font-size: inherit; line-height: 1.4; max-height: 120px; overflow-y: auto; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255,105,180,0.45) transparent; }
.feed-comment-input::-webkit-scrollbar { width: 7px; }
.feed-comment-input::-webkit-scrollbar-thumb { background: rgba(255,105,180,0.4); border-radius: 4px; }
.feed-comment-input::-webkit-scrollbar-track { background: transparent; }
/* Bottom-align so the Post button + image icon stay put as the textarea grows. */
.comment-form { align-items: flex-end; }
.feed-comment-submit { background: #ff69b4; color: #000; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; flex-shrink: 0; }

/* ─── Post hashtags ───────────────────────────────────────────────── */
.feed-hashtags { margin: 8px 0 0 0; }
.feed-hashtag-link { color: #bf5fff; font-weight: 600; margin-right: 8px; text-decoration: none; }

/* ─── Pinned post ─────────────────────────────────────────────────── */
.feed-pinned { border: 1.5px solid rgba(255,105,180,0.5); background: #000; }
.feed-pinned-user { color: #ff69b4; font-weight: 700; }
.feed-pinned-time { color: #bf5fff; }
.feed-pinned-body { font-weight: 600; color: #ffd9f7; }
.feed-pinned-avatar { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }

/* ─── Avatar in post header ───────────────────────────────────────── */
.feed-post-avatar-img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }
/* No background or color here on purpose: this class is always paired with
   .default-avatar, whose rule supplies the opaque tile, the person icon and
   the color:transparent that hides the initials still sitting in the markup.
   Setting `background` (a shorthand) here reset background-image to none and
   `color:#000` made the letters visible, which is why the feed showed initials
   on a solid pink circle while every other surface showed the icon. */
.feed-post-default-avatar { width: 100%; height: 100%; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.65em; }

/* ─── Misc link helpers ───────────────────────────────────────────── */
.feed-link-inherit { color: inherit; text-decoration: none; }
.feed-link-white { color: #fff; text-decoration: none; font-weight: 700; }
.feed-link-pink { color: #ff69b4; text-decoration: none; font-weight: 600; }
.feed-link-muted { font-size: 12px; color: rgba(255,255,255,0.5); text-decoration: none; cursor: pointer; }

/* ─── Take-specific styles ────────────────────────────────────────── */
.feed-take-username { font-size: 11px; color: #ff69b4; }
.feed-name-bold { font-weight: 600; font-size: 14px; color: #fff; }
.feed-take-time { color: rgba(255,255,255,0.4); }
.feed-take-song-link { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-decoration: none; transition: opacity 0.2s; }
.feed-take-song-link:hover { opacity: 0.8; }
.feed-take-song-cover { width: 44px; height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); }
.feed-take-song-info { flex: 1; overflow: hidden; }
.feed-take-song-title { font-weight: 700; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-take-song-artist { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 1px; }
.feed-take-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.feed-take-score-row { display: flex; align-items: center; gap: 9px; }
.feed-take-type-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.feed-take-content-quick { color: #ff69b4; font-style: italic; font-weight: 600; text-shadow: 0 0 6px rgba(255,105,180,0.4); font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.feed-take-content-full { color: #fff; font-size: 14px; line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; overflow-wrap: break-word; }
.feed-take-footer { display: flex; align-items: center; justify-content: space-between; }
.feed-take-actions { display: flex; gap: 14px; align-items: center; }
.feed-take-action-link { font-size: 12px; color: rgba(255,255,255,0.5); text-decoration: none; cursor: pointer; }
.feed-take-action-link:hover { color: #ff69b4; }
.feed-take-text { color: #ff69b4; font-weight: 600; font-style: italic; font-size: 10px; margin-top: 4px; text-shadow: 0 0 8px rgba(255,105,180,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-take-text-lg { color: #ff69b4; font-weight: 600; font-style: italic; font-size: 14px; margin: 4px 0 8px; text-shadow: 0 0 8px rgba(255,105,180,0.4); }

/* ─── Overlay on photo (attached rating + score over carousel) ──── */
.feed-photo-overlay { position: absolute; left: 10px; right: 10px; background: rgba(0,0,0,0.8); border-radius: 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.1); z-index: 2; }
.feed-photo-overlay-bottom-12 { bottom: 10px; }
.feed-photo-overlay-bottom-28 { bottom: 26px; }
.feed-overlay-row { display: flex; align-items: center; gap: 6px; }
.feed-overlay-cover { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.feed-overlay-info { flex: 1; min-width: 0; overflow: hidden; }
.feed-overlay-title { color: #fff; font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-overlay-artist { font-size: 9px; color: rgba(255,255,255,0.5); margin-top: 1px; }
.feed-overlay-score { flex-shrink: 0; }

/* ─── Carousel dots ───────────────────────────────────────────────── */
.feed-carousel-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.feed-dot { width: 6px; height: 6px; border-radius: 3px; }
.feed-dot-active { background: #ff69b4; }
.feed-dot-inactive { background: rgba(255,255,255,0.3); }

/* ─── Multi-image carousel ────────────────────────────────────────── */
/* overscroll-behavior-x: contain stops a swipe past the first/last image from
   chaining to the mobile browser's back/forward edge-swipe (which slid the
   previous page in from the left — looked like the nav tray "pulling out"). */
.feed-media-carousel { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 8px; scroll-behavior: smooth; scrollbar-width: none; }
.feed-media-carousel::-webkit-scrollbar { display: none; }
.feed-media-img { width: 100%; max-height: 500px; max-height: 75cqw; min-height: 52.36cqw; object-fit: cover; border-radius: 12px; flex-shrink: 0; scroll-snap-align: start; display: block; }
.feed-media-img-400 { width: 100%; max-height: 400px; max-height: 75cqw; min-height: 52.36cqw; object-fit: cover; border-radius: 12px; flex-shrink: 0; scroll-snap-align: start; display: block; }

/* Instagram-web style left/right arrow nav for the carousel. Only rendered
   when there are 2+ images; the renderer adds .feed-carousel-arrow buttons
   as siblings of the scrolling .feed-media-carousel inside the position-
   relative .feed-media-relative wrapper. Arrows fade on hover; auto-hide
   the prev arrow on first image and next arrow on last (toggled by JS). */
.feed-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,105,180,0.85);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    padding: 0;
    box-shadow: 0 4px 12px rgba(255,105,180,0.35);
}
.feed-carousel-arrow:hover {
    background: #ff1493;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 18px rgba(255,20,147,0.55);
}
.feed-carousel-prev { left: 10px; }
.feed-carousel-next { right: 10px; }
.feed-carousel-arrow[hidden] { display: none; }

/* ─── Skeleton loader helper ──────────────────────────────────────── */
.feed-skeleton-header { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.feed-skeleton-body { flex: 1; }

/* ─── Post media position relative ────────────────────────────────── */
.feed-media-relative { position: relative; overflow: hidden; border-radius: 12px;
  /* The carousel pages are 100% of this, so this is what cqw must measure. */
  container-type: inline-size; }

/* ─── Repost border ───────────────────────────────────────────────── */
.feed-repost-border { border-left: 3px solid rgba(255,45,120,0.4); }
.feed-repost-unavailable { padding: 12px; color: rgba(255,255,255,0.4); font-size: 12px; }

/* ─── Empty state & error state ───────────────────────────────────── */
.feed-empty-state { text-align: center; padding: 40px; color: #ffd9f7; opacity: 0.6; }
.feed-error-state { text-align: center; padding: 40px; color: #ff69b4; }
.feed-empty-state__title { display: block; font-size: 1.05em; font-weight: 700; margin-bottom: 4px; }

/* ─── Features section margin ─────────────────────────────────────── */
.feed-features-mt { margin-top: 36px; }
.feed-section-mt { margin-top: 28px; }

/* ─── Score text-shadow for takes ─────────────────────────────────── */
.feed-score-glow { text-shadow: 0 0 8px currentColor; }

/* ─── Comment styles ──────────────────────────────────────────────── */
.feed-comment-item { margin-bottom: 8px; padding: 8px; background: rgba(255,255,255,0.02); border-radius: 6px; display: flex; align-items: flex-start; gap: 8px; }
.feed-comment-reply-btn { margin-left: 8px; background: transparent; border: none; color: #ff69b4; padding: 0; cursor: pointer; font-size: 0.8em; }
.feed-comment-delete-btn { margin-left: 8px; background: transparent; border: 1px solid rgba(255,105,180,0.3); color: #ff69b4; padding: 2px 6px; border-radius: 4px; cursor: pointer; font-size: 0.8em; }
.feed-comment-time { color: rgba(255,255,255,0.6); margin-left: 8px; }
/* No background/color: when there is no picture this element also carries
   .default-avatar, which supplies the tile, icon and transparent text. */
.feed-comment-avatar-box { border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: 800; flex-shrink: 0; }
.feed-comment-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ─── Misc utility classes ────────────────────────────────────────── */
.feed-name-bold { font-weight: 700; }
.feed-btn-bare { background: none; border: none; cursor: pointer; }
.feed-header-mb { margin-bottom: 10px; }
.feed-icon-color-666 { color: #666; }
.feed-icon-hate { color: #ff2a2a; }
.feed-icon-pink-sm { color: #ff69b4; font-size: 11px; }
.feed-repost-btn-sm { padding: 2px 6px; font-size: 12px; background: none; border: none; cursor: pointer; }
.feed-bookmark-muted { color: rgba(255,255,255,0.4); }
.feed-skeleton-mb { margin-bottom: 20px; }

/* ─── Loading / scroll UI (JS-created elements) ──────────────────── */
#feed-loading-marker { text-align: center; padding: 20px; color: #ff69b4; display: none; font-size: 14px; }
#feed-end-marker { text-align: center; padding: 30px 20px; color: rgba(255,255,255,0.4); font-size: 13px; display: none; }
#feed-sentinel { height: 1px; width: 100%; }

/* ─── Back to top button ──────────────────────────────────────────── */
.feed-back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 999;
  width: 44px; height: 44px; border-radius: 50%;
  background: #ff69b4;
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(255,105,180,0.4), 0 0 15px rgba(191,95,255,0.2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
}
.feed-back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.feed-back-to-top:hover { transform: translateY(0) scale(1.1); box-shadow: 0 6px 25px rgba(255,105,180,0.6), 0 0 20px rgba(191,95,255,0.35); }

/* ─── Edit mode elements ──────────────────────────────────────────── */
.feed-edit-textarea {
  width: 100%; box-sizing: border-box; min-height: 130px; max-height: 60vh;
  resize: vertical; margin: 4px 0 10px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,105,180,0.35); border-radius: 12px;
  padding: 12px 14px; color: var(--color-text);
  font: inherit; font-size: 0.98rem; line-height: 1.55;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feed-edit-textarea:focus {
  outline: none; border-color: #ff69b4;
  box-shadow: 0 0 0 3px rgba(255,105,180,0.16);
}
.feed-edit-textarea::placeholder { color: rgba(255,255,255,0.4); }
.feed-edit-save {
  background: #ff69b4; color: #0a0a0a;
  border: 0; padding: 8px 18px; border-radius: 9px; cursor: pointer;
  font-weight: 800; font-size: 0.85rem; letter-spacing: .01em;
  box-shadow: 0 4px 14px -4px rgba(255,105,180,0.55);
  transition: filter .15s ease;
}
.feed-edit-save:hover { filter: brightness(1.08); }
.feed-edit-cancel {
  background: rgba(255,105,180,0.06);
  border: 1px solid rgba(255,105,180,0.28); padding: 8px 16px;
  border-radius: 9px; cursor: pointer; color: #ffb3e6;
  font-weight: 700; font-size: 0.85rem; margin-left: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.feed-edit-cancel:hover { background: rgba(255,105,180,0.12); border-color: rgba(255,105,180,0.5); }
/* The window eases in, the way the app's day screen slides in. */
@keyframes rd-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rd-scrim.open .rd-sheet { animation: rd-in 0.22s ease-out; }
/* The time menu is a vertical list, like the app's PeriodSheet. */
.period-pills.open { flex-direction: column; align-items: stretch; gap: 0; min-width: 150px; padding: 6px 2px; border: 0; border-radius: 12px; background: rgba(16,11,16,0.97); box-shadow: 0 12px 32px rgba(0,0,0,0.6); }
.period-pills.open button { text-align: left; border: 0; border-radius: 0; background: transparent; padding: 8px 16px; font-size: 0.9em; color: rgba(255,217,247,0.6); }
.period-pills.open button:hover { color: #fff; background: transparent; }
.period-pills.open button.active { background: transparent; color: #ff69b4; font-weight: 700; }