/* ============================================
   Theme Tokens
============================================ */
[data-theme="dark"] {
  --bg-base: #1B262C;
  --bg-surface: #2A3740;
  --bg-surface-rgb: 42, 55, 64;
  --bg-gradient-end: #303e48;
  --bg-overlay: #394956;
  --text-primary: #BBE1FA;
  --text-muted: #94A3B8;
  --text-muted-rgb: 148, 163, 184;
  --text-on-media: #FFFFFF;
  --accent: #4DA3D9;
  --accent-rgb: 77, 163, 217;
  --accent-hover: #5BB5E8;
  --accent-subtle: #0f4c75;
  --red: #F87171;
  --green: #4ADE80;
  --yellow: #FBBF24;
}

[data-theme="light"] {
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-rgb: 255, 255, 255;
  --bg-gradient-end: #F1F5F9;
  --bg-overlay: #E8ECF0;
  --text-primary: #1E293B;
  --text-muted: #64748B;
  --text-muted-rgb: 100, 116, 139;
  --text-on-media: #FFFFFF;
  --accent: #3B82F6;
  --accent-rgb: 59, 130, 246;
  --accent-hover: #2563EB;
  --accent-subtle: #DBEAFE;
  --red: #DC2626;
  --green: #16A34A;
  --yellow: #CA8A04;
}

/* ============================================
   Reset & Base
============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  /* Raleway is the primary face and covers all Latin text; Noto Sans JP is
     the CJK fallback (i18n Slice E) — browsers only fall through to it for
     glyphs Raleway lacks, so Latin rendering is unchanged. Every other
     font-family in this sheet is `inherit`, so this one stack is the site. */
  font-family: "Raleway", "Noto Sans JP", sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* In standalone PWA mode the viewport is fixed (no browser chrome),
   so dvh is unnecessary and can trigger WebKit rendering bugs that
   break position:fixed elements.  Fall back to plain vh. */
@media (display-mode: standalone) {
  body {
    min-height: 100vh;
  }
}

a { color: inherit; text-decoration: none; }

/* ============================================
   Logo
============================================ */
.logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.logo-wordmark {
  height: 24px;
  width: auto;
  color: var(--text-primary);
  overflow: visible;
}

/* ============================================
   Top Bar — Main (non-sticky, logo + text)
============================================ */
.top-bar {
  position: relative;
  z-index: 100;
  background: var(--bg-base);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-theme="dark"] .top-bar {
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

[data-theme="light"] .top-bar {
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.top-bar .logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.top-bar .spacer { flex: 1; }

.top-bar .icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.top-bar .icon-btn:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
}

.top-bar .icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   Top Bar — Detail (sticky, back button + title)
============================================ */
.top-bar-detail {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-surface);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-theme="dark"] .top-bar-detail {
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

[data-theme="light"] .top-bar-detail {
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.top-bar-detail .spacer { flex: 1; }

.top-bar-detail .back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s ease;
}

.top-bar-detail .back-btn:hover { background: var(--bg-overlay); }

.top-bar-detail .back-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-bar-detail .bar-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.top-bar-detail .icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.top-bar-detail .icon-btn:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
}

.top-bar-detail .icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   Bottom Nav (floating pill)
============================================ */
.bottom-nav {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  z-index: 100;
  height: 52px;
  background: rgba(var(--bg-surface-rgb), 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(var(--text-muted-rgb), 0.12);
  border-radius: 28px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  /* GPU-promote to its own compositing layer so viewport resizes
     (e.g. mobile browser chrome appearing/disappearing) don't cause
     main-thread relayout jitter on the nav bar. */
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

[data-theme="dark"] .bottom-nav {
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

[data-theme="light"] .bottom-nav {
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

.bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s ease;
  position: relative;
}

.bottom-nav .nav-item:hover { color: var(--text-primary); }
.bottom-nav .nav-item.active { color: var(--accent); }

.bottom-nav .nav-item svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav .nav-item .badge-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  pointer-events: none;
}

.bottom-nav .nav-compose {
  color: var(--text-on-media);
}

.bottom-nav .nav-compose .compose-circle {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.bottom-nav .nav-compose:hover .compose-circle {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.bottom-nav .nav-compose .compose-circle svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}

/* Hide bottom nav on desktop */
@media (min-width: 768px) {
  .bottom-nav { display: none; }
}

/* ============================================
   Smoke Test Page
============================================ */
.smoke-test {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px 100px;
  text-align: center;
  gap: 24px;
}

.smoke-test h1 {
  font-size: 24px;
  font-weight: 800;
}

.smoke-test .status {
  font-size: 14px;
  color: var(--text-muted);
}

.smoke-test .theme-toggle {
  display: flex;
  gap: 8px;
}

.smoke-test .theme-toggle button {
  padding: 8px 20px;
  border-radius: 10px;
  border: 1px solid rgba(var(--text-muted-rgb), 0.3);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.smoke-test .theme-toggle button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.smoke-test .theme-toggle button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============================================
   Feed Layout
============================================ */
.feed {
  padding-bottom: 80px;
}

.feed.padded {
  padding: 12px 12px 80px;
}

.feed.padded .crow {
  margin-bottom: 12px;
}

.tag-feed { padding-top: 12px; }
.artist-feed { padding-top: 12px; }

.feed-viewport {
  /* overflow:hidden clips the feed-panel slide animation (translateX off-screen).
     Note this also clips card hover shadows at the viewport's side edges; that's
     harmless on mobile/single-column (feed is centered in a wide viewport) but
     needs relaxing in the desktop two-column layout — see the 900px rule below. */
  overflow: hidden;
  position: relative;
}

.feed-panel {
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-anchor: auto;
}

.feed-panel.slide-out-left {
  transform: translateX(-100%);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.feed-panel.slide-out-right {
  transform: translateX(100%);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.feed-panel.slide-in-right {
  animation: slideInRight 0.3s ease forwards;
}

.feed-panel.slide-in-left {
  animation: slideInLeft 0.3s ease forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@media (min-width: 768px) {
  .feed {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 40px;
  }
  .feed.padded {
    padding-bottom: 40px;
  }
}

/* ============================================
   Feed Tabs
============================================ */
.feed-tabs {
  display: flex;
  background: var(--bg-surface);
  position: relative;
  z-index: 99;
}

[data-theme="dark"] .feed-tabs {
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

[data-theme="light"] .feed-tabs {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.feed-tabs .tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  transition: color 0.15s ease;
}

.feed-tabs .tab:hover {
  color: var(--text-primary);
}

.feed-tabs .tab.active {
  color: var(--text-primary);
}

.feed-tabs .tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
}

@media (min-width: 768px) {
  .feed-tabs {
    background: var(--bg-base);
    box-shadow: none;
  }
}

/* ============================================
   Crow Card
============================================ */
.crow {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-gradient-end) 100%);
  border-radius: 20px;
  position: relative;
  transition: box-shadow 0.15s ease;
}

[data-theme="dark"] .crow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .crow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .crow:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .crow:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.crow .media-gradient {
  border-radius: 20px 20px 0 0;
  min-height: 85px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 10px 16px;
  overflow: hidden;
}

/* Hero thumbnail — blurred background */
.crow .media-gradient > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px);
  transform: scale(1.1);
}

.crow .media-gradient .scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.crow .media-gradient .info {
  color: var(--text-on-media);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.crow .media-gradient .platforms {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.85;
  margin-bottom: 4px;
}

.crow .media-gradient .platform-link {
  color: inherit;
  text-decoration: none;
}

.crow .media-gradient .platform-link:hover {
  text-decoration: underline;
}

.crow .media-gradient .title {
  font-size: 15px;
  font-weight: 700;
}

.crow .media-gradient .artist {
  font-size: 13px;
  opacity: 0.9;
}

/* Artist name as a link to the /artist/<name>/ feed (rendered on the
   expanded/detail card). Inherits the text-on-media artist color; hover
   underline signals clickability without risking contrast over album art. */
.artist-link {
  color: inherit;
  text-decoration: none;
}
.artist-link:hover {
  text-decoration: underline;
}
.artist-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Avatar hero variant (text-only post with profile pic) */
.crow .media-gradient.avatar-hero {
  min-height: 40px;
  overflow: hidden;
}

.crow .media-gradient.avatar-hero > img {
  filter: blur(6px) saturate(1.3) brightness(0.85);
  object-position: center 35%;
}

/* Gradient-only variant (no media, no avatar) */
.crow .media-gradient.gradient-only {
  min-height: 40px;
  background: linear-gradient(135deg, var(--accent-subtle), var(--bg-overlay));
  padding: 0;
}

.crow .spotify-media-hero {
  min-height: 116px;
  border-radius: 0 20px 0 0;
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  overflow: hidden;
  background: linear-gradient(135deg, #191414 0%, var(--bg-surface) 100%);
}

/* Reshare hero: the nested original-post block makes the card taller than the
   116px art column, so the (uncropped, object-fit: contain) square art centers
   vertically and no longer sits flush in the squared top-left corner. Round the
   top-left to match the floating art rather than cropping/clipping the art to
   fill the corner — Spotify's asset rules require the artwork stay square,
   uncropped, unobstructed, and unblurred. */
.crow .spotify-media-hero.spotify-reshare-card {
  border-radius: 20px 20px 0 0;
}

.crow .spotify-media-hero[data-href] {
  cursor: pointer;
}

.crow .spotify-art-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  /* Transparent so the hero's artwork-sampled gradient fills the column
     behind/around the art (e.g. object-fit: contain letterbox gaps on tall
     reshare cards) instead of solid black. The art is never overlaid. */
  background: transparent;
}

.crow .spotify-album-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  background: transparent;
}

.crow .spotify-hero-info {
  min-width: 0;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 16px;
}

.crow .spotify-media-hero .title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crow .spotify-media-hero .artist {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crow .spotify-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 4px;
}

.spotify-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(30, 215, 96, 0.16);
  color: #1ed760;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.spotify-hero-cta:hover {
  background: rgba(30, 215, 96, 0.24);
}

.spotify-cta-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* Apple Music placeholder — branded CTA shown until MusicKit enrichment lands */
.crow .media-gradient.apple-music-placeholder {
  min-height: 64px;
  align-items: center;
  background: linear-gradient(135deg, #fa2649 0%, #b5179e 55%, var(--bg-surface) 100%);
  padding: 12px 16px;
}

.crow .media-gradient.apple-music-placeholder[data-href] {
  cursor: pointer;
}

.apple-music-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #d60322;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.apple-music-cta:hover {
  background: #fff;
}

.apple-music-cta-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.crow .spotify-media-hero .platforms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

.crow .spotify-media-hero .platform-link {
  color: inherit;
  text-decoration: none;
}

.crow .spotify-media-hero .platform-link:hover {
  text-decoration: underline;
}

.crow .spotify-media-hero .original-post {
  margin-top: 8px;
  background: var(--bg-overlay);
  border-radius: 12px;
  padding: 9px 11px;
}

.crow .spotify-media-hero .original-post .op-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crow .spotify-media-hero .original-post .op-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.16);
  flex-shrink: 0;
  overflow: hidden;
}

.crow .spotify-media-hero .original-post .op-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crow .spotify-media-hero .original-post .op-author {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
}

.crow .spotify-media-hero .original-post .op-time {
  color: var(--text-muted);
  font-size: 11px;
}

.crow .spotify-media-hero .original-post .op-body {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
}

@media (max-width: 420px) {
  .crow .spotify-media-hero {
    grid-template-columns: 104px 1fr;
  }

  .crow .spotify-hero-info {
    padding: 12px 14px;
  }

  .crow .spotify-media-hero .title {
    font-size: 14px;
  }
}

/* ============================================
   Crow Card Content
============================================ */
.crow .content {
  padding: 16px 16px 4px;
  position: relative;
}

.crow .more-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
}

.crow .more-btn {
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crow .more-btn:hover {
  background: var(--bg-overlay);
}

.crow .more-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.crow .post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.crow .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-subtle));
  flex-shrink: 0;
  overflow: hidden;
}

.crow .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crow .avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.crow .avatar-placeholder svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crow .author-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.crow .author {
  font-weight: 600;
  font-size: 15px;
}

.crow .handle {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

.crow .time {
  font-size: 13px;
  color: var(--text-muted);
}

.crow .post-body {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 6px;
  word-break: break-word;
}

.crow .post-body.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.crow .post-body[data-expanded="true"] {
  cursor: pointer;
}

.crow .post-body a,
.crow .hashtag,
.crow .mention {
  color: var(--accent);
}

.hashtag,
.mention {
  color: var(--accent);
  font-weight: 600;
  background: var(--bg-overlay);
  border-radius: 10px;
  padding: 0 6px;
}

/* ============================================
   Action Bar
============================================ */
.crow .actions {
  display: flex;
  color: var(--text-muted);
  font-size: 14px;
}

.crow .actions .action {
  /* Native <button> reset so the control is keyboard-operable and
     screen-reader nameable while rendering identically to the old
     <span>: strip the UA button chrome (background/border/font/color)
     and inherit the surrounding .actions typography and muted color. */
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.crow .actions .action:hover {
  color: var(--text-primary);
}

.crow .actions .action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.crow .actions .action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crow .actions .action.starred {
  color: var(--yellow);
}

.crow .actions .action.starred svg {
  fill: var(--yellow);
}

.crow .actions .action.commented {
  color: var(--yellow);
}

.crow .actions .action.reshared {
  color: var(--yellow);
}

.crow .actions .action.reshared svg {
  stroke-width: 2.5;
}

/* ============================================
   Reshare Elements
============================================ */
.crow .reshare-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  margin-bottom: 12px;
}

.crow .reshare-label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crow .media-gradient[data-href] {
  cursor: pointer;
}

.crow .media-gradient:has(.original-post) {
  min-height: 180px;
}

.crow .media-gradient:has(.original-post) .scrim {
  height: 100%;
}

.crow .media-gradient .original-post {
  color: var(--text-on-media);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 10px 14px;
}

.crow .media-gradient .original-post .op-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.crow .media-gradient .original-post .op-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
  overflow: hidden;
}

.crow .media-gradient .original-post .op-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crow .media-gradient .original-post .op-author {
  font-weight: 600;
  font-size: 13px;
}

.crow .media-gradient .original-post .op-time {
  font-size: 13px;
  opacity: 0.7;
}

.crow .media-gradient .original-post .op-body {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
}

/* Reshare of a text-only post: original post IS the hero (no song info above it) */
.crow .media-gradient.text-reshare {
  align-items: stretch;
  padding: 14px;
}

.crow .media-gradient.text-reshare:has(.original-post) {
  min-height: 0;
}

.crow .media-gradient.text-reshare .info {
  width: 100%;
}

.crow .media-gradient.text-reshare .original-post {
  margin-top: 0;
  width: 100%;
  padding: 12px 14px;
}

.crow .media-gradient.text-reshare .original-post .op-body {
  font-size: 14px;
  opacity: 0.95;
}

/* ============================================
   Skeleton Loader
============================================ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skel-bone {
  background: var(--bg-overlay);
  background-image: linear-gradient(90deg, var(--bg-overlay) 0%, rgba(var(--text-muted-rgb), 0.12) 50%, var(--bg-overlay) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 6px;
}

.crow-skeleton {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-gradient-end) 100%);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 12px;
}

[data-theme="dark"] .crow-skeleton {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .crow-skeleton {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.crow-skeleton .skel-hero {
  min-height: 140px;
  border-radius: 20px 20px 0 0;
}

.crow-skeleton .skel-content {
  padding: 16px;
}

.crow-skeleton .skel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.crow-skeleton .skel-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crow-skeleton .skel-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.crow-skeleton .skel-name {
  height: 12px;
  width: 45%;
}

.crow-skeleton .skel-handle {
  height: 10px;
  width: 30%;
}

.crow-skeleton .skel-body-line {
  height: 13px;
  margin-bottom: 8px;
}

.crow-skeleton .skel-body-line:nth-child(1) { width: 100%; }
.crow-skeleton .skel-body-line:nth-child(2) { width: 85%; }
.crow-skeleton .skel-body-line.short { width: 60%; }

.crow-skeleton .skel-actions {
  display: flex;
  gap: 0;
  margin-top: 4px;
}

.crow-skeleton .skel-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
}

/* ============================================
   Welcome Banner
============================================ */
.welcome-banner {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-gradient-end) 100%);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
}

[data-theme="dark"] .welcome-banner {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .welcome-banner {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Drawer wraps the main content (headline, CTA, dismiss) */
.welcome-drawer {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
  width: 100%;
}

.welcome-drawer > .welcome-main {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 20px 8px;
  position: relative;
  transition: opacity 0.3s ease, padding 0.3s ease;
}

/* Collapsed state — drawer closes, content fades, padding collapses */
.welcome-banner.collapsed .welcome-drawer {
  grid-template-rows: 0fr;
}

.welcome-banner.collapsed .welcome-drawer > .welcome-main {
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Fully dismissed — hide entire banner including legal links */
.welcome-banner.dismissed {
  display: none;
}

.welcome-banner.collapsed {
  cursor: pointer;
}

.welcome-banner.collapsed::before {
  content: "Sign in options";
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px 0;
}

.welcome-headline {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.welcome-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 260px);
}

.welcome-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease;
  font-family: inherit;
}

.welcome-cta:hover {
  background: var(--accent-hover);
}

.welcome-cta-spotify {
  background: #1ED760;
  color: #111;
}

.welcome-cta-spotify:hover {
  background: #1DB954;
}

/* Apple brand guidance: Sign in with Apple button is black with white text. */
.welcome-cta-apple {
  background: #000;
  color: #fff;
}

.welcome-cta-apple:hover {
  background: #1a1a1a;
}

.welcome-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.welcome-dismiss:hover {
  background: var(--bg-overlay);
}

.welcome-legal {
  font-size: 11px;
  color: var(--text-muted);
  padding: 10px 20px;
}

.welcome-legal a {
  color: var(--text-muted);
  text-decoration: none;
}

.welcome-legal a:hover {
  text-decoration: underline;
}

/* ============================================
   End of Feed
============================================ */
.end-of-feed {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ============================================
   Toast
============================================ */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border: 1px solid rgba(var(--text-muted-rgb), 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (min-width: 768px) {
  .toast { bottom: 24px; }
}

/* ============================================
   Detail Page Layout
============================================ */
.post-page {
  padding: 12px 16px 80px;
}

.post-page .crow {
  margin-bottom: 0;
}

.duplicate-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(var(--text-muted-rgb), 0.08);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}

.duplicate-warning-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  stroke: var(--yellow, #FACC15);
  stroke-width: 2;
  fill: none;
}

.duplicate-warning strong {
  display: block;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .post-page {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   Pinned Post
============================================ */
[data-theme="light"] .crow.pinned {
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3), 0 1px 3px rgba(var(--accent-rgb), 0.2);
}
[data-theme="dark"] .crow.pinned {
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4), 0 1px 4px rgba(var(--accent-rgb), 0.3);
}

.crow .pinned-badge,
.crow .saved-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.crow .pinned-badge + .saved-badge {
  right: 36px;
}

.crow .pinned-badge svg,
.crow .saved-badge svg {
  width: 20px; height: 20px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.crow .pinned-badge svg {
  fill: var(--accent); stroke: var(--accent);
}

.crow .saved-badge svg {
  fill: var(--yellow); stroke: var(--yellow);
}

/* ============================================
   Comments Section — Animated Drawer
============================================ */
.comments-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.comments-drawer > .comments {
  overflow: hidden;
  min-height: 0;
  padding: 0 16px;
  border-top: 1px solid transparent;
  margin-top: 0;
  margin-bottom: -8px;
  transition: border-top-color 0.3s ease, margin-top 0.3s ease;
}

.comments-drawer.open {
  grid-template-rows: 1fr;
}

.comments-drawer.open > .comments {
  overflow: visible;
  padding-bottom: 12px;
  border-top-color: rgba(var(--text-muted-rgb), 0.3);
  margin-top: 4px;
}

/* Loading/error states for lazy-loaded comments */
.comments-loading {
  padding: 24px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.comments-error {
  padding: 24px 0;
  text-align: center;
  color: var(--red);
  font-size: 14px;
}

.crow .comment {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}

.crow .comment .avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.crow .comment .comment-content {
  flex: 1;
  min-width: 0;
}

.crow .comment .comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.crow .comment .comment-author {
  font-weight: 600;
  font-size: 13px;
}

.crow .comment .comment-time {
  font-size: 13px;
  color: var(--text-muted);
}

.crow .comment .comment-text {
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

.crow .comment .comment-text p {
  margin: 0;
}

.crow .comment .comment-more {
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.crow .comment .comment-star {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
}
.crow .comment .comment-star svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crow .comment .comment-star .comment-star-count {
  font-size: 13px;
}
.crow .comment .comment-star.liked {
  color: var(--yellow);
}
.crow .comment .comment-star.liked svg {
  fill: var(--yellow);
}

.crow .comment .comment-more:hover {
  background: var(--bg-overlay);
}

.crow .comment .comment-more svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ============================================
   Comment Input
============================================ */
.crow .comment-input {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 12px;
}

.crow .comment-input .avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.crow .comment-input .input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crow .comment-input .input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.crow .comment-input .input-field {
  flex: 1;
  background: var(--bg-overlay);
  border: none;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  min-height: 36px;
}

.crow .comment-input .input-field::placeholder {
  color: var(--text-muted);
}

.crow .comment-input .input-field:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.crow .comment-input textarea.input-field {
  border-radius: 16px;
  min-height: 60px;
  max-height: 120px;
  padding: 10px 14px;
  resize: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

.crow .comment-input textarea.input-field::-webkit-scrollbar {
  width: 6px;
}

.crow .comment-input textarea.input-field::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.crow .comment-input textarea.input-field::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 3px;
}

/* Logged-out variant */
.crow .comment-input.comment-input-logged-out {
  justify-content: center;
}

.crow .comment-input .sign-in-link {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.crow .comment-input .sign-in-link:hover {
  text-decoration: underline;
}

/* ============================================
   Submit Button
============================================ */
.crow .comment-input .submit-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.crow .comment-input .submit-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.crow .comment-input .submit-btn:disabled {
  background: var(--bg-overlay);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

.crow .comment-input .submit-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crow .comment-input .submit-btn.submitting svg {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   Character Count
============================================ */
.crow .comment-input .char-count {
  font-size: 11px;
  text-align: right;
  padding-right: 4px;
}

.crow .comment-input .char-count.warning {
  color: var(--yellow);
}

.crow .comment-input .char-count.error {
  color: var(--red);
}

/* ============================================
   Error Message
============================================ */
.crow .comment-input .error-message {
  font-size: 12px;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 6px;
}

.crow .comment-input .error-message svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ============================================
   Edit Mode
============================================ */
.crow .comment.editing .edit-input-wrap {
  display: block !important;
}

.crow .comment .edit-input {
  background: var(--bg-overlay);
  border: none;
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  width: 100%;
  min-height: 36px;
  outline: 2px solid var(--accent);
  resize: none;
}

.crow .post-edit-input {
  background: var(--bg-overlay);
  border: none;
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  width: 100%;
  min-height: 60px;
  outline: 2px solid var(--accent);
  resize: vertical;
  box-sizing: border-box;
}

.crow .comment .edit-actions,
.crow .post-edit-wrap .edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.crow .comment .edit-actions .icon-btn,
.crow .post-edit-wrap .edit-actions .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.crow .comment .edit-actions .icon-btn svg,
.crow .post-edit-wrap .edit-actions .icon-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crow .comment .edit-actions .icon-btn.save,
.crow .post-edit-wrap .edit-actions .icon-btn.save {
  background: var(--accent);
  color: white;
}

.crow .comment .edit-actions .icon-btn.save:hover,
.crow .post-edit-wrap .edit-actions .icon-btn.save:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.crow .comment .edit-actions .icon-btn.cancel,
.crow .post-edit-wrap .edit-actions .icon-btn.cancel {
  background: var(--bg-overlay);
  color: var(--text-muted);
}

.crow .comment .edit-actions .icon-btn.cancel:hover,
.crow .post-edit-wrap .edit-actions .icon-btn.cancel:hover {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

/* ============================================
   Dropdown Menu
============================================ */
.dropdown-wrap {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-overlay);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 120px;
  overflow: hidden;
  z-index: 10;
}


.dropdown-menu .menu-item {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  white-space: nowrap;
}

.dropdown-menu .menu-item:hover {
  background: var(--accent-subtle);
}

.dropdown-menu .menu-item.destructive {
  color: var(--red);
}

.dropdown-menu .menu-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   Delete Modal
============================================ */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--bg-surface);
  border-radius: 16px;
  padding: 20px;
  max-width: 320px;
  width: 90%;
  color: var(--text-primary);
}

.modal h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modal p {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.modal .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.auth-choice-backdrop[hidden] {
  display: none;
}

.auth-choice-modal {
  position: relative;
  max-width: 360px;
  padding: 24px;
}

.auth-choice-modal h3 {
  margin: 0 36px 8px 0;
}

.auth-choice-modal p {
  margin: 0 0 18px;
}

.auth-choice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-choice-close:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
}

.auth-choice-close svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-choice-provider {
  width: 100%;
  border-radius: 10px;
  min-height: 44px;
}

/* --- Bottom-Sheet variant (report/feedback modal) --- */
.modal-backdrop.bottom-sheet {
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop.bottom-sheet .modal {
  max-width: 480px;
  width: 100%;
  border-radius: 16px 16px 0 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* --- Reshare Modal (floating card, positioned toward top) --- */
.reshare-backdrop {
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.reshare-backdrop .modal {
  max-width: 480px;
  width: calc(100% - 32px);
  border-radius: 16px;
  max-height: 80vh;
  overflow-y: auto;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  animation: modal-scale-in 0.2s ease-out;
}

.reshare-backdrop.closing .modal {
  animation: modal-scale-out 0.15s ease-in forwards;
}

.reshare-label-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  padding: 14px 16px 0;
}

.reshare-label-header svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reshare-embed {
  margin: 8px 16px 0;
  border-radius: 14px;
  overflow: hidden;
}

.reshare-hero {
  min-height: 160px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  overflow: hidden;
}

.reshare-hero-nothumb {
  min-height: 100px;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-gradient-end) 100%);
}

.reshare-hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(6px);
  transform: scale(1.1);
}

.reshare-hero.spotify-reshare-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(108px, 36%) 1fr;
  align-items: stretch;
  padding: 0;
  background: linear-gradient(135deg, #191414 0%, var(--bg-surface) 100%);
}

.spotify-reshare-art-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #191414;
}

.spotify-reshare-art {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  background: #191414;
}

.spotify-reshare-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px;
  color: var(--text-primary);
}

.spotify-reshare-hero .reshare-hero-title {
  color: var(--text-primary);
  text-shadow: none;
}

.spotify-reshare-hero .reshare-hero-artist {
  color: var(--text-secondary);
  text-shadow: none;
}

.reshare-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
}

.reshare-hero-info {
  position: relative;
  z-index: 1;
  color: var(--text-on-media);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  width: 100%;
}

.reshare-hero-platform {
  font-size: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 3px;
}

/* The no-thumbnail hero sits on a light surface gradient, so the default
   white-on-media chrome color is unreadable — match the op text treatment. */
.reshare-hero-nothumb .reshare-hero-platform {
  color: var(--text-secondary);
  text-shadow: none;
  opacity: 1;
}

.reshare-hero-nothumb .apple-music-cta {
  margin-bottom: 10px;
}

.reshare-hero-title {
  font-size: 14px;
  font-weight: 700;
}

.reshare-hero-artist {
  font-size: 11px;
  opacity: 0.9;
  margin-top: 1px;
}

.reshare-hero-op {
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 10px 14px;
}

.reshare-hero-op-nothumb {
  background: var(--bg-overlay);
  backdrop-filter: none;
}

.reshare-hero-op-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reshare-hero-op-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  overflow: hidden;
}

.reshare-hero-op-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reshare-hero-op-author {
  font-weight: 600;
  font-size: 13px;
}

.reshare-hero-op-time {
  font-size: 11px;
  opacity: 0.7;
}

.reshare-hero-op-body {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
  margin-top: 6px;
}

.reshare-compose-body {
  padding: 12px 16px;
}

.reshare-textarea {
  width: 100%;
  min-height: 72px;
  background: var(--bg-overlay);
  border: none;
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: outline-color 0.15s ease;
}

.reshare-textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.reshare-textarea::placeholder {
  color: var(--text-muted);
}

.reshare-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px 16px;
}

.reshare-close-btn,
.reshare-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.reshare-close-btn {
  background: var(--bg-overlay);
  color: var(--text-muted);
}

.reshare-close-btn:hover {
  background: var(--bg-base);
}

.reshare-send-btn {
  background: var(--accent);
  color: #fff;
}

.reshare-send-btn:hover {
  background: var(--accent-hover);
}

.reshare-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-secondary {
  background: var(--bg-overlay);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--accent-subtle);
}

.btn-danger {
  background: var(--red);
  color: white;
}

.btn-danger:hover {
  opacity: 0.9;
}

/* ============================================
   Profile Page
============================================ */
.profile-banner {
  height: 160px;
  background: linear-gradient(135deg, var(--accent-subtle), var(--accent));
  position: relative;
  overflow: hidden;
}

.profile-banner > img {
  width: 100%; height: 100%; object-fit: cover;
}

.profile-banner-tiles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.profile-banner-tile {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 0;
}

.profile-banner-tile-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
}

.profile-banner-tile-badge {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 16px; height: 16px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.profile-section {
  padding: 0 16px;
  position: relative;
}

.platform-link-icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -2px;
}

.profile-avatar-wrap {
  margin-top: -40px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.profile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-subtle));
  border: 4px solid var(--bg-base);
  overflow: hidden;
}

.profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.profile-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; margin-top: 40px; }

.btn-edit-profile {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1.5px solid rgba(var(--text-muted-rgb), 0.4);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-edit-profile:hover {
  border-color: var(--text-primary);
  background: var(--bg-overlay);
}

.btn-follow {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-follow:hover { background: var(--accent-hover); }

.btn-follow.following {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding: 5px 12px; /* 6px minus 1.5px border */
}

.btn-outline {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--text-muted-rgb), 0.4);
  background: transparent;
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-outline:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--bg-overlay);
}

.btn-outline svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.profile-name { font-size: 22px; font-weight: 800; margin-bottom: 2px; }

.profile-handle { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }

.profile-bio { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 14px;
}

.profile-tag {
  display: inline-block;
}

.profile-meta {
  display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}

.profile-meta .meta-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--text-muted);
}

.profile-meta .meta-item svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.profile-meta .meta-item strong {
  color: var(--text-primary); font-weight: 700;
}

.profile-meta a.meta-link {
  text-decoration: none;
  color: var(--text-muted);
}
.profile-meta a.meta-link:hover {
  text-decoration: underline;
}

.profile-stats {
  display: flex; gap: 20px; margin-bottom: 16px;
}

.profile-stats .stat-num { font-weight: 700; }
.profile-stats .stat-label { color: var(--text-muted); font-size: 15px; }

.follow-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--text-muted-rgb), 0.25);
  border-radius: 10px;
  background: var(--bg-overlay);
}

.follow-cta-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
}

.follow-cta-btn { flex-shrink: 0; }

.profile-tabs {
  display: flex;
  border-bottom: 1px solid rgba(var(--text-muted-rgb), 0.2);
  margin: 0 -16px;
  padding: 0 16px;
}

.profile-tabs .tab {
  flex: 1; text-align: center;
  padding: 10px 0; font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); cursor: pointer;
  position: relative;
}

.profile-tabs .tab.active { color: var(--text-primary); }

.profile-tabs .tab.active::after {
  content: ""; position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 3px; background: var(--accent);
  border-radius: 3px 3px 0 0;
}

/* Profile stat links */
.profile-stats .stat-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.profile-stats .stat-link:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .profile-section {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .profile-banner {
    max-width: 560px;
    margin: 0 auto;
    border-radius: 0 0 16px 16px;
  }
}

/* ============================================
   User List Page (Following / Followers)
============================================ */
.user-list-page {
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .user-list-page {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ============================================
   User Card (Small)
============================================ */
.user-card-small {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transition: background 0.15s ease;
}

.user-card-small:hover {
  background: var(--bg-overlay);
}

.user-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.user-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-subtle));
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-card-avatar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-card-info {
  flex: 1;
  min-width: 0;
}

.user-card-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-handle {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   Settings Page
============================================ */
.settings-page {
  padding-bottom: 80px;
}

.settings-group {
  padding: 0 16px;
  margin-bottom: 24px;
}

.settings-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 16px 0 8px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--text-muted-rgb), 0.12);
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.settings-item.settings-item-static {
  cursor: default;
}

.settings-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.settings-item-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-item-content {
  flex: 1;
  min-width: 0;
}

.settings-item-label {
  font-size: 15px;
  font-weight: 600;
}

.settings-item-value {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-item-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.settings-item-chevron svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-item.open .settings-item-chevron {
  transform: rotate(90deg);
}

.settings-item-destructive .settings-item-label,
.settings-item-destructive .settings-item-icon {
  color: var(--red);
}

/* Push notification settings */
.settings-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-item-divider {
  border-bottom: 1px solid rgba(var(--text-muted-rgb), 0.12);
  margin: 0;
}

.push-categories {
  padding-left: 32px;
  transition: opacity 0.15s ease;
}

.push-categories[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.settings-action-button {
  background: var(--bg-overlay);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.settings-action-button:hover:not(:disabled) {
  background: var(--accent-subtle);
}

.settings-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-action-button.settings-action-button-danger {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

.settings-action-button.settings-action-button-danger:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  opacity: 0.9;
}

.push-status {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0 0;
}

.push-status.push-status-error {
  color: var(--red);
}

.settings-inline-editor {
  padding: 12px 0 16px;
}

.settings-inline-editor .editor-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-overlay);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
}

.settings-inline-editor .editor-input:focus {
  border-color: var(--accent);
}

.settings-inline-editor .editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.settings-inline-editor .editor-feedback {
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
}

.settings-inline-editor .editor-feedback.success { color: var(--green); }
.settings-inline-editor .editor-feedback.error { color: var(--red); }

.settings-inline-editor .editor-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.settings-inline-editor .username-status {
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }

.cooldown-box {
  background: rgba(var(--text-muted-rgb), 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--yellow);
}

.delete-verify-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.delete-verify-section .editor-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin-top: 0;
}

.verification-input {
  flex: 0 1 180px;
  width: 180px;
  max-width: 100%;
  letter-spacing: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .delete-verify-section {
    justify-content: stretch;
  }

  .delete-verify-section .verification-input {
    flex-basis: 100%;
    width: 100%;
  }

  .delete-verify-section .editor-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.theme-toggle-pills {
  display: flex;
  gap: 4px;
  background: var(--bg-overlay);
  border-radius: 20px;
  padding: 3px;
}

.theme-pill {
  width: 36px;
  height: 32px;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.theme-pill svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-pill.active {
  background: var(--accent);
  color: #fff;
}

/* Language picker (Settings → Preferences, i18n Slice B) reuses the
   theme-pill shell with text labels instead of icons. */
.theme-pill.lang-pill {
  width: auto;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.settings-footer {
  font-size: 12px;
  color: var(--text-muted);
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.settings-footer a {
  color: var(--text-muted);
  text-decoration: none;
}
.settings-footer a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .settings-group {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .settings-footer {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   Music Section (Settings)
============================================ */
.music-empty-state {
  cursor: default;
  border-bottom: none;
  padding-bottom: 4px;
}

/* The active platform is rendered first in the DOM (detail_settings.html), so a
   top-border separator on every block except the first reads correctly and
   keeps focus/reading order in sync with the visual order. */
.music-provider-block {
  padding: 12px 0;
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.12);
}

.music-provider-block:first-child {
  border-top: none;
}

.music-provider-message {
  margin-top: 4px;
}

.music-connect-disclosure {
  padding: 8px 0 0;
}

.music-connect-disclosure > summary {
  list-style: none;
}

.music-connect-disclosure > summary::-webkit-details-marker {
  display: none;
}

.music-connect-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 0;
  color: var(--text-primary);
  cursor: pointer;
}

.music-connect-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-overlay);
  color: var(--accent);
}

.music-connect-summary-icon svg,
.music-connect-summary-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.music-connect-summary-content {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.music-connect-summary-label {
  font-size: 14px;
  font-weight: 600;
}

.music-connect-summary-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.music-connect-summary-chevron {
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.music-connect-disclosure[open] .music-connect-summary-chevron {
  transform: rotate(90deg);
}

.music-platform-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.music-ph-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.music-ph-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.music-ph-content { flex: 1; min-width: 0; }
.music-ph-name { font-size: 15px; font-weight: 600; }
.music-ph-status { font-size: 13px; color: var(--text-muted); }
.music-ph-status.error { color: var(--red); }

/* Platform picker (disconnected state) */
.music-platform-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
.music-po {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-overlay);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
}
.music-po:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}
/* Apple Music connect is a JS-driven <button> (not an OAuth <a>); reset the
   native button chrome so it matches the anchor .music-po rows. */
button.music-po {
  width: 100%;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
.music-apple-connect[disabled] { opacity: 0.6; cursor: default; }
/* Guided post-sign-in connect step: a brief attention pulse on the Apple Music
   button when the settings page is opened with ?connect=apple_music. */
.music-po-nudge {
  border-color: rgba(var(--accent-rgb), 0.5);
  animation: music-po-nudge-pulse 1.2s ease-in-out 2;
}
@keyframes music-po-nudge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .music-po-nudge { animation: none; }
}
.music-po-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.music-po-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.music-po-content {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}
.music-po-name { font-size: 15px; font-weight: 600; }
.music-po-desc { font-size: 12px; color: var(--text-muted); }
.music-po-arrow { color: var(--text-muted); }
.music-po-arrow svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Alert boxes */
.music-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 8px;
}
.music-alert svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.music-alert-content { flex: 1; }
.music-alert-warning {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: var(--yellow);
}
.music-alert-error {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: var(--red);
}

/* Action button rows. Buttons themselves use the standard .btn family
   (see STYLE_GUIDE.md); these rules only lay out the rows. */
.music-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 0;
  flex-wrap: wrap;
}

/* Music action buttons use the standard .btn text-button shape (per the style
   guide), with a small leading glyph laid out via inline-flex. */
#music-platform-settings .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#music-platform-settings .btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Make active" and "Set up playlists" sit on the right with their explanatory
   note to the left, on the same row. */
.music-make-active-row,
.music-setup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.music-make-active-note,
.music-setup-note {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.music-make-active-row .btn,
.music-setup-row .btn {
  flex-shrink: 0;
}

/* Toggle switch */
.music-toggle {
  width: 44px; height: 24px;
  background: var(--bg-overlay);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.music-toggle.on { background: var(--accent); }
.music-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.music-toggle.on::after { transform: translateX(20px); }

/* Playlist cards */
/* Two-column box: title + meta upper-left, actions top-right (directly beside
   the title — the actions column spans both text rows and aligns to the top, so
   it never reserves empty space above itself). */
.music-playlist-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "header actions"
    "meta   actions";
  column-gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--text-muted-rgb), 0.1);
}
.music-playlist-card:last-child { border-bottom: none; }
.music-pc-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.music-pc-label { font-size: 14px; font-weight: 600; }
.music-pc-name {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.music-pc-name svg {
  width: 12px; height: 12px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.music-pc-meta {
  grid-area: meta;
  font-size: 12px;
  color: var(--text-muted);
}
/* Actions occupy the right column, top-aligned beside the title. Sync Now on
   top, then the auto-sync label sitting directly left of its toggle. */
.music-pc-actions {
  grid-area: actions;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.music-pc-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.music-pc-sync-label {
  font-size: 13px;
  color: var(--text-muted);
}
.music-playlist-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Active music platform (C4) */
.music-active-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 0 8px;
}
.music-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.music-active-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.music-active-desc {
  font-size: 12px;
  color: var(--text-muted);
}
.music-active-locked {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
/* Global "playlist sync paused" banner (C4) */
.sync-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.sync-banner.dismissed { display: none; }
.sync-banner-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sync-banner-text { flex: 1; min-width: 0; }
.sync-banner-text a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.sync-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}
.sync-banner-dismiss:hover { opacity: 1; }
.sync-banner-error {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.25);
  color: var(--red);
}
.sync-banner-warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.25);
  color: var(--yellow);
}

/* ============================================
   Legal Pages (Privacy, TOS)
============================================ */
.legal-page {
  padding: 16px;
  padding-bottom: 80px;
  max-width: 720px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
}
.legal-page [data-custom-class='body'] *,
.legal-page [data-custom-class='body_text'] *,
.legal-page [data-custom-class='body_text'] {
  color: var(--text-secondary) !important;
  font-family: inherit !important;
}
.legal-page [data-custom-class='title'] *,
.legal-page [data-custom-class='heading_1'] *,
.legal-page [data-custom-class='heading_2'] * {
  color: var(--text-primary) !important;
  font-family: inherit !important;
}
.legal-page [data-custom-class='link'] *,
.legal-page [data-custom-class='link'] {
  color: var(--accent) !important;
}
.legal-page a {
  color: var(--accent);
}

/* ============================================
   Edit Profile Page
============================================ */
.edit-profile-page {
  padding-bottom: 160px;
}

.edit-banner {
  height: 160px;
  background: linear-gradient(135deg, var(--accent-subtle), var(--accent));
  position: relative;
  overflow: hidden;
}

.edit-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.camera-overlay:hover {
  background: rgba(0, 0, 0, 0.55);
}

.camera-overlay svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgba(255,255,255,0.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coming-soon-label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.edit-avatar-wrap {
  padding: 0 16px;
  margin-top: -40px;
  margin-bottom: 16px;
}

.edit-avatar {
  width: 80px;
  height: 80px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-subtle));
  border: 4px solid var(--bg-base);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.edit-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-avatar .camera-overlay {
  border-radius: 50%;
}

.edit-profile-form {
  padding: 0 16px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--bg-overlay);
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  transition: outline-color 0.15s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.edit-profile-page .char-count {
  font-size: 11px;
  text-align: right;
  color: var(--text-muted);
  margin-top: 4px;
}

.edit-profile-page .char-count.warning { color: var(--yellow); }
.edit-profile-page .char-count.over { color: var(--red); }

/* ============================================
   Sticky Submit Strip
============================================ */
.sticky-submit {
  position: fixed;
  bottom: 72px;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 12px 16px;
  background: rgba(var(--bg-surface-rgb), 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.12);
}

@media (min-width: 768px) {
  .sticky-submit {
    bottom: 0;
  }
}

.sticky-submit-btn {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: block;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.sticky-submit-btn:hover {
  background: var(--accent-hover);
}

.sticky-submit-btn:active {
  transform: scale(0.98);
}

.sticky-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.sticky-submit-btn:not(:disabled) {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4);
}

/* ============================================
   Mobile Send Button (top bar, compose pages)
============================================ */
.mobile-send-btn {
  display: none;
}

@media (max-width: 767px) {
  .mobile-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
  }

  .mobile-send-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-send-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
  }

  .mobile-send-btn:disabled {
    background: var(--bg-overlay);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
  }
}

@media (min-width: 768px) {
  .edit-profile-form {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .edit-banner {
    max-width: 560px;
    margin: 0 auto;
    border-radius: 0 0 16px 16px;
  }
  .edit-avatar-wrap {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -40px;
    margin-bottom: 16px;
  }
}

/* ============================================
   Compose Page
============================================ */
.compose-page {
  padding: 16px 16px 80px;
  max-width: 560px;
  margin: 0 auto;
}

.compose-page .form-textarea {
  min-height: 120px;
  max-height: 300px;
  resize: none;
  overflow-y: auto;
}

/* ---- Media Art Preview (Compose & Share Sheet) ---- */
.media-art {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.media-art-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--bg-overlay);
}

.media-art-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.media-art-meta {
  flex: 1; min-width: 0;
}

.media-art-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-on-media);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-art-channel {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-art-clear {
  width: 32px; height: 32px;
  border-radius: 50%; border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.media-art-clear:hover { background: rgba(0, 0, 0, 0.7); }

.media-art[data-platform="spotify"] {
  display: flex;
  align-items: stretch;
  min-height: 112px;
  background: linear-gradient(135deg, #191414 0%, var(--bg-surface) 100%);
}

.media-art[data-platform="spotify"] .media-art-img {
  width: min(36%, 128px);
  flex: 0 0 min(36%, 128px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: #191414;
  align-self: center;
  padding: 8px;
  box-sizing: border-box;
}

/* Apple Music artwork is square (1200x1200); mirror Spotify's contained
   small-square layout so it renders correctly AND a broken/loading state
   can't balloon into a tall banner above the mobile keyboard (audit #20). */
.media-art[data-platform="apple_music"] {
  display: flex;
  align-items: stretch;
  min-height: 112px;
  background: linear-gradient(135deg, #1c1c1e 0%, var(--bg-surface) 100%);
}

.media-art[data-platform="apple_music"] .media-art-img {
  width: min(36%, 128px);
  flex: 0 0 min(36%, 128px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: #1c1c1e;
  align-self: center;
  padding: 8px;
  box-sizing: border-box;
}

/* Side-layout text: un-absolute the overlay so the title/artist sit INLINE
   beside the square (mirrors Spotify — #765 added the container+image but
   missed these, leaving the title floating in its default absolute overlay
   over the now-tiny image). */
.media-art[data-platform="apple_music"] .media-art-overlay {
  position: static;
  flex: 1;
  min-width: 0;
  background: transparent;
  align-items: center;
}

.media-art[data-platform="apple_music"] .media-art-title,
.media-art[data-platform="apple_music"] .media-art-channel {
  color: var(--text-primary);
  white-space: normal;
  text-shadow: none;
}

.media-art[data-platform="apple_music"] .media-art-channel {
  color: var(--text-secondary);
}

.media-art[data-platform="spotify"] .media-art-overlay {
  position: static;
  flex: 1;
  min-width: 0;
  background: transparent;
  align-items: center;
}

.media-art[data-platform="spotify"] .media-art-title,
.media-art[data-platform="spotify"] .media-art-channel {
  color: var(--text-primary);
  white-space: normal;
  text-shadow: none;
}

.media-art[data-platform="spotify"] .media-art-channel {
  color: var(--text-secondary);
}

/* ---- Posting Byline (Share Sheet) ---- */
.posting-byline {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  padding-left: 2px;
}

.posting-byline strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---- Resume Banner (Share Sheet) ---- */
.compose-resume-banner {
  font-size: 13px;
  color: var(--green);
  background: rgba(var(--text-muted-rgb), 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.compose-url-error {
  font-size: 12px;
  color: var(--red);
  margin-top: 6px;
  padding-left: 4px;
}

.compose-error {
  font-size: 13px;
  color: var(--red);
  text-align: center;
  background: rgba(var(--text-muted-rgb), 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.compose-page .char-count {
  font-size: 11px;
  text-align: right;
  color: var(--text-muted);
  margin-top: 4px;
}

.compose-page .char-count.warning { color: var(--yellow); }
.compose-page .char-count.over { color: var(--red); }

/* ============================================
   Share Result Pages (success, error)
============================================ */
.share-result-page {
  padding: 16px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  text-align: center;
}

.share-result-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.share-result-icon svg {
  width: 32px;
  height: 32px;
}

.share-result-icon.success {
  background: rgba(74, 222, 128, 0.15);
  color: var(--green);
}

.share-result-icon.error {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
}

.share-result-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.share-result-message {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

.share-result-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}

.share-result-actions .btn-primary {
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.share-result-actions .btn-primary:hover {
  background: var(--accent-hover);
}

.share-result-actions .btn-secondary {
  padding: 6px 12px;
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.share-result-actions .btn-secondary:hover {
  background: var(--accent-subtle);
}

.share-result-countdown {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  opacity: 0.6;
}

.share-result-submitted {
  width: 100%;
  max-width: 320px;
  background: rgba(var(--text-muted-rgb), 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 13px;
  word-break: break-all;
}

.share-result-submitted label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.share-result-submitted .value {
  color: var(--text-primary);
  margin-bottom: 10px;
}

.share-result-submitted .value:last-child {
  margin-bottom: 0;
}

.share-result-submitted .comment-value {
  white-space: pre-wrap;
  max-height: 80px;
  overflow-y: auto;
}

/* ============================================
   Onboarding Pages (create-profile, restore, deleted)
============================================ */
.onboarding-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.onboarding-container {
  width: 100%;
  max-width: 560px;
}

.onboarding-header {
  text-align: center;
  margin-bottom: 24px;
}

.onboarding-header h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.onboarding-header .subtitle {
  font-size: 15px;
  color: var(--text-muted);
}

.onboarding-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: var(--accent);
}

.onboarding-icon svg {
  width: 64px; height: 64px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.onboarding-card {
  background: var(--bg-surface);
  border-radius: 16px;
  padding: 28px 24px;
  margin-bottom: 16px;
}

[data-theme="dark"] .onboarding-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .onboarding-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Username input on create-profile */
.onboarding-card .username-prefix {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.onboarding-card .form-input {
  border: 2px solid transparent;
  padding: 14px 16px;
  font-size: 16px;
}

.onboarding-card .form-input:focus {
  border-color: var(--accent);
}

.onboarding-card .form-input.is-valid {
  border-color: var(--green);
}

.onboarding-card .form-input.is-invalid {
  border-color: var(--red);
}

.onboarding-card .validation-status {
  font-size: 13px;
  margin-top: 8px;
  padding-left: 2px;
  display: none;
}

.onboarding-card .validation-status.checking {
  color: var(--text-muted);
  display: block;
}

.onboarding-card .validation-status.available {
  color: var(--green);
  display: block;
}

.onboarding-card .validation-status.unavailable {
  color: var(--red);
  display: block;
}

.onboarding-card .server-error {
  font-size: 13px;
  color: var(--red);
  margin-top: 8px;
  padding-left: 2px;
}

.onboarding-card .rules-list {
  list-style: none;
  margin-top: 16px;
  padding: 0;
}

.onboarding-card .rules-list li {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  padding-left: 16px;
  position: relative;
}

.onboarding-card .rules-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
}

/* Warning card variant (restore-account) */
.onboarding-card.warning-card {
  border-left: 4px solid var(--yellow);
}

.warning-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.warning-title svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.countdown {
  text-align: center;
  margin-bottom: 20px;
}

.countdown-number {
  font-size: 56px;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1;
}

.countdown-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.date-info {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
}

.date-info strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Info card variant (account-deleted) */
.onboarding-card.info-card {
  border-left: 4px solid var(--accent);
}

.onboarding-card .card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

.onboarding-card .card-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.onboarding-card .info-list {
  list-style: none;
  padding: 0;
}

.onboarding-card .info-list li {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.5;
}

.onboarding-card .info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

/* Onboarding buttons */
.onboarding-submit {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
  margin-bottom: 12px;
  display: block;
  text-align: center;
  text-decoration: none;
}

.onboarding-submit:hover:not(:disabled) { background: var(--accent-hover); }
.onboarding-submit:active:not(:disabled) { transform: scale(0.98); }

.onboarding-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.onboarding-submit:not(:disabled) {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4);
}

.onboarding-submit.green {
  background: var(--green);
}

[data-theme="dark"] .onboarding-submit.green:not(:disabled) { box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3); }
[data-theme="light"] .onboarding-submit.green:not(:disabled) { box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3); }

.onboarding-submit.green:hover:not(:disabled) { opacity: 0.9; }

.onboarding-secondary {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--text-muted-rgb), 0.25);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: block;
  text-align: center;
}

.onboarding-secondary:hover {
  border-color: rgba(var(--text-muted-rgb), 0.5);
  color: var(--text-primary);
}

.onboarding-feedback {
  text-align: center;
  font-size: 14px;
  margin: 12px 0;
  min-height: 20px;
}

.onboarding-feedback.success { color: var(--green); }
.onboarding-feedback.error { color: var(--red); }

.recovery-message {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.cta-label {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.onboarding-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 24px;
  line-height: 1.6;
  opacity: 0.7;
}

/* ============================================
   PAGE: Notifications
============================================ */
.notif-page { padding: 0 0 80px; }

.notif-empty {
  text-align: center;
  padding: 60px 24px;
}

.notif-empty .onboarding-icon {
  color: var(--text-muted);
}

.notif-empty h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.notif-empty p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.notif-list { padding: 0; }

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(var(--text-muted-rgb), 0.1);
  transition: background 0.15s ease;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.notif-item:hover { background: var(--bg-overlay); }

.notif-item.unread {
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 4px 0 0 var(--accent);
}

.notif-item.unread .notif-text { font-weight: 600; }

.notif-item .notif-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-subtle));
  object-fit: cover;
}

.notif-item .notif-avatar.notif-avatar-system {
  background: linear-gradient(135deg, var(--accent-subtle), var(--bg-overlay));
}

.notif-item .notif-avatar.notif-avatar-platform {
  /* Platform logos (YouTube Music, Spotify, Apple Music, …) are designed
     to display bare, not nested in a chrome circle. Reset the wrapper
     styles inherited from `.notif-avatar` so the logo fills the 36×36
     slot directly, matching the bare-logo treatment in the Settings
     Music section (.music-ph-icon / .music-po-icon). */
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.notif-item .notif-avatar.notif-avatar-platform img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.notif-item .notif-avatars {
  position: relative;
  width: 42px;
  height: 36px;
  flex-shrink: 0;
}

.notif-item .notif-avatars .notif-avatar {
  width: 28px;
  height: 28px;
  position: absolute;
  border: 2px solid var(--bg-base);
}

.notif-item .notif-avatars .notif-avatar:nth-child(1) {
  top: 0; left: 0; z-index: 2;
}

.notif-item .notif-avatars .notif-avatar:nth-child(2) {
  bottom: 0; right: 0; z-index: 1;
}

.notif-item.unread .notif-avatars .notif-avatar {
  border-color: rgba(var(--accent-rgb), 0.12);
}

.notif-item .notif-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}

.notif-item .notif-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-item .notif-icon.star {
  background: rgba(251, 191, 36, 0.15);
  color: var(--yellow);
}
.notif-item .notif-icon.star svg { fill: var(--yellow); }

.notif-item .notif-icon.comment {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.notif-item .notif-icon.reshare {
  background: rgba(74, 222, 128, 0.15);
  color: var(--green);
}

.notif-item .notif-icon.follow {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.notif-item .notif-icon.music {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.notif-item .notif-body { flex: 1; min-width: 0; }

.notif-item .notif-text {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 2px;
}

.notif-item .notif-text strong { font-weight: 700; }

.notif-item .notif-time {
  font-size: 13px;
  color: var(--text-muted);
}

.notif-item .notif-preview {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-loading:not([hidden]) {
  display: flex;
  justify-content: center;
  padding: 16px;
  color: var(--text-muted);
}

.notif-spinner {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  animation: notif-spin 1s linear infinite;
}

@keyframes notif-spin { to { transform: rotate(360deg); } }

.notif-sentinel { height: 1px; }

/* Visually hide content for screen readers — used by .notif-loading's
   "Loading more notifications…" label. Standard clip pattern. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .notif-page {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   PAGE: Search
============================================ */
.search-page { padding: 0 16px 80px; }

.search-input-wrap { padding: 12px 0; }

.search-input {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-overlay); border-radius: 20px;
  padding: 10px 16px;
}

.search-input svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--text-muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.search-input input {
  flex: 1; background: none; border: none;
  color: var(--text-primary); font-family: inherit;
  font-size: 16px; outline: none;
}

.search-input input::placeholder { color: var(--text-muted); }

.search-input .clear-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}

.search-input .clear-btn svg {
  width: 12px; height: 12px;
  stroke: var(--bg-surface); stroke-width: 3;
}

.search-empty-state {
  text-align: center;
  padding: 40px 0;
}

.search-hint {
  color: var(--text-muted);
  font-size: 15px;
}

.search-no-results {
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 15px;
}

/* Result sections */
.result-section { margin-bottom: 8px; }

.result-section .section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 8px;
}

.result-section .section-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* Tag results */
.tag-results { display: flex; flex-direction: column; }

.tag-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}

.tag-result + .tag-result {
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.1);
}

.tag-result .tag-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  color: var(--accent);
  flex-shrink: 0;
}

.tag-result .tag-info { flex: 1; min-width: 0; }

.tag-result .tag-name { font-size: 15px; font-weight: 600; }

.tag-result .tag-name .highlight { color: var(--accent); }

.tag-result .tag-count { font-size: 13px; color: var(--text-muted); }

/* Crow (post) results */
.crow-results { display: flex; flex-direction: column; }

.crow-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}

.crow-result + .crow-result {
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.1);
}

.crow-result .cr-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crow-result .cr-info { flex: 1; min-width: 0; }

.crow-result .cr-author { font-size: 15px; font-weight: 600; }

.crow-result .cr-author .cr-handle {
  font-weight: 400; color: var(--text-muted); font-size: 13px;
}

.crow-result .cr-snippet {
  font-size: 13px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

.crow-result .cr-snippet .highlight {
  color: var(--accent); font-weight: 600;
}

.crow-result .cr-song {
  font-size: 13px; color: var(--text-muted);
  margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}

.crow-result .cr-song svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* User results */
.user-results { display: flex; flex-direction: column; }

.user-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}

.user-result + .user-result {
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.1);
}

.user-result .ur-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0;
}

.user-result .ur-info { flex: 1; min-width: 0; }

.user-result .ur-name { font-size: 15px; font-weight: 600; }

.user-result .ur-name .highlight { color: var(--accent); }

.user-result .ur-handle { font-size: 13px; color: var(--text-muted); }

.user-result .ur-handle .highlight {
  color: var(--accent); font-weight: 600;
}

.user-result .ur-bio {
  font-size: 13px; color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Desktop width limit */
@media (min-width: 768px) {
  .search-page {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   Desktop Nav (hidden on mobile, shown 768px+)
============================================ */
.top-bar .desktop-nav,
.top-bar-detail .desktop-nav { display: none; }

.top-bar .desktop-settings-btn,
.top-bar-detail .desktop-settings-btn { display: none; }

@media (min-width: 768px) {
  .top-bar { padding: 12px 24px; box-shadow: none !important; position: sticky; top: 0; }

  .top-bar .desktop-nav {
    display: flex;
    gap: 4px;
  }

  .top-bar .desktop-nav .nav-link {
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
  }

  .top-bar .desktop-nav .nav-link:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }

  .top-bar .desktop-nav .nav-link.active {
    color: var(--accent);
  }

  .top-bar .desktop-settings-btn,
  .top-bar-detail .desktop-settings-btn { display: flex; }

  .top-bar-detail {
    padding: 12px 24px;
    box-shadow: none !important;
  }

  .top-bar-detail .desktop-nav {
    display: flex;
    gap: 4px;
  }

  .top-bar-detail .desktop-nav .nav-link {
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
  }

  .top-bar-detail .desktop-nav .nav-link:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }

  .top-bar-detail .desktop-nav .nav-link.active {
    color: var(--accent);
  }
}

/* ============================================
   Desktop Compose FAB (hidden on mobile)
============================================ */
.desktop-fab {
  display: none;
}

@media (min-width: 768px) {
  .desktop-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: 50%;
    color: #fff;
    z-index: 100;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4);
  }

  .desktop-fab:hover {
    background: var(--accent-hover);
    transform: scale(1.08);
  }

  .desktop-fab svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ============================================
   Desktop Feed Layout + Sidebar
============================================ */
.desktop-layout {
  max-width: 900px;
  margin: 0 auto;
}

.desktop-layout .sidebar { display: none; }

@media (min-width: 900px) {
  .desktop-layout {
    display: flex;
    gap: 24px;
    padding: 0 24px;
  }

  .desktop-layout .feed-col {
    flex: 1;
    min-width: 0;
    max-width: 560px;
  }

  /* Two-column desktop squeezes .feed-viewport down to ~560px, so a card's
     ~24px hover shadow overshoots the side edges and gets sliced flat into the
     column gap. Extend the clip box outward past the shadow, cancelling the
     padding with an equal negative margin so the cards keep their exact
     position/width. 24px matches .desktop-layout's side padding, so the wider
     clip box reaches exactly the layout edge — no page overflow / scrollbar. */
  .desktop-layout .feed-viewport {
    padding: 0 24px;
    margin: 0 -24px;
  }

  .desktop-layout .sidebar {
    width: 280px;
    flex-shrink: 0;
    display: block;
    padding-top: 12px;
    position: sticky;
    top: 70px;
    align-self: flex-start;
  }
}

/* ============================================
   Sidebar Cards
============================================ */
.sidebar-card {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-gradient-end) 100%);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

[data-theme="dark"] .sidebar-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .sidebar-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sidebar-card h3 {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.sidebar-card .trending-item {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}

.sidebar-card .trending-item:hover { opacity: 0.7; }

.sidebar-card .trending-item .tag-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.sidebar-card .trending-item .tag-count {
  font-size: 13px;
  color: var(--text-muted);
}

.sidebar-card .trending-item + .trending-item {
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.1);
}

/* Who to Follow */
.sidebar-card.who-to-follow .user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.sidebar-card.who-to-follow .user-row + .user-row {
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.1);
}

.sidebar-card.who-to-follow .user-row-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}

.sidebar-card.who-to-follow .user-row-link:hover { opacity: 0.7; }

.sidebar-card.who-to-follow .btn-follow {
  font-size: 13px;
  flex-shrink: 0;
}

.sidebar-card .uf-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-subtle));
  flex-shrink: 0;
  object-fit: cover;
}

.sidebar-card .uf-info { flex: 1; min-width: 0; }

.sidebar-card .uf-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-card .uf-handle {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sidebar-footer a {
  color: var(--text-muted);
  text-decoration: none;
}
.sidebar-footer a:hover {
  text-decoration: underline;
}

/* ============================================
   UI Animations
============================================ */

/* --- Star / Favorite Pulse Glow --- */
@keyframes star-glow {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0px #FBBF24); }
  40%  { transform: scale(1.25); filter: drop-shadow(0 0 12px #FBBF24); }
  70%  { transform: scale(1.05); filter: drop-shadow(0 0 4px #FBBF24); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0px #FBBF24); }
}

.crow .actions .action.starred.animating svg,
.crow .comment .comment-star.liked.animating svg {
  animation: star-glow 0.6s ease-out;
}

/* --- Modal Entrance / Exit --- */
.modal-backdrop {
  animation: modal-backdrop-in 0.2s ease-out;
}

.modal-backdrop .modal {
  animation: modal-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-backdrop.closing {
  animation: modal-backdrop-out 0.15s ease-in forwards;
}

.modal-backdrop.closing .modal {
  animation: modal-scale-out 0.15s ease-in forwards;
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes modal-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modal-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.9); }
}

/* --- Bottom-Sheet Slide --- */
.modal-backdrop.bottom-sheet .modal {
  animation: sheet-slide-in 0.25s ease-out;
}

.modal-backdrop.bottom-sheet.closing .modal {
  animation: sheet-slide-out 0.15s ease-in forwards;
}

@keyframes sheet-slide-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes sheet-slide-out {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* --- Dropdown Menu Entrance --- */
.dropdown-menu {
  animation: dropdown-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top right;
}

@keyframes dropdown-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Settings Inline Editor Expand --- */
.settings-inline-editor {
  overflow: hidden;
}

.settings-inline-editor.anim-open {
  animation: editor-slide-down 0.25s ease-out;
}

.settings-inline-editor.anim-close {
  animation: editor-slide-up 0.2s ease-in forwards;
}

@keyframes editor-slide-down {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; max-height: 300px; }
}

@keyframes editor-slide-up {
  from { opacity: 1; max-height: 300px; }
  to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}

/* Settings chevron rotation */
.settings-item .settings-item-chevron {
  transition: transform 0.2s ease;
}

/* --- Welcome Banner Collapse (drawer pattern) --- */
/* Transition is on .welcome-drawer and .welcome-main (defined in Welcome Banner section) */

/* --- Post Body Truncation Expand --- */
.crow .post-body {
  transition: max-height 0.3s ease;
}

/* --- Comment / Post Edit Mode Crossfade --- */
.crow .comment .comment-text {
  transition: opacity 0.2s ease;
}

.crow .comment.editing .comment-text {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.crow .comment .edit-input-wrap {
  transition: opacity 0.2s ease;
}

.crow .post-edit-wrap {
  animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Follow Button Pulse --- */
@keyframes follow-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.btn-follow.animating {
  animation: follow-pulse 0.3s ease-in-out;
}

/* --- Badge Pop-in --- */
@keyframes badge-pop-in {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

.crow .pinned-badge.anim-in,
.crow .saved-badge.anim-in {
  animation: badge-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Theme Toggle Smooth Transition --- */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-pill {
  transition: all 0.2s ease;
}

.theme-pill.active {
  transform: scale(1.1);
}

/* --- Music Sync Toggle Smooth Slide --- */
.music-toggle {
  transition: background 0.25s ease;
}

.music-toggle::after {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Bottom Nav Active Icon Scale --- */
.bottom-nav .nav-item svg {
  transition: transform 0.2s ease;
}

.bottom-nav .nav-item.active svg {
  transform: scale(1.1);
}

/* --- Character Counter Fade --- */
.crow .comment-input .char-count {
  transition: opacity 0.2s ease;
}

/* --- Form Validation Shake --- */
@keyframes form-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

.shake {
  animation: form-shake 0.35s ease-in-out;
}

/* --- prefers-reduced-motion: respect user preference --- */
@media (prefers-reduced-motion: reduce) {
  /* Kill all keyframe animations globally */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Reduce non-essential transitions to instant while keeping hover colors */
  /* -- New animations added in this change -- */
  .crow .actions .action.starred.animating svg,
  .crow .comment .comment-star.liked.animating svg,
  .modal-backdrop,
  .modal-backdrop .modal,
  .modal-backdrop.closing,
  .modal-backdrop.closing .modal,
  .modal-backdrop.bottom-sheet .modal,
  .modal-backdrop.bottom-sheet.closing .modal,
  .dropdown-menu,
  .settings-inline-editor.anim-open,
  .settings-inline-editor.anim-close,
  .welcome-drawer,
  .welcome-drawer > .welcome-main,
  .crow .post-body,
  .crow .comment .comment-text,
  .crow .comment .edit-input-wrap,
  .crow .post-edit-wrap,
  .btn-follow.animating,
  .crow .pinned-badge.anim-in,
  .crow .saved-badge.anim-in,
  .music-toggle,
  .music-toggle::after,
  .bottom-nav .nav-item svg,
  .crow .comment-input .char-count,
  .shake,
  .theme-pill,
  .theme-pill.active {
    transition-duration: 0.01ms !important;
  }

  /* -- Pre-existing animations -- */
  /* Skeleton shimmer loader */
  .skel-bone {
    animation: none !important;
    background-position: 0% 0% !important;
  }
  /* Slide-in/out feed transitions */
  .slide-in-right,
  .slide-in-left,
  .slide-out-right,
  .slide-out-left {
    animation-duration: 0.01ms !important;
  }
  /* Comments drawer expand */
  .comments-drawer,
  .comments-drawer > .comments {
    transition-duration: 0.01ms !important;
  }
  /* Spinner (comment submit) */
  .submitting svg {
    animation: none !important;
  }
  /* Card entrance/exit transforms */
  .crow {
    transition-duration: 0.01ms !important;
  }
  /* Settings chevron rotation */
  .settings-item .settings-item-chevron {
    transition-duration: 0.01ms !important;
  }
  /* Toast slide-in */
  .toast {
    transition-duration: 0.01ms !important;
  }
  /* Body theme transition */
  body {
    transition-duration: 0.01ms !important;
  }
}

/* ── First-party analytics-consent notice ─────────────────────────────
   Slim floating card (matches the bottom-nav pill language); sits above
   the bottom nav on mobile, bottom corner-ish on desktop. Rendered only
   until a choice is recorded — see includes/consent_notice.html. */
.consent-notice {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)); /* clears the 52px bottom-nav pill + its 12px inset */
  left: 12px;
  right: 12px;
  margin: 0 auto;
  max-width: 640px;
  z-index: 99; /* under the bottom-nav (100) so nav taps always win */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  /* extra right padding keeps the first text line clear of the corner X,
     with buffer for root-font scaling growing the button */
  padding: 10px 52px 10px 14px;
  background: rgba(var(--bg-surface-rgb), 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(var(--text-muted-rgb), 0.12);
  border-radius: 16px;
  color: var(--text-primary);
  font-size: 0.82rem;
  line-height: 1.35;
}
[data-theme="dark"] .consent-notice { box-shadow: 0 4px 24px rgba(0,0,0,0.6); }
[data-theme="light"] .consent-notice { box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
@media (min-width: 768px) {
  .consent-notice {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-right: 40px; /* smaller X footprint on desktop needs less clearance */
  }
}
.consent-notice a { color: var(--accent); }
.consent-notice-text { flex: 1 1 240px; }
.consent-notice-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.consent-notice-optout {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  text-decoration: underline;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.consent-notice-optout:hover { color: var(--text-primary); }
/* The OK CTA uses the house `btn btn-accent` classes (see .btn/.btn-accent)
   so it matches every other primary button on the site. */
.consent-notice-dismiss {
  /* Corner close, not a third action button: when the text wraps on
     mobile, in-flow placement dropped the ✕ next to OK where it read as
     part of the action pair (and ✕/OK record different things). Anchored
     to the card's top-right instead — the card is position:fixed. */
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  /* generous padding + the doubled glyph = ~48px touch target hugging
     the corner (owner-tuned size, 2026-07-05) */
  padding: 6px 10px;
  line-height: 1;
  color: var(--text-muted);
  font-size: 1.9rem;
  cursor: pointer;
}
.consent-notice-dismiss:hover { color: var(--text-primary); }
@media (min-width: 768px) {
  /* Pointer-precision context: the thumb-sized 1.9rem X that reads right on
     a phone dominates the 640px desktop card — scale it back. Placed AFTER
     the base rule: same specificity, so source order decides the winner. */
  .consent-notice-dismiss {
    font-size: 1.15rem;
    padding: 8px 10px;
  }
}