/* ═══════════════════════════════════════════════════════════════
   main.css — Core site styles: variables, layout, nav, profile,
              Instagram grid, YouTube grid, components
   ═══════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
  }

  :root {
    --bg: #0c0b0a;
    --s1: #141210;
    --s2: #1c1a17;
    --s3: #252320;
    --ink: #ede8de;
    --ink2: rgba(237, 232, 222, 0.55);
    --ink3: rgba(237, 232, 222, 0.22);
    --pk: #d4a0b5;
    --pk2: #e8c0d0;
    --cy: #8ec5c8;
    --pg: #9cbe94;
    --dp: #8878a0;
    --dp2: #b0a0c0;
    --border: rgba(237, 232, 222, 0.07);
    --border2: rgba(237, 232, 222, 0.12)
  }

  html.light-mode {
    --bg: #f6f5f4;
    --s1: #ffffff;
    --s2: #fbfaf9;
    --s3: #f0efee;
    --ink: #0c0b0a;
    --ink2: rgba(12, 11, 10, 0.80);
    --ink3: rgba(12, 11, 10, 0.45);
    --pk: #b85f7a;
    --pk2: #d99bb0;
    --cy: #317a78;
    --pg: #3b6f39;
    --dp: #5a4b73;
    --dp2: #8b78a2;
    --border: rgba(12, 11, 10, 0.08);
    --border2: rgba(12, 11, 10, 0.16)
  }

  html.light-mode .nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border)
  }

  html.light-mode .nav .nav-av svg,
  html.light-mode .nav .nav-search svg,
  html.light-mode .nav .nb {
    color: var(--ink3);
    stroke: currentColor;
    fill: none
  }

  body,
  html {
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    font-weight: 600;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
  }

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

  button {
    font-family: 'DM Sans', sans-serif;
    cursor: pointer
  }

  input,
  textarea {
    font-family: 'DM Sans', sans-serif
  }

  svg {
    stroke-width: 1.6px;
    vector-effect: non-scaling-stroke
  }

  .nav {
    position: sticky;
    top: 0;
    z-index: 300;
    height: 86px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
    background-color: rgba(12, 11, 10, .55);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    border-bottom: 1px solid rgba(237, 232, 222, .06);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .02);
    transition: background-color .25s ease, box-shadow .25s ease, transform .12s ease;
    position: sticky;
    overflow: visible
  }

  html:not(.light-mode) .nav {
    background-color: rgba(12, 11, 10, .82);
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .08));
    backdrop-filter: blur(8px) saturate(1.02);
    -webkit-backdrop-filter: blur(8px) saturate(1.02);
    border-bottom: 1px solid rgba(255, 255, 255, .03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .01)
  }

  html:not(.light-mode) .nav .nav-av svg,
  html:not(.light-mode) .nav .nav-search svg,
  html:not(.light-mode) .nav .nb,
  html:not(.light-mode) .nav .nb svg,
  html:not(.light-mode) .nav .nb-label,
  html:not(.light-mode) .nav .nb-star polygon {
    color: var(--ink);
    stroke: var(--ink);
    fill: var(--ink)
  }

  html:not(.light-mode) #nav-live .nb-icon svg,
  html:not(.light-mode) .nav-live-mini .nb-icon svg {
    stroke: var(--ink);
    fill: var(--ink);
    color: var(--ink)
  }

  html:not(.light-mode) .nav .nav-search {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .03)
  }

  html:not(.light-mode) .nav .nav-av:hover,
  html:not(.light-mode) .nav .nb:hover {
    color: var(--ink);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6))
  }

  .nav::after {
    pointer-events: none;
    opacity: .12
  }

  .nav::after {
    content: '';
    position: absolute;
    left: -40%;
    top: -30%;
    width: 60%;
    height: 160%;
    transform: rotate(-20deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .1) 60%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: .12;
    filter: blur(8px) saturate(1.2);
    transition: opacity .25s ease;
    animation: glass-shine 3.2s linear infinite
  }

  .nav:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .03)
  }

  .nav-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 6px;
    color: var(--ink);
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding-right: 16px;
    margin-right: 4px
  }

  .nav-logo b {
    color: var(--pk);
    font-weight: 400
  }

  .nav-search {
    background: var(--s2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    height: 28px;
    border-radius: 2px;
    transition: border-color .2s
  }

  .nav-search:focus-within {
    border-color: var(--cy)
  }

  .nav-search svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 2;
    flex-shrink: 0
  }

  .nav-search input {
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 13px;
    color: var(--ink);
    width: 140px;
    font-weight: 600
  }

  .nav-search input::placeholder {
    color: var(--ink3)
  }

  .nav-spacer {
    flex: 1
  }

  .nav-icons {
    display: flex;
    align-items: center;
    gap: 0
  }

  .nav-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 320;
    pointer-events: auto;
    gap: 12px;
    padding: 0 6px;
    overflow: visible;
    transition: transform .18s ease
  }

  @keyframes shimmer {
    0% {
      background-position: -200% center
    }
    100% {
      background-position: 200% center
    }
  }

  @keyframes shimmer-sweep {
    0% {
      left: -40%
    }
    100% {
      left: 140%
    }
  }

  @keyframes icon-bob {
    0%,
    100% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-2px)
    }
  }

  @keyframes nav-glow {
    0%,
    100% {
      filter: drop-shadow(0 0 4px rgba(255, 255, 255, .3))
    }
    50% {
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, .6))
    }
  }

  @keyframes icon-float {
    0%,
    100% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-3px)
    }
  }

  @keyframes exclaim-pop {
    0%,
    70% {
      transform: scale(.3) translateY(3px);
      opacity: 0
    }
    20% {
      transform: scale(1.4) translateY(-1px);
      opacity: 1
    }
    40% {
      transform: scale(1) translateY(0);
      opacity: 1
    }
    60% {
      transform: scale(1) translateY(0);
      opacity: .9
    }
  }

  @keyframes shout-wave {
    0% {
      opacity: 0;
      transform: translateX(-2px)
    }
    30% {
      opacity: 1;
      transform: translateX(0)
    }
    100% {
      opacity: 0;
      transform: translateX(5px)
    }
  }

  @keyframes eye-blink {
    0%,
    100%,
    88% {
      transform: scaleY(1)
    }
    92%,
    96% {
      transform: scaleY(.08)
    }
  }

  .talk-exclaim-pop {
    animation: exclaim-pop 2.5s ease-in-out infinite;
    transform-origin: 12px 13px
  }

  .shout-1 {
    animation: shout-wave 1.4s ease-out infinite 0s
  }

  .shout-2 {
    animation: shout-wave 1.4s ease-out infinite .35s
  }

  .shout-3 {
    animation: shout-wave 1.4s ease-out infinite .7s
  }

  .eye-blink-svg {
    animation: eye-blink 4s ease-in-out infinite;
    transform-origin: 12px 12px
  }

  @keyframes finger-swipe {
    0% {
      transform: translateY(4px);
      opacity: 0
    }
    30% {
      opacity: 1
    }
    70% {
      transform: translateY(-8px);
      opacity: 1
    }
    100% {
      transform: translateY(-14px);
      opacity: 0
    }
  }

  @keyframes scroll-lines {
    0%,
    100% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-3px)
    }
  }

  #nav-scrollables .scroll-line-1 {
    animation: scroll-lines 1.2s ease-in-out infinite 0s
  }

  #nav-scrollables .scroll-line-2 {
    animation: scroll-lines 1.2s ease-in-out infinite .15s
  }

  #nav-scrollables .scroll-line-3 {
    animation: scroll-lines 1.2s ease-in-out infinite .3s
  }

  #nav-scrollables .scroll-line-4 {
    animation: scroll-lines 1.2s ease-in-out infinite .45s
  }

  @keyframes live-arc1 {
    0%,
    100% {
      opacity: .3;
      stroke-width: 1.8
    }
    50% {
      opacity: 1;
      stroke-width: 2.2
    }
  }

  @keyframes live-arc2 {
    0%,
    100% {
      opacity: .15;
      stroke-width: 1.8
    }
    50% {
      opacity: .8;
      stroke-width: 2.2
    }
  }

  @keyframes music-wave {
    0%,
    100% {
      opacity: .15;
      transform: scaleX(.7);
      transform-origin: left center
    }
    50% {
      opacity: .9;
      transform: scaleX(1);
      transform-origin: left center
    }
  }

  @keyframes note-fly1 {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(.6)
    }
    20% {
      opacity: 1
    }
    100% {
      opacity: 0;
      transform: translate(6px, -12px) scale(1)
    }
  }

  @keyframes note-fly2 {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(.5)
    }
    20% {
      opacity: .8
    }
    100% {
      opacity: 0;
      transform: translate(9px, -10px) scale(.9)
    }
  }

  @keyframes note-fly3 {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(.4)
    }
    20% {
      opacity: .7
    }
    100% {
      opacity: 0;
      transform: translate(5px, -14px) scale(.8)
    }
  }

  .music-note-1 {
    animation: note-fly1 2.2s ease-out infinite;
    display: inline-block
  }

  .music-note-2 {
    animation: note-fly2 2.2s ease-out infinite .7s;
    display: inline-block
  }

  .music-note-3 {
    animation: note-fly3 2.2s ease-out infinite 1.4s;
    display: inline-block
  }

  .shop-dollar-1 {
    animation: note-fly1 2.5s ease-out infinite;
    display: inline-block
  }

  .shop-dollar-2 {
    animation: note-fly2 2.5s ease-out infinite .8s;
    display: inline-block
  }

  .shop-dollar-3 {
    animation: note-fly3 2.5s ease-out infinite 1.6s;
    display: inline-block
  }

  #nav-live .nb-icon path:nth-child(2) {
    animation: live-arc1 1.4s ease-in-out infinite
  }

  #nav-live .nb-icon path:nth-child(3) {
    animation: live-arc2 1.4s ease-in-out infinite .2s
  }

  @keyframes star-spin {
    0% {
      transform: rotate(0)
    }
    100% {
      transform: rotate(360deg)
    }
  }

  @keyframes star-shadow-pulse {
    0% {
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6))
    }
    50% {
      filter: drop-shadow(0 9px 20px rgba(0, 0, 0, .72))
    }
    100% {
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6))
    }
  }

  .main-nav-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    border: none;
    background: 0 0;
    cursor: pointer;
    position: relative;
    min-width: 72px;
    height: 78px;
    border-radius: 10px;
    transition: transform .18s cubic-bezier(.2, .9, .2, 1), box-shadow .18s, filter .18s;
    will-change: transform, box-shadow
  }

  .main-nav-btn .nb-star-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .18s ease, box-shadow .18s ease
  }

  .main-nav-btn .nb-star {
    position: absolute;
    inset: 0;
    transition: opacity .2s, filter .2s;
    overflow: visible
  }

  .main-nav-btn .nb-star polygon {
    fill: var(--s2);
    stroke: var(--border2);
    stroke-width: 1.5;
    transition: fill .2s, stroke .2s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
    will-change: filter, transform;
    animation: star-shadow-pulse 3.6s linear infinite
  }

  .nb-icon svg,
  .nb-star,
  .nb-star svg,
  .nb-star-wrap {
    overflow: visible;
    vector-effect: non-scaling-stroke
  }

  .main-nav-btn .nb-icon {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: icon-float 2.8s ease-in-out infinite;
    width: 22px;
    height: 22px;
    overflow: visible;
    transition: transform .18s ease
  }

  .main-nav-btn .nb-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink3);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s;
    flex-shrink: 0;
    overflow: visible
  }

  .main-nav-btn .nb-label {
    font-family: Sprayerz, cursive;
    font-size: 10px;
    color: #000;
    margin-top: 1px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .2s;
    white-space: nowrap;
    text-align: center
  }

  .main-nav-btn:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45))
  }

  .main-nav-btn:hover .nb-star polygon {
    fill: var(--s3);
    stroke: rgba(255, 255, 255, 0.95)
  }

  .main-nav-btn:hover .nb-icon svg {
    stroke: #fff;
    transform: translateY(-1px) scale(1.06)
  }

  .main-nav-btn:hover .nb-label {
    color: #fff;
    transform: translateY(-1px);
    font-weight: 700
  }

  .main-nav-btn.active .nb-star polygon,
  .main-nav-btn.on .nb-star polygon {
    fill: url(#zebra-nav-pattern);
    stroke: none
  }

  .main-nav-btn.active .nb-icon svg,
  .main-nav-btn.on .nb-icon svg {
    stroke: var(--bg)
  }

  .main-nav-btn.active .nb-label,
  .main-nav-btn.on .nb-label {
    color: var(--ink)
  }

  .main-nav-btn.active,
  .main-nav-btn.on {
    animation: nav-glow 2s ease-in-out infinite
  }

  #nav-live .nb-icon {
    animation-delay: 0s
  }

  #nav-live .nb-star-wrap {
    width: 56px;
    height: 56px
  }

  #nav-live .nb-icon {
    width: 34px;
    height: 34px
  }

  #nav-live .nb-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.2
  }

  #nav-scrollables .nb-icon {
    animation-delay: .4s
  }

  #nav-talk .nb-icon {
    animation-delay: .8s
  }

  #nav-profile .nb-icon {
    animation-delay: 1.2s
  }

  #nav-community .nb-icon {
    animation-delay: 1.6s
  }

  #nav-music .nb-icon {
    animation-delay: 2s
  }

  #nav-shop-main .nb-icon {
    animation-delay: 2.4s
  }

  .main-nav-btn .main-nav-label {
    display: none
  }

  .main-nav-btn .badge {
    display: none
  }

  #nav-music .nb-icon span,
  #nav-music .nb-icon svg {
    stroke: #000 !important;
    color: #000 !important;
    fill: none !important
  }

  html:not(.light-mode) #nav-music .nb-icon .music-note-1,
  html:not(.light-mode) #nav-music .nb-icon .music-note-2,
  html:not(.light-mode) #nav-music .nb-icon .music-note-3 {
    color: #fff !important
  }

  .bra-nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    height: 80px;
    width: 116px;
    flex-shrink: 0;
    transition: filter .2s
  }

  .bra-svg {
    width: 110px;
    height: auto;
    overflow: visible;
    display: block
  }

  .bra-cup-fill {
    fill: var(--s2);
    stroke: var(--ink3);
    stroke-width: 1.3;
    stroke-dasharray: 3.5 2;
    stroke-linecap: round;
    transition: fill .2s, stroke .2s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5))
  }

  .bra-band {
    fill: var(--s2);
    stroke: var(--ink3);
    stroke-width: 1;
    transition: fill .2s, stroke .2s
  }

  .bra-strap {
    stroke: var(--ink3);
    stroke-width: 1.3;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .bra-gore {
    stroke: var(--ink3);
    stroke-width: .9;
    stroke-dasharray: 2 2;
    opacity: .4;
    transition: stroke .2s
  }

  .bra-lace-top {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
    transition: stroke .2s, opacity .2s
  }

  .bra-inner-lace {
    fill: none;
    stroke: var(--pk2);
    stroke-width: .65;
    stroke-dasharray: 1.4 2.4;
    stroke-linecap: round;
    opacity: .4;
    transition: stroke .2s
  }

  .bra-underwire {
    fill: none;
    stroke: var(--ink3);
    stroke-width: .85;
    opacity: .55;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .bra-band-lace {
    fill: none;
    stroke: var(--pk);
    stroke-width: .75;
    stroke-dasharray: 2 1.8;
    stroke-linecap: round;
    opacity: .5;
    transition: stroke .2s
  }

  .bra-bow-loop {
    fill: none;
    stroke: var(--pk);
    stroke-width: .85;
    stroke-linejoin: round;
    transition: stroke .2s
  }

  .bra-bow-loop-fill {
    fill: var(--s2);
    stroke: var(--pk);
    stroke-width: .85;
    stroke-linejoin: round;
    transition: fill .2s, stroke .2s
  }

  .bra-bow-loop-crease {
    fill: none;
    stroke: var(--pk2);
    stroke-width: .5;
    stroke-linecap: round;
    opacity: .45
  }

  .bra-bow-knot-fill {
    fill: var(--pk);
    stroke: none;
    opacity: .88;
    transition: fill .2s
  }

  .bra-bow-knot-stitch {
    fill: none;
    stroke: var(--pk2);
    stroke-width: .5;
    stroke-linecap: round;
    opacity: .65
  }

  .bra-bow-knot-dot {
    fill: var(--s2);
    stroke: var(--pk);
    stroke-width: .5
  }

  .bra-bow-ribbon {
    stroke: var(--pk);
    stroke-width: .95;
    stroke-linecap: round;
    fill: none;
    opacity: .9
  }

  .bra-bow-tip {
    stroke: var(--pk);
    stroke-width: .75;
    fill: none;
    stroke-linecap: round;
    opacity: .65
  }

  @keyframes ribbon-fall {
    0% {
      transform: translateY(0) rotate(0)
    }
    50% {
      transform: translateY(2px) rotate(-1.5deg)
    }
    100% {
      transform: translateY(0) rotate(0)
    }
  }

  @keyframes ribbon-sway {
    0% {
      transform: translateX(0)
    }
    50% {
      transform: translateX(1.5px) rotate(1.5deg)
    }
    100% {
      transform: translateX(0)
    }
  }

  .ribbon-1 {
    transform-origin: 59px 36px;
    animation: ribbon-fall 2.6s ease-in-out infinite, ribbon-sway 3.4s ease-in-out infinite
  }

  .ribbon-2 {
    transform-origin: 61px 36px;
    animation: ribbon-fall 3s ease-in-out infinite .3s, ribbon-sway 3.8s ease-in-out infinite .25s
  }

  .bra-nav-btn:hover .bra-lace-top {
    stroke: rgba(255, 255, 255, 0.75);
    opacity: .8
  }

  .bra-nav-btn:hover .bra-inner-lace {
    stroke: rgba(255, 255, 255, 0.5)
  }

  .bra-nav-btn:hover .bra-underwire {
    stroke: rgba(255, 255, 255, 0.45)
  }

  .bra-nav-btn:hover .bra-band-lace {
    stroke: rgba(255, 255, 255, 0.6)
  }

  .bra-nav-btn:hover .bra-bow-loop,
  .bra-nav-btn:hover .bra-bow-loop-fill {
    fill: none;
    stroke: var(--pk2)
  }

  .bra-nav-btn:hover .bra-bow-knot-fill {
    fill: var(--pk2)
  }

  .bra-nav-btn:hover .bra-bow-ribbon,
  .bra-nav-btn:hover .bra-bow-tip {
    stroke: var(--pk2)
  }

  .bra-nav-btn.active .bra-bow-loop,
  .bra-nav-btn.active .bra-bow-loop-fill,
  .bra-nav-btn.on .bra-bow-loop,
  .bra-nav-btn.on .bra-bow-loop-fill {
    fill: url(#zebra-nav-pattern);
    stroke: none
  }

  .bra-left-content {
    position: absolute;
    left: 13px;
    top: 47%;
    transform: translateY(-50%);
    color: var(--ink2);
    transition: color .2s;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .bra-right-content {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink2);
    transition: color .2s;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-top: 1px
  }

  .bra-shop-label {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink)
  }

  .bra-nav-btn:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7))
  }

  .bra-nav-btn:hover .bra-cup-fill {
    fill: var(--s3);
    stroke: rgba(255, 255, 255, 0.9);
    stroke-dasharray: none
  }

  .bra-nav-btn:hover .bra-band {
    fill: var(--s3);
    stroke: rgba(255, 255, 255, 0.9)
  }

  .bra-nav-btn:hover .bra-gore,
  .bra-nav-btn:hover .bra-strap {
    stroke: rgba(255, 255, 255, 0.7)
  }

  .bra-nav-btn:hover .bra-left-content,
  .bra-nav-btn:hover .bra-right-content {
    color: #fff
  }

  .bra-nav-btn.active .bra-cup-fill,
  .bra-nav-btn.on .bra-cup-fill {
    fill: url(#zebra-nav-pattern);
    stroke: none;
    stroke-dasharray: none
  }

  .bra-nav-btn.active .bra-band,
  .bra-nav-btn.on .bra-band {
    fill: url(#zebra-nav-pattern);
    stroke: none
  }

  .bra-nav-btn.active .bra-left-content,
  .bra-nav-btn.active .bra-right-content,
  .bra-nav-btn.on .bra-left-content,
  .bra-nav-btn.on .bra-right-content {
    color: var(--bg)
  }

  .bra-nav-btn.active,
  .bra-nav-btn.on {
    animation: nav-glow 2s ease-in-out infinite
  }

  #nav-profile {
    width: 82px
  }

  #nav-profile .nb-star-wrap {
    width: 70px;
    height: 70px
  }

  #nav-profile .nb-icon {
    width: 28px;
    height: 28px
  }

  #nav-profile .nb-icon svg {
    width: 22px;
    height: 22px
  }

  #nav-profile .nb-label {
    font-size: 11.5px;
    letter-spacing: 1.5px
  }

  .nav-live-mini {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    position: relative;
    width: 40px;
    height: 80px;
    transition: filter .2s
  }

  .nav-live-mini .nb-star-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
  }

  .nav-live-mini .nb-star {
    position: absolute;
    inset: 0;
    transition: opacity .2s, filter .2s
  }

  .nav-live-mini .nb-star polygon {
    fill: var(--s2);
    stroke: var(--border2);
    stroke-width: 1.5;
    transition: fill .2s, stroke .2s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7))
  }

  .nav-live-mini .nb-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: icon-float 2.8s ease-in-out infinite;
    width: 20px;
    height: 20px;
    overflow: visible
  }

  .nav-live-mini .nb-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink3);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s;
    overflow: visible
  }

  .nav-live-mini .nb-label {
    font-family: Sprayerz, cursive;
    font-size: 6.5px;
    color: #000;
    margin-top: 1px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .2s;
    white-space: nowrap;
    text-align: center
  }

  .nav-live-mini:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7))
  }

  .nav-live-mini:hover .nb-star polygon {
    fill: var(--s3);
    stroke: rgba(255, 255, 255, 0.9)
  }

  .nav-live-mini:hover .nb-icon svg {
    stroke: #fff
  }

  .nav-live-mini:hover .nb-label {
    color: #fff
  }

  .nav-live-mini.active .nb-star polygon,
  .nav-live-mini.on .nb-star polygon {
    fill: url(#zebra-nav-pattern);
    stroke: none
  }

  .nav-live-mini.active .nb-icon svg,
  .nav-live-mini.on .nb-icon svg {
    stroke: var(--bg)
  }

  .nav-live-mini.active .nb-label,
  .nav-live-mini.on .nb-label {
    color: var(--ink)
  }

  .nav-live-mini.active,
  .nav-live-mini.on {
    animation: nav-glow 2s ease-in-out infinite
  }

  .nav-profile {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--s2);
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    color: var(--ink3);
    font-size: 16px
  }

  .nav-profile svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
  }

  .nav-profile.active,
  .nav-profile.on {
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 10px rgba(212, 160, 181, .06) inset;
    border-color: var(--pk);
    color: var(--pk)
  }

  .nb {
    background: 0 0;
    border: none;
    color: var(--ink3);
    padding: 0 9px;
    height: 80px;
    display: flex;
    align-items: center;
    transition: color .15s;
    position: relative
  }

  .nb.on,
  .nb:hover {
    color: var(--ink)
  }

  .nb svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5
  }

  .nb-dot {
    position: absolute;
    top: 9px;
    right: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pk);
    border: 1px solid var(--bg)
  }

  .nav-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--s2);
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    margin-left: 4px;
    transition: border-color .2s
  }

  #nav-settings-btn {
    border-left: 1px solid var(--border);
    padding-left: 12px;
    margin-left: 8px
  }

  .nav-av:hover {
    border-color: var(--pk)
  }

  .nav-av svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.5
  }

  .nav-av img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .page {
    display: none
  }

  .page.active {
    display: block
  }

  .three-col {
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto;
    min-height: auto;
    border-top: none
  }

  .sidebar-left {
    border-right: 1px solid var(--border);
    background: var(--s1);
    position: relative;
    height: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column
  }

  .sidebar-left::-webkit-scrollbar {
    display: none
  }

  .sl-avatar-block {
    position: relative;
    background: var(--s2);
    border-bottom: 1px solid var(--border);
    overflow: hidden
  }

  .sl-avatar-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(ellipse 10px 13px at 12px 14px, rgba(136, 120, 160, .08) 0, rgba(136, 120, 160, .08) 28%, transparent 28%);
    background-size: 24px 26px;
    pointer-events: none
  }

  .sl-avatar-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px
  }

  .sl-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--s3);
    border: 2px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    cursor: pointer;
    transition: border-color .2s;
    margin-bottom: 12px;
    position: relative
  }

  .sl-avatar:hover {
    border-color: var(--pk)
  }

  .sl-avatar svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: .9
  }

  .sl-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
  }

  .sl-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .sl-av-edit-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--s1);
    border: 1.5px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .2s;
    z-index: 2;
    cursor: pointer
  }

  .sl-avatar:hover .sl-av-edit-badge {
    opacity: 1;
    border-color: var(--pk)
  }

  .sl-av-edit-badge svg {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: var(--pk);
    stroke-width: 2
  }

  .sl-name {
    font-family: Sprayerz, sans-serif;
    font-size: 26px;
    letter-spacing: 3px;
    color: var(--ink);
    line-height: .95;
    text-align: center
  }

  .sl-name b {
    color: var(--pk);
    font-weight: 400
  }

  .sl-realname {
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    color: var(--ink3);
    margin-top: 4px;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase
  }

  .sl-follow-count {
    display: inline-block;
    margin-top: 12px
  }

  .fans-star-wrap {
    text-align: center;
    margin-top: 8px;
    cursor: pointer;
    display: block
  }

  .fans-shadow-el {
    fill: rgba(0, 0, 0, 0.28);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity
  }

  @keyframes fans-shadow-pulse {
    0%,
    100% {
      transform: scaleX(1) scaleY(1);
      opacity: .28
    }
    50% {
      transform: scaleX(.52) scaleY(.45);
      opacity: .07
    }
  }

  .fans-star-g {
    will-change: transform
  }

  @keyframes fans-float {
    0%,
    100% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-8px)
    }
  }

  .fans-star-g {
    animation: fans-float 3.2s ease-in-out infinite !important;
    will-change: transform, opacity !important
  }

  .fans-shadow-el {
    animation: fans-shadow-pulse 3.2s linear infinite !important;
    will-change: transform, opacity !important
  }

  .fans-star-poly {
    fill: var(--s2);
    stroke: var(--border2);
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3))
  }

  .fans-sparkle {
    display: none
  }

  .fans-star-num {
    transform-box: fill-box;
    transform-origin: center;
    animation: fans-num-drift 3.2s ease-in-out infinite
  }

  @keyframes fans-num-drift {
    0%,
    100% {
      transform: translateY(0);
      opacity: 1
    }
    50% {
      transform: translateY(-2px);
      opacity: .85
    }
  }

  .fans-star-label {
    transform-box: fill-box;
    transform-origin: center;
    animation: fans-label-drift 3.2s ease-in-out infinite
  }

  @keyframes fans-label-drift {
    0%,
    100% {
      transform: translateY(0);
      opacity: .6
    }
    50% {
      transform: translateY(-1px);
      opacity: .45
    }
  }

  .sl-info {
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px
  }

  .sl-row {
    display: flex;
    align-items: center;
    gap: 8px
  }

  .sl-row-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    flex-shrink: 0;
    width: 62px;
    font-weight: 700
  }

  .sl-row-val {
    font-size: 11px;
    color: var(--ink2)
  }

  .sl-row-val b {
    color: var(--ink);
    font-weight: 500
  }

  .sl-lvl {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--pk);
    background: rgba(212, 160, 181, .08);
    border: 1px solid rgba(212, 160, 181, .2);
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block
  }

  .sl-lvl-block {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
  }

  .lvl-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0
  }

  .lvl-val {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: url('https://i.imgur.com/tO4Mbo6.jpeg') center/cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: saturate(0) contrast(3)
  }

  .lvl-range {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--ink3);
    display: flex;
    gap: 6px;
    align-items: center
  }

  .lvl-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
  }

  .lvl-visual {
    width: 140px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0
  }

  .lvl-bar {
    --h: 10px;
    flex: 1;
    height: var(--h);
    background: rgba(255, 255, 255, .04);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border2)
  }

  .lvl-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: url('https://i.imgur.com/tO4Mbo6.jpeg') center/cover repeat;
    border-radius: 999px;
    filter: saturate(0);
    transition: width 1.2s cubic-bezier(.2, .9, .2, 1);
    animation: zebra-scroll 3s linear infinite
  }

  @keyframes zebra-scroll {
    0% {
      background-position: 0 0
    }
    100% {
      background-position: 60px 0
    }
  }

  .lvl-bar-label {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    color: var(--ink3);
    pointer-events: none
  }

  .lvl-endnums {
    display: flex;
    align-items: center
  }

  .lvl-endnums .num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 1px
  }

  .lvl-endnums .num.left {
    color: var(--ink)
  }

  .lvl-endnums .num.right {
    color: var(--ink3)
  }

  .lvl-bar-fill::after {
    content: '';
    position: absolute;
    left: -40%;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    animation: shimmer-sweep 1.6s linear infinite
  }

  .lvl-tooltip {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--s2);
    border: 1px solid var(--border);
    padding: 5px 8px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    top: -32px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s
  }

  .lvl-wrapper {
    position: relative
  }

  .lvl-wrapper:hover .lvl-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-12px)
  }

  .sl-flag {
    font-size: 14px
  }

  .sl-song-block {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border)
  }

  @keyframes glass-shine {
    0% {
      transform: translateX(-120%) skewX(-15deg)
    }
    100% {
      transform: translateX(300%) skewX(-15deg)
    }
  }

  .np-widget,
  .sl-discord-widget {
    position: relative;
    overflow: hidden;
    z-index: auto
  }

  .np-widget::after,
  .sl-discord-widget::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .07) 60%, transparent 100%);
    animation: glass-shine 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 5
  }

  .np-widget::before,
  .sl-discord-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .01) 40%, transparent 100%);
    pointer-events: none;
    z-index: 4;
    border-radius: inherit
  }

  .sl-discord-widget {
    margin: 10px 14px;
    padding: 8px 10px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .1) 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--ink);
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .02);
    transition: box-shadow .18s, border-color .18s, transform .12s
  }

  .sl-discord-widget:hover {
    background: linear-gradient(180deg, rgba(98, 100, 103, .06), rgba(98, 100, 103, .03));
    border-color: var(--pk);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 2px 6px rgba(212, 160, 181, .04);
    transform: translateY(-1px)
  }

  .sl-discord-widget .sd-label {
    display: flex;
    align-items: center;
    gap: 8px
  }

  .sl-discord-widget .sd-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5865f2;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
    border: 1px solid rgba(0, 0, 0, .12)
  }

  .sl-discord-widget .sd-go div {
    filter: saturate(0)
  }

  .panties-widget {
    position: relative;
    margin: 8px 14px;
    padding: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    display: block;
    transition: filter .2s;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
    z-index: 10
  }

  .panties-widget:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55))
  }

  .panties-svg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block
  }

  /* ensure Now Playing widget sits above the panties widget on mobile/desktop */

  .sl-song-block .np-widget {
    position: relative;
    z-index: 40
  }

  .panties-body {
    fill: var(--s2);
    stroke: var(--ink3);
    stroke-width: 1.3;
    stroke-dasharray: 3.5 2;
    stroke-linecap: round;
    transition: fill .2s, stroke .2s
  }

  .panties-band {
    fill: var(--s2);
    stroke: var(--ink3);
    stroke-width: 1;
    transition: fill .2s, stroke .2s
  }

  .panties-band-top {
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.8;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-lace {
    fill: none;
    stroke: var(--pk);
    stroke-width: .85;
    stroke-dasharray: 2.5 2;
    opacity: .6;
    stroke-linecap: round
  }

  .panties-gore {
    stroke: var(--ink3);
    stroke-width: .9;
    stroke-dasharray: 2 2;
    opacity: .4;
    fill: none
  }

  .panties-bow-loop {
    fill: none;
    stroke: var(--pk2);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .95;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25))
  }

  .panties-bow-knot {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .panties-bow-ribbon {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: .98
  }

  .panties-bow-tip {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.1;
    stroke-linecap: round;
    opacity: .9
  }

  .panties-bow-dot {
    fill: var(--pk);
    stroke: none
  }

  .panties-label {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    fill: var(--ink2);
    transition: fill .2s
  }

  .panties-string {
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-widget:hover .panties-string {
    stroke: rgba(255, 255, 255, 0.65)
  }

  .panties-widget:hover .panties-body {
    fill: var(--s3);
    stroke: rgba(255, 255, 255, 0.85);
    stroke-dasharray: none
  }

  .panties-widget:hover .panties-band {
    fill: var(--s3);
    stroke: rgba(255, 255, 255, 0.85)
  }

  .panties-widget:hover .panties-band-top {
    stroke: rgba(255, 255, 255, 0.9)
  }

  .panties-widget:hover .panties-lace {
    stroke: rgba(255, 255, 255, 0.65)
  }

  .panties-widget:hover .panties-gore {
    stroke: rgba(255, 255, 255, 0.35)
  }

  .panties-widget:hover .panties-bow-loop {
    stroke: var(--s3)
  }

  .panties-widget:hover .panties-bow-knot,
  .panties-widget:hover .panties-bow-ribbon,
  .panties-widget:hover .panties-bow-tip {
    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-bow-dot {
    fill: var(--pk2)
  }

  .panties-widget:hover .panties-label {
    fill: var(--ink)
  }

  .bra-scallop {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s
  }

  .bra-pearl {
    fill: var(--pk);
    opacity: .5;
    transition: fill .2s, opacity .2s
  }

  .bra-seam {
    fill: none;
    stroke: var(--ink3);
    stroke-width: .55;
    stroke-dasharray: 1.5 2.5;
    opacity: .38;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .bra-strap-ring {
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.1;
    transition: stroke .2s
  }

  .bra-inner-lace {
    fill: none;
    stroke: var(--pk);
    stroke-width: .75;
    stroke-dasharray: 1.6 1.8;
    stroke-linecap: round;
    opacity: .55;
    transition: stroke .2s
  }

  .bra-floral {
    fill: var(--pk);
    opacity: .3;
    transition: fill .2s
  }

  .bra-floral-petal {
    fill: none;
    stroke: var(--pk);
    stroke-width: .85;
    transition: stroke .2s
  }

  .bra-nav-btn:hover .bra-floral-petal {
    stroke: rgba(255, 255, 255, 0.65)
  }

  .bra-nav-btn:hover .bra-scallop {
    stroke: rgba(255, 255, 255, 0.8)
  }

  .bra-nav-btn:hover .bra-pearl {
    fill: #fff;
    opacity: .8
  }

  .bra-nav-btn:hover .bra-seam {
    stroke: rgba(255, 255, 255, 0.35)
  }

  .bra-nav-btn:hover .bra-strap-ring {
    stroke: rgba(255, 255, 255, 0.7)
  }

  .bra-nav-btn:hover .bra-floral {
    fill: #fff;
    opacity: .5
  }

  .bra-nav-btn.active .bra-pearl,
  .bra-nav-btn.on .bra-pearl {
    fill: var(--bg)
  }

  .bra-bow-ribbon {
    stroke: var(--pk);
    stroke-width: 1.2;
    stroke-linecap: round;
    fill: none;
    opacity: .85;
    vector-effect: non-scaling-stroke
  }

  .bra-bow-tip {
    stroke: var(--pk);
    stroke-width: .9;
    fill: none;
    stroke-linecap: round;
    opacity: .7
  }

  .bra-nav-btn:hover .bra-bow-ribbon {
    stroke: var(--pk2)
  }

  .bra-nav-btn:hover .bra-bow-tip {
    stroke: var(--pk2)
  }

  .panties-scallop {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s
  }

  .panties-pearl {
    fill: var(--pk);
    opacity: .45;
    transition: fill .2s, opacity .2s
  }

  .panties-seam {
    fill: none;
    stroke: var(--ink3);
    stroke-width: .55;
    stroke-dasharray: 2 3;
    opacity: .32;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-bow-loop-fill {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-bow-loop-crease {
    fill: none;
    stroke: var(--pk2);
    stroke-width: .65;
    stroke-linecap: round;
    opacity: .6
  }

  .panties-bow-knot-fill {
    fill: var(--pk);
    stroke: none;
    opacity: .9;
    transition: fill .2s
  }

  .panties-bow-knot-stitch {
    fill: none;
    stroke: var(--pk2);
    stroke-width: .55;
    stroke-linecap: round;
    opacity: .75
  }

  .panties-lace-inner {
    fill: none;
    stroke: var(--pk);
    stroke-width: .65;
    stroke-dasharray: 1.4 2;
    stroke-linecap: round;
    opacity: .38;
    transition: stroke .2s
  }

  .panties-bow-ribbon {
    fill: none;
    stroke: var(--pk);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: .9
  }

  .panties-bow-tip {
    fill: none;
    stroke: var(--pk);
    stroke-width: .9;
    stroke-linecap: round;
    opacity: .75
  }

  .panties-widget:hover .panties-bow-ribbon {
    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-bow-tip {
    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-scallop {
    stroke: rgba(255, 255, 255, 0.8)
  }

  .panties-widget:hover .panties-pearl {
    fill: #fff;
    opacity: .7
  }

  .panties-widget:hover .panties-seam {
    stroke: rgba(255, 255, 255, 0.3)
  }

  .panties-widget:hover .panties-bow-loop-fill {
    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-bow-knot-fill {
    fill: var(--pk2)
  }

  .panties-widget:hover .panties-lace-inner {
    stroke: rgba(255, 255, 255, 0.4)
  }

  .panties-widget:hover .panties-bow-loop-crease {
    stroke: rgba(255, 255, 255, 0.55)
  }

  .age18-badge {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
  }

  .age18-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed var(--pk);
    animation: spin 5s linear infinite;
    opacity: .8
  }

  .age18-ring2 {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px dashed var(--pk2);
    animation: spin 5s linear infinite reverse;
    opacity: .5
  }

  .age18-inner {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    color: var(--pk);
    letter-spacing: 0;
    text-align: center;
    line-height: 1;
    animation: age18-pulse 2.2s ease-in-out infinite;
    position: relative;
    z-index: 1
  }

  @keyframes age18-pulse {
    0%,
    100% {
      color: var(--pk);
      text-shadow: 0 0 4px rgba(212, 160, 181, .4)
    }
    50% {
      color: var(--pk2);
      text-shadow: 0 0 10px rgba(232, 192, 208, .9), 0 0 20px rgba(212, 160, 181, .5)
    }
  }

  .np-widget {
    background: linear-gradient(160deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .1) 100%), var(--s2);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .2)
  }

  .np-widget .np-notes {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 34px;
    height: 34px;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    transform-origin: center;
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 9
  }

  .np-widget .np-notes span {
    display: inline-block;
    color: var(--pk2);
    line-height: 1;
    font-size: 11px;
    transform-origin: center;
    will-change: transform, opacity;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .55)
  }

  .np-widget.playing .np-notes {
    opacity: 1
  }

  .np-widget.playing .np-notes .music-note-1 {
    animation: note-fly1 1.8s ease-out infinite
  }

  .np-widget.playing .np-notes .music-note-2 {
    animation: note-fly2 1.9s ease-out infinite .18s
  }

  .np-widget.playing .np-notes .music-note-3 {
    animation: note-fly3 2s ease-out infinite .36s
  }

  .np-widget-inner {
    padding: 11px 12px 12px
  }

  .np-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
  }

  .np-label-row {
    display: flex;
    align-items: center;
    gap: 5px
  }

  .np-label {
    font-family: 'DM Mono', monospace;
    font-size: 6px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink3)
  }

  .np-mini-bars {
    display: flex;
    gap: 1.5px;
    align-items: flex-end;
    height: 7px
  }

  .np-mini-bar {
    width: 2px;
    background: var(--ink3);
    border-radius: 1px;
    opacity: .6;
    animation: npb var(--s) ease-in-out infinite alternate var(--d);
    animation-play-state: paused
  }

  .np-widget.playing .np-mini-bar {
    animation-play-state: running
  }

  .np-mini-bar:nth-child(1) {
    --s: .6s;
    --d: 0s;
    height: 3px
  }

  .np-mini-bar:nth-child(2) {
    --s: .4s;
    --d: .1s;
    height: 6px
  }

  .np-mini-bar:nth-child(3) {
    --s: .7s;
    --d: .05s;
    height: 4px
  }

  @keyframes npb {
    from {
      transform: scaleY(.2)
    }
    to {
      transform: scaleY(1)
    }
  }

  .np-play-btn {
    background: 0 0;
    border: none;
    color: var(--ink3);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    transition: color .15s
  }

  .np-play-btn:hover {
    color: var(--ink)
  }

  .np-play-btn svg {
    width: 13px;
    height: 13px
  }

  .np-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--ink);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px
  }

  .np-artist-name {
    font-size: 9px;
    color: var(--ink3);
    letter-spacing: .5px;
    margin-bottom: 8px
  }

  .np-progress {
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    position: relative;
    overflow: hidden
  }

  .np-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 38%;
    background: url('https://i.pinimg.com/originals/53/c4/81/53c4812e63fc6c48b6c60894adad299b.jpg') center/120px;
    filter: saturate(0);
    border-radius: 999px;
    animation: zebra-scroll 3s linear infinite;
    animation-play-state: paused;
    transition: width .1s
  }

  .np-widget.playing .np-progress-fill {
    animation-play-state: running
  }

  .np-links {
    display: none;
    flex-direction: row;
    border-top: 1px solid var(--border)
  }

  .np-stream-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 0;
    flex: 1;
    cursor: pointer;
    transition: background .15s;
    border: none;
    background: 0 0;
    color: var(--ink3);
    border-right: 1px solid var(--border)
  }

  .np-stream-btn:last-child {
    border-right: none
  }

  .np-stream-btn:hover {
    background: rgba(237, 232, 222, .04);
    color: var(--ink2)
  }

  .np-stream-btn:hover svg {
    filter: saturate(0) brightness(1.4)
  }

  .sl-waveform {
    display: none
  }

  .np-stream-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: saturate(0)
  }

  .sl-bio-block {
    padding: 10px 14px;
    flex: 1
  }

  .sl-bio-label {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ink3);
    display: block;
    margin-bottom: 6px
  }

  .sl-bio-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink2);
    white-space: pre-line;
    font-weight: 600
  }

  .sl-actions {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 6px;
    margin-top: auto
  }

  .sl-btn {
    flex: 1;
    padding: 7px 0;
    text-align: center;
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
    border-radius: 1px
  }

  .sl-btn.primary {
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink)
  }

  .sl-btn.primary:hover {
    background: var(--pk2);
    border-color: var(--pk2)
  }

  .sl-btn.ghost {
    background: 0 0;
    color: var(--ink2);
    border: 1px solid var(--border2)
  }

  .sl-btn.ghost:hover {
    border-color: var(--ink2);
    color: var(--ink)
  }

  .sl-btn.following {
    background: 0 0;
    color: var(--ink2);
    border: 1px solid var(--border2)
  }

  .sl-stat:last-child {
    border-right: none
  }

  .col-center {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column
  }

  .feat-block {
    border-bottom: 1px solid var(--border)
  }

  .feat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--s1)
  }

  .feat-topbar-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px
  }

  .feat-topbar-label::before {
    content: '✦';
    font-size: 10px;
    line-height: 1;
    margin-right: 4px
  }

  .feat-pin-btn {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid rgba(212, 160, 181, .2);
    color: var(--pk);
    padding: 3px 10px;
    border-radius: 1px;
    cursor: pointer;
    transition: all .2s
  }

  .feat-pin-btn:hover {
    background: rgba(212, 160, 181, .08);
    border-color: var(--pk)
  }

  .feat-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    margin: 12px 14px 12px 14px;
    margin-bottom: 0
  }

  .feat-embed {
    flex: 0.42;
    min-width: 220px;
    aspect-ratio: 16/9;
    border-radius: 6px;
    background: var(--s2);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative
  }

  .feat-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    border-radius: 6px
  }

  .feat-embed:hover iframe {
    pointer-events: auto
  }

  .feat-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--ink3);
    padding: 18px
  }

  .feat-placeholder svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: .8;
    opacity: .4
  }

  .feat-placeholder span {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .4
  }

  .feat-desc-floating {
    position: relative;
    background: 0 0;
    border: none;
    padding: 8px 14px 0 14px;
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.4;
    display: block;
    margin: 0 14px 0 14px
  }

  .feat-desc-floating .feat-desc-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    display: block;
    margin-bottom: 6px
  }

  .feat-desc-floating #feat-desc-text {
    font-size: 14px;
    color: var(--ink);
    margin-left: 0;
    display: block
  }

  .feat-yt-list {
    width: auto;
    flex: 1;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding: 8px;
    background: linear-gradient(180deg, var(--s2), transparent);
    border-radius: 6px;
    border: 1px solid var(--border)
  }

  .feat-yt-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    background: 0 0;
    border: 1px solid transparent;
    transition: all .15s
  }

  .feat-yt-item:hover {
    background: rgba(255, 255, 255, .02);
    border-color: var(--border2)
  }

  .feat-yt-thumb {
    width: 88px;
    height: 56px;
    border-radius: 4px;
    background: var(--s1);
    overflow: hidden;
    flex-shrink: 0
  }

  .feat-yt-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
  }

  .feat-yt-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .feat-yt-time {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    color: var(--ink3);
    margin-top: 4px
  }

  .section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--s1);
    position: sticky;
    top: 80px;
    z-index: 50
  }

  .section-bar-title {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px
  }

  .section-bar-title::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0
  }

  .section-bar-title.tiktok {
    color: var(--cy)
  }

  .section-bar-title.instagram {
    color: var(--pk)
  }

  .section-bar-title .insta-handle {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--ink3);
    margin-left: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none
  }

  .section-bar-add {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid var(--border2);
    color: var(--ink3);
    padding: 3px 10px;
    border-radius: 1px;
    cursor: pointer;
    transition: all .15s
  }

  .section-bar-add:hover {
    border-color: var(--ink2);
    color: var(--ink2)
  }

  .tiktok-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 3px;
    background: rgba(237, 232, 222, .04)
  }

  .tiktok-cell {
    aspect-ratio: 9/14;
    background: var(--s2);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .tiktok-cell iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    border-radius: 8px
  }

  .tiktok-cell:hover iframe {
    pointer-events: auto
  }

  .cell-ov {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(12, 11, 10, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s
  }

  .tiktok-cell:hover .cell-ov {
    opacity: 1
  }

  .cell-stat {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px
  }

  .cell-stat svg {
    width: 13px;
    height: 13px;
    fill: var(--ink)
  }

  .tiktok-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cy), transparent);
    border-radius: 8px 8px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s
  }

  .tiktok-cell:hover::after {
    transform: scaleX(1)
  }

  .tiktok-feed-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: 0 0
  }

  .tiktok-feed-column .tiktok-embed {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 9/16;
    border-radius: 0;
    overflow: hidden
  }

  .tiktok-feed-column .tiktok-embed iframe,
  .tiktok-feed-column .tiktok-embed section {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important
  }

  #page-scrollables .tiktok-embed,
  #page-scrollables .tiktok-embed blockquote,
  #page-scrollables .tiktok-embed iframe,
  #page-scrollables .tiktok-embed section {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important
  }

  #scrollables-grid {
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important
  }

  .scrollables-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
    padding: 12px;
    max-width: 920px;
    margin: 0 auto
  }

  .scrollables-left-panel {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .35) inset;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 12px
  }

  .scroll-thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-items: start
  }

  .scroll-thumb {
    background: var(--s1);
    border: 1px solid var(--border2);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 9/16;
    display: block;
    cursor: pointer;
    position: relative
  }

  .scroll-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
  }

  .scroll-thumb .st-overlay {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(2px)
  }

  .scroll-thumb .st-overlay .st-user {
    opacity: .9;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--ink2)
  }

  .scroll-thumb .st-play {
    background: rgba(255, 255, 255, .06);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px
  }

  .scrollables-left-panel h3 {
    font-family: 'Bebas Neue', sans-serif;
    margin: 0;
    font-size: 20px;
    color: var(--ink)
  }

  .scrollables-left-panel p {
    color: var(--ink2);
    font-size: 13px;
    margin: 0;
    line-height: 1.4
  }

  .scrollables-left-panel .panel-action {
    margin-top: auto;
    display: flex;
    gap: 8px
  }

  .scrollables-left-panel .panel-action button {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink);
    cursor: pointer
  }

  .scrollables-left-panel .panel-action button.primary {
    background: var(--pk);
    color: var(--bg);
    border-color: var(--pk)
  }

  .scrollables-right {
    background: 0 0;
    width: 100%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible
  }

  #page-scrollables .feed-wrap {
    max-width: 100%;
    padding: 8px 0
  }

  .insta-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 3px;
    background: rgba(237, 232, 222, .04)
  }

  .insta-cell {
    aspect-ratio: 1;
    background: var(--s2);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .insta-cell iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none
  }

  .insta-cell:hover iframe {
    pointer-events: auto
  }

  .insta-cell .cell-ov {
    border-radius: 0;
    pointer-events: none
  }

  .insta-cell:hover .cell-ov {
    opacity: 1
  }

  .insta-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pk), var(--dp));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s
  }

  .insta-cell:hover::after {
    transform: scaleX(1)
  }

  body:not(.talk-admin) .talk-admin-only {
    display: none !important
  }

  body.talk-admin .insta-cell:hover .insta-cell-delete {
    opacity: 1
  }

  .insta-cell-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid rgba(237, 232, 222, .3);
    color: rgba(237, 232, 222, .8);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .15s;
    line-height: 1
  }

  .insta-cell-delete:hover {
    background: rgba(180, 40, 40, .85);
    border-color: rgba(255, 100, 100, .5);
    color: #fff
  }

  .carousel-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 10;
    width: 20px;
    height: 20px;
    pointer-events: none;
    display: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7))
  }

  .insta-cell.is-carousel .carousel-badge {
    display: flex
  }

  .carousel-badge svg {
    width: 20px;
    height: 20px
  }

  .carousel-toggle-btn {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 10;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid rgba(237, 232, 222, .3);
    color: rgba(237, 232, 222, .55);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s, border-color .15s
  }

  .carousel-toggle-btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8
  }

  body.talk-admin .insta-cell:hover .carousel-toggle-btn {
    opacity: 1
  }

  body.talk-admin .insta-cell.is-carousel .carousel-toggle-btn {
    color: var(--pk);
    border-color: var(--pk);
    opacity: 1 !important;
    background: rgba(212, 160, 181, .2)
  }

  body:not(.talk-admin) .carousel-toggle-btn {
    display: none !important
  }

  .carousel-toggle-btn:hover {
    background: rgba(212, 160, 181, .3);
    border-color: var(--pk2);
    color: var(--pk2)
  }

  .grid-empty {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    gap: 10px;
    text-align: center;
    color: var(--ink3)
  }

  .ge-icon {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px
  }

  .ge-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1
  }

  .ge-t {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ink2)
  }

  .ge-s {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase
  }

  .ge-btn {
    margin-top: 2px;
    padding: 6px 18px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink2);
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s
  }

  .ge-btn:hover {
    border-color: var(--pk);
    color: var(--pk)
  }

  .sidebar-right {
    background: var(--s1);
    position: relative;
    height: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column
  }

  .sidebar-right::-webkit-scrollbar {
    display: none
  }

  .sr-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--s1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10
  }

  .sr-title {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f66;
    display: flex;
    align-items: center;
    gap: 6px
  }

  .sr-title::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f66;
    flex-shrink: 0
  }

  .sr-add {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid var(--border2);
    color: var(--ink3);
    padding: 3px 8px;
    border-radius: 1px;
    cursor: pointer;
    transition: all .15s
  }

  .sr-add:hover {
    border-color: #f66;
    color: #f66
  }

  .yt-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 2px;
    align-content: start;
    padding: 2px;
    flex: 1;
    max-height: none;
    overflow-y: auto;
    scrollbar-width: thin
  }

  .yt-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    border-bottom: none;
    cursor: pointer;
    transition: background .15s
  }

  .yt-item:hover {
    background: var(--s2)
  }

  .yt-thumb {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 6px;
    background: var(--s2);
    flex-shrink: 0;
    overflow: hidden;
    display: block;
    position: relative
  }

  .yt-thumb iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none
  }

  .yt-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    image-rendering: auto;
    decoding: async
  }

  .yt-thumb::after {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(237, 232, 222, 0);
    background: rgba(12, 11, 10, 0);
    transition: background .15s, color .15s
  }

  .yt-item:hover .yt-thumb::after {
    background: rgba(12, 11, 10, .5);
    color: rgba(237, 232, 222, .9)
  }

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

  .yt-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .yt-meta {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--ink3);
    letter-spacing: .5px;
    font-weight: 700
  }

  .yt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
    gap: 8px;
    text-align: center;
    color: var(--ink3);
    flex: 1
  }

  .yt-empty svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: .8;
    opacity: .4;
    margin-bottom: 4px
  }

  .yt-empty-t {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink2)
  }

  .yt-empty-s {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase
  }

  .yt-empty-btn {
    margin-top: 4px;
    padding: 6px 14px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink2);
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s
  }

  .yt-empty-btn:hover {
    border-color: #f66;
    color: #f66
  }

  .feed-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 28px 20px 80px
  }

  .fpa {
    background: 0 0;
    border: none;
    padding: 4px 7px 4px 0;
    color: var(--ink2);
    display: flex;
    align-items: center;
    transition: all .15s
  }

  .fpa:hover {
    color: var(--ink)
  }

  .fpa svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
  }

  .fpa.liked svg {
    fill: var(--pk);
    stroke: var(--pk)
  }

  .fpa.saved svg {
    fill: var(--ink);
    stroke: var(--ink)
  }

  .fpa-r {
    margin-left: auto
  }

  .modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    z-index: 500;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px)
  }

  .modal-bg.open {
    display: flex
  }

  .modal-box {
    background: var(--s1);
    border: 1px solid var(--border2);
    width: min(92vw, 480px);
    overflow: hidden
  }

  .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(12, 11, 10, .5)
  }

  .modal-title {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink)
  }

  .modal-tag {
    font-family: 'DM Mono', monospace;
    font-size: 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-left: 5px;
    border-radius: 1px
  }

  .modal-close {
    background: 0 0;
    border: none;
    color: var(--ink3);
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color .15s
  }

  .modal-close:hover {
    color: var(--ink)
  }

  .modal-body {
    padding: 14px
  }

  .m-lbl {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    display: block;
    margin-bottom: 6px;
    font-weight: 700
  }

  .m-input {
    width: 100%;
    background: var(--s2);
    border: 1px solid var(--border);
    padding: 9px 12px;
    font-size: 14px;
    color: var(--ink);
    outline: 0;
    transition: border-color .2s;
    font-weight: 600
  }

  .m-input:focus {
    border-color: var(--cy)
  }

  .m-input::placeholder {
    color: var(--ink3)
  }

  .m-textarea {
    width: 100%;
    background: var(--s2);
    border: 1px solid var(--border);
    padding: 9px 12px;
    font-size: 14px;
    color: var(--ink);
    outline: 0;
    resize: none;
    min-height: 58px;
    transition: border-color .2s;
    font-weight: 600
  }

  .m-textarea:focus {
    border-color: var(--cy)
  }

  .m-textarea::placeholder {
    color: var(--ink3)
  }

  .m-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .m-preview {
    width: 100%;
    aspect-ratio: 1;
    background: var(--s2);
    border: 1px solid var(--border);
    overflow: hidden;
    display: none;
    position: relative
  }

  .m-preview.show {
    display: block
  }

  .m-preview iframe {
    width: 100%;
    height: 100%;
    border: none
  }

  .m-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ink3)
  }

  .m-loading svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.5;
    animation: spin 1.2s linear infinite
  }

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

  .m-loading span {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase
  }

  .m-footer {
    display: flex;
    gap: 6px;
    justify-content: flex-end
  }

  .m-cancel {
    padding: 7px 14px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink2);
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s
  }

  .m-cancel:hover {
    color: var(--ink)
  }

  .m-submit {
    padding: 7px 18px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s
  }

  .m-submit:hover {
    background: var(--pk2)
  }

  .m-submit:disabled {
    opacity: .3;
    cursor: not-allowed
  }

  .detail-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 500;
    align-items: center;
    justify-content: center
  }

  .detail-bg.open {
    display: flex
  }

  .detail-box {
    background: var(--s1);
    border: 1px solid var(--border2);
    display: flex;
    width: min(92vw, 900px);
    max-height: 90vh;
    overflow: hidden
  }

  .det-media {
    flex: 1;
    background: var(--s2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0
  }

  .det-media iframe {
    width: 100%;
    height: 100%;
    border: none
  }

  .det-side {
    width: 290px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border)
  }

  .det-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0
  }

  .det-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--s2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border)
  }

  .det-av svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.5
  }

  .det-user {
    font-size: 11px;
    font-weight: 500;
    flex: 1;
    color: var(--ink)
  }

  .det-close {
    background: 0 0;
    border: none;
    color: var(--ink3);
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    transition: color .15s
  }

  .det-close:hover {
    color: var(--ink)
  }

  .det-comments {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    scrollbar-width: none
  }

  .det-comments::-webkit-scrollbar {
    display: none
  }

  .dc {
    display: flex;
    gap: 7px
  }

  .dc-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--s2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: 6px;
    color: var(--ink3)
  }

  .dc-text {
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink2)
  }

  .dc-text strong {
    font-weight: 600;
    color: var(--ink);
    margin-right: 3px
  }

  .dc-meta {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    color: var(--ink3);
    margin-top: 2px;
    letter-spacing: .5px
  }

  .det-actions {
    padding: 7px 10px 3px;
    border-top: 1px solid var(--border);
    flex-shrink: 0
  }

  .da-row {
    display: flex;
    align-items: center;
    margin-bottom: 3px
  }

  .da-btn {
    background: 0 0;
    border: none;
    padding: 4px 6px 4px 0;
    color: var(--ink2);
    display: flex;
    align-items: center;
    transition: all .15s
  }

  .da-btn:hover {
    color: var(--ink)
  }

  .da-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
  }

  .da-btn.liked svg {
    fill: var(--pk);
    stroke: var(--pk)
  }

  .da-btn.saved svg {
    fill: var(--ink);
    stroke: var(--ink)
  }

  .da-right {
    margin-left: auto
  }

  .da-likes {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1px
  }

  .da-time {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    color: var(--ink3);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px
  }

  .det-add {
    display: flex;
    align-items: center;
    gap: 7px;
    border-top: 1px solid var(--border);
    padding: 8px 10px;
    flex-shrink: 0
  }

  .det-input {
    flex: 1;
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 11px;
    color: var(--ink)
  }

  .det-input::placeholder {
    color: var(--ink3)
  }

  .det-post {
    background: 0 0;
    border: none;
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cy);
    cursor: pointer;
    opacity: .3;
    transition: opacity .15s
  }

  .det-post.ready {
    opacity: 1
  }

  .sheet-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 400;
    align-items: flex-end;
    justify-content: center
  }

  .sheet-bg.open {
    display: flex
  }

  .sheet {
    background: var(--s1);
    border: 1px solid var(--border2);
    border-bottom: none;
    width: min(100%, 480px);
    padding-bottom: 20px
  }

  .sheet-handle {
    width: 28px;
    height: 2px;
    background: var(--border2);
    margin: 9px auto 12px
  }

  .sheet-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ink2);
    border-bottom: 1px solid var(--border);
    transition: all .15s
  }

  .sheet-opt:hover {
    color: var(--ink);
    background: var(--s2)
  }

  .sheet-opt svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5
  }

  .sheet-cancel {
    width: 100%;
    padding: 12px;
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    background: 0 0;
    border: none
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px
  }

  ::-webkit-scrollbar-track {
    background: 0 0
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .15s
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .12)
  }

  html.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(12, 11, 10, .08)
  }

  .ep-avatar-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 14px;
    gap: 7px
  }

  .ep-av-wrap {
    position: relative;
    cursor: pointer;
    width: 72px;
    height: 72px
  }

  .ep-av-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--s2);
    border: 2px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .2s
  }

  .ep-av-wrap:hover .ep-av-preview {
    border-color: var(--pk)
  }

  .ep-av-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .ep-av-preview svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: .9
  }

  .ep-av-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(12, 11, 10, .72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0;
    transition: opacity .2s
  }

  .ep-av-wrap:hover .ep-av-overlay {
    opacity: 1
  }

  .ep-av-overlay svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    flex-shrink: 0
  }

  .ep-av-overlay span {
    font-family: 'DM Mono', monospace;
    font-size: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink)
  }

  .ep-av-hint {
    font-family: 'DM Mono', monospace;
    font-size: 6px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink3)
  }

  .ep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px
  }

  .ep-full {
    grid-column: 1/-1
  }

  .ep-body {
    max-height: 65vh;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 14px
  }

  .ep-body::-webkit-scrollbar {
    display: none
  }

  .settings-wrap {
    max-width: 580px;
    margin: 0 auto;
    padding: 36px 24px 80px
  }

  .settings-head {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border)
  }

  .settings-head-t {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 44px;
    letter-spacing: 4px;
    color: var(--ink)
  }

  .settings-head-t b {
    color: var(--pk);
    font-weight: 400
  }

  .settings-head-s {
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    color: var(--ink3);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px
  }

  .settings-section {
    margin-bottom: 22px
  }

  .settings-sec-lbl {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    margin-bottom: 8px;
    padding-left: 2px;
    display: block;
    font-weight: 700
  }

  .settings-card {
    background: var(--s1);
    border: 1px solid var(--border);
    overflow: hidden
  }

  .setting-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border)
  }

  .setting-row:last-child {
    border-bottom: none
  }

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

  .setting-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 2px
  }

  .setting-desc {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: .5px;
    color: var(--ink3);
    text-transform: uppercase
  }

  .setting-btn {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid var(--border2);
    color: var(--ink2);
    padding: 5px 12px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    border-radius: 1px
  }

  .setting-btn:hover {
    border-color: var(--pk);
    color: var(--pk)
  }

  .setting-btn.danger {
    border-color: rgba(255, 80, 80, .2);
    color: rgba(255, 100, 100, .55)
  }

  .setting-btn.danger:hover {
    border-color: #ff6464;
    color: #ff6464;
    background: rgba(255, 80, 80, .06)
  }

  .setting-btn.armed {
    background: rgba(255, 80, 80, .12);
    border-color: #ff6464;
    color: #ff6464
  }

  .accent-swatches {
    display: flex;
    gap: 7px;
    align-items: center
  }

  .accent-sw {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s;
    flex-shrink: 0;
    position: relative
  }

  .accent-sw.on {
    border-color: var(--ink);
    transform: scale(1.2)
  }

  .accent-sw.on::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(237, 232, 222, .35)
  }

  .toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0
  }

  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
  }

  .toggle-track {
    position: absolute;
    inset: 0;
    background: var(--s3);
    border: 1px solid var(--border2);
    border-radius: 10px;
    cursor: pointer;
    transition: all .25s
  }

  .toggle-track::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: var(--ink3);
    border-radius: 50%;
    transition: all .25s
  }

  .toggle input:checked+.toggle-track {
    background: rgba(212, 160, 181, .12);
    border-color: var(--pk)
  }

  .toggle input:checked+.toggle-track::before {
    transform: translateX(16px);
    background: var(--pk)
  }

  .settings-ver {
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border)
  }

  .settings-ver b {
    color: var(--border2)
  }

  @keyframes flash-border {
    0% {
      border-color: var(--pk)
    }
    100% {
      border-color: var(--border2)
    }
  }

/* ── Site intro ── */
/* ── Nav settings dropdown z-index fix ── */
#nav-settings-dropdown {
        position: fixed !important;
        z-index: 2147483647 !important;
        pointer-events: auto !important;
      }

/* ── Admin-only visibility ── */
body:not(.talk-admin) #nav-analytics-btn.admin-only {
            display: none !important
          }

          body.talk-admin #nav-analytics-btn.admin-only {
            display: flex !important;
            align-items: center;
            gap: 8px
          }

          body.talk-admin #nav-drag-ui-btn.admin-only {
            display: flex !important;
            align-items: center;
            gap: 8px
          }

/* ── Scrollables scroll-grid-btn ── */
#scroll-grid-btn {
            display: none !important
          }

          @media(max-width:768px) {
            #page-scrollables {
              background: var(--bg) !important
            }
            .scrollables-layout {
              margin: 0 !important
            }
            .scrollables-right,
            .scrollables-right .feed-wrap {
              background: var(--bg) !important
            }
          }

/* ── Tea Party timeline position ── */
.timeline-list {
            position: relative
          }

/* ── Edit Profile labels ── */
.ep-lbl {
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ink2);
            margin-bottom: 8px;
            display: block
          }

          .ep-field {
            width: 100%;
            background: rgba(237, 232, 222, .04);
            border: none;
            border-bottom: 1px solid rgba(237, 232, 222, .25);
            padding: 11px 2px;
            font-family: 'DM Mono', monospace;
            font-size: 14px;
            color: var(--ink);
            outline: 0;
            transition: border-color .2s, background .2s;
            box-sizing: border-box
          }

          .ep-field:focus {
            border-bottom-color: var(--pk)
          }

          .ep-field::placeholder {
            color: rgba(237, 232, 222, .3);
            font-size: 13px
          }

          textarea.ep-field {
            min-height: 80px;
            padding: 8px 2px;
            border: 1px solid rgba(237, 232, 222, .15);
            border-bottom: 1px solid rgba(237, 232, 222, .25);
            padding: 10px
          }

/* ── Fans widget ── */
.fans-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 11px 22px;
            border-bottom: 1px solid var(--border);
            transition: background .1s
          }

          .fans-row:last-child {
            border-bottom: none
          }

          .fans-row:hover {
            background: var(--s1)
          }

          .fans-row span:first-child {
            font-family: 'DM Mono', monospace;
            font-size: 9px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ink3)
          }

          .fans-row span:last-child {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 20px;
            letter-spacing: 1px;
            color: var(--ink)
          }

          .fans-edit-input {
            display: none;
            width: 70px;
            background: rgba(237, 232, 222, .05);
            border: none;
            border-bottom: 1px solid rgba(237, 232, 222, .2);
            color: var(--ink2);
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            padding: 3px 6px;
            text-align: right;
            outline: 0
          }

          .fans-edit-input:focus {
            border-bottom-color: var(--pk)
          }

          body.talk-admin .fans-edit-input {
            display: block
          }

          .fans-edit-footer {
            display: none;
            padding: 10px 22px;
            border-top: 1px solid var(--border);
            font-family: 'DM Mono', monospace;
            font-size: 7px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ink3);
            gap: 8px;
            align-items: center
          }

          body.talk-admin .fans-edit-footer {
            display: flex
          }

/* ── Custom background modal ── */
#custom-bg-modal {
            display: none;
            position: fixed;
            inset: 0;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .7);
            z-index: 1200
          }

          #custom-bg-modal .cb-panel {
            width: min(92vw, 520px);
            background: var(--s1);
            border: 1px solid var(--border2);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .6)
          }

          #custom-bg-modal .cb-head {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between
          }

          #custom-bg-modal .cb-body {
            padding: 14px;
            display: flex;
            gap: 10px;
            flex-direction: column
          }

          #custom-bg-modal .cb-preview {
            height: 120px;
            border: 1px solid var(--border);
            background-size: cover;
            background-position: center;
            border-radius: 4px;
            overflow: hidden
          }

          #custom-bg-modal .cb-input {
            width: 100%;
            padding: 9px 10px;
            border: 1px solid var(--border);
            background: var(--s2);
            color: var(--ink);
            outline: 0;
            border-radius: 4px;
            font-family: DM Mono, monospace
          }

          #custom-bg-modal .cb-foot {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            padding: 12px 16px;
            border-top: 1px solid var(--border)
          }

          #custom-bg-modal .cb-btn {
            padding: 8px 14px;
            border-radius: 4px;
            border: 1px solid var(--border2);
            background: 0 0;
            color: var(--ink2);
            cursor: pointer;
            font-family: DM Mono, monospace
          }

          #custom-bg-modal .cb-btn.primary {
            background: var(--ink);
            color: var(--bg);
            border: none
          }

/* ── Tea Party app topbar ── */
.app-topbar-left,
              #nav-search-mobile {
                display: none !important;
              }

              .app-topbar-right {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                gap: 8px !important;
              }

              .app-topbar-right .app-search-input {
                display: block !important;
                flex: 1 1 auto !important;
                width: 100% !important;
                max-width: none !important;
                min-width: 0 !important;
                height: 32px !important;
                padding: 0 12px !important;
                font-size: 12px !important;
                border: 1px solid var(--border2) !important;
                border-radius: 999px !important;
                background: var(--s2) !important;
              }

              #topbar-refresh-btn {
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
              }

              #topbar-refresh-btn svg {
                width: 11px !important;
                height: 11px !important;
              }

              #mob-talk-secondary-tabs,
              .mob-talk-mode #mob-talk-secondary-tabs {
                align-items: stretch !important;
              }

              #mob-talk-secondary-tabs .sidebar-section-header,
              .mob-talk-mode #mob-talk-secondary-tabs .sidebar-section-header {
                margin-top: 0 !important;
                align-self: stretch !important;
              }