/* -- Activity Tab Feed --------------------------------- */
  #activity-tab-view { padding-bottom: 32px; }

  .activity-unread-badge {
    display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: #a78bfa; margin-left: 5px; vertical-align: middle;
    flex-shrink: 0;
  }

  /* -- Stories Row -- */
  .activity-stories-row {
    display: flex; gap: 14px; overflow-x: auto;
    width: 100%; max-width: 100%; min-width: 0;
    scrollbar-width: none; padding: 2px 0 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
  }
  .activity-stories-row::-webkit-scrollbar { display: none; }

  .activity-story {
    display: flex; flex-direction: column;
    align-items: center; gap: 7px;
    cursor: pointer; flex: 0 0 auto;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
  }
  .activity-story:active { opacity: 0.7; }

  .story-ring {
    width: 60px; height: 60px; border-radius: 50%;
    padding: 2.5px; flex-shrink: 0;
  }
  .story-ring-new {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    box-shadow: 0 0 0 1px rgba(167,139,250,0.34), 0 0 18px rgba(124,58,237,0.42);
  }
  .story-ring-seen {
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(196,181,253,0.14);
  }
  body.light-mode .story-ring-seen {
    background: rgba(124,58,237,0.08);
    box-shadow: inset 0 0 0 1px rgba(124,58,237,0.14);
  }
  .story-ring-rated    { background: linear-gradient(135deg, #f59e0b, #d97706); }
  .story-ring-completed{ background: linear-gradient(135deg, #06b6d4, #0891b2); }
  .story-ring-started  { background: linear-gradient(135deg, #22c55e, #16a34a); }
  .story-ring-paused   { background: linear-gradient(135deg, #f97316, #ea580c); }
  .story-ring-dropped  { background: linear-gradient(135deg, #ef4444, #dc2626); }
  .story-ring-commented{ background: linear-gradient(135deg, #818cf8, #6366f1); }
  .story-ring-added,
  .story-ring-planned  { background: linear-gradient(135deg, #a78bfa, #7c3aed); }

  .story-avatar-inner {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    border: 2.5px solid #050410;
    background: #12092a;
    display: flex; align-items: center; justify-content: center;
  }
  .story-avatar {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .story-avatar-placeholder {
    font-size: 18px; font-weight: 700; color: #a78bfa;
    font-family: 'DM Sans', sans-serif;
  }
  .story-name {
    font-size: 10px; color: #9990b3; font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    text-align: center; max-width: 62px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: 0.2px;
  }

  /* -- Skeleton loading -- */
  @keyframes shimmer {
    0%   { background-position: -300% 0; }
    100% { background-position: 300% 0; }
  }
  .activity-skeleton-card {
    height: 108px; border-radius: 16px;
    background: linear-gradient(90deg,
      #0c0a1e 25%, #181430 50%, #0c0a1e 75%);
    background-size: 300% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border: 1px solid #1a1730;
  }

  /* Feed container */
  .activity-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* v10.223: diagnostic red outline removed — was meant to be temporary. */

  /* -- Group labels -- */
  .activity-group-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: #6e6791;
    padding: 20px 0 8px; margin: 0;
    font-family: 'DM Sans', sans-serif;
  }
  .activity-group-label:first-child { padding-top: 0; }

  /* -- Card -- */
  @keyframes activityCardIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .activity-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 88px;
    align-items: start;
    background: #07051a;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    animation: activityCardIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  /* v10.223: colored top-stripe accents removed from activity cards.
     Cards now use clean FPReview-style hairline dividers instead. */
  .activity-card::before { content: none !important; display: none !important; }
  .card-top-rated::before,
  .card-top-completed::before,
  .card-top-started::before,
  .card-top-paused::before,
  .card-top-dropped::before,
  .card-top-commented::before,
  .card-top-added::before,
  .card-top-planned::before { content: none !important; display: none !important; background: transparent !important; }

  @media (hover: hover) {
    .activity-card:hover {
      border-color: rgba(255,255,255,0.22);
      box-shadow: 0 10px 32px rgba(0,0,0,0.55);
    }
    .activity-card:hover .activity-poster-img { transform: scale(1.05); }
  }
  .activity-card:active {
    transform: scale(0.962);
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    transition: transform 0.07s ease-in, box-shadow 0.07s ease-in;
  }

  /* -- Poster column -- */
  .activity-poster-col {
    grid-column: 3;
    grid-row: 1;
    width: 88px; min-width: 88px;
    position: relative; overflow: hidden;
    border-radius: 3px;
    background: #0e0c22;
    flex-shrink: 0;
    justify-self: end;
    align-self: stretch;
  }
  .activity-poster-img {
    width: 100%; height: 100%; min-height: 116px;
    object-fit: cover; display: block;
    border-radius: inherit;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Right-edge fade into card */
  .activity-poster-col::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, transparent 55%, rgba(7,5,26,0.7) 100%);
    pointer-events: none;
  }
  .activity-poster-placeholder {
    grid-column: 3;
    grid-row: 1;
    width: 88px; min-width: 88px; min-height: 116px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #100d26, #080618);
    border-radius: 3px;
    justify-self: end;
    align-self: stretch;
  }
  .activity-poster-placeholder-letter {
    font-size: 22px; font-weight: 700; color: #2a2248;
    font-family: 'DM Sans', sans-serif; letter-spacing: -0.5px;
  }

  /* -- Content column -- */
  .activity-content-col {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex; flex-direction: column;
    padding: 14px 14px 13px 13px;
  }

  .activity-avatar-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 46px;
    min-width: 46px;
    align-self: start;
    justify-self: start;
    padding: 14px 0 0 14px;
  }

  /* v861: feed-post card now uses sl-activity-avatar-zone / sl-activity-avatar-btn.
     Wire the zone into the same grid slot the old wrap used, and size the
     button to match the ~44px the old avatar occupied. */
  .activity-card.feed-post .sl-activity-avatar-zone {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: start !important;
    padding: 14px 0 0 14px !important;
  }
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar {
    width: 44px !important;
    height: 44px !important;
  }
  /* Status rings: use box-shadow so they work inside overflow:hidden. */
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-rated     { box-shadow: 0 0 0 2px rgba(245,158,11,0.75)  !important; }
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-completed { box-shadow: 0 0 0 2px rgba(6,182,212,0.75)   !important; }
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-started   { box-shadow: 0 0 0 2px rgba(34,197,94,0.75)   !important; }
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-paused    { box-shadow: 0 0 0 2px rgba(249,115,22,0.75)  !important; }
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-dropped   { box-shadow: 0 0 0 2px rgba(239,68,68,0.75)   !important; }
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-commented { box-shadow: 0 0 0 2px rgba(99,102,241,0.75)  !important; }
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-added,
  .activity-card.feed-post .sl-activity-avatar-btn.feed-post-avatar.ring-planned   { box-shadow: 0 0 0 2px rgba(124,58,237,0.65)  !important; }

  /* Who row */
  /* Avatar row ? name left, time middle, avatar right */
  .activity-who-row {
    display: flex; align-items: center; gap: 7px; margin-bottom: 11px;
  }
  .activity-card-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; display: block;
    border: 1.5px solid transparent;
    margin: 0;
  }
  .activity-card-avatar-placeholder {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #a78bfa;
    background: #12092a; border: 1.5px solid transparent;
    font-family: 'DM Sans', sans-serif;
    margin: 0;
  }
  /* avatar ring colors (legacy ? kept for any stale-cache cards still using old structure) */
  .ring-rated    { border-color: rgba(245,158,11,0.7) !important; }
  .ring-completed{ border-color: rgba(6,182,212,0.7)  !important; }
  .ring-started  { border-color: rgba(34,197,94,0.7)  !important; }
  .ring-paused   { border-color: rgba(249,115,22,0.7) !important; }
  .ring-dropped  { border-color: rgba(239,68,68,0.7)  !important; }
  .ring-commented{ border-color: rgba(99,102,241,0.7) !important; }
  .ring-added,
  .ring-planned  { border-color: rgba(124,58,237,0.6) !important; }

  .activity-card-time {
    font-size: 10px; color: #6e6791; flex-shrink: 0;
    font-family: 'DM Sans', sans-serif; font-weight: 500;
  }

  /* Name - now on left */
  .activity-card-name {
    /* v11.212: username weight 700 → 500 (match rich activity card). */
    font-size: 15px; font-weight: 500; color: #b8afd1;
    font-family: 'DM Sans', sans-serif; letter-spacing: -0.2px;
  }

  /* Action text - explicit actions */
  .activity-action-text {
    font-size: 14px; color: #9990b3; line-height: 1.5;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 10px;
  }

  /* Title inline - bigger and white */
  .activity-card-title-inline {
    font-size: 16px; font-weight: 700; color: #ffffff;
    display: inline;
    font-family: 'DM Sans', sans-serif;
  }

  /* Stars */
  .activity-stars-row {
    display: flex; align-items: center; gap: 1px; margin-bottom: 10px;
  }
  .activity-star { font-size: 13px; line-height: 1; }
  .activity-star.lit { color: #f59e0b; }
  .activity-star.dim { color: #4a4266; }
  .activity-score-text {
    font-size: 13px; font-weight: 700; color: #f59e0b; margin-left: 5px;
    font-family: 'DM Sans', sans-serif; letter-spacing: -0.3px;
  }

  /* Comment */
  .activity-comment-preview {
    font-size: 12px; color: #9990b3; font-style: italic;
    line-height: 1.45; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    border-left: 2px solid #2a2248; padding-left: 8px;
    font-family: 'DM Sans', sans-serif;
  }

  /* Footer */
  .activity-card-bottom {
    display: flex; align-items: center; gap: 6px;
    margin-top: auto;
  }
  .activity-event-label {
    /* v11.212: action/event label weight 700 → 400 (everything but the
       username is 400 on activity cards). */
    font-size: 10px; font-weight: 400; letter-spacing: 0.9px;
    text-transform: uppercase;
    font-family: 'DM Sans', sans-serif;
  }
  .el-rated    { color: #f59e0b; }
  .el-added    { color: #a78bfa; }
  .el-completed{ color: #22d3ee; }
  .el-started  { color: #4ade80; }
  .el-paused   { color: #f97316; }
  .el-dropped  { color: #f87171; }
  .el-planned  { color: #fbbf24; }
  .el-commented{ color: #818cf8; }
  .activity-card-sep { color: #4a4266; font-size: 10px; }
  .activity-card-section {
    font-size: 10px; color: #6e6791; text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 500;
    font-family: 'DM Sans', sans-serif;
  }

  /* -- Feed Composer -- */
  .feed-composer {
    margin-bottom: 20px;
    animation: activityCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .feed-composer-inner {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    background: #07051a;
    border-radius: 16px;
    border: 1px solid #17142e;
    padding: 16px;
    gap: 12px;
  }
  .feed-composer-avatar-col {
    display: flex;
    align-items: start;
  }
  .feed-composer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #12092a;
    overflow: hidden;
  }
  .feed-composer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .feed-composer-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  .feed-composer-input {
    width: 100%;
    min-height: 60px;
    max-height: 200px;
    background: transparent;
    border: none;
    outline: none;
    color: #e8e3f3;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    padding: 0;
  }
  .feed-composer-input::placeholder {
    color: #6e6791;
  }
  .feed-composer-trailer-preview {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #0e0c22;
    border-radius: 12px;
    border: 1px solid #17142e;
  }
  .feed-composer-trailer-thumb {
    position: relative;
    width: 120px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #12092a;
  }
  .feed-composer-trailer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .feed-composer-remove-trailer {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
  }
  .feed-composer-remove-trailer:hover {
    background: rgba(239, 68, 68, 0.9);
  }
  .feed-composer-trailer-title {
    flex: 1;
    font-size: 13px;
    color: #b8afd1;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .feed-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .feed-composer-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #2a2248;
    border-radius: 20px;
    color: #b8afd1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    /* v950: was `transition: all 0.2s` — explicit list avoids animating layout props */
    transition: opacity 0.2s, transform 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    font-family: 'DM Sans', sans-serif;
  }
  .feed-composer-action-btn:hover {
    border-color: #7c3aed;
    color: #a78bfa;
  }
  .feed-composer-action-btn svg {
    opacity: 0.7;
  }
  .feed-composer-post-btn {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 20px;
  }
  .feed-composer-post-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* -- Feed Cards - Enhanced for Posts -- */
  .activity-card.feed-post {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .feed-post .activity-content-col {
    grid-column: 2;
  }
  .feed-post-text {
    font-size: 15px;
    color: #e8e3f3;
    line-height: 1.5;
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .feed-post-trailer {
    margin-top: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #0e0c22;
    border: 1px solid #17142e;
  }
  .feed-post-trailer-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #12092a;
    cursor: pointer;
  }
  .feed-post-trailer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .feed-post-trailer-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.9);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* v950: was `transition: all 0.3s` */
    transition: opacity 0.3s, transform 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
  }
  .feed-post-trailer-play:hover {
    background: rgba(124, 58, 237, 1);
    transform: translate(-50%, -50%) scale(1.1);
  }
  .feed-post-trailer-info {
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .feed-post-trailer-info:hover {
    background: rgba(167, 139, 250, 0.05);
  }
  .feed-post-trailer-title {
    font-size: 14px;
    /* v11.212: trailer title weight 700 → 400 (non-username text = 400). */
    font-weight: 400;
    color: #e8e3f3;
    margin-bottom: 4px;
  }
  .feed-post-trailer-meta {
    font-size: 11px;
    color: #6e6791;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* -- Activity Interactions -- */
  .activity-interactions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 14px 14px 13px;
    border-top: 0;
    margin-top: 12px;
    padding-top: 12px;
  }
  .activity-interaction-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #6e6791;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    font-family: 'DM Sans', sans-serif;
    padding: 4px 8px;
    border-radius: 8px;
  }
  .activity-interaction-btn:hover {
    color: #b8afd1;
    background: transparent;
  }
  .activity-interaction-btn.liked { color: #6e6791; background: transparent; }
  .activity-interaction-btn.liked [data-like-icon-slot] { color: #ff4968; }
  .activity-interaction-btn.liked [data-activity-like-count] { color: #ff6b7d; }
  .activity-interaction-btn svg {
    width: 24px;
    height: 24px;
  }

  .activity-card.feed-post .activity-interactions {
    gap: 11px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .activity-card.feed-post .activity-interaction-btn {
    gap: 3px !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
  }
  .activity-card.feed-post .activity-interaction-btn [data-activity-like-count],
  .activity-card.feed-post .activity-interaction-btn [data-activity-reply-count] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    min-width: 12px !important;
  }

  /* -- Feed Post Delete Button -- */
  .feed-post-delete-btn {
    background: none;
    border: none;
    color: #6e6791;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* v950: was `transition: all 0.2s` */
    transition: opacity 0.2s, transform 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    margin-left: 8px;
  }
  .feed-post-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }

  /* -- Feed Post Detail Page -- */
  .overlay-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0a0818;
    z-index: 99999; /* Very high to ensure it's on top */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  .overlay-page-inner {
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
  }
  .overlay-page-header {
    position: sticky;
    top: 0;
    /* v950: dropped `backdrop-filter: blur(12px)` — element is position:sticky so
       Safari was rasterizing the blur on every scroll frame. The rgba background
       was raised to 0.95 already so the visual identity is preserved without GPU cost. */
    background: rgba(10, 8, 24, 0.95);
    border-bottom: 1px solid #17142e;
    padding: 16px;
    padding-top: max(16px, calc(var(--shelfd-safe-top, 0px) + 8px));
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
  }
  .overlay-page-back-btn {
    background: none;
    border: none;
    color: #b8afd1;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* v950: was `transition: all 0.2s` */
    transition: opacity 0.2s, transform 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .overlay-page-back-btn:hover {
    background: rgba(42, 34, 72, 0.3);
  }
  .overlay-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #e8e3f3;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
  }
  .overlay-page-content {
    padding: 0;
  }
  #feed-post-detail-container {
    border-bottom: 1px solid #17142e;
    padding: 20px;
  }
  #feed-post-detail-container .activity-card {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  /* -- Reply Composer -- */
  #feed-post-replies-composer {
    padding: 20px;
    border-bottom: 1px solid #17142e;
  }
  .feed-reply-composer {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
  }
  .feed-reply-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* v10.690: bg #12092a (older purple) → #101013 (Surface 1, matches
       the modern app surface palette per CLAUDE.md design system). */
    background: #101013;
    overflow: hidden;
    flex-shrink: 0;
  }
  .feed-reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .feed-reply-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e8e3f3;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    padding: 8px 0;
  }
  .feed-reply-input::placeholder {
    /* v10.690: #6e6791 (older muted lavender) → rgba(255,255,255,0.4)
       (clean muted white, matches the modern timestamp/dot color
       treatment used elsewhere in the app). */
    color: rgba(255,255,255,0.4);
  }
  .feed-reply-actions {
    display: flex;
    justify-content: flex-end;
  }
  #feed-reply-btn {
    /* v10.690: overrides .btn-primary's default purple gradient
       (#7c3aed → #9333ea) with a clean modern white pill button. White
       background + dark text reads as the primary action on the comment
       sheet without competing with the champagne-gold / lavender accents
       used elsewhere in the activity card system. */
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #0a0a0c !important;
    border: 0 !important;
    letter-spacing: 0 !important;
  }
  #feed-reply-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* -- Replies List -- */
  #feed-post-replies-list {
    padding: 0;
  }
  .feed-reply-item {
    padding: 20px;
    border-bottom: 1px solid #17142e;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }
  .feed-reply-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .feed-reply-thread-line {
    width: 2px;
    flex: 1;
    background: #17142e;
    margin-top: 8px;
  }
  .feed-reply-content {
    min-width: 0;
  }
  .feed-reply-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .feed-reply-author {
    font-size: 15px;
    font-weight: 700;
    color: #b8afd1;
    font-family: 'DM Sans', sans-serif;
  }
  .feed-reply-time {
    font-size: 13px;
    color: #6e6791;
    font-family: 'DM Sans', sans-serif;
  }
  .feed-reply-text {
    font-size: 15px;
    color: #e8e3f3;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* -- Mobile Optimizations -- */
  @media (max-width: 768px) {
    .feed-composer-inner {
      padding: 12px;
    }
    .feed-composer-avatar {
      width: 36px;
      height: 36px;
    }
    .feed-composer-input {
      font-size: 16px; /* Prevents zoom on iOS */
    }
    .feed-composer-trailer-preview {
      flex-direction: column;
    }
    .feed-composer-trailer-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
    }
    
    .activity-card {
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
    .activity-card:first-child {
      border-top: none;
    }
    
    .feed-post-trailer {
      margin-left: -14px;
      margin-right: -14px;
    }
    
    .activity-interactions {
      padding: 0 14px 12px;
      margin-top: 8px;
      border-top: none;
      padding-top: 8px;
    }
    .activity-interaction-btn {
      padding: 8px 12px;
      min-width: 60px;
      justify-content: center;
    }
    
    .overlay-page-header {
      padding: 12px 16px;
      padding-top: max(12px, calc(var(--shelfd-safe-top, 0px) + 8px));
    }
    .overlay-page-title {
      font-size: 18px;
    }
    
    #feed-post-detail-container {
      padding: 16px;
    }
    #feed-post-replies-composer {
      padding: 16px;
    }
    .feed-reply-item {
      padding: 16px;
    }
    
    .feed-reply-input {
      font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Make tap targets larger on mobile */
    .feed-post-delete-btn {
      padding: 8px;
      min-width: 32px;
      min-height: 32px;
    }
    
    /* Improve trailer card on mobile */
    .feed-post-trailer-thumb {
      aspect-ratio: 16/9;
    }
    .feed-post-trailer-play {
      width: 56px;
      height: 56px;
    }
  }

  /* -- Trailer Selector Modal -- */
  .trailer-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
  }
  .trailer-option-card {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: #0e0c22;
    border: 1px solid #17142e;
    /* v950: was `transition: all 0.2s` */
    transition: opacity 0.2s, transform 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .trailer-option-card:hover {
    border-color: #7c3aed;
    transform: translateY(-2px);
  }
  .trailer-option-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
  }
  .trailer-option-title {
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #b8afd1;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* -- Empty state -- */
  .activity-feed-empty {
    text-align: center; padding: 56px 20px 40px; color: #6e6791;
    font-size: 14px; line-height: 1.7;
    font-family: 'DM Sans', sans-serif;
  }
  .activity-feed-empty strong {
    display: block; font-size: 16px; color: #4a4266;
    margin-bottom: 8px; font-weight: 700;
  }

  /* -- Feed header -- */
  .activity-feed-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
  }
  .activity-feed-heading {
    font-size: 10px; font-weight: 700; color: #4a4266;
    text-transform: uppercase; letter-spacing: 1.6px;
    font-family: 'DM Sans', sans-serif;
  }
  .activity-feed-refresh {
    background: none; border: none; color: #6e6791; font-size: 11px;
    cursor: pointer; font-family: 'DM Sans', sans-serif;
    padding: 6px 0; transition: color 0.15s; font-weight: 500;
  }
  .activity-feed-refresh:hover { color: #a78bfa; }

  /* -- Light mode -- */
  body.light-mode .activity-card { background: #faf8ff; border-color: rgba(255,255,255,0.58); }
  body.light-mode .activity-poster-col { background: #ede9fb; }
  body.light-mode .activity-poster-col::after { background: linear-gradient(to right, transparent 55%, rgba(250,248,255,0.7) 100%); }
  body.light-mode .activity-poster-placeholder { background: linear-gradient(145deg,#ede9fb,#e0d9f7); }
  body.light-mode .activity-poster-placeholder-letter { color: #c4b8e8; }
  body.light-mode .activity-card-name { color: #12082e; }
  body.light-mode .activity-card-verb { color: #4a3d70; }
  body.light-mode .activity-card-title { color: #8f84b0; }
  body.light-mode .activity-card-time { color: #c4b8e8; }
  body.light-mode .activity-star.dim { color: #e0d8f5; }
  body.light-mode .activity-comment-preview { color: #9a8ec8; border-color: #d8d0f0; }
  body.light-mode .activity-group-label { color: #c4b8e8; }
  body.light-mode .activity-feed-heading { color: #d8d0f0; }
  body.light-mode .activity-card-section { color: #c4b8e8; }
  body.light-mode .activity-skeleton-card { background: linear-gradient(90deg,#f0ecfb 25%,#e8e2f8 50%,#f0ecfb 75%); background-size: 300% 100%; border-color: #e4dff5; }
  body.light-mode .story-name { color: #a89ec8; }
  body.light-mode .story-avatar-inner { border-color: #faf8ff; }
  body.light-mode .activity-feed-empty { color: #c4b8e8; }
  body.light-mode .activity-feed-empty strong { color: #9a8ec8; }

  /* -- True dark -- */
  body.true-dark-mode .activity-card { background: #080808; border-color: rgba(255,255,255,0.06); }
  body.true-dark-mode .activity-poster-col { background: #0a0a0a; }
  body.true-dark-mode .activity-poster-col::after { background: linear-gradient(to right, transparent 55%, rgba(8,8,8,0.7) 100%); }
  body.true-dark-mode .activity-poster-placeholder { background: #0c0c0c; }
  body.true-dark-mode .activity-skeleton-card { background: linear-gradient(90deg,#0e0e0e 25%,#1a1a1a 50%,#0e0e0e 75%); background-size: 300% 100%; border-color: rgba(255,255,255,0.05); }
  body.true-dark-mode .story-avatar-inner { border-color: #000; }

  .discover-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }
  .discover-card {
    background: #060510; border: 1px solid #3d3466; border-radius: 12px;
    overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
    display: flex; flex-direction: column;
    transition: box-shadow 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
  }
  .discover-card:not(.discover-card-expanded) {
    border-radius: 3px;
  }
  .discover-card:not(.discover-card-expanded) > .discover-poster,
  .discover-card:not(.discover-card-expanded) > .discover-poster .discover-poster-media,
  .discover-card:not(.discover-card-expanded) > .discover-poster .discover-poster-video {
    border-radius: 3px 3px 0 0;
  }
  .discover-card:not(.discover-card-expanded) > .discover-card-body {
    border-radius: 0 0 3px 3px;
  }
  .discover-card:not(.games-discover-card) {
    position: relative;
    z-index: 1;
    transform-origin: center top;
    will-change: transform;
    cursor: pointer;
    overflow: visible;
  }
  .discover-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #050410;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    font-family: 'Sora', sans-serif;
  }
  .discover-card:not(.games-discover-card).discover-card-expanded {
    --discover-expanded-width: clamp(420px, 42vw, 720px);
    border-color: rgba(139,92,246,0.38);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 18px 42px rgba(10, 8, 22, 0.58), 0 0 34px rgba(139,92,246,0.22);
    transform: translateY(-12px) scale(1.03);
    z-index: 32;
  }
  .discover-card.discover-hidden { display: none; }
  .discover-poster {
    width: 100%; aspect-ratio: 2 / 3; background-size: cover;
    background-position: center; background-color: #151025;
    position: relative; overflow: hidden;
    transition: aspect-ratio 0.34s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
    touch-action: pan-y;
  }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-poster {
    width: min(var(--discover-expanded-width), calc(100vw - 24px));
    aspect-ratio: 16 / 9;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 28px rgba(5, 4, 16, 0.34);
    border-radius: 10px 10px 0 0;
  }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-body {
    width: min(var(--discover-expanded-width), calc(100vw - 24px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 12px 12px;
    background: #060510;
    border: 1px solid #3d3466;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 32px rgba(10, 8, 22, 0.42);
  }
  .discover-poster-media,
  .discover-poster-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .discover-poster-media {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.28s ease;
    opacity: 1;
  }
  .discover-poster-video {
    border: 0;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
  }
  .discover-poster.trailer-active .discover-poster-media { opacity: 0; }
  .discover-poster.trailer-active .discover-poster-video { opacity: 1; }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-poster-video { pointer-events: auto; }
  /* v812: legacy square "preview trailer" expand-icon button was being
     re-shown by the @media (max-width: 700px) block lower in this file
     (which sets display:inline-flex on .discover-expand-icon for the
     expanded-card mobile layout). The JS still renders the button into
     posters, but it is no longer part of the current Discover UI ? kill
     it everywhere with !important so no media query / theme override can
     bring it back. */
  .discover-expand-icon {
    display: none !important;
  }
  .discover-poster-tooltip {
    display: none;
  }
  .discover-friend-stack {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: none;
    align-items: center;
    max-width: calc(100% - 20px);
    padding: 3px 5px 3px 3px;
    border-radius: 999px;
    background: rgba(6, 5, 16, 0.72);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.36);
    pointer-events: none;
  }
  .discover-friend-stack.has-friends { display: inline-flex; }
  .discover-friend-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: #1e2028;
    border: 2px solid #050410;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  }
  .discover-friend-avatar + .discover-friend-avatar,
  .discover-friend-count {
    margin-left: -8px;
  }
  .discover-friend-count {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #151025;
    border: 2px solid #050410;
    color: #e8e3f3;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-friend-stack {
    right: 12px;
    bottom: 12px;
  }
  .discover-poster.trailer-active .discover-friend-stack { opacity: 0; }
  body.light-mode .discover-friend-stack {
    background: rgba(255,255,255,0.74);
    border-color: rgba(124,58,237,0.18);
  }
  body.light-mode .discover-friend-avatar,
  body.light-mode .discover-friend-count {
    border-color: #f4f1fb;
  }
  body.light-mode .discover-friend-count {
    background: #ede9fe;
    color: #12082e;
  }
  @media (max-width: 600px) {
    .discover-friend-stack {
      right: 8px;
      bottom: 8px;
      padding: 3px;
      pointer-events: auto;
      cursor: pointer;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }
    .discover-friend-stack:active { transform: scale(0.96); }
    .discover-friend-avatar,
    .discover-friend-count { width: 22px; height: 22px; min-width: 22px; }
    .discover-friend-count { display: none; }
  }
  .discover-friends-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(5, 4, 16, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, background 0.28s ease;
  }
  .discover-friends-modal-overlay.open {
    background: rgba(5, 4, 16, 0.76);
    opacity: 1;
    pointer-events: auto;
  }
  .discover-friends-modal {
    width: min(92vw, 360px);
    max-height: min(76vh, 560px);
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(167,139,250,0.26);
    background: #0a081a;
    box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 28px rgba(139,92,246,0.16);
    transform: translateY(16px) scale(0.94);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
  }
  .discover-friends-modal-overlay.open .discover-friends-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .discover-friends-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #2a2248;
  }
  .discover-friends-modal-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
  }
  .discover-friends-modal-subtitle {
    color: #9990b3;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 4px;
  }
  .discover-friends-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #3d3466;
    background: rgba(255,255,255,0.04);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .discover-friends-modal-rule {
    margin: 12px 16px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(139,92,246,0.10);
    color: #ddd7f0;
    font-size: 12px;
    line-height: 1.42;
    border: 1px solid rgba(139,92,246,0.18);
  }
  .discover-friends-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
    max-height: 330px;
    overflow-y: auto;
  }
  .discover-friends-modal-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
  }
  .discover-friends-modal-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #050410;
    flex-shrink: 0;
  }
  .discover-friends-modal-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }
  .discover-friends-modal-status {
    color: #a78bfa;
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
  }
  body.light-mode .discover-friends-modal-overlay.open { background: rgba(18, 8, 46, 0.34); }
  body.light-mode .discover-friends-modal {
    background: #fff;
    border-color: rgba(124,58,237,0.20);
    box-shadow: 0 22px 60px rgba(18, 8, 46, 0.22);
  }
  body.light-mode .discover-friends-modal-head { border-bottom-color: #e0d9f0; }
  body.light-mode .discover-friends-modal-title,
  body.light-mode .discover-friends-modal-name { color: #12082e; }
  body.light-mode .discover-friends-modal-subtitle { color: #7c6fa0; }
  body.light-mode .discover-friends-modal-close { background: #f4f1fb; border-color: #d8cfee; color: #12082e; }
  body.light-mode .discover-friends-modal-rule { background: rgba(124,58,237,0.08); color: #5a4780; border-color: rgba(124,58,237,0.16); }
  body.light-mode .discover-friends-modal-row { background: #f8f6ff; border-color: #e0d9f0; }
  body.light-mode .discover-friends-modal-avatar { border-color: #f4f1fb; }
  @media (min-width: 601px) {
    .discover-friends-modal-overlay { display: none; }
  }
  .discover-card.games-discover-card .discover-poster {
    width: 100%;
    aspect-ratio: 11 / 14;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #0b0818;
  }
  .discover-card.games-discover-card {
    display: flex;
    flex-direction: column;
  }
  .discover-card.games-discover-card .discover-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .discover-card.games-discover-card .discover-add-btn {
    margin-top: auto;
  }
  .discover-card.games-discover-card.discover-hidden {
    display: none;
  }
  .discover-card-body {
    padding: 13px 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    min-height: 132px;
  }
  .discover-card-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }
  .discover-card-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 13px; font-weight: 800; color: #e8e3f3;
    line-height: 1.22; min-height: 0;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform-origin: left top;
    transition: transform 0.24s ease, color 0.24s ease;
  }
  .discover-title-profile-btn {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
  }
  .discover-card-rating {
    flex: 0 0 auto;
    min-width: 48px;
    max-width: 58px;
    min-height: 24px;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f5f1ff;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    text-align: right;
    line-height: 1;
  }
  .discover-card-rating-label {
    color: #fbbf24;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1;
  }
  .discover-card-rating-value {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
  }
  .discover-card-rating.loading .discover-card-rating-value,
  .discover-card-rating.empty .discover-card-rating-value {
    color: #81769f;
  }
  .discover-card-game-rating .discover-card-rating-label {
    color: #67e8f9;
  }
  .discover-card-info-row,
  .discover-card-info-stack {
    display: flex;
    min-width: 0;
  }
  .discover-card-info-row {
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .discover-card-info-stack {
    flex: 1;
    flex-direction: column;
  }
  .discover-card-genre {
    display: block;
    min-height: 14px;
    color: #a99dc6;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .discover-card-genre-empty {
    opacity: 0;
  }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-title { transform: scale(1.04); }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-overview {
    display: none;
  }
  @media (max-width: 700px) {
    .discover-card:not(.games-discover-card).discover-card-expanded {
      --discover-expanded-width: min(94vw, 520px);
      transform: translateY(-10px) scale(1.01);
      z-index: 40;
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-poster,
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-body {
      width: min(var(--discover-expanded-width), calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      left: 50%;
      right: auto;
      transform: translateX(calc(-50% + var(--discover-mobile-shift-x, 0px)));
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-info-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-info-stack {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-title {
      min-height: 0;
    }
    .discover-title-profile-btn {
      cursor: pointer;
      text-decoration: none;
    }
    .discover-title-profile-btn:active {
      color: #f4d27a;
    }
    .discover-card-genre {
      display: block;
      margin-top: 4px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.22px;
      color: #bdb4d8;
      line-height: 1.25;
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-meta {
      margin-top: 6px;
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-overview {
      display: -webkit-box;
      margin-top: 10px;
      margin-bottom: 16px;
      height: auto;
      min-height: 0;
      max-height: none;
      -webkit-line-clamp: 8;
      color: #b8afd1;
      line-height: 1.45;
      overflow: hidden;
    }
    .discover-expand-icon {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      padding: 0;
      border: 1px solid rgba(180, 188, 255, 0.28);
      border-radius: 999px;
      background: rgba(10, 9, 22, 0.64);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 8px 20px rgba(6, 5, 16, 0.24);
    }
    .discover-expand-icon span {
      position: absolute;
      width: 7px;
      height: 7px;
      border-color: rgba(238, 246, 255, 0.92);
      border-style: solid;
      pointer-events: none;
    }
    .discover-expand-icon span:nth-child(1) {
      top: 7px;
      left: 7px;
      border-width: 1.5px 0 0 1.5px;
    }
    .discover-expand-icon span:nth-child(2) {
      top: 7px;
      right: 7px;
      border-width: 1.5px 1.5px 0 0;
    }
    .discover-expand-icon span:nth-child(3) {
      right: 7px;
      bottom: 7px;
      border-width: 0 1.5px 1.5px 0;
    }
    .discover-expand-icon span:nth-child(4) {
      bottom: 7px;
      left: 7px;
      border-width: 0 0 1.5px 1.5px;
    }
    .discover-expand-icon:active {
      transform: scale(0.96);
      background: rgba(24, 18, 40, 0.78);
      border-color: rgba(103, 232, 249, 0.42);
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn {
      align-self: flex-start;
      min-width: 34px;
      min-height: 18px;
      height: 18px;
      margin: 0;
      padding: 0 6px;
      border-color: rgba(248, 113, 113, 0.58);
      background: linear-gradient(135deg, rgba(98, 28, 40, 0.96), rgba(58, 16, 26, 0.98));
      color: #fecaca;
      box-shadow: 0 8px 20px rgba(30, 8, 16, 0.24);
      font-size: 9px;
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn:active {
      background: linear-gradient(135deg, rgba(126, 34, 52, 0.98), rgba(74, 18, 32, 0.98));
      border-color: rgba(252, 165, 165, 0.78);
      color: #ffe4e6;
    }
  }
  .discover-card-meta {
    margin-top: 6px; min-height: 18px; font-size: 11px; color: #b8afd1;
  }
  .discover-card-context {
    color: #ffffff;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 3px;
  }
  .discover-rating-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 800;
    color: #f3effb;
  }
  .discover-rating-star {
    color: #f59e0b;
    font-size: 17px;
    line-height: 1;
  }
  .discover-card-overview {
    display: none;
    margin-top: 9px; margin-bottom: 14px; font-size: 11px; color: #b8afd1;
    line-height: 1.45; height: 64px; min-height: 64px; overflow: hidden;
    -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-card-overview {
    display: -webkit-box;
  }
  .discover-card-overview:empty {
    display: none;
  }
  .discover-close-btn { display: none; }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 108px;
    height: 38px;
    margin: 12px auto 10px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    line-height: 1;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }
  .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn:active {
    transform: scale(0.97);
  }
  @media (min-width: 701px) {
    .discover-card:not(.games-discover-card):not(.discover-card-expanded):hover {
      transform: translateY(-2px) scale(1.015);
      border-color: rgba(125, 211, 252, 0.24);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 10px 22px rgba(9, 8, 22, 0.3), 0 0 18px rgba(139, 92, 246, 0.12);
      z-index: 6;
    }
    .discover-card:not(.games-discover-card) .discover-poster-tooltip {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translate(-50%, 6px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(125, 211, 252, 0.22);
      background: rgba(7, 8, 18, 0.76);
      color: #d9f8ff;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 8px 20px rgba(6, 6, 16, 0.28), 0 0 16px rgba(56, 189, 248, 0.08);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .discover-card:not(.games-discover-card):not(.discover-card-expanded) .discover-poster:hover .discover-poster-tooltip {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn {
      border: 1px solid rgba(248, 113, 113, 0.52);
      background: linear-gradient(135deg, rgba(86, 26, 38, 0.94), rgba(48, 15, 22, 0.96));
      color: #fecaca;
      box-shadow: 0 10px 24px rgba(30, 8, 16, 0.28);
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn:hover {
      background: linear-gradient(135deg, rgba(112, 33, 50, 0.98), rgba(68, 18, 30, 0.98));
      border-color: rgba(252, 165, 165, 0.78);
      color: #ffe4e6;
      box-shadow: 0 12px 28px rgba(46, 10, 20, 0.34);
    }
  }
  @media (max-width: 700px) {
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn {
      border: 1px solid rgba(248, 113, 113, 0.58);
      background: linear-gradient(135deg, rgba(98, 28, 40, 0.96), rgba(58, 16, 26, 0.98));
      color: #fecaca;
      box-shadow: 0 8px 20px rgba(30, 8, 16, 0.24);
    }
    .discover-card:not(.games-discover-card).discover-card-expanded .discover-close-btn:active {
      background: linear-gradient(135deg, rgba(126, 34, 52, 0.98), rgba(74, 18, 32, 0.98));
      border-color: rgba(252, 165, 165, 0.78);
      color: #ffe4e6;
    }
  }
  .discover-add-btn {
    width: 100%;
    height: 42px;
    margin-top: auto;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(124,58,237,0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  }
.discover-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(124,58,237,0.26);
  filter: brightness(1.04);
}

/* Shelfd v298 Activity Card 9% zoom
   Mobile/PWA first: scales the Friends Activity media card footprint up 9%
   for layout testing while preserving the rebuilt avatar/profile behavior. */
#community-view #activity-tab-view .shelfd-social-card,
.activity-page .shelfd-social-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(121px, 19.1vw, 162px) !important;
  grid-template-rows: minmax(146px, auto) 38px !important;
  column-gap: clamp(12px, 2.3vw, 23px) !important;
  min-height: clamp(262px, calc(23.1vw + 53px), 319px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(16px, 2.1vw, 22px) clamp(11px, 2vw, 20px) 0 clamp(15px, 2.45vw, 24px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: clamp(22px, 2.95vw, 28px) !important;
  background:
    radial-gradient(circle at 9% 17%, rgba(124, 58, 237, .16), transparent 36%),
    linear-gradient(145deg, #24164f 0%, #211344 54%, #1b1139 100%) !important;
  box-shadow: 0 15px 29px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.035) !important;
  transform: translateZ(0) !important;
  animation: activityCardIn 360ms cubic-bezier(.2,.85,.22,1) both;
  -webkit-tap-highlight-color: transparent !important;
}
#community-view #activity-tab-view .shelfd-social-card *,
.activity-page .shelfd-social-card * { box-sizing: border-box !important; }

#community-view #activity-tab-view .shelfd-social-card .sl-activity-main,
.activity-page .shelfd-social-card .sl-activity-main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: clamp(37px, 6.5vw, 46px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(8px, 1.3vw, 12px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding-right: clamp(3px, .87vw, 9px) !important;
  overflow: hidden !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-zone,
.activity-page .shelfd-social-card .sl-activity-avatar-zone {
  grid-column: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  transform: none !important;
  padding-top: 1px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-btn,
.activity-page .shelfd-social-card .sl-activity-avatar-btn {
  width: clamp(35px, 6.1vw, 42px) !important;
  height: clamp(35px, 6.1vw, 42px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  /* v863: completely rebuilt with buildCleanActivityAvatar() ? see CSS below.
     v862: border-radius + overflow:hidden is sufficient for a perfect
     circle clip. The previous mask-image: radial-gradient(white, black)
     was causing the edges to fade semi-transparent (making the avatar
     look oval/irregular) and letting the fallback initial bleed through
     as a ghost element to the right. Removed both mask properties. */
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  appearance: none !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
  font-size: 0 !important;
  contain: paint !important;
  isolation: isolate !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-img,
.activity-page .shelfd-social-card .sl-activity-avatar-img,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-fallback,
.activity-page .shelfd-social-card .sl-activity-avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  transform: translate3d(0,0,0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-fallback,
.activity-page .shelfd-social-card .sl-activity-avatar-fallback {
  color: #ddd4ff !important;
  font: 800 12px/1 'DM Sans', sans-serif !important;
  background: #100823 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-btn::before,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-btn::after,
.activity-page .shelfd-social-card .sl-activity-avatar-btn::before,
.activity-page .shelfd-social-card .sl-activity-avatar-btn::after {
  display: none !important;
  content: none !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-btn:active,
.activity-page .shelfd-social-card .sl-activity-avatar-btn:active {
  transform: translate3d(0,0,0) scale(.94) !important;
}
#community-view #activity-tab-view .shelfd-social-card.activity-user-list-transition-card,
.activity-page .shelfd-social-card.activity-user-list-transition-card {
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, filter 300ms ease !important;
  will-change: transform, opacity !important;
}
#community-view #activity-tab-view .shelfd-social-card.activity-user-list-transition-card.is-exiting,
.activity-page .shelfd-social-card.activity-user-list-transition-card.is-exiting {
  transform: translate3d(0, -4px, 0) scale(.985) !important;
  opacity: .82 !important;
  filter: saturate(1.04) brightness(1.04) !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-btn.activity-avatar-transitioning.is-exiting,
.activity-page .shelfd-social-card .sl-activity-avatar-btn.activity-avatar-transitioning.is-exiting {
  transform: translate3d(0,0,0) scale(.90) !important;
  opacity: .95 !important;
}
@media (prefers-reduced-motion: reduce) {
  #community-view #activity-tab-view .shelfd-social-card.activity-user-list-transition-card,
  .activity-page .shelfd-social-card.activity-user-list-transition-card,
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-btn,
  .activity-page .shelfd-social-card .sl-activity-avatar-btn {
    transition: none !important;
  }
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-copy-zone,
.activity-page .shelfd-social-card .sl-activity-copy-zone {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-meta-row,
.activity-page .shelfd-social-card .sl-activity-meta-row {
  display: flex !important;
  align-items: baseline !important;
  gap: clamp(3px, .71vw, 7px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  margin: 0 0 8px !important;
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
.activity-page .shelfd-social-card .sl-activity-name {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: min(58vw, 300px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f7f2ff !important;
  /* v10.662: username dropped from 600/16px → 500/15px per design pass.
     true-dark-mode overrides in 16-light-mode-contrast.css also updated
     (the .sl-activity-name-specific overrides at v890 + the late
     weight-only override). */
  font: 500 15px/1.1 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  appearance: none !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
.activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
.activity-page .shelfd-social-card .sl-activity-name .creator-name {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: inherit !important;
  font: inherit !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
.activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap > span:first-child,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
.activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap > span:first-child,
.activity-page .shelfd-social-card .sl-activity-name .creator-name {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-role,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creative-team-role,
.activity-page .shelfd-social-card .sl-activity-name .creator-role,
.activity-page .shelfd-social-card .sl-activity-name .creative-team-role {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
/* v10.662: split dot + time so they can have different colors and sizes:
     Dot — keep lavender hue but at 51% opacity (was 68%).
     Time — pure white at 51% opacity, 11px (was lavender 68% / 12px).
   Common typography (font-family, letter-spacing, weight, flex) shared
   below; per-element color / size in the two follow-up blocks. */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-dot,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-time,
.activity-page .shelfd-social-card .sl-activity-dot,
.activity-page .shelfd-social-card .sl-activity-time {
  flex: 0 0 auto !important;
  font: 400 12px/1.1 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.01em !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-dot,
.activity-page .shelfd-social-card .sl-activity-dot {
  /* v10.662: same lavender-white hue, opacity 68% → 51% per spec. */
  color: rgba(235, 229, 255, .51) !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-time,
.activity-page .shelfd-social-card .sl-activity-time {
  /* v10.662: switched from lavender-white to pure white, 51% opacity, 11px. */
  color: rgba(255, 255, 255, .51) !important;
  font-size: 11px !important;
}
/* v10.993: activity-card timestamps moved out of the username row.
   They now sit at the card's top-right edge and the separator dot is no
   longer rendered by JS. */
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-card-top-time,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-card-top-time,
.activity-card.feed-post .activity-card-top-time {
  position: absolute !important;
  top: 13px !important;
  right: 14px !important;
  z-index: 4 !important;
  color: rgba(255,255,255,0.51) !important;
  font: 500 9px/1.1 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
/* Action line: verb + title behave like one flowing phrase, detail can follow */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-line,
.activity-page .shelfd-social-card .sl-activity-action-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0 clamp(4px, .45vw, 6px) !important;
  margin: 0 0 9px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-headline,
.activity-page .shelfd-social-card .sl-activity-headline {
  display: grid !important;
  flex: 1 1 0% !important;
  justify-items: start !important;
  align-content: start !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-headline.sl-activity-title,
.activity-page .shelfd-social-card .sl-activity-headline.sl-activity-title {
  display: grid !important;
  flex: 1 1 0% !important;
  justify-items: start !important;
  align-content: start !important;
  gap: 7px !important;
  width: auto !important;
  line-height: 1.34 !important;
  white-space: normal !important;
}
/* v10.505: REMOVED — `.sl-activity-headline-combined` block was gated on a
   JS flag (`useCombinedActionTitleHeadline`) that effectively never fired
   given the current `getActivityDisplayAction` return vocabulary. Replaced
   by the new `.sl-activity-composed-headline` selector below. */
/* Action verb ? gold */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
.activity-page .shelfd-social-card .sl-activity-action-verb {
  color: #ffd84c !important;
  font: 700 clamp(16px, 1.35vw, 17px)/1.34 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  display: block !important;
  white-space: nowrap !important;
}
/* v10.505: REMOVED — `.sl-activity-action-verb-combined` was a sibling
   class to the dead `.sl-activity-headline-combined`. Removed together. */
/* Media title ? milky white, slightly larger than verb */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
.activity-page .shelfd-social-card .sl-activity-title {
  display: inline-grid !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  color: rgba(255,255,255,.97) !important;
  font: 400 clamp(16px, 1.35vw, 17px)/1.34 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  appearance: none !important;
  text-shadow: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  vertical-align: baseline !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-title-text,
.activity-page .shelfd-social-card .sl-activity-title-text {
  display: block !important;
  margin-top: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
/* v10.505: REMOVED — `.sl-activity-title-text-combined` was the third
   half of the same dead trio. Removed. */

/* v10.505: Composed-sentence headline. Replaces the old 2-line layout
   ("gold action on row 1, white title on row 2") with a single
   flowing paragraph that reads naturally — e.g. "Finished watching
   season 5 of The Boys" or "Added Michael Jackson: The Verdict to
   Watchlist".

   Layout contract: the whole sentence sits in ONE button styled as a
   `-webkit-box` with `line-clamp: 2`. Any of the three inline spans
   (prefix / title / suffix) may be empty. Prefix + suffix render in
   gold (the action language); the title renders in white. If the
   sentence overflows two lines, the standard line-clamp ellipsis
   kicks in.

   Class family is `sl-activity-composed-*` — chosen specifically so
   the new layout doesn't collide with the ~6 stacked override blocks
   for the legacy `.sl-activity-headline` / `.sl-activity-title` /
   `.sl-activity-action-verb` selectors elsewhere in this file. */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-line-composed,
.activity-page .shelfd-social-card .sl-activity-action-line-composed {
  display: block !important;
  margin: 0 0 9px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-line-split,
.activity-page .shelfd-social-card .sl-activity-action-line-split {
  display: grid !important;
  gap: 2px !important;
  margin: 0 0 9px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-split-action,
.activity-page .shelfd-social-card .sl-activity-split-action {
  display: block !important;
  color: #E6C766 !important;
  font: 400 16px/1.28 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
/* v10.996: action-tail is now the same gold as the action-main so
   "Added the movie", "Added the TV show", "Added the anime",
   "Rated the album" etc. all read as a single gold action phrase.
   The media title that follows stays white, so the visual hierarchy
   (gold verb phrase → white title → white detail) is preserved. */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-split-action-tail,
.activity-page .shelfd-social-card .sl-activity-split-action-tail {
  color: #E6C766 !important;
  opacity: 1 !important;
  font: inherit !important;
  letter-spacing: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-split-title,
.activity-page .shelfd-social-card .sl-activity-split-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  color: rgba(255,255,255,.97) !important;
  font: 400 16px/1.24 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-split-pretitle,
.activity-page .shelfd-social-card .sl-activity-split-pretitle {
  display: block !important;
  color: #fff !important;
  opacity: 1 !important;
  font: 400 16px/1.24 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-split-detail,
.activity-page .shelfd-social-card .sl-activity-split-detail {
  display: block !important;
  color: #fff !important;
  opacity: 1 !important;
  font: 400 16px/1.24 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
/* v10.996: gold variant for the detail line — used by the music-stacked
   card where the detail reads "and rated them" so the word "rated"
   carries the same gold accent as the "Listened to" action phrase above.
   We color the whole detail gold (not just the word) because the
   surrounding "and ... them" reads naturally as a continuation of the
   action verb. */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-split-detail.is-gold-detail,
.activity-page .shelfd-social-card .sl-activity-split-detail.is-gold-detail {
  color: #E6C766 !important;
}
/* v10.996: unified line-height across ALL main activity cards (excluding
   stacked-child via :not(.sl-activity-stack-compact-card)). Previously
   non-rating cards used 19.5px and rating cards used 24.6px via a
   :has(.sl-activity-rating) override — that gave noticeably different
   vertical sizes between e.g. "Added the movie The Terminator…" (no
   rating, tight) and "Rated The Last of Us 5/5" (rating, taller).
   Spec is 21px universally for the parent activity card layer. The
   :has() override is removed (no more dual sizing). Stacked child
   cards keep their own compact line-height from the other selectors
   in this file. */
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-pretitle,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-detail,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-pretitle,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-detail {
  line-height: 21px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card)[data-section="movies"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card)[data-section="shows"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card)[data-section="anime"] .sl-activity-poster,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card)[data-section="movies"] .sl-activity-poster,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card)[data-section="shows"] .sl-activity-poster,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card)[data-section="anime"] .sl-activity-poster {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-composed-headline,
.activity-page .shelfd-social-card .sl-activity-composed-headline {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  line-height: 1.34 !important;
  letter-spacing: -0.012em !important;
  cursor: pointer !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  /* v10.653: dropped composed-headline font size from clamp(16px, 1.35vw, 17px)
     to fixed 15px. Affects every child inheriting from this parent:
       .sl-activity-composed-prefix  (action verb — "Rated", "Added", etc.)
       .sl-activity-composed-suffix  (trailing gold chunk)
       .sl-activity-composed-verb-context (light connector — "season 4 of")
       .sl-activity-composed-title   (media title)
     All four now render at the SAME 15px so the headline reads as one
     unified line at the iPhone 14 Pro Max baseline. PWA/desktop scaling
     intentionally removed per the iOS-only target rule. */
  font: 400 15px/1.34 'Sohne', 'DM Sans', sans-serif !important;
  color: rgba(255,255,255,0.97) !important;
}
/* v10.662: split prefix and suffix so they can be styled independently.
   Prefix (the leading verb — "Rated", "Added", "Watched") gets new
   champagne gold + 400 weight. Suffix (trailing chunk after the title)
   intentionally LEFT UNCHANGED per user spec (still 600 / #ffd84c).
   Note: prefix and suffix now visually mismatch — call out for design. */
/* v10.670: Headline accent flipped AGAIN, this time from title → prefix.
   Reasoning: the cover/poster on the right already visually identifies
   which media. Gold on the title was redundant with the cover. Putting
   gold on the action verb instead emphasizes the *activity* — the
   unique information each card contributes beyond just "what media".
   Now: prefix is the single gold accent on each card; connector,
   title, and suffix are all white at 100%.
   On an "Added" card: "Added Halo Infinite to Backlog"
     "Added"             → champagne gold #E6C766, 400 weight
     "Halo Infinite"     → white, 400 weight
     "to Backlog"        → white, 400 weight  */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-composed-prefix,
.activity-page .shelfd-social-card .sl-activity-composed-prefix {
  display: inline !important;
  /* v10.670: pure white → champagne gold #E6C766. Same hex as the
     rating stars below — single unified gold accent per card. */
  color: #E6C766 !important;
  font-weight: 400 !important;
  white-space: normal !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-composed-suffix,
.activity-page .shelfd-social-card .sl-activity-composed-suffix {
  display: inline !important;
  /* v10.664: old saturated gold #ffd84c + 600 → pure white 100% + 400
     to match the new prefix. Headline now reads uniformly. */
  color: #ffffff !important;
  font-weight: 400 !important;
  white-space: normal !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-composed-title,
.activity-page .shelfd-social-card .sl-activity-composed-title {
  display: inline !important;
  /* v10.670: title returns to pure white 100% — the gold accent moved
     to the prefix instead (see .sl-activity-composed-prefix above).
     Rationale: the cover poster on the right already shows which media
     visually, so gold on the title was redundant with the cover. The
     prefix is the better candidate for chromatic emphasis since the
     activity verb has no other visual representation on the card.
     Color progression: rgba(255,255,255,.97) → #E6C766 (v10.664) →
     #F0D78C (v10.666) → #FFE082 (v10.667) → #FFF4C2 (v10.668) →
     #E6C766 (v10.669) → #ffffff (v10.670). */
  color: #ffffff !important;
  /* v10.651 → v10.662: media title weight progression 600 → 500 → 400.
     Now matches the action verb at the same weight, both flowing on the
     same line. Sohne-Buch (Regular) at 15px. */
  font-weight: 400 !important;
  white-space: normal !important;
}
/* verbContext: the connector between verb and title (e.g. "season 4 of") —
   white, light weight so the golden verb and bold title stand out */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-composed-verb-context,
.activity-page .shelfd-social-card .sl-activity-composed-verb-context {
  display: inline !important;
  /* v10.665: connector color rgba(255,255,255,0.97) → pure #ffffff
     (97% → 100% opacity) to match prefix and suffix exactly. Now the
     entire headline row reads at uniform 100% white except for the
     champagne-gold media title in the middle. */
  color: #ffffff !important;
  /* v10.662: connector weight 300 → 400 per design pass. Now matches
     prefix and title weight so the headline reads as one even line. */
  font-weight: 400 !important;
  white-space: normal !important;
}
/* Episode/season detail ? subtle milky white */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-detail,
.activity-page .shelfd-social-card .sl-activity-action-detail {
  color: rgba(255,255,255,.60) !important;
  font: 400 clamp(15px, 1.15vw, 16px)/1.34 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.01em !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: inline !important;
  white-space: normal !important;
  margin-left: 0.28em !important;
}
/* Keep .sl-activity-status for backward compat (import cards etc.) */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
.activity-page .shelfd-social-card .sl-activity-status {
  color: rgba(255,255,255,.96) !important;
  font: 400 clamp(15px, 1.2vw, 16px)/1.34 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.01em !important;
  margin: 0 0 8px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-rating,
.activity-page .shelfd-social-card .sl-activity-rating {
  display: flex !important;
  align-items: center !important;
  gap: clamp(7px, .87vw, 9px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 3px 0 9px !important;
  white-space: nowrap !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-stars,
.activity-page .shelfd-social-card .sl-activity-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(1px, .31vw, 2px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-rating-star,
.activity-page .shelfd-social-card .sl-rating-star {
  /* v10.662: locked star box to 16px per design spec (was responsive
     clamp 14.3–19px). Fixed size renders identical on every iPhone. */
  --sl-star-size: 18px;
  position: relative !important;
  display: inline-block !important;
  width: var(--sl-star-size) !important;
  height: var(--sl-star-size) !important;
  /* v10.662: unlit star color switched from the old saturated gold
     (rgba(246,199,57,.22)) to the canonical champagne gold #E6C766 at
     22% alpha for consistency with the lit star color below. */
  color: rgba(230, 199, 102, .22) !important;
  flex: 0 0 auto !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-rating-star svg,
.activity-page .shelfd-social-card .sl-rating-star svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: .6px !important;
  stroke-linejoin: miter !important;
  stroke-miterlimit: 10 !important;
  shape-rendering: geometricPrecision !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-rating-star-base,
.activity-page .shelfd-social-card .sl-rating-star-base {
  color: rgba(246,199,57,.20) !important;
  fill: transparent !important;
  stroke: rgba(246,199,57,.34) !important;
  stroke-width: 1px !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-rating-star-fill,
.activity-page .shelfd-social-card .sl-rating-star-fill {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: var(--star-fill, 0%) !important;
  max-width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  /* v10.662: lit star color switched from the saturated #f1c232 (orange-
     gold) to the canonical champagne gold #E6C766 — matches My Lists
     star color and the new action verb color. */
  color: #E6C766 !important;
  filter: none !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-rating-star-fill svg,
.activity-page .shelfd-social-card .sl-rating-star-fill svg {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--sl-star-size) !important;
  height: var(--sl-star-size) !important;
  /* v10.662: champagne gold fill/stroke. */
  fill: #E6C766 !important;
  stroke: #E6C766 !important;
  stroke-width: .42px !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-score,
.activity-page .shelfd-social-card .sl-activity-score {
  /* v10.663: rating number opacity 78% → 100% per design pass. Stays
     white, just fully opaque now to sit at equal visual weight beside
     the champagne-gold stars from v10.662. */
  color: #ffffff !important;
  font: 400 clamp(17px, 1.3vw, 18px)/1 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.012em !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-comment-wrap,
.activity-page .shelfd-social-card .sl-activity-comment-wrap {
  width: 100% !important;
  max-width: min(100%, 420px) !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-rating + .sl-activity-comment-wrap,
.activity-page .shelfd-social-card .sl-activity-rating + .sl-activity-comment-wrap {
  margin-top: 4px !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-comment,
.activity-page .shelfd-social-card .sl-activity-comment {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(232,226,255,.78) !important;
  font: 400 clamp(16px, 1.2vw, 16px)/1.34 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.01em !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-comment-wrap.is-clamped .sl-activity-comment,
.activity-page .shelfd-social-card .sl-activity-comment-wrap.is-clamped .sl-activity-comment {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-show-more,
.activity-page .shelfd-social-card .sl-activity-show-more {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,217,70,.9) !important;
  font: 400 12px/1.1 'Sohne', 'DM Sans', sans-serif !important;
  cursor: pointer !important;
  appearance: none !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-poster,
.activity-page .shelfd-social-card .sl-activity-poster {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  /* v10.230: poster top now aligns with the username row instead of being
     pushed down to the action/title line (reverts the v895 offset). */
  align-self: start !important;
  justify-self: center !important;
  margin-top: 49px !important;
  width: clamp(117px, 18.1vw, 156px) !important;
  height: clamp(179px, 24.9vw, 239px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #12091f !important;
  /* v10.659 / v10.660 / v10.661: brightened the second box-shadow layer
     from rgba(255,255,255,.05) → .45 (v10.659) → .30 (v10.660) → .18
     (v10.661). Every media poster on activity cards now has a 1px white
     outline at 18% opacity — visible contrast improvement against the dark
     background, intentionally soft to avoid feeling jarring. Applies to
     ALL sections (movies / shows / anime / music / games / manga / books)
     since this is the base poster rule. The first box-shadow layer (drop
     shadow) is preserved unchanged. */
  box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.18) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  appearance: none !important;
  transform: translateZ(0) !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-poster-img,
.activity-page .shelfd-social-card .sl-activity-poster-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  transition: transform 220ms ease !important;
}

/* v10.656 / v10.657: Per-section poster corner radii on activity cards.
   All four corners share the same radius (single border-radius value).
   Section discrimination via data-section attribute on .shelfd-social-card
   (added in v10.654, see 10-activity-feed.js line 5602). The inner
   .sl-activity-poster-img uses border-radius: inherit so it follows the
   parent button automatically — no separate img rule needed.

   Movies / TV / anime / music     → 1.2px (sharp, near-square — theatrical
                                            poster + album-cover look)
   Games                            → 3.6px (slightly softer than 1.2 but
                                            still tight, matches typical
                                            game-cover artwork conventions)
   Manga / books / (any unmarked)   → 3px   (inherits the default
                                            .sl-activity-poster rule above) */
#community-view #activity-tab-view .shelfd-social-card[data-section="movies"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card[data-section="shows"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card[data-section="anime"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card[data-section="music"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="movies"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="shows"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="anime"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="music"] .sl-activity-poster {
  border-radius: 1.2px !important;
}
#community-view #activity-tab-view .shelfd-social-card[data-section="games"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="games"] .sl-activity-poster {
  /* v10.790: bumped from 4.5px → 6px per design call. */
  border-radius: 6px !important;
}

/* v10.671 → v10.674: Movies / TV / anime poster vertical position
   relative to its natural grid-row anchor. Progression:
     v10.671 = -12px (too aggressive)
     v10.672 = -6px  (still too high)
     v10.673 = -3px  (still slightly too high)
     v10.674 = 0px   (natural position — current; matches base rule)
   The [data-section=...] attribute selector specificity (2,3,0) still
   wins against the base rule's (2,2,0), so this rule scaffolding stays
   in place for easy future iteration via this single value (positive
   number pushes poster DOWN below natural, negative pulls UP above).
   Scope is movies/shows/anime only. Pairs with the +21px bottom padding
   (v10.658) those same sections get. */
#community-view #activity-tab-view .shelfd-social-card[data-section="movies"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card[data-section="shows"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card[data-section="anime"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="movies"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="shows"] .sl-activity-poster,
.activity-page .shelfd-social-card[data-section="anime"] .sl-activity-poster {
  margin-top: 49px !important;
}

@media (hover:hover) {
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-poster:hover .sl-activity-poster-img,
  .activity-page .shelfd-social-card .sl-activity-poster:hover .sl-activity-poster-img { transform: scale(1.035) !important; }
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-poster-empty,
.activity-page .shelfd-social-card .sl-activity-poster-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.72) !important;
  font: 400 28px/1 'Sohne', 'DM Sans', sans-serif !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-bottom-safe,
.activity-page .shelfd-social-card .sl-activity-bottom-safe {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 34px !important;
  border-top: 0 !important;
  padding-left: calc(clamp(37px, 6.5vw, 46px) + clamp(8px, 1.3vw, 12px) - 3px) !important;
  padding-bottom: 6px !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-actions,
.activity-page .shelfd-social-card .sl-activity-actions {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  margin-left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn,
.activity-page .shelfd-social-card .sl-activity-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: clamp(30px, 4.9vw, 36px) !important;
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font: 600 10px/1 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease !important;
  transform: translateZ(0) !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-icon-slot,
.activity-page .shelfd-social-card .sl-activity-icon-slot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  line-height: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn svg,
.activity-page .shelfd-social-card .sl-activity-action-btn svg {
  width: 24px !important;
  height: 24px !important;
  color: currentColor !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn [data-activity-like-count],
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn [data-activity-reply-count],
.activity-page .shelfd-social-card .sl-activity-action-btn [data-activity-like-count],
.activity-page .shelfd-social-card .sl-activity-action-btn [data-activity-reply-count] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  min-width: 12px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: rgba(232,226,255,.68) !important;
  transform: translateY(0.5px) !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn[data-activity-action="delete"],
.activity-page .shelfd-social-card .sl-activity-action-btn[data-activity-action="delete"] {
  margin-left: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn[data-activity-action="delete"] svg,
.activity-page .shelfd-social-card .sl-activity-action-btn[data-activity-action="delete"] svg {
  width: 24px !important;
  height: 24px !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn[data-activity-action="like"],
.activity-page .shelfd-social-card .sl-activity-action-btn[data-activity-action="like"] { color: rgba(255,255,255,.92) !important; }
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn.liked,
.activity-page .shelfd-social-card .sl-activity-action-btn.liked {
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn [data-like-icon-slot],
.activity-page .shelfd-social-card .sl-activity-action-btn [data-like-icon-slot],
.activity-interaction-btn [data-like-icon-slot] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-origin: center !important;
  filter: drop-shadow(0 0 0 rgba(255,73,104,0)) !important;
  transition: color 180ms ease, transform 180ms ease, filter 220ms ease !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn.liked [data-like-icon-slot],
.activity-page .shelfd-social-card .sl-activity-action-btn.liked [data-like-icon-slot] {
  color: #ff4968 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn.liked [data-activity-like-count],
.activity-page .shelfd-social-card .sl-activity-action-btn.liked [data-activity-like-count] {
  color: #ff6b7d !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-heart-pop [data-like-icon-slot],
.activity-page .shelfd-social-card .sl-activity-heart-pop [data-like-icon-slot],
.activity-interaction-btn.sl-activity-heart-pop [data-like-icon-slot] {
  animation: slActivityHeartPop 420ms cubic-bezier(.18, 1.2, .28, 1) both !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-heart-pop [data-activity-like-count],
.activity-page .shelfd-social-card .sl-activity-heart-pop [data-activity-like-count],
.activity-interaction-btn.sl-activity-heart-pop [data-activity-like-count] {
  animation: slActivityHeartCountPop 420ms cubic-bezier(.18, 1.2, .28, 1) both !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-stack-action-count,
.activity-page .shelfd-social-card .sl-activity-stack-action-count {
  justify-content: center !important;
  width: clamp(28px, 4.35vw, 32px) !important;
  height: clamp(28px, 4.35vw, 32px) !important;
  min-width: clamp(28px, 4.35vw, 32px) !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #a78bfa !important;
  font-size: clamp(12px, 2.14vw, 14px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-stack-action-count svg,
.activity-page .shelfd-social-card .sl-activity-stack-action-count svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
  opacity: 1 !important;
  flex: 0 0 20px !important;
}

@keyframes slActivityHeartPop {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,73,104,0)); }
  34% { transform: scale(1.24); filter: drop-shadow(0 0 10px rgba(255,73,104,0.22)); }
  62% { transform: scale(0.94); filter: drop-shadow(0 0 6px rgba(255,73,104,0.16)); }
  82% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255,73,104,0.2)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,73,104,0)); }
}
@keyframes slActivityHeartCountPop {
  0% { transform: translateY(0.5px) scale(1); }
  34% { transform: translateY(0.5px) scale(1.08); }
  62% { transform: translateY(0.5px) scale(0.97); }
  100% { transform: translateY(0.5px) scale(1); }
}

body.light-mode #community-view #activity-tab-view .shelfd-social-card,
body.light-mode .activity-page .shelfd-social-card {
  background: linear-gradient(145deg, #f8f5ff 0%, #efe8ff 100%) !important;
  border-color: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 15px 30px rgba(31, 16, 72, .10) !important;
}
body.light-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
body.light-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
body.light-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-comment,
body.light-mode .activity-page .shelfd-social-card .sl-activity-name,
body.light-mode .activity-page .shelfd-social-card .sl-activity-status,
body.light-mode .activity-page .shelfd-social-card .sl-activity-comment { color: #1d1434 !important; }
body.light-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-score,
body.light-mode .activity-page .shelfd-social-card .sl-activity-score { color: rgba(29,20,52,.68) !important; }
body.true-dark-mode #community-view #activity-tab-view .shelfd-social-card,
body.true-dark-mode .activity-page .shelfd-social-card {
  background: linear-gradient(145deg, #101010 0%, #070707 100%) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.sl-activity-user-note {
  max-width: min(100%, 420px) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(232,226,255,.78) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
  letter-spacing: -.01em !important;
}

body.light-mode .sl-activity-user-note {
  color: rgba(38,27,69,.72) !important;
}

#community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
.activity-page .shelfd-social-card .sl-activity-plain-note {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 420px) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: rgba(232,226,255,.78) !important;
  font: 400 16px/1.34 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: -.01em !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.light-mode #community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
body.light-mode .activity-page .shelfd-social-card .sl-activity-plain-note {
  color: rgba(38,27,69,.72) !important;
}

.screenlist-activity-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.screenlist-activity-note-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,3,12,.48);
  opacity: 0;
  transition: opacity 600ms cubic-bezier(.22,1,.36,1);
}

.screenlist-activity-note-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  min-height: 60vh;
  max-height: calc(100vh - max(42px, var(--shelfd-safe-top, 0px)));
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border: 1px solid rgba(255,255,255,.12);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(25,20,42,.98), rgba(9,8,17,.995));
  box-shadow: 0 -24px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06);
  color: #f6f2ff;
  transform: translate3d(0, 106%, 0);
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
  pointer-events: auto;
}

.screenlist-activity-note-overlay.is-open {
  pointer-events: auto;
}

.screenlist-activity-note-overlay.is-open .screenlist-activity-note-backdrop {
  opacity: 1;
}

.screenlist-activity-note-overlay.is-open .screenlist-activity-note-sheet {
  transform: translate3d(0, 0, 0);
}

.screenlist-activity-note-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}

.screenlist-activity-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.screenlist-activity-note-title {
  color: #f7f1ff;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
}

.screenlist-activity-note-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.82);
}

.screenlist-activity-note-input {
  width: 100%;
  min-height: 132px;
  resize: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  outline: 0;
  background: rgba(255,255,255,.07);
  color: #fff;
  padding: 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
  caret-color: #a78bfa;
}

.screenlist-activity-note-input::placeholder {
  color: rgba(255,255,255,.42);
}

.screenlist-activity-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
}

.screenlist-activity-note-counter {
  color: rgba(255,255,255,.48);
  font-size: 12px;
  font-weight: 700;
}

.screenlist-activity-note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.screenlist-activity-note-remove,
.screenlist-activity-note-save {
  height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
}

.screenlist-activity-note-remove {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
}

.screenlist-activity-note-save {
  background: #f7f1ff;
  color: #12091f;
}

@media (prefers-reduced-motion: reduce) {
  .screenlist-activity-note-backdrop,
  .screenlist-activity-note-sheet {
    transition-duration: 1ms;
  }
}

@media (max-width: 560px) {
  #community-view #activity-tab-view .shelfd-social-card,
  .activity-page .shelfd-social-card {
    grid-template-columns: minmax(0, 1fr) clamp(102px, 28vw, 118px) !important;
    grid-template-rows: minmax(146px, auto) 35px !important;
    column-gap: 9px !important;
    min-height: 262px !important;
    padding: 9px 9px 0 13px !important;
    border-radius: 22px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-main,
  .activity-page .shelfd-social-card .sl-activity-main {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 9px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-btn,
  .activity-page .shelfd-social-card .sl-activity-avatar-btn {
    width: 41px !important;
    height: 41px !important;
    border-radius: 999px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
  .activity-page .shelfd-social-card .sl-activity-name { font-size: 16px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-time,
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-dot,
  .activity-page .shelfd-social-card .sl-activity-time,
  .activity-page .shelfd-social-card .sl-activity-dot { font-size: 12px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-line,
  .activity-page .shelfd-social-card .sl-activity-action-line { margin-bottom: 8px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-action,
  .activity-page .shelfd-social-card .sl-activity-split-action { font-size: 16px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-title,
  .activity-page .shelfd-social-card .sl-activity-split-title { font-size: 16px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-pretitle,
  .activity-page .shelfd-social-card .sl-activity-split-pretitle { font-size: 16px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-detail,
  .activity-page .shelfd-social-card .sl-activity-split-detail { font-size: 16px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
  .activity-page .shelfd-social-card .sl-activity-action-verb { font-size: 16px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
  .activity-page .shelfd-social-card .sl-activity-title {
    font-size: 16px !important;
    letter-spacing: -.012em !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-detail,
  .activity-page .shelfd-social-card .sl-activity-action-detail { font-size: 14px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
  .activity-page .shelfd-social-card .sl-activity-status {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-rating,
  .activity-page .shelfd-social-card .sl-activity-rating {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-rating-star,
  .activity-page .shelfd-social-card .sl-rating-star {
    --sl-star-size: clamp(13.9px, 3.6vw, 17.5px);
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-score,
  .activity-page .shelfd-social-card .sl-activity-score { font-size: 17px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-comment,
  .activity-page .shelfd-social-card .sl-activity-comment { font-size: 16px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-poster,
  .activity-page .shelfd-social-card .sl-activity-poster {
    margin-top: 67px !important;
    width: clamp(97px, 26.6vw, 112px) !important;
    height: clamp(150px, 43.8vw, 179px) !important;
    border-radius: 3px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-bottom-safe,
  .activity-page .shelfd-social-card .sl-activity-bottom-safe {
    min-height: 35px !important;
    padding-left: 50px !important;
    padding-bottom: 6px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn,
  .activity-page .shelfd-social-card .sl-activity-action-btn { font-size: 11px !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-icon-slot,
  .activity-page .shelfd-social-card .sl-activity-icon-slot {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn svg,
  .activity-page .shelfd-social-card .sl-activity-action-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-btn[data-activity-action="delete"] svg,
  .activity-page .shelfd-social-card .sl-activity-action-btn[data-activity-action="delete"] svg {
    width: 24px !important;
    height: 24px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-stack-action-count,
  .activity-page .shelfd-social-card .sl-activity-stack-action-count {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 390px) {
  #community-view #activity-tab-view .shelfd-social-card,
  .activity-page .shelfd-social-card {
    grid-template-columns: minmax(0, 1fr) 99px !important;
    grid-template-rows: minmax(141px, auto) 33px !important;
    min-height: 249px !important;
  }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-title,
  .activity-page .shelfd-social-card .sl-activity-split-title { font-size: clamp(13px, 3.5vw, 17px) !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-action,
  .activity-page .shelfd-social-card .sl-activity-split-action { font-size: clamp(12px, 3.3vw, 15px) !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-pretitle,
  .activity-page .shelfd-social-card .sl-activity-split-pretitle { font-size: clamp(13px, 3.5vw, 17px) !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-split-detail,
  .activity-page .shelfd-social-card .sl-activity-split-detail { font-size: clamp(13px, 3.5vw, 17px) !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
  .activity-page .shelfd-social-card .sl-activity-title { font-size: clamp(13px, 3.5vw, 17px) !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
  .activity-page .shelfd-social-card .sl-activity-action-verb { font-size: clamp(12px, 3.3vw, 15px) !important; }
  #community-view #activity-tab-view .shelfd-social-card .sl-activity-poster,
  .activity-page .shelfd-social-card .sl-activity-poster {
    width: 92px !important;
    height: 146px !important;
  }
}

/* v300: centered completion modals + activity-card reply/delete actions (mobile/PWA first) */
/* v10.703: Completion-rating modal REFRESH. Legacy version used heavy
   radial/linear lavender gradient on the card, dense font-weight: 900,
   tight padding, lavender-tinted border, and 28px radii — all carried
   over from the early Shelfd palette. This pass aligns it with the
   current design language used everywhere else (Surface 1/2 dark,
   subtle white hairline border, modern Sohne weights 500/600/700,
   champagne gold stars per the design-token memory, lavender kept
   only for the primary action button). Structure unchanged. */
.screenlist-completion-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, var(--shelfd-safe-top, 0px)) 16px max(18px, env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}
.screenlist-completion-modal.open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.62);
}
.screenlist-completion-card {
  width: min(100%, 420px);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;
  background: #101013;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
  color: #f6f4fb;
  padding: 20px 18px 16px;
  /* v842: removed `transform: translate3d(...) scale(...)`, `will-change`,
     `contain: layout paint style`, and `backface-visibility: hidden`.
     Each of those four is an aggressive GPU-layer-promotion hint, and
     in combination they GUARANTEE iOS PWA WKWebView promotes this card
     into its own compositor layer. Once promoted, the iOS compositor's
     hit-tester routes taps on the primary action button back into the
     underlying overlay layer instead of into the button — same failure
     mode the card-comment composer hit with backdrop-filter. An
     opacity-only fade-in is enough for the entry animation and never
     promotes a layer. */
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.screenlist-completion-modal.open .screenlist-completion-card {
  opacity: 1;
}
.screenlist-completion-card.saving {
  pointer-events: none;
  opacity: 0.78;
}

/* v11.249 — Liquid Glass treatment for the delete-post confirm modal only
   (canonical recipe, see SHELFD_CONTEXT.md). Scoped to .screenlist-delete-post-card
   so other completion modals keep their solid surface. */
.screenlist-delete-post-card {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 38%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(40,34,58,0.46), rgba(20,18,28,0.40)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 0 0 0.5px rgba(255,255,255,0.10),
    inset 0 -18px 40px rgba(255,255,255,0.04) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
}
.screenlist-completion-preview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  margin-bottom: 18px;
}
.screenlist-completion-poster {
  width: 64px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: #17171b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
}
.screenlist-completion-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.screenlist-completion-copy { min-width: 0; }
.screenlist-completion-kicker {
  color: rgba(235, 232, 244, 0.58);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: 'Sohne', 'DM Sans', sans-serif;
}
.screenlist-completion-copy h3 {
  margin: 0;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  font-family: 'Sohne', 'DM Sans', sans-serif;
}
.screenlist-completion-copy p {
  margin: 6px 0 0;
  color: rgba(235, 232, 244, 0.58);
  font-size: 13px;
  line-height: 1.38;
  font-weight: 400;
  font-family: 'Sohne', 'DM Sans', sans-serif;
}
.screenlist-completion-stars-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0 18px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.screenlist-completion-stars-wrap::-webkit-scrollbar { display: none; }
.screenlist-completion-stars-wrap .discover-rating-stars {
  --star-size: 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max-content;
  min-width: 0;
}
/* v10.703: champagne-gold star treatment (design-token memory). Overrides
   the lit/unlit colors set inline by selectScreenListCompletionRating. */
.screenlist-completion-stars-wrap .star-btn.lit {
  color: #E6C766 !important;
}
.screenlist-completion-stars-wrap .star-btn:not(.lit) {
  color: rgba(255, 255, 255, 0.18) !important;
}
.screenlist-completion-stars-wrap .star-label {
  margin-left: 10px;
  color: #E6C766;
  font: 600 14px/1 'Sohne', 'DM Sans', sans-serif;
  align-self: center;
}
.screenlist-completion-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.screenlist-completion-actions button {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  font: 600 14px/1 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}
.screenlist-completion-actions button:active {
  transform: scale(0.97);
}
.screenlist-completion-skip {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(246, 244, 251, 0.78);
}
.screenlist-completion-skip:hover {
  background: rgba(255, 255, 255, 0.07);
}
.screenlist-completion-confirm[hidden] {
  display: none !important;
}
.screenlist-completion-confirm {
  min-width: 148px;
  background: #a78bfa;
  color: #0a0a0c;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
}
.screenlist-completion-confirm:hover {
  background: #b7a4ff;
}
.screenlist-post-comment-label {
  display: block;
  margin: 10px 2px 7px;
  color: #e8e3f3;
  font-size: 12px;
  font-weight: 900;
}
.screenlist-post-comment-input {
  width: 100%;
  min-height: 92px;
  max-height: 180px;
  resize: vertical;
  border: 1px solid rgba(167,139,250,0.28);
  border-radius: 18px;
  outline: none;
  background: rgba(0,0,0,0.28);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 13px 14px;
  -webkit-appearance: none;
  appearance: none;
}
.screenlist-post-comment-input::placeholder { color: #766c95; }
.screenlist-post-comment-input:focus {
  border-color: rgba(167,139,250,0.62);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.14);
}
.screenlist-post-actions {
  margin-top: 13px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.screenlist-post-actions button {
  width: 100%;
  justify-content: center;
}
.screenlist-post-skip {
  color: #d8cff3 !important;
}

.screenlist-post-submit,
.screenlist-delete-post-confirm {
  border: 1px solid rgba(255, 216, 127, 0.5) !important;
  background:
    linear-gradient(135deg, rgba(255, 216, 127, 0.24), rgba(34, 211, 238, 0.12)),
    rgba(8, 7, 18, 0.66) !important;
  color: #fff3c6 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 18px rgba(255, 216, 127, 0.14) !important;
  /* v950: blur(12px) -> blur(8px) — GPU cap */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.screenlist-post-submit:active,
.screenlist-delete-post-confirm:active {
  transform: scale(0.985);
}
.screenlist-activity-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(6, 5, 16, 0.66);
  color: #f8f4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms ease, border-color 180ms ease, color 180ms ease;
  will-change: transform;
}
.screenlist-activity-delete-btn:active {
  transform: scale(0.9) translateZ(0);
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(248, 113, 113, 0.46);
  color: #fecaca;
}
.screenlist-delete-post-copy h3 {
  margin: 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.screenlist-delete-post-copy p {
  margin: 7px 0 0;
  color: #b8afd1;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
}
.screenlist-delete-post-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.screenlist-delete-post-actions button {
  width: 100%;
  justify-content: center;
}

/* v11.294: highlight activity overflow options. Uses the same liquid-glass
   material as the delete modal, but keeps the page behind it unblurred and
   undimmed so the action sheet feels lightweight on the feed. */
.screenlist-highlight-action-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, var(--shelfd-safe-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  background: transparent;
  contain: layout paint style;
  isolation: isolate;
  transform: translateZ(0);
  transition: opacity 120ms linear;
  -webkit-tap-highlight-color: transparent;
}
.screenlist-highlight-action-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.screenlist-highlight-action-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.screenlist-highlight-action-card {
  position: relative;
  z-index: 1;
  width: min(100%, 310px);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 38%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(40,34,58,0.46), rgba(20,18,28,0.40));
  box-shadow:
    0 24px 64px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 0 0 0.5px rgba(255,255,255,0.10),
    inset 0 -18px 40px rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.06);
  backdrop-filter: blur(24px) saturate(170%) brightness(1.06);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.965);
  transform-origin: 50% 52%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: layout paint style;
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 110ms linear;
}
.screenlist-highlight-action-modal.open .screenlist-highlight-action-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.screenlist-highlight-action-modal.is-closing .screenlist-highlight-action-card {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.975);
}
.screenlist-highlight-action-option,
.screenlist-highlight-action-cancel {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.96);
  font: 500 15px/1 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  will-change: background-color;
}
.screenlist-highlight-action-option:active,
.screenlist-highlight-action-cancel:active {
  background: rgba(255,255,255,0.08);
}
.screenlist-highlight-action-option.is-destructive {
  color: #fecaca;
}
.screenlist-highlight-action-cancel {
  border-bottom: 0;
  color: rgba(255,255,255,0.72);
  font-weight: 450;
}
@media (prefers-reduced-motion: reduce) {
  .screenlist-highlight-action-modal,
  .screenlist-highlight-action-card {
    transition: none !important;
  }
}
.shelfd-social-card[data-shelfd-activity-card],
.activity-card.feed-post[data-activity-card-id] {
  cursor: pointer;
}
@media (max-width: 420px) {
  .screenlist-delete-post-actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 560px) {
  .screenlist-completion-modal {
    align-items: center;
    padding: 22px;
  }
  .screenlist-completion-card {
    border-radius: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screenlist-completion-modal,
  .screenlist-completion-card {
    transition: none !important;
  }
}
body.light-mode .screenlist-completion-modal.open { background: rgba(18, 8, 46, 0.34); }
body.light-mode .screenlist-completion-card {
  background: #fff;
  border-color: rgba(124,58,237,0.18);
  color: #12082e;
  box-shadow: 0 22px 64px rgba(18,8,46,0.18);
}
body.light-mode .screenlist-completion-copy h3,
body.light-mode .screenlist-post-comment-label { color: #12082e; }
body.light-mode .screenlist-completion-copy p { color: #6d5f90; }
body.light-mode .screenlist-post-comment-input {
  background: #f8f6ff;
  color: #12082e;
  border-color: #ded6f2;
}


/* v403: stacked grouped Activity Feed bottom-sheet detail page. */
body.screenlist-stacked-activity-open { overflow: hidden !important; }
.screenlist-stacked-activity-page {
  position: fixed;
  inset: 0;
  z-index: 999998;
  pointer-events: none;
}
.screenlist-stacked-activity-page.open { pointer-events: auto; }
.screenlist-stacked-activity-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3,2,10,0.68);
  opacity: 0;
  transition: opacity 240ms ease;
}
.screenlist-stacked-activity-page.open .screenlist-stacked-activity-scrim { opacity: 1; }
.screenlist-stacked-activity-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(88vh, 840px);
  overflow-y: auto;
  padding: 10px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border: none;
  background: #0E0E0E;
  box-shadow: 0 -20px 70px rgba(0,0,0,0.55);
  transform: translate3d(0, 105%, 0);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}
.screenlist-stacked-activity-page.open .screenlist-stacked-activity-sheet { transform: translate3d(0, 0, 0); }
.screenlist-stacked-activity-handle {
  width: 44px;
  height: 5px;
  margin: 2px auto 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}
.screenlist-stacked-activity-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.screenlist-stacked-activity-back {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: #fff;
  min-height: 38px;
  padding: 0 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
}
.screenlist-stacked-activity-topbar h2 {
  margin: 0;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.screenlist-stacked-activity-topbar p {
  margin: 3px 0 0;
  color: rgba(255,255,255,0.60);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
}
.screenlist-stacked-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.screenlist-stacked-activity-list .shelfd-social-card {
  animation: none !important;
}
@media (min-width: 780px) {
  .screenlist-stacked-activity-sheet {
    left: 50%;
    right: auto;
    width: min(720px, calc(100vw - 32px));
    transform: translate3d(-50%, 105%, 0);
    border-radius: 28px 28px 0 0;
  }
  .screenlist-stacked-activity-page.open .screenlist-stacked-activity-sheet { transform: translate3d(-50%, 0, 0); }
}


/* v405: Activity Feed stacked detail/layout fixes + import expansion cleanup */
#community-view #activity-tab-view .shelfd-social-card,
.activity-page .shelfd-social-card,
.screenlist-stacked-activity-list .shelfd-social-card,
#community-view #activity-tab-view .activity-card,
.activity-page .activity-card,
.activity-card.feed-post[data-activity-card-id] {
  border: 1px solid rgba(255,255,255,0.30) !important;
}

body.light-mode #community-view #activity-tab-view .shelfd-social-card,
body.light-mode .activity-page .shelfd-social-card,
body.light-mode .screenlist-stacked-activity-list .shelfd-social-card,
body.light-mode #community-view #activity-tab-view .activity-card,
body.light-mode .activity-page .activity-card {
  border-color: rgba(255,255,255,0.30) !important;
}

.screenlist-stacked-activity-page.activity-page {
  background: transparent !important;
}

.screenlist-stacked-activity-page.activity-page .screenlist-stacked-activity-sheet {
  max-height: none !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  padding: max(12px, var(--shelfd-safe-top, 0px)) 14px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  background: #080618 !important;
}

.screenlist-stacked-activity-page.activity-page .screenlist-stacked-activity-list {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
  gap: 14px !important;
  padding-bottom: 28px !important;
}

.screenlist-stacked-activity-page.activity-page .screenlist-stacked-activity-list .shelfd-social-card {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  zoom: 1 !important;
}

.screenlist-stacked-activity-page.activity-page .screenlist-stacked-activity-topbar {
  width: min(100%, 760px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
}

.screenlist-stacked-activity-page.activity-page .screenlist-stacked-activity-handle {
  margin-bottom: 12px !important;
}

/* v10.885: iOS Show All stacked-activity page only. Prevent double-tap zoom
   while preserving normal single-tap buttons and vertical scrolling. */
.screenlist-stacked-activity-page,
.screenlist-stacked-activity-page * {
  touch-action: manipulation !important;
}
.screenlist-stacked-activity-page .screenlist-stacked-activity-sheet,
.screenlist-stacked-activity-page .screenlist-stacked-activity-list {
  touch-action: pan-y manipulation !important;
}

.import-activity-card {
  overflow: hidden !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  gap: 12px !important;
  padding-bottom: 16px !important;
}

.import-activity-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.import-activity-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.import-activity-title {
  margin-top: 6px !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(16px, 4.3vw, 20px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

.import-activity-status {
  margin-top: 5px !important;
  color: rgba(255,255,255,0.70) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.import-activity-toggle {
  align-self: flex-start !important;
  width: fit-content !important;
  min-height: 34px !important;
  margin: 0 0 2px 0 !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
}

.import-activity-toggle:active {
  transform: scale(0.96) !important;
}

.import-activity-preview {
  display: flex !important;
  gap: 8px !important;
  overflow: hidden !important;
  min-width: 0 !important;
  width: 100% !important;
}

.import-activity-preview-tile {
  width: 44px !important;
  height: 62px !important;
  flex: 0 0 44px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.import-activity-preview-tile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.import-activity-list {
  display: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(0,0,0,0.18) !important;
}

.import-activity-card.expanded .import-activity-list {
  display: grid !important;
  gap: 9px !important;
}

.import-activity-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.import-activity-row-poster {
  width: 42px !important;
  height: 58px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.import-activity-row-poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.import-activity-row-copy {
  min-width: 0 !important;
}

.import-activity-row-copy strong,
.import-activity-row-copy span {
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.import-activity-row-copy strong {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.import-activity-row-copy span {
  margin-top: 2px !important;
  color: rgba(255,255,255,0.62) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}


/* v470: import activity card expanded list + no page-jump delete polish.
   padding-bottom reduced from 16 ? 6 so comment/heart sit closer to the
   card's bottom border, matching normal activity cards visually. */
#community-view #activity-tab-view .import-activity-card,
.activity-page .import-activity-card,
.screenlist-stacked-activity-page .import-activity-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding-bottom: 6px !important;
}

#community-view #activity-tab-view .import-activity-card.expanded,
.activity-page .import-activity-card.expanded,
.screenlist-stacked-activity-page .import-activity-card.expanded {
  max-height: min(74vh, 620px) !important;
}

.import-activity-toggle {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  z-index: 3 !important;
}

.import-activity-card.expanded .import-activity-preview {
  display: none !important;
}

.import-activity-list {
  position: relative !important;
  display: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: min(52vh, 430px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(0,0,0,0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.import-activity-card.expanded .import-activity-list {
  display: block !important;
}

.import-activity-list-inner {
  display: grid !important;
  gap: 9px !important;
  padding-top: 2px !important;
}

.import-activity-collapse-float {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin: 0 0 8px auto !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(8, 10, 18, 0.88) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  /* v950: blur(12px) -> blur(8px) — GPU cap */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22) !important;
}

.import-activity-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.035) !important;
}

.import-activity-row-copy strong {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.16 !important;
}

.import-activity-row-copy span {
  color: rgba(255,255,255,0.68) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* v469: import card bottom row ? align-items:flex-end drops comment/heart to
   the bottom of the row (the right-cluster is much taller, so center-align
   was floating the buttons in the middle). margin-top:auto handles any
   remaining slack from min-height. */
.import-activity-bottom {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  /* indent left side to align with copy text (avatar-zone width + gap) */
  padding-left: calc(clamp(49px, 8.4vw, 64px) + 12px) !important;
  min-height: 38px !important;
  padding-bottom: 4px !important;
  gap: 10px !important;
  margin-top: auto !important;
}

/* import actions inherit the same sl-activity-action-btn styles from the
   shelfd-social-card context ? no extra rules needed, just ensure flex. */
.import-activity-actions {
  flex: 0 0 auto !important;
}

/* v474: must match the specificity of the .shelfd-social-card .sl-activity-actions
   override above (which sets transform:none !important) to actually nudge the
   import card's comment/heart buttons. Net offset from natural position:
   -9px X / +10px Y (so buttons sit 9px left and 10px below where flex placed them). */
#community-view #activity-tab-view .shelfd-social-card .import-activity-actions,
.activity-page .shelfd-social-card .import-activity-actions {
  transform: translate(-9px, 10px) !important;
}

/* right-cluster: compact pill-card at bottom-right showing expand label +
   mini poster preview stack */
.import-activity-right-cluster {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  padding: 6px 10px 7px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.055) !important;
  color: #fff !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 180ms ease !important;
}
.import-activity-right-cluster:active {
  transform: scale(0.93) !important;
  background: rgba(255,255,255,0.09) !important;
}
@media (hover: hover) {
  .import-activity-right-cluster:hover {
    background: rgba(255,255,255,0.08) !important;
  }
}

.import-activity-count-label {
  font: 800 11px/1 'DM Sans', sans-serif !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.import-activity-preview-stack {
  display: flex !important;
  gap: 5px !important;
}

.import-activity-preview-tile-mini {
  width: 26px !important;
  height: 38px !important;
  flex: 0 0 26px !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 800 9px/1 'DM Sans', sans-serif !important;
  color: rgba(255,255,255,0.55) !important;
}
.import-activity-preview-tile-mini img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* hide preview posters once expanded (only show the collapse label) */
.import-activity-card.is-expanded .import-activity-preview-stack {
  display: none !important;
}

/* v418: stacked Activity card wrapper - normal front card + separate purple backplates */
#community-view #activity-tab-view .sl-activity-stack-wrap,
.activity-page .sl-activity-stack-wrap {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  width: 100% !important;
  margin: 0 0 38px 0 !important;
}

#community-view #activity-tab-view .sl-activity-stack-front,
.activity-page .sl-activity-stack-front {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: calc(clamp(209px, 23.1vw, 266px) + 73px) !important;
  padding-bottom: 18px !important;
}

#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack {
  width: clamp(130px, 20.4vw, 166px) !important;
  height: clamp(179px, 24.9vw, 239px) !important;
  margin-top: 49px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 0 !important;
}

#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack-card,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack-card {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: clamp(106px, 17vw, 134px) !important;
  height: 100% !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: #12091f !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.05) !important;
  transform-origin: 50% 100% !important;
}
/* v10.252: when every stacked card is a music section album, lock each
   poster card to 1:1 square (matches the single-music-card override in
   v10.236). Top-aligned so the cards anchor at the top of the row, not
   stretched to full height. */
#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack--music .sl-activity-poster-stack-card,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack--music .sl-activity-poster-stack-card {
  height: clamp(128px, 19.8vw, 167px) !important;
  width: clamp(128px, 19.8vw, 167px) !important;
  aspect-ratio: 1 / 1 !important;
}
#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack--music,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack--music {
  margin-top: 70px !important;
}
#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack--music .sl-activity-poster-img,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack--music .sl-activity-poster-img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* v10.684 / v10.685 / v10.686: parent stacked activity card — game deck
   layers use 5:6.38 portrait aspect ratio (matches the standard-card game
   poster and the compact-card game poster from v10.683) AND a 3.6px corner
   radius (v10.686 — unified with the standard-card games-poster radius
   from v10.657). Targeted via the parent card's data-section="games"
   attribute (CSS-only — no JS modifier class needed, unlike the --music
   modifier which the JS emits when allMusic is true).
   v10.688: reverted the v10.687 container-shrink experiment — reducing
   container + layer widths caused the back two layers (left-shifted via
   card-1's -18px and card-2's -9px transforms) to clip past the card's
   left edge into the text column. Back to v10.686's full layer width.
   Caveat: this fires when the stack's primary activity is a game, which
   in practice means all-game stacks. The width clamp is preserved
   unchanged from the base stack-card rule above; only height is unlocked
   from 100% to auto so the aspect-ratio can drive it. */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-front[data-section="games"] .sl-activity-poster-stack .sl-activity-poster-stack-card,
.activity-page .shelfd-social-card.sl-activity-stack-front[data-section="games"] .sl-activity-poster-stack .sl-activity-poster-stack-card {
  width: clamp(106px, 17vw, 134px) !important;
  height: auto !important;
  aspect-ratio: 5 / 6.38 !important;
  /* v10.790: matched to the base games-poster radius (line 2434) — 6px. */
  border-radius: 6px !important;
}

#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack-card-1,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack-card-1 {
  transform: translate3d(-18px, 7px, 0) rotate(-10deg) !important;
  z-index: 1 !important;
  opacity: 0.78 !important;
}

#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack-card-2,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack-card-2 {
  transform: translate3d(-9px, 3px, 0) rotate(-5deg) !important;
  z-index: 2 !important;
  opacity: 0.9 !important;
}

#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack-card-3,
.activity-page .sl-activity-stack-front .sl-activity-poster-stack-card-3 {
  transform: translate3d(0, 0, 0) rotate(0deg) !important;
  z-index: 3 !important;
}

/* v454: pull only the +N count badge left to align with the avatar ? the
   bottom-safe padding-left is kept intact so comment/heart stay in place.
   A negative margin equal to the bottom-safe padding-left pulls the badge
   back to the avatar's left edge; flex gap then places comment/heart at
   their original indented positions automatically. */
#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-stack-action-count,
.activity-page .sl-activity-stack-front .sl-activity-stack-action-count {
  margin-left: calc(-1 * clamp(49px, 8.4vw, 64px)) !important;
}

/* v456: nudge reply + like buttons 10 px right on stacked front card only;
   count badge is untouched. Targeting the reply btn (first after the count)
   adds a 10 px gap before it, which pushes the like btn the same amount. */
#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-action-btn[data-activity-action="reply"],
.activity-page .sl-activity-stack-front .sl-activity-action-btn[data-activity-action="reply"] {
  margin-left: 10px !important;
}

#community-view #activity-tab-view .sl-activity-stack-front .sl-activity-meta-row,
.activity-page .sl-activity-stack-front .sl-activity-meta-row {
  margin-bottom: clamp(7px, 1vw, 11px) !important;
}

#community-view #activity-tab-view .sl-activity-stack-layer,
.activity-page .sl-activity-stack-layer {
  appearance: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  border-radius: clamp(22px, 2.95vw, 28px) !important;
  background:
    radial-gradient(circle at 13% 18%, rgba(167,139,250,0.18), transparent 34%),
    linear-gradient(145deg, rgba(31,18,63,0.98), rgba(12,9,24,0.98)) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.28), 0 0 20px rgba(124,58,237,0.13) !important;
  opacity: 0.78 !important;
  cursor: pointer !important;
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1), opacity 260ms ease !important;
}

#community-view #activity-tab-view .sl-activity-stack-layer-one,
.activity-page .sl-activity-stack-layer-one {
  transform: translate3d(-8px, 10px, 0) !important;
  z-index: 1 !important;
}

#community-view #activity-tab-view .sl-activity-stack-layer-two,
.activity-page .sl-activity-stack-layer-two {
  transform: translate3d(-16px, 20px, 0) !important;
  z-index: 0 !important;
  opacity: 0.52 !important;
}

#community-view #activity-tab-view .sl-activity-stack-wrap.is-expanded .sl-activity-stack-layer-one,
.activity-page .sl-activity-stack-wrap.is-expanded .sl-activity-stack-layer-one {
  transform: translate3d(-6px, 8px, 0) !important;
  opacity: 0.48 !important;
}

#community-view #activity-tab-view .sl-activity-stack-wrap.is-expanded .sl-activity-stack-layer-two,
.activity-page .sl-activity-stack-wrap.is-expanded .sl-activity-stack-layer-two {
  transform: translate3d(-11px, 15px, 0) !important;
  opacity: 0.28 !important;
}

#community-view #activity-tab-view .sl-activity-stack-inline-list,
.activity-page .sl-activity-stack-inline-list {
  position: relative !important;
  z-index: 2 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  /* No CSS transition ? JS drives all animation via composited transform/opacity */
}

#community-view #activity-tab-view .sl-activity-stack-wrap.is-expanded .sl-activity-stack-inline-list,
.activity-page .sl-activity-stack-wrap.is-expanded .sl-activity-stack-inline-list {
  height: auto !important;
  overflow: hidden !important;
  margin-top: clamp(10px, 2.8vw, 14px) !important;
}

#community-view #activity-tab-view .sl-activity-stack-inline-inner,
.activity-page .sl-activity-stack-inline-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(8px, 2.4vw, 11px) !important;
  padding: clamp(4px, 1.6vw, 8px) 0 0 clamp(7px, 2vw, 12px) !important;
}

/* ============================================================================
   v10.272 — Inline stacked-activity CAROUSEL (replaces the vertical list).
   ----------------------------------------------------------------------------
   When the inline-inner has the .sl-activity-stack-carousel class, swap the
   flex-column layout for a horizontal scroll-snap container. Each child is
   wrapped in .sl-activity-stack-carousel-item — one snap point per card.
   The full-screen "Show all" page is still available as the deep-dive.
   ============================================================================ */
#community-view #activity-tab-view .sl-activity-stack-inline-inner.sl-activity-stack-carousel,
.activity-page .sl-activity-stack-inline-inner.sl-activity-stack-carousel {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  /* v10.689: bumped padding-left and scroll-padding-left from 0 to
     clamp(12-16px) so each compact child card's left-side poster has
     breathing room from the screen edge instead of clipping against it.
     Previously both were 0 — items snap-aligned flush with the carousel
     left edge (which itself sits ~13px from the screen edge inside the
     parent stack card padding). Now items snap with an additional
     12-16px offset, giving the poster ~24-30px breathing room total. */
  padding: clamp(4px, 1.6vw, 8px) 0 4px clamp(12px, 3.2vw, 16px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-padding-left: clamp(12px, 3.2vw, 16px) !important;
  scrollbar-width: none !important;
  /* Each .sl-activity-stack-compact-card sets opacity:0 in its base
     until .is-expanded; inside the carousel they should be visible
     immediately once the parent is expanded, which already happens
     via the existing .is-expanded rule. */
}
#community-view #activity-tab-view .sl-activity-stack-inline-inner.sl-activity-stack-carousel::-webkit-scrollbar,
.activity-page .sl-activity-stack-inline-inner.sl-activity-stack-carousel::-webkit-scrollbar {
  display: none !important;
}

.sl-activity-stack-carousel-item {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  /* Each item contains exactly one .sl-activity-stack-compact-card. The
     card's own margin/padding does the visual breathing room — the item
     wrapper is layout-only. */
}

/* Carousel controls (dots + Show all) sit below the snap track, inside the
   same `.sl-activity-stack-inline-list` height-animated wrapper so they
   expand together. */
.sl-activity-stack-carousel-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px clamp(8px, 2.6vw, 14px) 2px clamp(8px, 2.6vw, 14px) !important;
}
.sl-activity-stack-carousel-controls--single {
  justify-content: flex-end !important;
}

.sl-activity-stack-carousel-dots {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 1 auto !important;
}
.sl-activity-stack-carousel-dot {
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.22) !important;
  transition: background 200ms ease, transform 200ms ease !important;
}
.sl-activity-stack-carousel-dot.is-active {
  background: rgba(167, 139, 250, 0.92) !important;
  transform: scale(1.35) !important;
}

.sl-activity-stack-carousel-showall {
  background: transparent !important;
  border: 0 !important;
  color: rgba(167, 139, 250, 0.88) !important;
  font: 600 12px/1 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0.01em !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.sl-activity-stack-carousel-showall:hover,
.sl-activity-stack-carousel-showall:active {
  color: rgba(196, 181, 253, 1) !important;
}

/* Light-mode override for the controls */
body.light-mode .sl-activity-stack-carousel-dot {
  background: rgba(0, 0, 0, 0.18) !important;
}
body.light-mode .sl-activity-stack-carousel-dot.is-active {
  background: rgba(124, 58, 237, 0.92) !important;
}
body.light-mode .sl-activity-stack-carousel-showall {
  color: rgba(124, 58, 237, 0.88) !important;
}

/* v10.586: poster moved to LEFT, metadata to RIGHT, poster 40% smaller */
#community-view #activity-tab-view .sl-activity-stack-compact-card,
.activity-page .sl-activity-stack-compact-card {
  grid-template-columns: clamp(40px, 11.4vw, 49px) minmax(0, 1fr) !important;
  column-gap: clamp(8px, 2vw, 10px) !important;
  grid-template-rows: minmax(57px, auto) 20px !important;
  min-height: clamp(139px, calc(23.1vw + 53px), 159px) !important;
  padding: clamp(6px, 1.6vw, 8px) clamp(8px, 2vw, 11px) 0 clamp(11px, 2.8vw, 14px) !important;
  border-radius: clamp(18px, 5vw, 22px) !important;
  background:
    radial-gradient(circle at 9% 15%, rgba(124, 58, 237, .10), transparent 34%),
    linear-gradient(145deg, #151019 0%, #0d0b12 100%) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
  opacity: 0 !important;
  transform: translate3d(0, calc(-12px - (var(--stack-reverse-index, 0) * 4px)), 0) scale(.972) !important;
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease !important;
  transition-delay: calc(var(--stack-reverse-index, 0) * 18ms) !important;
}

#community-view #activity-tab-view .sl-activity-stack-wrap.is-expanded .sl-activity-stack-compact-card,
.activity-page .sl-activity-stack-wrap.is-expanded .sl-activity-stack-compact-card {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition-delay: calc(50ms + (var(--stack-index, 0) * 30ms)) !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-main,
.activity-page .sl-activity-stack-compact-card .sl-activity-main {
  /* v10.586: moved to column 2 (right of poster) */
  grid-column: 2 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding-right: 4px !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-avatar-btn,
.activity-page .sl-activity-stack-compact-card .sl-activity-avatar-btn,
/* v10.291: the actual avatar wrapper in the activity card HTML is
   `.sl-activity-avatar-zone` (line 5136 of 10-activity-feed.js), NOT
   `.sl-activity-avatar-btn`. The v10.273 attempt hid the wrong selector,
   so the profile picture kept rendering on stack-child carousel cards.
   This rule covers the actual zone class so the avatar IS gone. */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-avatar-zone,
.activity-page .sl-activity-stack-compact-card .sl-activity-avatar-zone {
  /* v10.273 / v10.291: hide entirely on stack carousel children. */
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* v10.680: hide the entire meta row on compact carousel children.
   The username, dot, and timestamp are all hidden anyway — collapsing
   the row removes the empty 3px margin and avoids dead styling. The
   previous separate display:none rules for .sl-activity-name-spacer +
   .sl-activity-dot and the dead .sl-activity-time font-size/color rule
   are consolidated here. Pairs with the .sl-activity-name display:none
   rule lower in this file (line ~4645). */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-meta-row,
.activity-page .sl-activity-stack-compact-card .sl-activity-meta-row {
  display: none !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-title,
.activity-page .sl-activity-stack-compact-card .sl-activity-title {
  font-size: clamp(16px, 4.7vw, 21px) !important;
  /* v10.270: halved the vertical gap between Rated → title → rating stars.
     margin-bottom 3px → 1px AND tightened line-height so the visual gap
     drops by roughly half. */
  margin-bottom: 1px !important;
  line-height: 1.12 !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-status,
.activity-page .sl-activity-stack-compact-card .sl-activity-status {
  font-size: clamp(10.5px, 3vw, 13px) !important;
  /* v10.270: paired with .sl-activity-title above. */
  margin-bottom: 1px !important;
  line-height: 1.15 !important;
}

/* ============================================================================
   v10.679 — COMPACT CARD POSTER CONSOLIDATION
   ----------------------------------------------------------------------------
   Single source of truth for compact card poster sizing inside the stacked-
   activity dropdown carousel. Replaces 4 conflicting rules that previously
   sat at lines 4138 (v10.586 base), 4487 (v10.677 music), 4683 (v10.586
   96×96 chained-class), and 4702 (v10.678 hard-lock music). All four are
   deleted as part of this consolidation.

   Why consolidated:
     - The 4 rules had overlapping selectors with different specificities,
       silently producing conflicting results: music compact posters were
       rendering at 40-49 while non-music were rendering at 96×96 — a 2×
       size mismatch on the same carousel surface.
     - Future "change the poster size" edits required reverse-engineering
       which of the 4 rules would win — making the file hostile to maintain.

   Current intent (v10.679):
     • Music compact poster      → 51 × 51 square (user spec v10.679)
     • Non-music compact poster  → 96 × 96 square (preserved from v10.586
                                   follow-up — to be revisited later)

   Grid template columns are set on the CARD itself (.shelfd-social-card.
   sl-activity-stack-compact-card) so column 1 width matches the poster
   width. Music section gets a 51px column override; everything else stays
   on the 96px default column.

   border-radius intentionally NOT set here — the section-scoped rules at
   lines ~2400 (v10.656 / v10.657) handle it per section (1.2px for music,
   3.6px for games, 3px default elsewhere). Setting it here would tie
   specificity with those rules and win on later cascade, regressing the
   section-specific corner treatments.
   ============================================================================ */

/* Card-level grid columns — defaults to 96px column 1 (matches non-music
   poster width). Music section overrides to 51px below. */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card {
  grid-template-columns: 96px minmax(0, 1fr) !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card[data-section="music"],
.activity-page .shelfd-social-card.sl-activity-stack-compact-card[data-section="music"] {
  grid-template-columns: 51px minmax(0, 1fr) !important;
}

/* Poster base structure + default dimensions (non-music).
   Chained-class selector .shelfd-social-card.sl-activity-stack-compact-card
   gives specificity (2, 3, 0) — matches the section-scoped rules so we
   don't accidentally win/lose by mistake. */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: start !important;
  margin-top: 0 !important;
  transform: translateY(40px) !important;
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
}

/* Music override — 51 × 51 square album cover. Same chained-class
   specificity (2, 3, 0) as the rule above, placed later in cascade so it
   wins for posters with the .sl-activity-poster--music modifier.
   translateY(-30px) preserved from v10.259 (vertical lift to align the
   cover with the body content rather than sitting flush with the bottom
   dividing line). */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster--music,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster--music {
  width: 51px !important;
  height: 51px !important;
  max-width: 51px !important;
  max-height: 51px !important;
  aspect-ratio: 1 / 1 !important;
  transform: translateY(10px) !important;
}

/* Games override — 5:6.38 portrait game cover (v10.683 user spec).
   Width 60 chosen so the computed height (60 × 6.38/5 ≈ 77px) fits
   comfortably within the compact card's row-span area (~72-80px). The
   max-height:none unset is required because the base compact poster
   rule above sets max-height:96 which would otherwise cap the height
   and break the aspect ratio. Specificity (2,4,0) — beats both the base
   rule above (2,3,0) AND the existing global game-poster aspect rule
   later in this file at line ~4723 (2,3,0). */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"],
.activity-page .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"] {
  grid-template-columns: 60px minmax(0, 1fr) !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"] .sl-activity-poster,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"] .sl-activity-poster {
  width: 60px !important;
  height: auto !important;
  max-width: 60px !important;
  max-height: none !important;
  aspect-ratio: 5 / 6.38 !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-rating-star,
.activity-page .sl-activity-stack-compact-card .sl-rating-star {
  --sl-star-size: clamp(13px, 3.5vw, 16px) !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  /* v10.586: action row also in column 2 (right of poster) */
  grid-column: 2 !important;
  min-height: 20px !important;
  padding-left: 0 !important;
  padding-bottom: 6px !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-actions,
.activity-page .sl-activity-stack-compact-card .sl-activity-actions {
  gap: clamp(11px, 3.2vw, 16px) !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-btn,
.activity-page .sl-activity-stack-compact-card .sl-activity-action-btn {
  font-size: clamp(9.5px, 2.7vw, 11px) !important;
}

#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-btn svg,
.activity-page .sl-activity-stack-compact-card .sl-activity-action-btn svg {
  width: 24px !important;
  height: 24px !important;
}

@media (max-width: 520px) {
  #community-view #activity-tab-view .sl-activity-stack-wrap,
  .activity-page .sl-activity-stack-wrap {
    margin-bottom: 34px !important;
  }

  #community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack,
  .activity-page .sl-activity-stack-front .sl-activity-poster-stack {
    width: 123px !important;
  }

  #community-view #activity-tab-view .sl-activity-stack-front .sl-activity-poster-stack-card,
  .activity-page .sl-activity-stack-front .sl-activity-poster-stack-card {
    width: 100px !important;
  }

  #community-view #activity-tab-view .sl-activity-stack-layer-one,
  .activity-page .sl-activity-stack-layer-one {
    transform: translate3d(-7px, 9px, 0) !important;
  }

  #community-view #activity-tab-view .sl-activity-stack-layer-two,
  .activity-page .sl-activity-stack-layer-two {
    transform: translate3d(-14px, 18px, 0) !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  #community-view #activity-tab-view .sl-activity-stack-compact-card,
  .activity-page .sl-activity-stack-compact-card,
  #community-view #activity-tab-view .sl-activity-stack-layer,
  .activity-page .sl-activity-stack-layer {
    transition: none !important;
    transform: none !important;
  }
  #community-view #activity-tab-view .sl-activity-stack-wrap.is-expanded .sl-activity-stack-compact-card,
  .activity-page .sl-activity-stack-wrap.is-expanded .sl-activity-stack-compact-card {
    opacity: 1 !important;
  }
}


/* v409: status-change stacked activity uses existing stack visual; IGDB cover enforcement is handled in activity JS. */

/* v10.281: red unread-count badge that appends to the Notifications sub-tab
   pill. Tiny pill with white digit on a red background, sits just to the
   right of the "Notifications" label. */
.notifications-pill-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font: 700 10px/1 'Sohne', 'DM Sans', sans-serif;
  vertical-align: middle;
}
.activity-shared-watch-pill.notifications-tab-pill.has-unread {
  /* No additional pill-level styling needed; the badge itself provides the
     visual cue. Hook stays here so future polish (e.g. tint the pill text)
     can land without re-finding the selector. */
}

/* v410: strict IGDB/Twitch-only game poster placeholder */
.sl-activity-poster.screenlist-game-cover-pending,
.x-post-media-poster.screenlist-game-cover-pending,
.import-activity-row-poster.screenlist-game-cover-pending,
.import-activity-preview-tile.screenlist-game-cover-pending {
  background-image: none !important;
  background: linear-gradient(145deg, rgba(19, 20, 27, 0.94), rgba(45, 47, 56, 0.84)) !important;
  color: rgba(255,255,255,0.84) !important;
}
.sl-activity-poster.screenlist-game-cover-pending span,
.x-post-media-poster.screenlist-game-cover-pending span {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* =============================================================
   v784: Consolidated activity-card typography (was previously
   leaking from 16-light-mode-contrast.css as UNSCOPED rules
   that affected dark mode). These values are now the dark/base
   source of truth. Future weight/size/color tweaks land here in
   ONE place; 16-light-mode-contrast.css is reserved for
   body.light-mode and body.true-dark-mode overrides only.
   ============================================================= */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
.activity-page .shelfd-social-card .sl-activity-status {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
.activity-page .shelfd-social-card .sl-activity-title {
  color: rgba(255,255,255,.97) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  font-family: 'DM Sans', sans-serif !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
.activity-page .shelfd-social-card .sl-activity-action-verb {
  color: #f2c94c !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  font-family: 'DM Sans', sans-serif !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
.activity-page .shelfd-social-card .sl-activity-name {
  font-size: 16.5px !important;
  font-weight: 600 !important;
  max-width: min(70vw, 320px) !important;
  color: #ffffff !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
.activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
.activity-page .shelfd-social-card .sl-activity-name .creator-name {
  color: #ffffff !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-role,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creative-team-role,
.activity-page .shelfd-social-card .sl-activity-name .creator-role,
.activity-page .shelfd-social-card .sl-activity-name .creative-team-role {
  font-size: 11px !important;
}


/* v863: clean rebuilt activity-card avatar.
   .sl-av   ? the circle container (overflow:hidden, 50% radius)
   .sl-av-img ? fills the circle, object-fit:cover
   .sl-av-fb  ? fallback initial, absolutely fills the circle,
                only shown when the image fails to load. */
.sl-av {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #100823;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sl-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}
.sl-av-fb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd4ff;
  font: 800 14px/1 'DM Sans', sans-serif;
  background: #100823;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
/* Zone positioning ? keeps the avatar in grid column 1
   for both the community feed and the full-page activity view */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-avatar-zone .sl-av,
.activity-page .shelfd-social-card .sl-activity-avatar-zone .sl-av,
.activity-card.feed-post .sl-activity-avatar-zone .sl-av {
  width: clamp(44px, 8vw, 54px);
  height: clamp(44px, 8vw, 54px);
  min-width: clamp(44px, 8vw, 54px);
}

/* v890: unify activity card text size, tracking, and weights */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-dot,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-detail,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-score,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-comment,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-show-more,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-stack-action-count,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-user-note,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
.activity-page .shelfd-social-card .sl-activity-name,
.activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
.activity-page .shelfd-social-card .sl-activity-name .creator-name,
.activity-page .shelfd-social-card .sl-activity-dot,
.activity-page .shelfd-social-card .sl-activity-action-verb,
.activity-page .shelfd-social-card .sl-activity-action-detail,
.activity-page .shelfd-social-card .sl-activity-status,
.activity-page .shelfd-social-card .sl-activity-score,
.activity-page .shelfd-social-card .sl-activity-comment,
.activity-page .shelfd-social-card .sl-activity-show-more,
.activity-page .shelfd-social-card .sl-activity-stack-action-count,
.activity-page .shelfd-social-card .sl-activity-user-note,
.activity-page .shelfd-social-card .sl-activity-plain-note {
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

#community-view #activity-tab-view .shelfd-social-card .sl-activity-time,
.activity-page .shelfd-social-card .sl-activity-time {
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

#community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
.activity-page .shelfd-social-card .sl-activity-name,
.activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
.activity-page .shelfd-social-card .sl-activity-name .creator-name {
  font-weight: 600 !important;
}

#community-view #activity-tab-view .shelfd-social-card .sl-activity-name,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name-wrap,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-name .creator-name,
.activity-page .shelfd-social-card .sl-activity-name,
.activity-page .shelfd-social-card .sl-activity-name .creator-name-wrap,
.activity-page .shelfd-social-card .sl-activity-name .creator-name {
  font-size: 16.5px !important;
}

#community-view #activity-tab-view .shelfd-social-card .sl-activity-time,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-dot,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-verb,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-action-detail,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-status,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-score,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-comment,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-show-more,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-stack-action-count,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-user-note,
#community-view #activity-tab-view .shelfd-social-card .sl-activity-plain-note,
.activity-page .shelfd-social-card .sl-activity-time,
.activity-page .shelfd-social-card .sl-activity-dot,
.activity-page .shelfd-social-card .sl-activity-action-verb,
.activity-page .shelfd-social-card .sl-activity-title,
.activity-page .shelfd-social-card .sl-activity-action-detail,
.activity-page .shelfd-social-card .sl-activity-status,
.activity-page .shelfd-social-card .sl-activity-score,
.activity-page .shelfd-social-card .sl-activity-comment,
.activity-page .shelfd-social-card .sl-activity-show-more,
.activity-page .shelfd-social-card .sl-activity-stack-action-count,
.activity-page .shelfd-social-card .sl-activity-user-note,
.activity-page .shelfd-social-card .sl-activity-plain-note {
  font-weight: 500 !important;
}

#community-view #activity-tab-view .shelfd-social-card .sl-activity-title,
.activity-page .shelfd-social-card .sl-activity-title {
  font-weight: 400 !important;
}

/* v10.950: parent activity-card media titles one weight heavier.
   Child stacked cards keep their compact card typography. */
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-title,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-title,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title {
  font-weight: 500 !important;
}

/* Episode activity cards should match the media-review activity typography:
   15px / 400 with the same 18px computed line-height and 6px row spacing
   used between "Wrote a Review" and its media title. */
#community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-action-line-split,
.activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-action-line-split {
  gap: 6px !important;
}
#community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action,
#community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action-tail,
#community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-pretitle,
#community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
#community-view #activity-tab-view .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-detail,
.activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action,
.activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-action-tail,
.activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-pretitle,
.activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-title,
.activity-page .shelfd-social-card.shelfd-episode-activity-card:not(.sl-activity-stack-compact-card) .sl-activity-split-detail {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

/* v10.240: "View review" is the right-most item in the bottom interactions
   row, beside the like/reply/delete cluster. `margin-left: auto` pushes it
   to the far right. Lavender accent, subtle press state. Tap opens the
   Full Page Review. */
.sl-activity-view-review-bottom {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c4b5fd;
  font: 500 13px/1 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  white-space: nowrap;
}
.sl-activity-view-review-bottom::after {
  content: '\203A';
  margin-left: 2px;
  color: rgba(196,181,253,0.7);
  font-weight: 400;
}
.sl-activity-view-review-bottom:hover { color: #f8f4ff; }
.sl-activity-view-review-bottom:active { opacity: 0.7; transform: scale(0.97); }

/* v10.236 / v10.241: music activity-card posters render as 1:1 square
   album art. v10.241 bumps the square +9px in every dimension so the album
   art reads bolder on the feed. Width is normally constrained by the card's
   right grid column — overriding with !important forces the cell to grow. */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-poster--music,
.activity-page .shelfd-social-card .sl-activity-poster--music {
  aspect-ratio: 1 / 1 !important;
  width: clamp(128px, 19.8vw, 167px) !important;
  height: clamp(128px, 19.8vw, 167px) !important;
}
/* v10.259: when a stacked activity card is expanded inline and shows its
   child rows, lift the album cover up by 30px so it aligns with the body
   instead of sitting flush with the bottom dividing line. */
/* v10.679: compact card music poster rule moved/consolidated — see the
   COMPACT CARD POSTER CONSOLIDATION block earlier in this file. */

/* v10.260: tighten the vertical spacing inside stacked-child media-review
   cards by ~25% (action → title and title → rating gaps), and add breathing
   room between the rating row and the heart/comment icon row. */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-action,
.activity-page .sl-activity-stack-compact-card .sl-media-review-action {
  margin-top: 3px !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-title,
.activity-page .sl-activity-stack-compact-card .sl-media-review-title {
  margin-top: 4px !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-rating,
.activity-page .sl-activity-stack-compact-card .sl-media-review-rating {
  margin-top: 6px !important;
  margin-bottom: 14px !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  padding-top: 8px !important;
}
#community-view #activity-tab-view .shelfd-social-card .sl-activity-poster--music .sl-activity-poster-img,
.activity-page .shelfd-social-card .sl-activity-poster--music .sl-activity-poster-img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* v10.223 / v10.227 / v10.228: flat activity feed — remove rounded card
   chrome and use the SAME full-bleed hairline divider trick used by the
   friends page + FPReview. A plain border-bottom gets inset by the ancestor
   .container/.main-content padding; an absolutely positioned ::after pinned
   to `left: 50%; transform: translateX(-50%); width: 100vw` bleeds past
   every level of padding so the divider spans the entire viewport width.
   v10.228: ALSO override the existing `overflow: hidden !important` on the
   card — it was previously there to clip the rounded corners, but with the
   flat redesign there's no radius to clip and the overflow:hidden was
   actually slicing the full-bleed pseudo-element divider down to card width.
   That was the missing piece. */
#community-view #activity-tab-view .shelfd-social-card,
.activity-page .shelfd-social-card,
.activity-card {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
}
/* v10.229: the activity tab itself has `overflow-x: hidden` and
   `contain: layout paint` (12-pwa-header-continuity.css). `contain: paint`
   in particular forces the tab to clip ANY descendant painting to its own
   box, which is what was actually slicing the 100vw divider down to feed
   width every time. Relaxing both lets the full-bleed `::after` extend to
   the viewport edges. Transition states (.activity-subtab-transitioning)
   re-declare their own overflow:hidden so they're unaffected. */
#community-view #activity-tab-view:not(.activity-subtab-transitioning) {
  overflow-x: visible !important;
  contain: none !important;
}
#community-view #activity-tab-view:not(.activity-subtab-transitioning) #friend-activity-feed,
#community-view #activity-tab-view:not(.activity-subtab-transitioning) .activity-feed-list {
  overflow: visible !important;
  contain: none !important;
}
#community-view #activity-tab-view .shelfd-social-card::after,
.activity-page .shelfd-social-card::after,
.activity-card::after {
  content: '' !important;
  position: absolute !important;
  /* v10.675: divider lifted 9px above the card's bottom edge (was 0).
     Applies to all card sections universally — the line now floats with
     a 9px gap between itself and the card's bottom padding edge.
     Movies / TV / anime cards retain their +21px bottom padding (v10.658),
     so on those sections the line sits at (card-content-bottom + 21px
     padding - 9px lift). On other sections it sits 9px above the card's
     natural bottom edge. */
  bottom: 9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 1px !important;
  background: rgba(255,255,255,0.18) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* v10.654 / v10.655 / v10.658: Movies / TV / anime activity cards get
   extra bottom padding so the card reads as visually taller (more breathing
   room below the poster and interactions row). The bottom divider line
   (.shelfd-social-card::after above) is anchored at bottom: 0 and follows
   the new lower card edge automatically — no separate divider rule needed.

   Scope: only movies / shows (TV) / anime sections — games / manga / books
   / music keep the original tighter card height. Section discrimination
   comes from the data-section attribute added to the article tag in
   10-activity-feed.js (line 5602, v10.654).

   Baseline: iPhone 14 Pro Max (430px viewport).
   Progression: v10.654 = 6px → v10.655 = 12px → v10.658 = 21px (extra +9px
   for even more vertical breathing room).
   Fixed px so it renders identical on iPhone mini / regular / Max. */
#community-view #activity-tab-view .shelfd-social-card[data-section="movies"],
#community-view #activity-tab-view .shelfd-social-card[data-section="shows"],
#community-view #activity-tab-view .shelfd-social-card[data-section="anime"],
.activity-page .shelfd-social-card[data-section="movies"],
.activity-page .shelfd-social-card[data-section="shows"],
.activity-page .shelfd-social-card[data-section="anime"] {
  padding-bottom: 21px !important;
}
#community-view #activity-tab-view .activity-feed-list .shelfd-social-card:last-child::after,
.activity-page .activity-feed-list .shelfd-social-card:last-child::after,
.activity-card:last-child::after {
  display: none !important;
}
.activity-card:hover,
#community-view #activity-tab-view .shelfd-social-card:hover,
.activity-page .shelfd-social-card:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#community-view #activity-tab-view .shelfd-social-card:hover::after,
.activity-page .shelfd-social-card:hover::after,
.activity-card:hover::after {
  background: rgba(255,255,255,0.18) !important;
}

/* ── Compact child card additions (on top of v10.586 base) ─────────────── */

/* No border, no ::after divider */
#community-view #activity-tab-view .sl-activity-stack-compact-card,
.activity-page .sl-activity-stack-compact-card {
  border: none !important;
}
/* Kill divider — chained class gives specificity (2,2,1) > original (2,1,1) */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card::after,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card::after {
  content: none !important;
  display: none !important;
}

/* Hide username (flex:1 was pushing timestamp to far right) */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-name,
.activity-page .sl-activity-stack-compact-card .sl-activity-name {
  display: none !important;
}

/* copy-zone: override base grid-column:2 so it lands in column 1 of the
   single-column sl-activity-main inner grid, not an implicit overflow column.
   v10.682: reverted the v10.681 -12px margin-top — negative margin combined
   with overflow:hidden was clipping the top of the title text. Body stays
   at its natural top position (just below card padding-top, where it lands
   when meta-row is hidden by v10.680). */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-copy-zone,
.activity-page .sl-activity-stack-compact-card .sl-activity-copy-zone {
  grid-column: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Metadata padding + action row gap */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-main,
.activity-page .sl-activity-stack-compact-card .sl-activity-main {
  padding-left: 15px !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  padding-top: 9px !important;
}

/* Game posters — 5:6.38 ratio on activity feed cards only.
   Chained class (2,3,0) beats media-query fixed-height overrides (2,2,0).
   height:auto lets aspect-ratio drive the height from the fixed width. */
#community-view #activity-tab-view .shelfd-social-card .sl-activity-poster[data-activity-game-poster="1"],
.activity-page .shelfd-social-card .sl-activity-poster[data-activity-game-poster="1"] {
  height: auto !important;
  aspect-ratio: 5 / 6.38 !important;
}

/* v10.872: stacked child activity rows match the compact reference layout:
   flat row, small left media, two-line action/title copy, actions below the
   copy, Show all pinned right, and a single bottom divider. */
#community-view #activity-tab-view .sl-activity-stack-inline-list,
.activity-page .sl-activity-stack-inline-list {
  position: relative !important;
}
#community-view #activity-tab-view .shelfd-social-card.is-expanded .sl-activity-stack-inline-list,
.activity-page .shelfd-social-card.is-expanded .sl-activity-stack-inline-list {
  margin-top: 0 !important;
  padding-bottom: 34px !important;
}
#community-view #activity-tab-view .shelfd-social-card.is-expanded .sl-activity-stack-inline-list::after,
.activity-page .shelfd-social-card.is-expanded .sl-activity-stack-inline-list::after {
  content: '' !important;
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 6px !important;
  height: 1px !important;
  background: rgba(255,255,255,0.18) !important;
  pointer-events: none !important;
}
#community-view #activity-tab-view .sl-activity-stack-inline-inner.sl-activity-stack-carousel,
.activity-page .sl-activity-stack-inline-inner.sl-activity-stack-carousel {
  gap: 0 !important;
  padding: 18px 0 0 0 !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-controls,
.activity-page .sl-activity-stack-carousel-controls {
  position: absolute !important;
  right: 22px !important;
  bottom: 39px !important;
  left: auto !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-dots,
.activity-page .sl-activity-stack-carousel-dots {
  display: none !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-showall,
.activity-page .sl-activity-stack-carousel-showall {
  pointer-events: auto !important;
  padding: 0 !important;
  color: #a78bfa !important;
  font: 700 15px/1 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  grid-template-rows: minmax(67px, auto) 30px !important;
  min-height: 121px !important;
  padding: 15px 96px 12px 28px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card[data-section="music"],
.activity-page .shelfd-social-card.sl-activity-stack-compact-card[data-section="music"],
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"],
.activity-page .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"] {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  transform: none !important;
  width: 60px !important;
  height: 89px !important;
  max-width: 60px !important;
  max-height: 89px !important;
  border-radius: 3px !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"] .sl-activity-poster,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card[data-section="games"] .sl-activity-poster,
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster[data-activity-game-poster="1"],
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster[data-activity-game-poster="1"] {
  width: 60px !important;
  height: auto !important;
  max-width: 60px !important;
  max-height: none !important;
  aspect-ratio: 5 / 6.38 !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster--music,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster--music {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  aspect-ratio: 1 / 1 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-main,
.activity-page .sl-activity-stack-compact-card .sl-activity-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-copy-zone,
.activity-page .sl-activity-stack-compact-card .sl-activity-copy-zone {
  grid-column: 1 !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-line,
.activity-page .sl-activity-stack-compact-card .sl-activity-action-line {
  margin: 0 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-composed-headline,
.activity-page .sl-activity-stack-compact-card .sl-activity-composed-headline {
  color: rgba(255,255,255,0.94) !important;
  font: 400 16px/1.23 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  -webkit-line-clamp: 2 !important;
  max-width: 100% !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-composed-prefix,
.activity-page .sl-activity-stack-compact-card .sl-activity-composed-prefix {
  color: #e4c763 !important;
  font-weight: 400 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  min-height: 28px !important;
  padding: 5px 0 0 0 !important;
  margin: 0 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-actions,
.activity-page .sl-activity-stack-compact-card .sl-activity-actions {
  gap: 17px !important;
  align-items: center !important;
  min-height: 26px !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-btn,
.activity-page .sl-activity-stack-compact-card .sl-activity-action-btn {
  min-height: 26px !important;
  gap: 4px !important;
  color: rgba(255,255,255,0.92) !important;
  font: 400 11px/1 'Sohne', 'DM Sans', sans-serif !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-btn svg,
.activity-page .sl-activity-stack-compact-card .sl-activity-action-btn svg {
  width: 23px !important;
  height: 23px !important;
  stroke-width: 1.85 !important;
}

/* v10.873: child stack fields shrink-wrap their real visual content.
   Prevent inherited tap-target/min-width boxes from pushing the poster,
   counts, and action glyphs out of the reference alignment. */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card *,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card * {
  box-sizing: border-box !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster-img,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-actions,
.activity-page .sl-activity-stack-compact-card .sl-activity-actions {
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 16px !important;
  line-height: 1 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-btn,
.activity-page .sl-activity-stack-compact-card .sl-activity-action-btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: 23px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-icon-slot,
.activity-page .sl-activity-stack-compact-card .sl-activity-icon-slot,
#community-view #activity-tab-view .sl-activity-stack-compact-card [data-like-icon-slot],
.activity-page .sl-activity-stack-compact-card [data-like-icon-slot] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 23px !important;
  min-width: 23px !important;
  max-width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  flex: 0 0 23px !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-btn [data-activity-like-count],
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-btn [data-activity-reply-count],
.activity-page .sl-activity-stack-compact-card .sl-activity-action-btn [data-activity-like-count],
.activity-page .sl-activity-stack-compact-card .sl-activity-action-btn [data-activity-reply-count] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: 11px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-composed-headline,
.activity-page .sl-activity-stack-compact-card .sl-activity-composed-headline {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* v10.874: remove the right-side dead zone from stacked child rows. The
   previous 96px right padding reserved room for Show all inside the card,
   which clipped title/review/rating content even though Show all is already
   absolutely positioned outside the card's layout. */
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card {
  padding: 15px 20px 12px 28px !important;
}
#community-view #activity-tab-view .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster,
.activity-page .shelfd-social-card.sl-activity-stack-compact-card .sl-activity-poster {
  z-index: 0 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-main,
.activity-page .sl-activity-stack-compact-card .sl-activity-main,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  position: relative !important;
  z-index: 2 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-title,
.activity-page .sl-activity-stack-compact-card .sl-media-review-title,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-rating,
.activity-page .sl-activity-stack-compact-card .sl-media-review-rating {
  max-width: 100% !important;
}

/* v10.875: top carousel dots for stacked child rows. The JS already
   generates one dot per child item and updates .is-active on horizontal
   scroll; this positions the indicator at the top of the dropdown while
   keeping Show all anchored to the lower-right action line. */
#community-view #activity-tab-view .shelfd-social-card.is-expanded .sl-activity-stack-inline-list,
.activity-page .shelfd-social-card.is-expanded .sl-activity-stack-inline-list {
  padding-top: 14px !important;
}
#community-view #activity-tab-view .sl-activity-stack-inline-inner.sl-activity-stack-carousel,
.activity-page .sl-activity-stack-inline-inner.sl-activity-stack-carousel {
  padding-top: 20px !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-controls,
.activity-page .sl-activity-stack-carousel-controls {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  pointer-events: none !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-dots,
.activity-page .sl-activity-stack-carousel-dots {
  position: absolute !important;
  top: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-dot,
.activity-page .sl-activity-stack-carousel-dot {
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  min-height: 5px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.22) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: width 160ms ease, background-color 160ms ease, opacity 160ms ease !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-dot.is-active,
.activity-page .sl-activity-stack-carousel-dot.is-active {
  width: 13px !important;
  background: rgba(167,139,250,0.96) !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-showall,
.activity-page .sl-activity-stack-carousel-showall {
  position: absolute !important;
  right: 22px !important;
  bottom: 39px !important;
}

/* v10.876: align stacked-child action rows to the text column. The global
   Full Review button uses margin-left:auto for full-size cards; compact
   carousel children need it to stay in the same left-running action row. */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  justify-content: flex-start !important;
  transform: translateX(-3px) !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-actions,
.activity-page .sl-activity-stack-compact-card .sl-activity-actions {
  justify-content: flex-start !important;
  transform: none !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-view-review-bottom,
.activity-page .sl-activity-stack-compact-card .sl-activity-view-review-bottom {
  margin-left: 0 !important;
  padding: 0 !important;
  height: 23px !important;
  min-height: 0 !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

/* v10.878: put stacked-child text/review/rating on the top paint layer and
   remove the remaining child-only clipping boxes. Also pushes the action
   row farther left per visual alignment pass. */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-main,
.activity-page .sl-activity-stack-compact-card .sl-activity-main,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-copy-zone,
.activity-page .sl-activity-stack-compact-card .sl-activity-copy-zone,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-action-line,
.activity-page .sl-activity-stack-compact-card .sl-activity-action-line,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-composed-headline,
.activity-page .sl-activity-stack-compact-card .sl-activity-composed-headline,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-stack-summary-line,
.activity-page .sl-activity-stack-compact-card .sl-activity-stack-summary-line,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-stack-summary-title,
.activity-page .sl-activity-stack-compact-card .sl-activity-stack-summary-title,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-stack-summary-detail,
.activity-page .sl-activity-stack-compact-card .sl-activity-stack-summary-detail,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-action,
.activity-page .sl-activity-stack-compact-card .sl-media-review-action,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-title,
.activity-page .sl-activity-stack-compact-card .sl-media-review-title,
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-media-review-rating,
.activity-page .sl-activity-stack-compact-card .sl-media-review-rating {
  position: relative !important;
  z-index: 40 !important;
  overflow: visible !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-copy-zone,
.activity-page .sl-activity-stack-compact-card .sl-activity-copy-zone {
  contain: none !important;
  clip-path: none !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  z-index: 45 !important;
  transform: translateX(-12px) !important;
}

/* v10.879: parent/main activity cards only — larger rating treatment and
   +3px vertical breathing room around the rating row. Compact stacked child
   cards keep their smaller carousel-specific rating scale. */
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-rating,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-rating {
  margin: 6px 0 12px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-rating-star,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-rating-star {
  --sl-star-size: 21px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-score,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-score {
  font-size: 21px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-rating + .sl-activity-comment-wrap,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-rating + .sl-activity-comment-wrap {
  margin-top: 7px !important;
}

/* v10.880: child activity card Show all pill. Lowered to align with the
   heart/comment row and restyled as a transparent glass bubble. */
#community-view #activity-tab-view .sl-activity-stack-carousel-showall,
.activity-page .sl-activity-stack-carousel-showall {
  right: 20px !important;
  bottom: 27px !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(216,203,255,0.30) !important;
  background: rgba(167,139,250,0.30) !important;
  color: rgba(244,240,255,0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 18px rgba(9,7,20,0.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.25) !important;
  backdrop-filter: blur(12px) saturate(1.25) !important;
}
#community-view #activity-tab-view .sl-activity-stack-carousel-showall::after,
.activity-page .sl-activity-stack-carousel-showall::after {
  color: rgba(244,240,255,0.72) !important;
}

/* v10.881: main activity-card avatar is 51x51, with the username/meta row
   vertically centered against the profile picture. Stacked child cards keep
   their hidden-avatar layout. */
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-main,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-main,
.activity-card.feed-post .sl-activity-main {
  grid-template-columns: 51px minmax(0, 1fr) !important;
  gap: 10px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone,
.activity-card.feed-post .sl-activity-avatar-zone {
  padding-top: 0 !important;
  width: 51px !important;
  min-width: 51px !important;
  height: 51px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone .sl-av,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone .sl-av,
.activity-card.feed-post .sl-activity-avatar-zone .sl-av,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-btn,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-btn {
  width: 51px !important;
  height: 51px !important;
  min-width: 51px !important;
  max-width: 51px !important;
  min-height: 51px !important;
  max-height: 51px !important;
  border-radius: 999px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-copy-zone,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-copy-zone,
.activity-card.feed-post .activity-content-col {
  padding-top: 14px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-meta-row,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-meta-row {
  align-items: center !important;
}

/* v10.882: tune main activity-card avatars from 51x51 to 48x48 and
   recenter the username/meta row against the slightly smaller circle. */
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-main,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-main,
.activity-card.feed-post .sl-activity-main {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone,
.activity-card.feed-post .sl-activity-avatar-zone {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone .sl-av,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-zone .sl-av,
.activity-card.feed-post .sl-activity-avatar-zone .sl-av,
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-btn,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-avatar-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
#community-view #activity-tab-view .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-copy-zone,
.activity-page .shelfd-social-card:not(.sl-activity-stack-compact-card) .sl-activity-copy-zone,
.activity-card.feed-post .activity-content-col {
  padding-top: 13px !important;
}

/* v10.883: stacked child carousel cards now repeat the parent stack summary
   in three clean lines: action, count/media, destination. */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-stack-summary-line,
.activity-page .sl-activity-stack-compact-card .sl-activity-stack-summary-line {
  display: grid !important;
  gap: 1px !important;
  margin: 0 0 8px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-stack-summary-action,
.activity-page .sl-activity-stack-compact-card .sl-activity-stack-summary-action {
  color: #E6C766 !important;
  font: 400 16px/1.18 'Sohne', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-stack-summary-title,
.activity-page .sl-activity-stack-compact-card .sl-activity-stack-summary-title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: rgba(255,255,255,.97) !important;
  font: 400 16px/1.18 'Sohne', 'DM Sans', sans-serif !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-stack-summary-detail,
.activity-page .sl-activity-stack-compact-card .sl-activity-stack-summary-detail {
  color: rgba(255,255,255,.82) !important;
  font: 400 14px/1.18 'Sohne', 'DM Sans', sans-serif !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* v10.886: child activity card action row aligns to the rating/text column.
   Earlier compact-card overrides moved the row left in small increments, but
   grid-column + padding rules still left the heart edge right of the rating. */
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-bottom-safe,
.activity-page .sl-activity-stack-compact-card .sl-activity-bottom-safe {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-content: flex-start !important;
  align-self: start !important;
  padding: 9px 0 0 0 !important;
  margin: 0 !important;
  min-height: 28px !important;
  transform: translateX(-24px) !important;
}
#community-view #activity-tab-view .sl-activity-stack-compact-card .sl-activity-actions,
.activity-page .sl-activity-stack-compact-card .sl-activity-actions {
  justify-content: flex-start !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* v11.282 — "Watch highlight reel" link on game-highlight activity cards. */
.feed-post-highlight-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(196, 181, 253, 0.40);
  background: rgba(124, 58, 237, 0.16);
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.feed-post-highlight-link:active { transform: scale(0.97); }

.feed-post-highlight-caption,
.sl-activity-highlight-caption {
  display: block;
  margin: 5px 0 0;
  color: rgba(255,255,255,0.86);
  font: 400 15px/1.35 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* v11.285 — inline Streamable highlight embed on game-highlight activity cards.
   Full-bleed to the card edges (negative margins cancel the card's inner
   padding) so the clip is noticeably bigger; 16:9 keeps it tall. */
.feed-post-highlight-embed {
  position: relative;
  /* v11.289: highlight now uses the standard activity card (.sl-activity-copy-zone,
     a flex column). The earlier negative-margin full-bleed was clipped by the
     card's overflow:hidden, cutting the video off. Keep it simple: fill the copy
     column width (avatar-edge → right padding) at 100%, no negative margins. */
  width: 100%;
  align-self: stretch;
  margin: 12px 0 4px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.feed-post-highlight-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =============================================================================
   v11.290 — Game-highlight activity card gets its OWN working area.
   The standard card reserves a 121-162px right poster column + tall min-height,
   which squeezed the embed and clipped the headline. Highlights have no poster,
   so we collapse to a single full-width column, let the headline wrap, drop the
   poster column entirely, and let the embed use the full card width.
   ============================================================================= */
.activity-page .shelfd-social-card.shelfd-highlight-card,
#community-view #activity-tab-view .shelfd-social-card.shelfd-highlight-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
  column-gap: 0 !important;
}
/* headline can wrap to multiple lines instead of clipping */
.shelfd-highlight-card .sl-activity-split-action,
.shelfd-highlight-card .sl-activity-split-action-main {
  white-space: normal !important;
}
.shelfd-highlight-card .sl-activity-action-line {
  overflow: visible !important;
  max-height: none !important;
}
/* embed spans the full content column, comfortably bigger */
.shelfd-highlight-card .feed-post-highlight-embed {
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 6px !important;
}
/* the highlight card has no poster slot to fill */
.shelfd-highlight-card .sl-activity-poster { display: none !important; }