/* ═══════════════════════════════════════════════════════════════
   tea-party.css — Tea Party social app styles:
                   layout, timeline, posts, modals, search,
                   user profiles, blog, hashtags
   ═══════════════════════════════════════════════════════════════ */

*, ::after, ::before {

    box-sizing: border-box
  }

  #page-talk {

    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333
  }

  #app-root {

    height: 100%;
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: stretch
  }

.app-shell {
  width: 100%;
  max-width: 960px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: 0 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  position: relative;
}

.blog-boot-shell {
  display: grid;
  gap: 12px;
  margin: 0 auto;
  max-width: 960px;
  padding: 20px;
}

.blog-boot-pill {
  width: max-content;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 9px 18px;
  text-transform: uppercase;
}

.blog-boot-line {
  height: 52px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: linear-gradient(100deg, rgba(255,255,255,.42), rgba(255,255,255,.18), rgba(255,255,255,.42));
  background-size: 220% 100%;
  box-shadow: var(--glass-shadow);
  animation: blogBootSheen 1.1s ease-in-out infinite;
}

.blog-boot-line.short {
  width: min(72%, 520px);
}

@keyframes blogBootSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

  .talk-intro {

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: 0 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    opacity: 0
  }

  .talk-intro.playing {

    pointer-events: none;
    animation: talk-intro-bg 1.6s ease forwards
  }

  @keyframes talk-intro-bg {
    0% {
      opacity: 0
    }
    7% {
      opacity: 1
    }
    75% {
      opacity: 1
    }
    100% {
      opacity: 0
    }
  }

  .talk-intro.playing::before {

    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--pk);
    animation: ti-flash .12s 50ms ease-out forwards;
    opacity: 0
  }

  @keyframes ti-flash {
    0% {
      opacity: .55
    }
    100% {
      opacity: 0
    }
  }

  .talk-intro::after {

    display: none;
    content: none;
    background: transparent
  }

  .ti-cup-wrap {

    position: absolute;
    z-index: 3;
    color: var(--pk)
  }

  .talk-intro.playing .ti-cup-1 {

    animation: ti-cup1 .55s 30ms cubic-bezier(.36, .07, .19, .97) both
  }

  @keyframes ti-cup1 {
    0% {
      opacity: 0;
      transform: translate(-90vw, -50vh) rotate(-120deg) scale(2.5)
    }
    10% {
      opacity: 1
    }
    65% {
      opacity: 1;
      transform: translate(-14vw, 10vh) rotate(15deg) scale(1.2)
    }
    80% {
      opacity: 1;
      transform: translate(-14vw, 10vh) rotate(28deg) scale(1.3)
    }
    100% {
      opacity: 0;
      transform: translate(-18vw, 18vh) rotate(50deg) scale(.2)
    }
  }

  .talk-intro.playing .ti-cup-2 {

    animation: ti-cup2 .5s 70ms cubic-bezier(.36, .07, .19, .97) both
  }

  @keyframes ti-cup2 {
    0% {
      opacity: 0;
      transform: translate(90vw, -50vh) rotate(140deg) scale(2)
    }
    10% {
      opacity: 1
    }
    60% {
      opacity: 1;
      transform: translate(14vw, 8vh) rotate(-20deg) scale(1.1)
    }
    80% {
      opacity: 1;
      transform: translate(14vw, 8vh) rotate(-32deg) scale(1.15)
    }
    100% {
      opacity: 0;
      transform: translate(18vw, 18vh) rotate(-60deg) scale(.2)
    }
  }

  .talk-intro.playing .ti-cup-3 {

    animation: ti-cup3 .45s .12s cubic-bezier(.2, .8, .4, 1) both
  }

  @keyframes ti-cup3 {
    0% {
      opacity: 0;
      transform: translate(0, 80vh) rotate(0) scale(.4)
    }
    12% {
      opacity: 1
    }
    50% {
      opacity: 1;
      transform: translate(0, -8vh) rotate(-180deg) scale(1.4)
    }
    100% {
      opacity: 0;
      transform: translate(0, -22vh) rotate(-360deg) scale(.15)
    }
  }

  .ti-title {

    position: relative;
    z-index: 5;
    font-family: Sprayerz, cursive;
    font-size: clamp(58px, 11vw, 120px);
    color: var(--pk);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0 40px color-mix(in srgb, var(--pk) 80%, transparent), 0 0 100px color-mix(in srgb, var(--pk) 35%, transparent)
  }

  .talk-intro.playing .ti-title {

    animation: ti-title-slam .25s .22s cubic-bezier(.2, 1.6, .4, 1) forwards
  }

  @keyframes ti-title-slam {
    0% {
      opacity: 0;
      transform: scale(2.8) translateY(-15px)
    }
    55% {
      transform: scale(.93) translateY(3px)
    }
    80% {
      opacity: 1;
      transform: scale(1.04) translateY(-2px)
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0)
    }
  }

  .ti-bang {

    position: absolute;
    z-index: 6;
    font-family: Sprayerz, cursive;
    color: var(--pk);
    font-size: clamp(22px, 3vw, 40px);
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 0 20px color-mix(in srgb, var(--pk) 90%, transparent)
  }

  .talk-intro.playing .ti-bang {

    animation: ti-bang-fly .6s .3s ease-out both
  }

  @keyframes ti-bang-fly {
    0% {
      opacity: 0;
      transform: scale(0)
    }
    20% {
      opacity: 1
    }
    100% {
      opacity: 0;
      transform: scale(1.6) var(--dir)
    }
  }

  .ti-drip {

    position: absolute;
    z-index: 4;
    width: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--pk);
    opacity: 0;
    top: 0;
    transform-origin: top center
  }

  .talk-intro.playing .ti-drip {

    animation: ti-drip-fall 1.4s ease-in forwards
  }

  @keyframes ti-drip-fall {
    0% {
      opacity: 0;
      height: 0
    }
    12% {
      opacity: 1
    }
    60% {
      opacity: .9
    }
    100% {
      opacity: 0;
      height: 40vh
    }
  }

  .app-topbar {
  display: grid;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .19)),
      rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16),
      inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(16px) saturate(1.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  padding: 6px 12px;
  color: #fff;
  z-index: 100;
  position: relative;
  margin: 0 12px 10px;
  border-color: rgba(255, 255, 255, .36);
  grid-template-columns: 1fr auto 1fr;
}

  .app-topbar-left, .app-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
}

  .app-logo-img {

    height: 28px;
    display: block;
    padding: 2px 0;
    transition: height .2s ease
  }

  .app-search-input {

    height: 18px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border2);
    font-size: 11px;
    max-width: 160px;
    background-color: var(--s2);
    color: var(--ink);
    outline: 0;
    transition: all .2s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05)
  }

  .app-search-input:focus {

    background-color: var(--s1);
    border-color: var(--border2);
    box-shadow: 0 0 5px rgba(200, 200, 200, .15)
  }

  .search-page-input-container {

    padding: 10px;
    background: var(--s1);
    border-bottom: 1px solid var(--border2);
    display: flex;
    gap: 8px
  }

  .search-page-input {

    flex: 1;
    height: 30px;
    padding: 0 10px;
    border-radius: 15px;
    border: 1px solid var(--border2);
    font-size: 14px
  }

  .app-topbar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  position: relative;
  cursor: var(--fd-cursor-action);
  padding: 4px 8px;
  border-radius: 4px;
  min-height: 34px;
}

  .app-topbar-user:hover {

    background: rgba(255, 255, 255, .1)
  }

  .app-topbar-avatar {

    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #ffffff66
  }

  .user-dropdown {

    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--border2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    border-radius: 0 0 4px 4px;
    display: none;
    flex-direction: column;
    min-width: 120px;
    z-index: 1000
  }

  .app-topbar-user.active .user-dropdown, .app-topbar-user:hover .user-dropdown {

    display: flex
  }

  .dropdown-item {

    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    border-bottom: 1px solid var(--border)
  }

  .dropdown-item:last-child {

    border-bottom: none
  }

  .dropdown-item:hover {

    background: var(--border2);
    color: #fff
  }

  .app-main {

    flex: 1;
    display: flex;
    overflow: hidden;
    max-width: 100vw
  }

  .app-column-left {

    display: none
  }

  .app-column-right {

    width: 280px;
    background: var(--s1);
    border-left: 1px solid var(--border2);
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden
  }

  @media (max-width:900px) {

      .app-column-right {

        display: none
        }

}

  .app-column-center {

    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border2);
    border-right: 1px solid var(--border2);
    background: 0 0;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ink2) transparent
  }

  .app-column-center::-webkit-scrollbar {

    width: 8px
  }

  .app-column-center::-webkit-scrollbar-track {

    background: #dff3ff;
    border-left: 1px solid var(--border2)
  }

  .app-column-center::-webkit-scrollbar-thumb {

    background-color: var(--border2);
    border-radius: 0;
    border: 1px solid var(--border2)
  }

  .app-column-center::-webkit-scrollbar-thumb:hover {

    background-color: var(--border2)
  }

  .view-section {

    display: none;
    flex-direction: column;
    flex: 1
  }

  .view-section.active {

    display: flex
  }

  .update-box {
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 20px;
  margin: 10px 12px 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .19)),
      rgba(255, 255, 255, .12);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .14),
      inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(16px) saturate(1.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  display: none;
}

  .update-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #555;
    margin-bottom: 4px
  }

  .update-char-count {

    font-weight: 700
  }

  .update-char-count.over {

    color: #d40d12
  }

  .update-textarea-wrapper {

    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .32)),
      rgba(255, 255, 255, .18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .7),
      0 8px 18px rgba(0, 0, 0, .08);
    overflow: hidden
  }

  .update-textarea {

    width: 100%;
    resize: none;
    border: none;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    min-height: 50px;
    outline: 0;
    background: transparent;
    color: var(--ink)
  }

  .update-footer {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px
  }

  .update-image-label {
  font-size: 11px;
  color: var(--ink2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

  .update-image-input {

    display: none
  }

  .update-image-placeholder {

    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #aac6dd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    line-height: 1
  }

  .update-actions {

    display: flex;
    align-items: center;
    gap: 8px
  }

  .update-selected-image {

    font-size: 11px;
    color: #555;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .nav-button, .update-button {

    padding: 3px 10px;
    font-size: 12px;
    border-radius: 12px;
    border: 1px solid var(--border2);
    background: linear-gradient(#55a7e2, var(--border2));
    color: #fff;
    cursor: var(--fd-cursor-action)
  }

  .nav-button {

    font-weight: 700;
    transition: all .2s ease
  }

  .nav-button.active {

    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(255, 255, 255, .7);
    border-color: #fff
  }

  .dropdown-arrow-mobile {

    display: none;
    font-size: 10px;
    font-weight: 700;
    margin-right: 4px;
    color: #fff
  }

  .update-button:disabled {

    opacity: .4;
    cursor: var(--fd-cursor-default)
  }

  .timeline-header {

    padding: 6px 8px;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--border2);
    background: linear-gradient(var(--s2), var(--s3));
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .search-tabs {

    display: flex;
    gap: 10px
  }

  .search-tab {

    cursor: var(--fd-cursor-action);
    color: var(--border2);
    text-decoration: none
  }

  .search-tab.active {

    color: #333;
    text-decoration: underline
  }

  .search-no-results {

    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic
  }

  .search-highlight {

    background-color: #fff100;
    color: #000;
    padding: 0 1px;
    border-radius: 2px
  }

  .timeline-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  background: 0 0;
  position: relative;
}

  .post {

    display: flex;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    background: rgba(255, 255, 255, .42);
    backdrop-filter: blur(8px) saturate(1.06);
    -webkit-backdrop-filter: blur(8px) saturate(1.06);
    position: relative
  }

  .post:nth-child(2n) {

    background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .28))
  }

  .post-avatar {

    width: 38px;
    height: 38px;
    border-radius: 4px;
    margin-right: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--border2)
  }

  .post-body {

    flex: 1;
    min-width: 0
  }

  .post-header {

    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px
  }

  .post-username {

    font-weight: 700
  }

  .post-time {

    color: #8899a6;
    font-size: 11px;
    margin-left: auto
  }

  .post-text {

    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 4px;
    overflow: hidden
  }

  .post-text a {

    color: var(--ink2);
    text-decoration: none
  }

  .post-text a:hover {

    text-decoration: underline
  }

  .post-image-wrapper {

    margin-top: 4px
  }

  .post-image {

    display: block;
    max-width: 100%;
    height: auto;
    max-height: 500px;
    border-radius: 4px;
    border: 1px solid var(--border);
    cursor: var(--fd-cursor-action);
    transition: opacity .2s
  }

  .post-image:hover {

    opacity: .9
  }

  .custom-player {

    position: relative;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
    border: 1px solid var(--border);
    line-height: 0
  }

  .video-player .post-video {

    display: block;
    max-width: 100%;
    max-height: 500px;
    width: 100%;
    background: #000
  }

  .video-overlay {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: var(--fd-cursor-action)
  }

  .big-initial-play {

    width: 64px;
    height: 64px;
    opacity: .9;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .5));
    display: flex;
    align-items: center;
    justify-content: center
  }

  .big-initial-play::after {

    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 36px;
    border-color: transparent transparent transparent #fff;
    margin-left: 6px
  }

  .video-player.is-playing .video-overlay {

    display: none
  }

  .audio-player {

    background: var(--s1);
    min-height: 54px;
    display: flex;
    flex-direction: column
  }

  .audio-player .post-audio {

    display: none
  }

  .player-label {

    font-size: 10px;
    color: #55a7e2;
    font-weight: 700;
    padding: 6px 10px 0 10px;
    text-transform: uppercase;
    letter-spacing: .5px
  }

  .player-controls {

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(#fff, #e6f4fb);
    border-top: 1px solid var(--border2);
    line-height: 1.2;
    position: relative
  }

  .video-player .player-controls {

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .2s;
    z-index: 10
  }

  .video-player:hover .player-controls {

    opacity: 1
  }

  .audio-player .player-controls {

    flex: 1;
    background: 0 0;
    border-top: none
  }

  .play-btn {

    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--border2);
    cursor: var(--fd-cursor-action);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    overflow: hidden;
    position: relative
  }

  .play-btn::after {

    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #fff;
    margin-left: 2px
  }

  .play-btn.playing::after {

    content: '';
    display: block;
    width: 8px;
    height: 10px;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    background: 0 0;
    border-top: none;
    border-bottom: none;
    margin-left: 0
  }

  .play-btn:hover {

    filter: brightness(1.1)
  }

  .scrubber-container {

    flex: 1;
    height: 8px;
    background: var(--border2);
    border: 1px solid var(--border2);
    border-radius: 4px;
    position: relative;
    cursor: var(--fd-cursor-action)
  }

  .scrubber-fill {

    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--border2);
    width: 0%;
    border-radius: 3px 0 0 3px
  }

  .scrubber-thumb {

    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--border2);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    pointer-events: none;
    z-index: 5
  }

  .player-time {

    font-size: 10px;
    color: #555;
    font-family: monospace;
    min-width: 30px;
    text-align: center
  }

  .volume-container {

    display: flex;
    align-items: center;
    gap: 5px;
    width: 50px;
    flex-shrink: 0;
    padding: 0 5px;
    overflow: visible
  }

  .volume-slider {

    width: 100%;
    height: 6px;
    cursor: var(--fd-cursor-action);
    -webkit-appearance: none;
    background: linear-gradient(to right, var(--border2) 100%, var(--border2) 100%);
    border-radius: 3px;
    border: 1px solid var(--border2);
    outline: 0;
    margin: 0
  }

  .volume-slider::-webkit-slider-thumb {

    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--border2);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    cursor: var(--fd-cursor-action);
    transform: translateY(-1px)
  }

  .volume-slider::-moz-range-thumb {

    width: 12px;
    height: 12px;
    background: var(--border2);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    cursor: var(--fd-cursor-action)
  }

  .post-footer {

    margin-top: 4px;
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #8899a6
  }

  .post-footer button {

    padding: 0;
    border: none;
    background: 0 0;
    color: var(--ink2);
    cursor: var(--fd-cursor-action);
    font-size: 11px
  }

  .post-footer button.active {

    font-weight: 700;
    color: #d40d12
  }

  .timeline-context {

    color: #8899a6;
    font-size: 11px
  }

  .post-footer button:disabled {

    opacity: .5;
    cursor: var(--fd-cursor-default)
  }

  .action-repost {

    display: none
  }

  body.talk-admin .action-repost {

    display: inline-flex
  }

  .post-id-badge {

    position: absolute;
    bottom: 6px;
    right: 8px;
    color: #999;
    font-size: 10px;
    visibility: hidden;
    pointer-events: none;
    user-select: none
  }

  .post:hover .post-id-badge {

    visibility: visible
  }

  .blog-sidebar-header {
  cursor: var(--fd-cursor-action);
  transition: color .2s;
  font-size: 14px;
  font-weight: 700;
  color: var(--border2);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

  .blog-sidebar-header:hover {

    color: var(--border2);
    text-decoration: underline
  }

  .profile-view {

    padding: 0;
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column
  }

  .profile-edit-container {

    padding: 20px
  }

  .profile-header-edit {

    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 20px
  }

  .profile-header-edit h2 {

    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333
  }

  .profile-form-group {

    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px
  }

  .profile-form-group label {

    font-size: 12px;
    font-weight: 700;
    color: #666
  }

  .profile-form-group input, .profile-form-group textarea {

    padding: 8px;
    border: 1px solid var(--border2);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit
  }

  .profile-avatar-edit-container {

    display: flex;
    align-items: center;
    gap: 15px
  }

  .profile-avatar-preview {

    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    border: 1px solid var(--border2)
  }

  .profile-banner-preview {

    width: 100%;
    height: 100px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    border: 1px solid var(--border2);
    margin-top: 5px
  }

  .user-profile-header {

    position: relative;
    border-bottom: 1px solid var(--border2)
  }

  .user-profile-banner {

    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: var(--s2);
    position: relative
  }

  .signup-notice {

    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, .9);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #d40d12;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    z-index: 10;
    border: 1px solid #d40d12
  }

  .user-profile-info {

    padding: 0 15px 10px 15px;
    background: #fff;
    display: flex;
    gap: 15px;
    align-items: flex-end
  }

  .user-profile-avatar {

    width: 80px;
    height: 80px;
    border: 4px solid #fff;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    margin-top: -40px;
    position: relative;
    z-index: 2
  }

  .user-profile-text {

    padding-bottom: 5px
  }

  .user-profile-name {

    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .user-profile-bio {

    padding: 0 15px 15px 15px;
    background: #fff;
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere
  }

  .clickable-user {

    cursor: var(--fd-cursor-action)
  }

  .clickable-user:hover {

    text-decoration: underline;
    color: var(--border2)
  }

  .post.clickable-user:hover {

    background: var(--s2);
    text-decoration: none
  }

  .profile-save-btn {

    background: var(--border2);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 15px;
    font-weight: 700;
    cursor: var(--fd-cursor-action)
  }

  .profile-save-btn:disabled {

    opacity: .6
  }

  .admin-btn {

    padding: 4px 10px;
    font-size: 11px;
    border-radius: 0;
    border: 1px solid #999;
    background: var(--s2);
    cursor: var(--fd-cursor-action)
  }

  .admin-btn-danger {

    background: #d40d12;
    color: #fff;
    border-color: #a00a0e
  }

  .modal-overlay {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000
  }

  .modal-overlay.active {

    display: flex
  }

  .modal-content {

    background: #fff;
    width: 90%;
    max-width: 320px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--border2)
  }

  .modal-header {

    background: var(--border2);
    color: #fff;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 14px
  }

  #page-talk .modal-body {

    padding: 20px 15px;
    font-size: 13px;
    color: #333;
    line-height: 1.4
  }

  .modal-footer {

    padding: 10px 15px;
    background: var(--s1);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border)
  }

  .modal-btn {

    padding: 6px 16px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    cursor: var(--fd-cursor-action);
    border: 1px solid transparent
  }

  .modal-btn-delete {

    background: #d40d12;
    color: #fff;
    border-color: #a00a0e
  }

  .modal-btn-cancel {

    background: var(--s2);
    color: #333;
    border-color: var(--border2)
  }

  .pinned-blog-banner {

    background: #d40d12;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    display: none;
    border-bottom: 2px solid #a00a0e;
    z-index: 85;
    cursor: var(--fd-cursor-action)
  }

  .pinned-blog-banner:hover {

    background: #bc0b10
  }

  .pinned-blog-banner.active {

    display: block
  }


  .blog-sidebar-list {

    height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) var(--s1);
    border-bottom: 2px solid var(--border2);
    margin-bottom: 15px
  }

  .blog-sidebar-list::-webkit-scrollbar {

    width: 6px
  }

  .blog-sidebar-list::-webkit-scrollbar-track {

    background: var(--s1)
  }

  .blog-sidebar-list::-webkit-scrollbar-thumb {

    background-color: var(--border2);
    border-radius: 3px
  }

  .blog-sidebar-item {

    padding: 8px 0;
    border-bottom: 1px solid var(--border2)
  }

  .blog-sidebar-item:last-child {

    border-bottom: none
  }

  .blog-sidebar-title {

    font-size: 13px;
    font-weight: 700;
    color: var(--border2);
    text-decoration: none;
    display: block;
    cursor: var(--fd-cursor-action)
  }

  .blog-sidebar-title:hover {

    text-decoration: underline
  }

  .blog-sidebar-preview {

    font-size: 11px;
    color: #555;
    margin: 2px 0
  }

  .blog-sidebar-meta {

    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #8899a6;
    margin-top: 4px
  }

  .blog-meta-avatar {

    width: 16px;
    height: 16px;
    border-radius: 2px;
    background-size: cover
  }

  .trending-sidebar-list {

    display: flex;
    flex-direction: column
  }

  .trending-item {

    padding: 6px 0;
    border-bottom: 1px solid var(--border2);
    cursor: var(--fd-cursor-action);
    transition: background .1s
  }

  .trending-item:hover {

    background: rgba(255, 255, 255, .3)
  }

  .trending-item:last-child {

    border-bottom: none
  }

  .trending-name {

    font-size: 13px;
    font-weight: 700;
    color: var(--border2)
  }

  .trending-count {

    font-size: 10px;
    color: #8899a6
  }

  .blog-content-view {

    padding: 20px;
    background: #fff;
    flex: 1;
    overflow-y: auto
  }

  .blog-post-header {

    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 10px
  }

  .blog-post-title {

    font-size: 24px;
    color: #333;
    margin: 0 0 10px 0
  }

  .blog-post-author-line {

    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666
  }

  .blog-post-body {

    font-size: 14px;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap
  }

  .admin-blog-form {

    padding: 20px;
    background: var(--s1);
    border-bottom: 1px solid var(--border2);
    flex: 1;
    display: flex;
    flex-direction: column
  }

  .admin-blog-form h2 {

    font-size: 18px;
    margin-bottom: 15px;
    color: var(--border2)
  }

  .admin-blog-form .profile-form-group:nth-child(3) {

    flex: 1;
    display: flex;
    flex-direction: column
  }

  .admin-blog-form textarea {

    flex: 1;
    min-height: 200px
  }

  .mobile-only {

    display: none
  }

  .nav-button-desktop-only {

    display: flex
  }

  @media (max-width:640px) {

      .nav-button-desktop-only {

        display: none
        }

}

  body.force-desktop .app-shell {

    width: 960px;
    max-width: 960px;
    min-width: 960px
  }

  body.force-desktop .app-column-right {

    display: flex
  }

  body.force-desktop .app-search-input {

    display: block
  }

  body.force-desktop .nav-button {

    display: block
  }

  body.force-desktop .mobile-only {

    display: none
  }

  body.force-mobile .app-column-right {

    display: none
  }

  body.force-mobile .app-shell {

    width: 100vw;
    max-width: 100vw;
    border-radius: 0
  }

  body.force-mobile .app-search-input {

    display: none
  }

  body.force-mobile .mobile-only {

    display: block
  }

  body.force-mobile .nav-button {

    display: none
  }

  @media (max-width:640px) {

      body {

        overflow-x: hidden
        }
      .mobile-only {

        display: block
        }
      .app-shell {

        border-radius: 0;
        box-shadow: none;
        width: 100vw;
        overflow-x: hidden
        }
      .app-column-center {

        border-left: none;
        border-right: none
        }
      .app-topbar {

        padding: 6px 8px
        }
      .app-topbar-left {

        gap: 4px
        }
      .app-logo-img {

        height: 20px
        }
      .app-search-input {

        display: none
        }
      #topbar-username {

        display: none
        }
      .dropdown-arrow-mobile {

        display: block
        }
      .mobile-nav-item {

        font-size: 13px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        padding: 4px 8px;
        border-radius: 4px;
        background: rgba(0, 0, 0, .1)
        }
      .timeline-list {

        -webkit-overflow-scrolling: touch
        }
      .post-time {

        font-size: 9px;
        white-space: nowrap
        }
      .post-footer {

        gap: 5px
        }
      .post-footer button {

        font-size: 9.5px
        }
      .reply-nest {

        margin-left: 10px
        }

}

  .quote-box {

    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    background: #fcfdfe;
    cursor: var(--fd-cursor-action);
    transition: all .2s ease;
    position: relative;
    overflow: hidden
  }

  .quote-box:hover {

    background: #f5fafd;
    border-color: var(--border2)
  }

  .quote-header-mini {

    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px
  }

  .quote-avatar-mini {

    width: 18px;
    height: 18px;
    border-radius: 2px;
    background-size: cover;
    background-position: center
  }

  .quote-username-mini {

    font-weight: 700;
    font-size: 11px
  }

  .quote-text-mini {

    font-size: 12px;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .reply-nest {

    margin-left: 20px;
    border-left: 1px solid var(--border)
  }

  body.dark-mode .reply-nest {

    border-left-color: #2a2a2a
  }

  .post.new-post-anim {

    animation: postPop .5s cubic-bezier(.175, .885, .32, 1.275)
  }

  @keyframes postPop {
    0% {
      opacity: 0;
      transform: translateY(-20px) scale(.98);
      background-color: #fff8bf
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      background-color: transparent
    }
  }

  .preferences-form {

    max-width: 400px
  }

  .custom-select {

    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border2);
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    color: #333;
    width: 100%;
    max-width: 250px;
    outline: 0;
    cursor: var(--fd-cursor-action)
  }

  .custom-select:focus {

    border-color: var(--border2);
    box-shadow: 0 0 4px rgba(200, 200, 200, .15)
  }

  .preferences-actions {

    display: flex;
    gap: 10px;
    margin-top: 20px
  }

  .custom-btn-primary {

    padding: 6px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 15px;
    border: 1px solid var(--border2);
    background: linear-gradient(#55a7e2, var(--border2));
    color: #fff;
    cursor: var(--fd-cursor-action);
    transition: all .2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
  }

  .custom-btn-primary:hover {

    filter: brightness(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15)
  }

  .custom-btn-secondary {

    padding: 6px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 15px;
    border: 1px solid var(--border2);
    background: linear-gradient(#fff, #f0f0f0);
    color: #555;
    cursor: var(--fd-cursor-action);
    transition: all .2s
  }

  .custom-btn-secondary:hover {

    background: #f9f9f9;
    border-color: var(--border2)
  }

  .custom-btn-primary, .nav-button, .update-button {

    background: linear-gradient(var(--s3), var(--s3));
    border-color: rgba(0, 0, 0, .08);
    color: var(--ink2);
    box-shadow: none
  }

  .modal-btn:disabled, .update-button:disabled {

    opacity: .5
  }

  .search-tab, .blog-sidebar-header, .post-text a {

    color: var(--ink2);
    text-decoration: none
  }

  .player-controls, .scrubber-fill, .volume-slider {

    background: linear-gradient(var(--s3), var(--s3))
  }

  .app-column-right, .blog-content-view, .profile-view, .quote-box, .timeline-header {

    background: linear-gradient(var(--s2), var(--s3));
    border-color: rgba(0, 0, 0, .06);
    color: var(--ink)
  }

  .app-logo-img, .big-initial-play {

    filter: grayscale(100%);
    opacity: .95
  }

  .admin-btn:hover, .nav-button:hover, .update-button:hover {

    filter: brightness(.98);
    transform: none
  }

  .blog-sidebar-title, .trending-name {

    color: var(--ink2)
  }

  .profile-avatar-preview, .post-avatar, .user-profile-avatar {

    background-color: var(--s3)
  }


  #page-talk a {

    outline-color: var(--border2)
  }


  .list-spacer {

    width: 100%;
    pointer-events: none
  }


  #detail-reply-box {

    display: none
  }

  body.talk-admin .update-box {

    display: block
  }

  body.talk-admin #detail-reply-box {

    display: block
  }
#nav-blog-admin {

    display: none
  }

  #nav-edit-profile {

    display: none
  }

  body.talk-admin #nav-blog-admin {

    display: block
  }

  body.talk-admin #nav-edit-profile {

    display: block
  }


  .app-topbar-center-nav {

    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center
  }

  .talk-nav-pill {

    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink2);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    border: 1px solid var(--border2)
  }

  .talk-nav-pill svg {

    width: 13px;
    height: 13px;
    flex-shrink: 0
  }

  .talk-nav-pill:hover {

    background: var(--border2);
    color: var(--ink);
    border-color: var(--ink3)
  }

  .talk-nav-pill.active {

    background: var(--border2);
    color: var(--ink);
    border-color: var(--ink3)
  }

  .app-topbar-left {
  justify-content: flex-start;
  gap: 6px;
}

  .app-topbar-right {

    justify-content: flex-end
  }

  body.likes-hidden .post-like-btn {

    display: none
  }

  body:not(.talk-admin) .det-add {

    display: none
  }

  body:not(.talk-admin) #detail-reply-box {

    display: none
  }

  body:not(.talk-admin) .blog-comment-form {

    display: none
  }

  body:not(.talk-admin) .blog-reply-form {

    display: none
  }

  body:not(.talk-admin) #nav-add {

    display: none
  }

  body:not(.talk-admin) .feat-pin-btn {

    display: none
  }

  body:not(.talk-admin) .sl-av-edit-badge {

    display: none
  }

  body:not(.talk-admin) .mp-admin-add {

    display: none
  }

/* ── Tea Party nav: avatar is profile button; home is icon-only ── */
.talk-home-icon {

  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  gap: 0;
}

.talk-home-icon svg {

  width: 17px;
  height: 17px;
}

#talk-nav-profile {

  display: none;
}

body:not(.talk-admin) .app-topbar-user .dropdown-arrow-mobile, body:not(.talk-admin) .app-topbar-user .user-dropdown, body:not(.talk-admin) .app-topbar-user:hover .user-dropdown, body:not(.talk-admin) .app-topbar-user.active .user-dropdown {

  display: none;
}

body.talk-admin .app-topbar-user .dropdown-arrow-mobile {

  display: inline-block;
}

body.talk-admin .app-topbar-user.active .user-dropdown, body.talk-admin .app-topbar-user:hover .user-dropdown {

  display: flex;
}

.app-topbar-user.profile-active .app-topbar-avatar {

  outline: 2px solid var(--pk);
  outline-offset: 2px;
}

/* ── Tea Party blog button: left side of header ── */
.tea-blog-btn {

  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)),
    transparent;
  color: var(--ink2);
  cursor: var(--fd-cursor-action);
  padding: 0;
  margin-right: 7px;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}

.tea-blog-btn:hover {

  background: var(--border2);
  border-color: var(--ink3);
  color: var(--ink);
}

.tea-blog-btn:active {

  transform: scale(.94);
}

.tea-blog-btn svg {

  width: 15px;
  height: 15px;
  opacity: .9;
  flex-shrink: 0;
}

/* Mobile nav keeps Blog in the topbar, not the dock */
#page-talk #nav-blog-mobile {

  display: none;
}

/* ── Blog media label: plain + Media ── */

.update-image-label .update-image-placeholder {

  color: currentColor;
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
}

.update-image-label:hover {

  color: var(--ink);
}

/* ── Blog loader safety ── */
.talk-intro:not(.playing) {

  display: none;
  pointer-events: none;
}

.page-loader-error {

  padding: 32px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink2);
}

/* Blog header News button */
.tea-news-btn {

  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)),
    transparent;
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: var(--fd-cursor-action);
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}

.tea-news-btn:hover, .tea-news-btn.active {

  background: var(--border2);
  border-color: var(--ink3);
  color: var(--ink);
}

.tea-news-btn:active {

  transform: scale(.96);
}

/* Blog topbar News button */
#page-talk .app-topbar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  z-index: 3;
  grid-column: 1;
  justify-self: start;
  width: auto;
  flex: 1 1 0;
  padding-left: 0;
}

#page-talk #topbar-blog-btn.tea-news-btn {
  display: inline-flex;
  visibility: visible;
  opacity: 1;
  height: 30px;
  min-width: 58px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)),
    var(--s1);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  cursor: var(--fd-cursor-action);
  position: relative;
  z-index: 5;
  min-height: 30px;
  max-height: 30px;
  margin-left: 0;
}

#page-talk #topbar-blog-btn.tea-news-btn span {
  display: inline-block;
  color: currentColor;
}

#page-talk #topbar-blog-btn.tea-news-btn:hover, #page-talk #topbar-blog-btn.tea-news-btn.active {

  border-color: var(--ink3);
  background: var(--s2);
}

/* ── Blog topbar restored layout ── */
#page-talk .app-topbar {
  display: flex;
  grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  height: 56px;
  padding: 0 14px;
  margin: 0 12px 10px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .19)),
    rgba(255, 255, 255, .12);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(16px) saturate(1.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  position: relative;
  max-height: 56px;
  overflow: visible;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 10px;
}

#page-talk .app-topbar-center-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  transform: none;
  z-index: 2;
  flex: 0 0 auto;
}

#page-talk .app-topbar-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  width: auto;
  z-index: 3;
  flex: 1 1 0;
}

#page-talk .app-topbar-user {

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  position: relative;
}

#page-talk .app-search-input {

  display: block;
  width: 160px;
  max-width: 160px;
  min-width: 90px;
  height: 20px;
}

/* ── Blog profile post search ── */
#page-talk .app-topbar-left .app-search-input {

  display: none;
}

#page-talk .profile-post-search-box {

  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border2);
  background: var(--s1);
}

#page-talk .profile-post-search-input {

  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--s2);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  outline: none;
}

#page-talk .profile-post-search-input:focus {

  border-color: var(--ink3);
  background: var(--s1);
}

#page-talk .profile-post-search-clear {

  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1;
  cursor: var(--fd-cursor-action);
}

#page-talk .profile-post-search-clear.active {

  display: inline-flex;
}

/* ── Blog profile-only post search placement ── */
#page-talk #view-user-profile .user-profile-search-wrap-disabled {

  background: var(--s1);
  padding: 0 15px 15px 15px;
}

#page-talk #view-user-profile .profile-post-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  justify-self: end;
  width: 100%;
  max-width: 300px;
}

#page-talk #view-user-profile .profile-post-search-input {

  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--s2);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  outline: none;
}

#page-talk #view-user-profile .profile-post-search-clear {

  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1;
  cursor: var(--fd-cursor-action);
}

#page-talk #view-user-profile .profile-post-search-clear.active {

  display: inline-flex;
}

/* ── Blog profile bio row: search on right side ── */
#page-talk #view-user-profile .user-profile-bio-row {

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: center;
  gap: 12px;
  background: var(--s1);
  padding: 0 15px 15px 15px;
}

#page-talk #view-user-profile .user-profile-bio-copy {

  min-width: 0;
}

#page-talk #view-user-profile .user-profile-bio {

  padding: 0;
  margin: 0;
}

/* ── News list: card posts with Open button ── */
#page-talk #mobile-blog-container.news-post-list {

  padding: 12px;
  background: transparent;
  flex: 1;
  overflow-y: auto;
}

#page-talk .news-empty-state {

  padding: 20px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--s1);
  color: var(--ink3);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-align: center;
}

#page-talk #mobile-blog-container.news-post-list .news-post-card {

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  margin: 0 0 12px;
  border: 1px solid var(--border2);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.26)),
    var(--s1);
  box-shadow:
    0 12px 28px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.6);
}

html:not(.light-mode) #page-talk #mobile-blog-container.news-post-list .news-post-card {

  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)),
    rgba(255,255,255,.06);
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.2);
}

#page-talk #mobile-blog-container.news-post-list .news-post-main {

  min-width: 0;
}

#page-talk #mobile-blog-container.news-post-list .news-post-title {

  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: left;
  text-transform: uppercase;
  cursor: var(--fd-cursor-action);
}

#page-talk #mobile-blog-container.news-post-list .news-post-preview {

  margin-top: 5px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.35;
}

#page-talk #mobile-blog-container.news-post-list .news-post-meta {

  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--ink3);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
}

#page-talk #mobile-blog-container.news-post-list .news-post-open-btn {

  height: 30px;
  min-width: 64px;
  padding: 0 13px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--s2);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: var(--fd-cursor-action);
  justify-self: end;
}

#page-talk #mobile-blog-container.news-post-list .news-post-open-btn:hover {

  border-color: var(--ink3);
  background: var(--s3);
}

/* ── Blog header: align controls to the same ROW center ── */

#page-talk .app-topbar-left, #page-talk .app-topbar-center-nav, #page-talk .app-topbar-right {

  position: static;
  transform: none;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
}

#page-talk #topbar-blog-btn, #page-talk .talk-home-icon, #page-talk #topbar-user-toggle {

  position: static;
  transform: none;
  top: auto;
  bottom: auto;
  margin: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
}

#page-talk .talk-home-icon {

  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0;
}

#page-talk #topbar-user-toggle {

  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 8px;
}

#page-talk .app-topbar-avatar {

  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
}

#page-talk .dropdown-arrow-mobile {

  line-height: 1;
  margin: 0 4px 0 0;
}

#page-talk #nav-search-mobile, #page-talk .mobile-nav-item#nav-search-mobile, #page-talk #topbar-blog-btn svg {

  display: none;
}

/* ── Blog layout: row edge spacing and nav clearance ── */

/* keep the Blog app below the floating main nav buttons */
#page-talk .app-shell {

  margin-top: 18px;
}

body.dark-mode #page-talk .app-shell, html.dark-mode #page-talk .app-shell, html:not(.light-mode) #page-talk .app-shell {

  --ink: #ede8de;
  --ink2: rgba(237, 232, 222, .72);
  --ink3: rgba(237, 232, 222, .46);
  color: var(--ink);
}

#page-talk .talk-layout, #page-talk .talk-page-wrap, #page-talk .app-wrap {

  padding-top: 18px;
}

/* Blog sidebar: separate bubbles instead of one tall side slab. */
#page-talk .app-column-right {

    gap: 16px;
    padding: 14px 12px;
    background: transparent;
    background-color: transparent;
    background-image: none;
    border-left: 0;
    box-shadow: none;
    overflow-y: auto
}

#page-talk .blog-sidebar-panel {

    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .19)),
        rgba(255, 255, 255, .12);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .58);
    backdrop-filter: blur(16px) saturate(1.14);
    -webkit-backdrop-filter: blur(16px) saturate(1.14);
    overflow: hidden
}

#page-talk .blog-sidebar-panel .blog-sidebar-header {

    margin: 0;
    padding: 12px 14px 9px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    color: var(--ink2)
}

#page-talk .blog-sidebar-panel .blog-sidebar-list {

    height: min(270px, calc(100vh - 260px));
    min-height: 150px;
    margin: 0;
    padding: 8px 12px 10px;
    border-bottom: 0;
    background: transparent;
    scrollbar-color: rgba(0, 0, 0, .28) transparent
}

#page-talk .blog-sidebar-panel .trending-sidebar-list {

    min-height: 158px;
    padding: 8px 12px 12px
}

#page-talk .blog-sidebar-panel .blog-sidebar-item, #page-talk .blog-sidebar-panel .trending-item {

    border-color: rgba(0, 0, 0, .1)
}

#page-talk .blog-sidebar-panel .trending-item {

    border-radius: 10px;
    padding: 8px 6px
}

#page-talk .blog-sidebar-panel .trending-item:hover {

    background: rgba(255, 255, 255, .34)
}

body.dark-mode #page-talk .app-column-right {

    background: transparent;
    background-color: transparent;
    background-image: none;
    border-left: 0
}

body.dark-mode #page-talk .blog-sidebar-panel, html:not(.light-mode) #page-talk .blog-sidebar-panel {

    border-color: rgba(255, 255, 255, .12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08)),
        rgba(255, 255, 255, .06);
    box-shadow:
        0 16px 30px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .2);
    backdrop-filter: blur(16px) saturate(1.14);
    -webkit-backdrop-filter: blur(16px) saturate(1.14);
    color: #f2f2f2
}

body.dark-mode #page-talk .blog-sidebar-panel .blog-sidebar-header, html:not(.light-mode) #page-talk .blog-sidebar-panel .blog-sidebar-header {

    border-bottom-color: rgba(255, 255, 255, .08);
    color: #f1f1f1
}

body.dark-mode #page-talk .blog-sidebar-panel .blog-sidebar-item, body.dark-mode #page-talk .blog-sidebar-panel .trending-item, html:not(.light-mode) #page-talk .blog-sidebar-panel .blog-sidebar-item, html:not(.light-mode) #page-talk .blog-sidebar-panel .trending-item {

    border-color: rgba(255, 255, 255, .08)
}

body.dark-mode #page-talk .blog-sidebar-panel .trending-item:hover, html:not(.light-mode) #page-talk .blog-sidebar-panel .trending-item:hover {

    background: rgba(255, 255, 255, .075)
}


/* ── Desktop blog layout: left side panels, centered feed, right activity feed ── */
@media (min-width: 1100px) {
  #page-talk .app-shell {
    width: min(690px, calc(100vw - 640px));
    max-width: 690px;
    margin-left: auto;
    margin-right: auto;
  }

  #page-talk .app-main {
    display: block;
    overflow: visible;
  }

  #page-talk .app-column-left,
  #page-talk .app-column-right {
    position: fixed;
    top: 118px;
    width: min(286px, calc((100vw - 730px) / 2 - 30px));
    min-width: 240px;
    max-height: calc(100svh - 142px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    overflow-y: auto;
    z-index: 24;
  }

  #page-talk .app-column-left {
    left: clamp(18px, 3vw, 56px);
  }

  #page-talk .app-column-center {
    width: 100%;
    border-left: 0;
    border-right: 0;
  }

  #page-talk .app-column-right {
    right: clamp(18px, 3vw, 56px);
  }

  #page-talk .app-topbar {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 1099px) {
  #page-talk .app-column-left {
    display: none;
  }
}

#page-talk .activity-sidebar-panel {
  height: min(620px, calc(100svh - 142px));
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#page-talk .activity-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#page-talk .activity-feed-add-btn {
  display: none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  color: var(--ink);
  font: 9px/1 'DM Mono', monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 10px;
  cursor: var(--fd-cursor-action);
}

body.talk-admin #page-talk .activity-feed-add-btn {
  display: inline-flex;
}

#page-talk .activity-sidebar-subhead {
  padding: 0 14px 12px;
  color: var(--ink3);
  font: 10px/1.45 'DM Mono', monospace;
  letter-spacing: .5px;
}

#page-talk .activity-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  flex: 1 1 auto;
  min-height: 0;
}

#page-talk .activity-feed-empty {
  padding: 14px 10px;
  color: var(--ink3);
  font: 10px/1.5 'DM Mono', monospace;
  text-align: center;
}

#page-talk .activity-feed-item {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

#page-talk .activity-feed-row {
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px;
  grid-template-areas:
    "headline chevron"
    "meta chevron";
  align-items: center;
  column-gap: 7px;
  row-gap: 4px;
  padding: 7px 5px;
  color: inherit;
  text-decoration: none;
  transition: background-color .18s ease, padding-left .18s ease;
}

#page-talk a.activity-feed-row:hover,
#page-talk a.activity-feed-row:focus-visible {
  background: color-mix(in srgb, var(--pk) 10%, transparent);
  padding-left: 11px;
  outline: none;
}

#page-talk .activity-feed-platform {
  color: var(--ink2);
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  align-self: center;
  margin: 0;
}

#page-talk .activity-feed-platform-youtube svg {
  width: 17px;
  height: 14px;
  overflow: visible;
}

#page-talk .activity-feed-platform-youtube rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

#page-talk .activity-feed-platform-youtube path {
  fill: currentColor;
}

#page-talk .activity-feed-platform-text {
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 5px;
  font: 800 7px/1 'DM Mono', monospace;
  letter-spacing: -.2px;
}

#page-talk .activity-feed-headline {
  grid-area: headline;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#page-talk .activity-feed-new {
  flex: 0 0 auto;
  color: var(--pk);
  font: 900 8px/1 'DM Mono', monospace;
  letter-spacing: .8px;
  text-transform: uppercase;
}

#page-talk .activity-feed-title {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--ink);
  font: 600 11px/1.3 'DM Mono', monospace;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#page-talk .activity-feed-meta {
  grid-area: meta;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink3);
  font: 500 8px/1.2 'DM Mono', monospace;
  letter-spacing: .35px;
  white-space: nowrap;
}

#page-talk .activity-feed-age {
  margin-left: auto;
}

#page-talk .activity-feed-chevron {
  grid-area: chevron;
  color: var(--ink3);
  font: 300 22px/1 sans-serif;
}

@media (hover: none), (max-width: 768px) {
  body.talk-admin #page-talk .activity-feed-admin-controls {
    opacity: 1;
  }

  body.talk-admin #page-talk .activity-feed-meta {
    padding-right: 50px;
  }
}

#page-talk .activity-feed-admin-controls {
  position: absolute;
  top: 2px;
  right: 3px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .15s ease;
}

body.talk-admin #page-talk .activity-feed-admin-controls {
  display: flex;
}

#page-talk .activity-feed-edit,
#page-talk .activity-feed-remove {
  border: 0;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink2);
  cursor: var(--fd-cursor-action);
  font: 700 8px/1 'DM Mono', monospace;
}

#page-talk .activity-feed-edit {
  height: 19px;
  border-radius: 999px;
  padding: 0 7px;
  text-transform: uppercase;
}

#page-talk .activity-feed-remove {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  font-size: 11px;
}

#page-talk .activity-feed-item:hover .activity-feed-admin-controls,
#page-talk .activity-feed-admin-controls:focus-within {
  opacity: 1;
}

body.dark-mode #page-talk .activity-feed-add-btn,
html:not(.light-mode) #page-talk .activity-feed-add-btn,
body.dark-mode #page-talk .activity-feed-edit,
html:not(.light-mode) #page-talk .activity-feed-edit,
body.dark-mode #page-talk .activity-feed-remove,
html:not(.light-mode) #page-talk .activity-feed-remove {
  background: rgba(255,255,255,.12);
  color: #f2f2f2;
}

.activity-feed-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.activity-feed-editor {
  width: min(460px, calc(100vw - 32px));
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  background: rgba(16, 16, 18, .94);
  color: #f4f1eb;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .44);
  font-family: 'DM Mono', monospace;
}

.activity-feed-editor-head,
.activity-feed-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.activity-feed-editor-head strong {
  color: var(--pk);
  font-size: 11px;
  letter-spacing: 1.6px;
}

.activity-feed-editor label {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, .62);
  font: 700 9px/1 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.activity-feed-editor input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  padding: 11px 12px;
  font: 12px/1.2 'DM Mono', monospace;
  outline: none;
}

.activity-feed-editor input:focus {
  border-color: var(--pk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk) 18%, transparent);
}

.activity-feed-editor-note {
  margin: 0;
  color: rgba(255, 255, 255, .48);
  font: 9px/1.5 'DM Mono', monospace;
}

.activity-feed-editor button {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: inherit;
  padding: 9px 14px;
  cursor: var(--fd-cursor-action);
  font: 800 9px/1 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.activity-feed-editor-head button {
  width: 30px;
  height: 30px;
  padding: 0;
}

.activity-feed-editor-actions {
  justify-content: flex-end;
  margin-top: 3px;
}

.activity-feed-editor-actions [data-save] {
  border-color: var(--pk);
  background: var(--pk);
  color: #160f12;
}

html.light-mode .activity-feed-editor {
  border-color: rgba(0, 0, 0, .1);
  background: rgba(248, 248, 248, .94);
  color: #1c1719;
}

html.light-mode .activity-feed-editor label,
html.light-mode .activity-feed-editor-note {
  color: rgba(28, 23, 25, .58);
}

html.light-mode .activity-feed-editor input,
html.light-mode .activity-feed-editor button {
  border-color: rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .62);
  color: #1c1719;
}


#page-talk .activity-feed-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

#page-talk .activity-feed-scan-btn {
  min-width: 92px;
}

#page-talk .activity-feed-add-btn:disabled {
  cursor: var(--fd-cursor-progress);
  opacity: .58;
}