:root {
  --bg: #1c1822;
  --ink: #f7f2f7;
  --muted: #b8aebb;
  --line: #403747;
  --card: #27212e;
  --pink: #ff6c9a;
  --orange: #f4aa6b;
  --purple: #a889ff;
}

body {
  background: radial-gradient(ellipse at 52% -15%, #59405f 0, #292130 38%, #1c1822 76%);
  color: var(--ink);
}

body::before,
body::after {
  content: '';
  position: fixed;
  top: -18vh;
  width: 24vw;
  height: 95vh;
  opacity: .13;
  pointer-events: none;
  filter: blur(1px);
  transform-origin: top center;
  z-index: -1;
}

body::before { left: 14vw; background: linear-gradient(170deg, #ff4f86, transparent 65%); transform: rotate(22deg); }
body::after { right: 8vw; background: linear-gradient(190deg, #9c79ff, transparent 68%); transform: rotate(-20deg); }
.sidebar { border-right: 1px solid #2b2531; }
.nav-item.active, .nav-item:hover { background: #211a29; color: #fff; box-shadow: 0 0 22px #b23f7626; }
.nav-item, .collection, .new-collection { color: #a69ba9; }
.side-title, .topic-label, .topic-count, .feed-head span, .sidebar-footer { color: #776c7e; }
.side-rule, .topic-strip, .welcome-row { border-color: var(--line); }
.search { border-color: var(--line); color: #75697c; }
.search input { color: var(--ink); }
.intro { color: #9b8fa0; }
.primary-button { background: var(--pink); box-shadow: 0 0 22px #ff4f8640; }
.primary-button:hover { background: #ff79a0; }
.topic { color: #988da0; }
.topic.active { color: #ff709b; }
.post { background: linear-gradient(140deg, #2d2637, #241e2b); border-color: #504358; box-shadow: 0 12px 35px #100b1638; }
.post-meta p, .post-text, .muted { color: #aaa0ad; }
.more, .post-footer button { color: #8d8293; }
.comment-box input { background: #342b3d; color: #f4edf3; }
.feed-tab { color: #84788d; }
.feed-tab.active { color: #fff; }
.playlist-card { background: #19151f; border: 1px solid #51405a; box-shadow: inset 0 0 35px #b13a6c12; }
.event-card, .profile-card { background: #27212e; border-color: #504358; }
.event-card p, .profile-name span, .profile-body p, .profile-stats, .trend small, .rail-footer { color: #95899c; }
.trend { border-color: var(--line); }
.rail-heading h3, .trend strong, .event-card strong { color: #f4edf3; }
.rail-heading button { color: #9b8fa2; }
.composer-modal { background: #2a2331; border: 1px solid #594963; }
.composer-modal textarea { background: #382d41; border-color: #65516d; color: #f4edf3; }
.composer-modal textarea::placeholder { color: #83778b; }
.upload-preview { border-color: #55415b; }
.upload-preview strong { color: #d6cbd9; }
.upload-preview small { color: #948999; }
.composer-tags button { border-color: #4b3b51; color: #a99aaf; }
.violet { background: #a37cff; }
.profile-gallery { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 4px; margin: 15px 0 14px; height: 60px; }
.profile-gallery img { width: 100%; height: 60px; object-fit: cover; filter: saturate(.75) contrast(1.05); }
.record-photo { padding: 0; }
.record-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.avatar-large { border-color: #17131d; }

/* Library-first layout: keep the eye on media, not social counters. */
.post-meta, .post-text, .post-footer, .comment-box { display: none; }
.post { padding: 0; overflow: hidden; border-radius: 8px; }
.feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.media-grid.two { grid-template-columns: 1fr; gap: 0; }
.media-grid.two img { height: 210px; }
.media-grid.two .video-tile { display: none; }
.file-label { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 13px 15px 14px; }
.file-label strong { font-size: 12px; color: #f8f0f7; }
.file-label span { font: 9px 'DM Mono'; color: #b8aebb; }
.file-share { grid-row: 1 / span 2; grid-column: 2; align-self: center; border: 1px solid #716076; background: transparent; color: #d7c9da; border-radius: 4px; padding: 6px 10px; cursor: pointer; font: 10px Manrope; }
.file-share:hover { color: var(--pink); border-color: var(--pink); }
.playlist-card { margin: 0; border: 0; border-radius: 0; min-height: 210px; }
.top-actions { gap: 12px; }
.share-link { border: 1px solid #716076; background: transparent; color: #ded2df; border-radius: 4px; padding: 8px 11px; cursor: pointer; font: 10px Manrope; }
.share-link:hover { color: var(--pink); border-color: var(--pink); }
.post-footer .reaction, .post-footer .comment-toggle, .post-footer .share { display: none; }
.post-footer .save { margin-left: auto; color: #c6b9ca; }
.storage-card { margin-top: 30px; padding: 17px; background: #2d2637; border: 1px solid #504358; border-radius: 7px; box-shadow: 0 12px 28px #100b1628; }
.storage-heading { display: flex; align-items: center; gap: 10px; }
.storage-icon { display: grid; place-items: center; width: 29px; height: 29px; background: #49354b; color: var(--pink); border-radius: 4px; }
.storage-heading div { display: grid; gap: 2px; }
.storage-heading strong { font-size: 12px; }
.storage-heading small { color: #b7aabd; font-size: 9px; }
.storage-meter { height: 6px; margin: 17px 0 8px; background: #463a4e; border-radius: 10px; overflow: hidden; }
.storage-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--purple)); border-radius: inherit; }
.storage-meta { display: flex; justify-content: space-between; color: #b8aebb; font: 9px 'DM Mono'; }
.storage-action { width: 100%; margin-top: 14px; border: 1px solid #716076; color: #f8eef7; background: #3d3045; border-radius: 4px; padding: 8px; cursor: pointer; font: 600 10px Manrope; }
.storage-action:hover { border-color: var(--pink); color: var(--pink); }
.storage-card p { color: #a99bad; font-size: 9px; line-height: 1.6; margin: 12px 0 0; }
.rail-section { display: none; }

@media (max-width: 720px) {
  .feed { grid-template-columns: 1fr; gap: 12px; }
  .top-actions .share-link { display: none; }
  .media-grid.two img { height: 220px; }
}

@media (max-width: 720px) {
  .profile-gallery { height: 55px; }
  .profile-gallery img { height: 55px; }
}