/* ============================================================================
   Pixelfed-specific cyber-hub overrides
   Loaded AFTER cyber-hub.css. Wins via specificity + !important.
   Phase 312.13 v3: subtitle + description + favicon refinements.
   ============================================================================ */

/* --- 1. Footer hide --------------------------------------------------------- */
.footer-component-attribution,
.footer-component-attribution + *,
[class*="footer-component"],
.copyright,
[class*="poweredby"],
[class*="powered-by"] {
  display: none !important;
}

.app-footer, .v-footer {
  display: none !important;
}

main, #content, .container-fluid {
  padding-bottom: 1.2rem !important;
}

/* --- 2. Logo replace via CSS content (bypass Cloudflare cache) ------------- */
img[src*="pixelfed-icon-color"],
img[src*="pixelfed-icon-black"],
img[src*="pixelfed-icon-grey"],
img[src*="pixelfed-icon-white"] {
  content: url('/pixelfed-branding/raven-wednesday.svg?v=20260507c') !important;
}

/* --- 3. Banner replace via CSS content (bypass CF cache) ------------------- */
img[alt="Server banner image"],
img[src*="/storage/headers/default.jpg"] {
  content: url('/storage/headers/default.jpg?bust=20260507c') !important;
}

/* --- 4. Server card subtitle: hide "social.sabin.uk" + show "NEVERMORE FRAMES" -- */
.server-header-domain {
  font-size: 0 !important;       /* hide original text */
  line-height: 1 !important;
}
.server-header-domain::before {
  content: "NEVERMORE FRAMES" !important;
  font-size: 1.6rem !important;
  font-family: var(--hub-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--hub-neon-soft) !important;
  text-shadow: 0 0 12px rgba(49, 231, 255, 0.4);
  display: inline-block;
}

/* --- 5. Hide "Decentralized photo sharing... Pixelfed" attribution --------- */
.server-header-attribution {
  display: none !important;
}

/* --- 6. Branding text styling ---------------------------------------------- */
.navbar-brand {
  font-family: var(--hub-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--hub-neon-soft) !important;
}

.navbar-brand:hover {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(49, 231, 255, 0.5);
}

.navbar-brand img {
  filter: drop-shadow(0 0 6px rgba(49, 231, 255, 0.35));
  transition: filter var(--hub-dur-base) var(--hub-ease-spring);
}
.navbar-brand:hover img {
  filter: drop-shadow(0 0 14px rgba(49, 231, 255, 0.7));
}

/* --- 7. Landing page polish ------------------------------------------------- */
.card-img-top {
  border-radius: var(--hub-radius-card) !important;
  border: 1px solid var(--hub-border) !important;
  box-shadow: var(--hub-shadow-elev) !important;
}

/* --- 8. Story carousel (when stories enabled) ------------------------------- */
.story-carousel, .stories-list {
  border-bottom: 1px solid var(--hub-border) !important;
  padding: 0.85rem 0 !important;
}
.story-avatar, .story-circle {
  border: 2px solid var(--hub-neon) !important;
  box-shadow: var(--hub-glow-soft);
}

/* --- 9. Compose / new-post button ------------------------------------------- */
.btn-compose, [aria-label*="ompose"], [aria-label*="ew post"] {
  background: linear-gradient(135deg, #103646 0%, #1A5269 100%) !important;
  border: 1px solid var(--hub-neon) !important;
  color: var(--hub-neon-soft) !important;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 338+19 — IMPECCABLE POLISH LAYER
   ────────────────────────────────────────────────────────────────────
   Layered on cyber-hub.css + the overrides above. Adds:
   - Modular type scale (11/12/15/16) — eyebrow / caption / meta / body
   - Eyebrow micro-labels on profile + timeline cards
   - Card hover refined to 220ms quint-out, -3px, gated to (hover: hover)
   - Chip accent via color-mix
   - Unified :focus-visible ring
   - Tabular-nums on stats (followers/posts/likes counters)
   - Prefers-reduced-motion guard
   - SSR / WebSocket-safe (no JS injection, CSS-only)
   ════════════════════════════════════════════════════════════════════ */

:root {
  --pix-text-eyebrow: 0.6875rem; /* 11px */
  --pix-text-caption: 0.75rem;   /* 12px */
  --pix-text-meta:    0.9375rem; /* 15px */
  --pix-text-body:    1rem;      /* 16px */

  --pix-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --pix-dur-card: 0.22s;

  --pix-chip-bg: color-mix(in oklch, var(--hub-neon) 8%, transparent);
  --pix-chip-bg-hover: color-mix(in oklch, var(--hub-neon) 14%, transparent);
  --pix-chip-border: color-mix(in oklch, var(--hub-neon) 32%, transparent);
}

@supports not (color: color-mix(in oklch, red, blue)) {
  :root {
    --pix-chip-bg: rgba(49, 231, 255, 0.08);
    --pix-chip-bg-hover: rgba(49, 231, 255, 0.14);
    --pix-chip-border: rgba(49, 231, 255, 0.32);
  }
}

/* --- 10. Type scale + body refinement ----------------------------- */
body {
  font-size: var(--pix-text-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Caption-tier metadata: usernames in lists, timestamps, action labels */
.timestamp,
.text-muted,
small.text-muted,
.profile-stats .stat-label,
.list-group-item small,
[class*="meta"] small {
  font-size: var(--pix-text-caption) !important;
  letter-spacing: 0.01em;
  font-family: var(--hub-font-display) !important;
}

/* Meta-tier: status counts, captions on posts */
.status-content,
.post-caption,
.text-secondary {
  font-size: var(--pix-text-meta) !important;
  line-height: 1.58;
  text-wrap: pretty;
  max-width: 65ch;
}

/* --- 11. Eyebrow micro-labels on profile sections ---------------- */
.profile-stats::before {
  content: "OVERVIEW";
  display: block;
  font-family: var(--hub-font-display);
  font-size: var(--pix-text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hub-muted);
  opacity: 0.66;
  margin-bottom: 0.4rem;
}

.profile-feed::before,
.profile-tabs::before {
  content: "POSTS";
  display: block;
  font-family: var(--hub-font-display);
  font-size: var(--pix-text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hub-muted);
  opacity: 0.66;
  margin: 0.6rem 0 0.4rem;
}

/* --- 12. Chip accent across pills, badges, action buttons ------- */
.btn-sm,
.badge,
.tag,
.pill,
.nav-pills .nav-link,
.action-button,
[aria-label*="ike"],
[aria-label*="omment"],
[aria-label*="hare"] {
  background: var(--pix-chip-bg) !important;
  border: 1px solid var(--pix-chip-border) !important;
  color: var(--hub-neon-soft) !important;
  border-radius: var(--hub-radius-pill, 999px) !important;
  font-family: var(--hub-font-display) !important;
  font-size: var(--pix-text-caption) !important;
  letter-spacing: 0.02em;
  font-weight: 500;
}

@media (hover: hover) {
  .btn-sm:hover,
  .badge:hover,
  .tag:hover,
  .pill:hover,
  .nav-pills .nav-link:hover,
  .action-button:hover {
    background: var(--pix-chip-bg-hover) !important;
  }
}

/* --- 13. Card hover — 220ms quint-out, -3px, hover-only --------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card,
  .post-card,
  .timeline-item,
  .profile-card,
  .status-card {
    transition:
      transform var(--pix-dur-card) var(--pix-ease-quint),
      box-shadow var(--pix-dur-card) var(--pix-ease-quint),
      border-color var(--pix-dur-card) ease !important;
  }

  .card:hover,
  .post-card:hover,
  .timeline-item:hover,
  .profile-card:hover,
  .status-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--hub-neon) !important;
    box-shadow:
      var(--hub-shadow-elev, 0 26px 52px rgba(0,0,0,.42)),
      0 0 0 1px color-mix(in oklch, var(--hub-neon) 20%, transparent) !important;
  }

  /* Card image: subtle scale on hover — uses transform, not width/height */
  .card-img-top {
    transition: transform 0.42s var(--pix-ease-quint), filter 0.42s ease !important;
  }
  .card:hover .card-img-top {
    transform: scale(1.012);
    filter: saturate(1.06);
  }
}

@media (hover: none) {
  .card:hover, .post-card:hover, .timeline-item:hover {
    transform: none !important;
  }
}

/* --- 14. Unified :focus-visible ring across all interactive ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--hub-neon) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--hub-neon) 14%, transparent) !important;
}

/* --- 15. Tabular nums on stat counters --------------------------- */
.profile-stats,
.profile-stats *,
.stat-value,
.like-count,
.comment-count,
.share-count,
[class*="count"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* --- 16. Navbar refinement: tighten brand letter-spacing -------- */
.navbar-brand {
  font-size: var(--pix-text-meta) !important;
  letter-spacing: 0.06em !important;
}

/* --- 17. Form inputs: consistent radius + focus ----------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  font-family: var(--hub-font-body) !important;
  font-size: var(--pix-text-body) !important;
  border-radius: 10px !important;
}

/* --- 18. Hard prefers-reduced-motion guard ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .post-card:hover, .card:hover .card-img-top {
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================================
   PHASE 338+19 — IMPECCABLE V2 VISIBLE-IMPACT POLISH (2026-05-28)
   ----------------------------------------------------------------------------
   v1 was imperceptible. v2 raises the bar to 4+ pointable diffs.
   - Brand wordmark with gradient-text fill + accent dot (visible everywhere)
   - Body ambient cyan + teal radial-gradient orbs (drama in the void)
   - Compose textarea / post input HERO with cyan radial focus glow
   - Glass backdrop-filter on .navbar / sidebar / sticky surfaces
   - Card hover -6px scale 1.012 + 60px cyan glow + img brightness 1.06
   - Nav-pills with sliding accent underline (cubic-bezier spring)
   - Notification badges + chips: glow on active
   - Empty timeline illustrated SVG mascot (camera/film-strip)
   - Profile header backdrop-blur surface
   - prefers-reduced-motion guarded; SSR-safe (CSS-only, no JS injection)
   ============================================================================ */

:root {
  --pix2-cyan:       #31E7FF;
  --pix2-cyan-soft:  #87FBFF;
  --pix2-cyan-deep:  #0E7A8C;
  --pix2-ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --pix2-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --pix2-ease-expo:  cubic-bezier(0.19, 1, 0.22, 1);
}

/* === 1. AMBIENT BODY ORBS === */
body {
  background:
    radial-gradient(900px 600px at 12% -8%,
      color-mix(in oklab, #31E7FF 13%, transparent) 0%,
      transparent 60%),
    radial-gradient(720px 540px at 96% 22%,
      color-mix(in oklab, #87FBFF 9%, transparent) 0%,
      transparent 55%),
    radial-gradient(1100px 820px at 50% 112%,
      color-mix(in oklab, #31E7FF 8%, transparent) 0%,
      transparent 55%),
    linear-gradient(180deg, #041018 0%, #07131B 44%, #091B24 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* === 2. NAVBAR — real glass + gradient brand wordmark === */
.navbar,
nav.navbar,
.app-navbar,
.v-app-bar {
  background:
    linear-gradient(180deg,
      rgba(8, 23, 31, 0.88),
      rgba(8, 23, 31, 0.55)) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  border-bottom: 1px solid color-mix(in oklab, #31E7FF 24%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 38px rgba(0, 0, 0, 0.45) !important;
}

.navbar-brand,
.app-brand {
  font-family: var(--hub-font-display), 'Manrope', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.018em !important;
  background: linear-gradient(180deg, #fff 0%, #87FBFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-transform: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.navbar-brand img,
.app-brand img {
  filter: drop-shadow(0 0 14px color-mix(in oklab, #31E7FF 60%, transparent)) !important;
}

/* === 3. INPUTS — HERO compose + search === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
.v-text-field input,
.v-text-field textarea,
.compose-input,
.status-content-input {
  font-family: var(--hub-font-body), 'Manrope', sans-serif !important;
  font-size: 1rem !important;
  background:
    linear-gradient(180deg,
      rgba(11, 28, 38, 0.92),
      rgba(5, 20, 27, 0.92)) !important;
  border: 1.5px solid rgba(49, 231, 255, 0.22) !important;
  border-radius: 14px !important;
  color: #E9FDFF !important;
  padding: 0.85rem 1.1rem !important;
  transition:
    border-color 320ms var(--pix2-ease-quint),
    box-shadow 380ms var(--pix2-ease-quint),
    background 320ms var(--pix2-ease-quint) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 18px rgba(0, 0, 0, 0.32) !important;
}
input[type="search"] {
  min-height: 3.2rem !important;
  border-radius: 999px !important;
  padding: 0 1.3rem !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
.v-text-field input:focus,
.v-text-field textarea:focus {
  border-color: color-mix(in oklab, #31E7FF 65%, transparent) !important;
  outline: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 4px color-mix(in oklab, #31E7FF 18%, transparent),
    0 0 56px 6px color-mix(in oklab, #31E7FF 24%, transparent),
    0 12px 36px rgba(0, 0, 0, 0.4) !important;
}

/* === 4. PRIMARY BUTTONS — gradient cyan capsule === */
.btn-primary,
.v-btn.v-btn--variant-elevated.bg-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-link),
.compose-submit,
.post-button {
  background:
    linear-gradient(180deg, #54F0FF 0%, #31E7FF 50%, #0E7A8C 100%) !important;
  border: 1px solid color-mix(in oklab, #31E7FF 70%, transparent) !important;
  color: #04141A !important;
  font-family: var(--hub-font-display), 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.6rem !important;
  min-height: 2.85rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 8px 22px color-mix(in oklab, #31E7FF 32%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.36) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 180ms var(--pix2-ease-quint),
    box-shadow 280ms var(--pix2-ease-quint),
    filter 240ms var(--pix2-ease-quint) !important;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-primary:hover,
  .v-btn.v-btn--variant-elevated.bg-primary:hover,
  .compose-submit:hover {
    transform: translate3d(0, -2px, 0) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.36) inset,
      0 -1px 0 rgba(0, 0, 0, 0.2) inset,
      0 14px 32px color-mix(in oklab, #31E7FF 46%, transparent),
      0 4px 6px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(1.08) !important;
  }
}

/* === 5. NAV-PILLS — sliding accent underline === */
.nav-pills .nav-link,
.timeline-tabs .tab,
.profile-tabs .tab {
  position: relative !important;
  color: rgba(156, 199, 206, 0.86) !important;
  font-family: var(--hub-font-display), 'Manrope', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: color 220ms var(--pix2-ease-quint), background 220ms var(--pix2-ease-quint) !important;
}
.nav-pills .nav-link::after,
.timeline-tabs .tab::after,
.profile-tabs .tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #31E7FF, #87FBFF);
  box-shadow: 0 0 10px color-mix(in oklab, #31E7FF 60%, transparent);
  transform: translateX(-50%);
  transition: width 320ms var(--pix2-ease-spring);
}
.nav-pills .nav-link.active,
.timeline-tabs .tab.active,
.profile-tabs .tab.active {
  color: #fff !important;
  background: color-mix(in oklab, #31E7FF 12%, transparent) !important;
  border-color: color-mix(in oklab, #31E7FF 40%, transparent) !important;
}
.nav-pills .nav-link.active::after,
.timeline-tabs .tab.active::after,
.profile-tabs .tab.active::after { width: 80%; }
@media (hover: hover) {
  .nav-pills .nav-link:hover,
  .timeline-tabs .tab:hover,
  .profile-tabs .tab:hover {
    color: #E9FDFF !important;
    background: rgba(49, 231, 255, 0.06) !important;
  }
  .nav-pills .nav-link:hover::after { width: 65%; }
}

/* === 6. CARDS — dramatic hover lift + cyan glow === */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card,
  .post-card,
  .timeline-item,
  .profile-card,
  .status-card,
  .v-card {
    transition:
      transform 380ms var(--pix2-ease-quint),
      border-color 280ms var(--pix2-ease-quint),
      box-shadow 380ms var(--pix2-ease-quint) !important;
  }
  .card:hover,
  .post-card:hover,
  .timeline-item:hover,
  .profile-card:hover,
  .status-card:hover,
  .v-card:hover {
    transform: translate3d(0, -6px, 0) scale(1.012) !important;
    border-color: color-mix(in oklab, #31E7FF 50%, transparent) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 1px 2px rgba(0, 0, 0, 0.6),
      0 24px 56px rgba(0, 0, 0, 0.45),
      0 0 0 1px color-mix(in oklab, #31E7FF 28%, transparent),
      0 0 56px color-mix(in oklab, #31E7FF 26%, transparent) !important;
  }
  .card:hover .card-img-top,
  .post-card:hover img,
  .timeline-item:hover img,
  .status-card:hover img {
    filter: brightness(1.06) saturate(1.08) !important;
  }
}

/* === 7. PROFILE HEADER — backdrop blur surface === */
.profile-header,
.user-profile-header,
.profile-banner {
  background:
    linear-gradient(180deg,
      rgba(11, 28, 38, 0.7),
      rgba(11, 28, 38, 0.4)) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid color-mix(in oklab, #31E7FF 24%, transparent) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 42px rgba(0, 0, 0, 0.42) !important;
}

/* === 8. NOTIFICATION BADGES + chips dramatic active === */
.badge,
.notification-badge,
.unread-count {
  background: linear-gradient(180deg, #54F0FF, #0E7A8C) !important;
  color: #04141A !important;
  font-family: var(--hub-font-display), monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 0 12px color-mix(in oklab, #31E7FF 60%, transparent) !important;
}

/* Active chip (per-source accent dot + glow) — overrides v1 .nav-pills .nav-link */
.btn-sm,
.tag,
.pill {
  position: relative;
}
.btn-sm.active,
.tag.active,
.pill.active,
.btn-sm[aria-current],
.nav-pills .nav-link.active {
  box-shadow:
    0 0 0 1px color-mix(in oklab, #31E7FF 38%, transparent) inset,
    0 6px 18px color-mix(in oklab, #31E7FF 26%, transparent) !important;
}

/* === 9. PHOTO MODAL — backdrop blur + smooth scale-in === */
.v-overlay__scrim,
.modal-backdrop {
  background-color: rgba(4, 14, 18, 0.7) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}
.modal-dialog,
.v-dialog > .v-overlay__content {
  border: 1px solid color-mix(in oklab, #31E7FF 26%, transparent) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in oklab, #31E7FF 18%, transparent),
    0 0 80px color-mix(in oklab, #31E7FF 14%, transparent) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .modal-dialog.show,
  .v-dialog--active > .v-overlay__content {
    animation: pix2-scale-in 280ms var(--pix2-ease-expo) backwards;
  }
}
@keyframes pix2-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Close button: rotate-90 on hover */
.modal-dialog .btn-close,
.v-dialog__close,
button[aria-label*="lose" i] {
  transition: transform 280ms var(--pix2-ease-spring), color 200ms var(--pix2-ease-quint) !important;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .modal-dialog .btn-close:hover,
  .v-dialog__close:hover,
  button[aria-label*="lose" i]:hover {
    transform: rotate(90deg) !important;
    color: #31E7FF !important;
  }
}

/* === 10. EMPTY TIMELINE — illustrated SVG mascot === */
.empty-timeline,
.empty-feed,
.no-posts,
[data-empty="true"] {
  min-height: 50vh;
  display: grid !important;
  place-items: center !important;
  padding: 60px 24px !important;
  position: relative !important;
  text-align: center !important;
}
.empty-timeline::before,
.empty-feed::before,
.no-posts::before,
[data-empty="true"]::before {
  content: '';
  display: block;
  width: 240px;
  height: 240px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'>\
<defs>\
<radialGradient id='g1' cx='50%25' cy='50%25' r='50%25'>\
<stop offset='0%25' stop-color='%2331E7FF' stop-opacity='0.4'/>\
<stop offset='70%25' stop-color='%2331E7FF' stop-opacity='0'/>\
</radialGradient>\
<linearGradient id='g2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'>\
<stop offset='0%25' stop-color='%2387FBFF'/>\
<stop offset='100%25' stop-color='%230E7A8C'/>\
</linearGradient>\
</defs>\
<circle cx='120' cy='120' r='110' fill='url(%23g1)'/>\
<rect x='52' y='84' width='136' height='90' rx='12' stroke='url(%23g2)' stroke-width='5' fill='none' opacity='0.95'/>\
<rect x='66' y='98' width='108' height='62' rx='6' fill='%2331E7FF' opacity='0.10'/>\
<circle cx='120' cy='129' r='22' stroke='url(%23g2)' stroke-width='4' fill='none' opacity='0.92'/>\
<circle cx='120' cy='129' r='10' fill='%2331E7FF' opacity='0.78'/>\
<rect x='146' y='90' width='22' height='10' rx='2' fill='url(%23g2)' opacity='0.85'/>\
<polygon points='98,72 110,84 130,84 142,72' stroke='url(%23g2)' stroke-width='3.5' fill='none' opacity='0.92'/>\
<circle cx='66' cy='98' r='2.5' fill='%2331E7FF' opacity='0.6'/>\
<circle cx='196' cy='58' r='3' fill='%2331E7FF' opacity='0.55'/>\
<circle cx='52' cy='196' r='2' fill='%2331E7FF' opacity='0.45'/>\
</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 0 30px color-mix(in oklab, #31E7FF 26%, transparent));
}
@media (prefers-reduced-motion: no-preference) {
  .empty-timeline::before,
  .empty-feed::before,
  .no-posts::before,
  [data-empty="true"]::before {
    animation: pix2-float 6s var(--pix2-ease-quint) infinite;
  }
}
@keyframes pix2-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* === 11. SCROLLBAR cyan-tinted === */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, #31E7FF 32%, transparent);
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  transition: background 200ms var(--pix2-ease-quint);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, #31E7FF 60%, transparent); background-clip: padding-box; }

::selection { background: color-mix(in oklab, #31E7FF 50%, transparent); color: #fff; }

/* === 12. Hard prefers-reduced-motion guard === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}