/* ═══════════════════════════════════════════════════════════════
   mobile.css — All @media and mobile-specific overrides.
                Load LAST so it wins over everything.
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile bars (hidden on desktop) ── */
#mobile-bottom-bar,
      #mobile-top-bar {
        display: none
      }

      #mobile-top-bar {
        display: none;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 54px;
        z-index: 9999;
        background: rgba(12, 11, 10, .82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
        padding: 0 12px
      }

      #mob-live-btn {
        justify-self: start
      }

      #mob-settings-btn {
        justify-self: end
      }

      html.light-mode #mobile-top-bar {
        background: rgba(255, 255, 255, .88)
      }

      .live-arc1 {
        animation: live-arc1 1.4s ease-in-out infinite !important
      }

      .live-arc2 {
        animation: live-arc2 1.4s ease-in-out infinite .2s !important
      }

      .scroll-line-1 {
        animation: scroll-lines 1.2s ease-in-out infinite 0s !important
      }

      .scroll-line-2 {
        animation: scroll-lines 1.2s ease-in-out infinite .15s !important
      }

      .scroll-line-3 {
        animation: scroll-lines 1.2s ease-in-out infinite .3s !important
      }

      #mob-shop-btn {
        background: 0 0;
        border: none;
        cursor: pointer;
        padding: 0;
        height: 54px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: visible;
        flex-shrink: 0
      }

      #mob-shop-btn .bra-nav-btn {
        transform: scale(.82);
        transform-origin: center center;
        margin: 0;
        pointer-events: none
      }

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

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

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

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

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

      .mob-top-btn {
        background: 0 0;
        border: none;
        color: var(--ink2);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: color .15s, background .15s
      }

      .mob-top-btn:hover {
        color: var(--ink);
        background: var(--border)
      }

      .mob-top-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0
      }

      .mob-top-btn.active {
        color: var(--ink)
      }

      #mobile-bottom-bar {
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        z-index: 9999;
        background: rgba(12, 11, 10, .9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border)
      }

      html.light-mode #mobile-bottom-bar {
        background: rgba(255, 255, 255, .92)
      }

      .mob-tab {
        background: 0 0;
        border: none;
        color: var(--ink);
        flex: 1;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: color .15s;
        position: relative
      }

      .mob-tab-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px
      }

      .mob-tab-inner {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: icon-float 2.8s ease-in-out infinite
      }

      .mob-tab svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        overflow: visible;
        stroke: var(--ink);
        transition: stroke .15s, color .15s
      }

      .mob-tab:hover {
        color: var(--ink);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, .3))
      }

      .mob-tab.active {
        color: var(--pk);
        animation: nav-glow 2s ease-in-out infinite
      }

      .mob-tab.active svg {
        stroke: var(--pk) !important;
        color: var(--pk) !important
      }

      .mob-tab.active .mob-tab-inner .music-note-1,
      .mob-tab.active .mob-tab-inner .music-note-2,
      .mob-tab.active .mob-tab-inner .music-note-3 {
        color: var(--pk) !important
      }

      .mob-tab.active::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--pk)
      }

      .mob-tab .music-note-1 {
        font-size: 10px !important;
        opacity: 1
      }

      .mob-tab .music-note-2 {
        font-size: 9px !important;
        opacity: .85
      }

      .mob-tab .music-note-3 {
        font-size: 8px !important;
        opacity: .7
      }

      .mob-tab-home {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--s2);
        border: none;
        margin-bottom: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
        transition: border-color .15s, box-shadow .15s, color .15s;
        display: flex;
        align-items: center;
        justify-content: center
      }

      .mob-tab-home .mob-tab-star {
        display: none
      }

      .mob-tab-home .mob-tab-inner {
        animation: none
      }

      .mob-tab-home svg {
        width: 20px;
        height: 20px
      }

      .mob-tab-home.active {
        border-color: #fff;
        color: #000;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 255, 255, .6);
        background: url('https://i.pinimg.com/originals/53/c4/81/53c4812e63fc6c48b6c60894adad299b.jpg') center/cover
      }

      .mob-tab-home.active .mob-tab-inner svg {
        stroke: #000 !important;
        color: #000 !important
      }

      .mob-tab-home.active::after {
        display: none
      }

      .mob-tab-home:hover {
        border-color: var(--ink2)
      }

      #drag-ui-panel {
        position: fixed;
        bottom: 80px;
        right: 14px;
        z-index: 9000;
        background: var(--s1);
        border: 1px solid var(--pk);
        border-radius: 8px;
        padding: 12px 14px;
        min-width: 240px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, .7);
        font-family: 'DM Mono', monospace;
        display: none
      }

      #drag-ui-panel.open {
        display: block
      }

      #drag-ui-panel h4 {
        font-size: 9px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--pk);
        margin-bottom: 10px
      }

      .drag-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
        font-size: 9px;
        color: var(--ink2);
        letter-spacing: 1px;
        text-transform: uppercase
      }

      .drag-row-label {
        flex-shrink: 0;
        min-width: 52px
      }

      .drag-coords {
        font-family: 'DM Mono', monospace;
        font-size: 9px;
        color: var(--ink);
        background: var(--s2);
        padding: 2px 5px;
        border-radius: 3px;
        min-width: 140px;
        text-align: right
      }

      .drag-section-sep {
        border: none;
        border-top: 1px solid var(--border);
        margin: 8px 0
      }

      #drag-copy-btn {
        margin-top: 10px;
        width: 100%;
        padding: 7px;
        border: 1px solid var(--pk);
        background: 0 0;
        color: var(--pk);
        font-family: 'DM Mono', monospace;
        font-size: 8px;
        letter-spacing: 2px;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 3px
      }

      #drag-copy-btn:hover {
        background: rgba(212, 160, 181, .1)
      }

      #drag-reset-btn {
        margin-top: 5px;
        width: 100%;
        padding: 5px;
        border: 1px solid var(--border2);
        background: 0 0;
        color: var(--ink3);
        font-family: 'DM Mono', monospace;
        font-size: 7px;
        letter-spacing: 2px;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 3px
      }

      body.drag-ui-active .fans-star-wrap,
      body.drag-ui-active .panties-widget,
      body.drag-ui-active .sl-avatar {
        outline: 1px dashed rgba(212, 160, 181, .5);
        outline-offset: 3px;
        cursor: grab !important
      }

      body.drag-ui-active .fans-star-wrap:active,
      body.drag-ui-active .panties-widget:active,
      body.drag-ui-active .sl-avatar:active {
        cursor: grabbing !important
      }

      .drag-resize-handle {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 14px;
        height: 14px;
        cursor: se-resize;
        z-index: 20;
        display: none;
        border-right: 2px solid var(--pk);
        border-bottom: 2px solid var(--pk);
        border-radius: 0 0 3px 0;
        opacity: .8
      }

      body.drag-ui-active .drag-resize-handle {
        display: block
      }

      #mob-status-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        z-index: 99998;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 24px 6px;
        pointer-events: none;
        background: 0 0
      }

      .mob-status-time {
        font-family: 'DM Mono', monospace;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: .5px
      }

      .mob-status-icons {
        display: flex;
        align-items: center;
        gap: 6px
      }

      .mob-status-icons svg {
        width: 16px;
        height: 16px;
        fill: var(--ink);
        stroke: none
      }

      .mob-profile-mode .three-col {
        display: flex !important;
        flex-direction: column !important
      }

      .mob-profile-mode .sidebar-left {
        display: flex !important;
        flex-direction: column !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        width: 100% !important;
        background: var(--s1) !important
      }

      .mob-profile-mode .sl-avatar-block {
        background: var(--s2) !important
      }

      .mob-profile-mode .sl-avatar-wrap {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 14px 16px !important
      }

      .mob-profile-mode .sl-avatar {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important
      }

      .mob-profile-mode .sl-profile-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        flex: 1 !important;
        min-width: 0 !important;
        gap: 2px !important
      }

      .mob-profile-mode .sl-name {
        text-align: left !important;
        font-size: 22px !important
      }

      .mob-profile-mode .sl-realname {
        text-align: left !important
      }

      .mob-profile-mode #sl-origin {
        text-align: left !important
      }

      .mob-profile-mode .fans-star-wrap {
        margin-top: 4px !important;
        align-self: flex-start !important
      }

      .mob-profile-mode #fans-star-svg {
        width: 110px !important;
        height: 96px !important
      }

      .mob-profile-mode .sl-info {
        padding: 8px 14px !important
      }

      .mob-profile-mode .sl-song-block {
        padding: 8px 14px !important
      }

      .mob-profile-mode .panties-widget {
        display: block !important
      }

      .mob-profile-mode .sl-discord-widget {
        display: none !important
      }

      .mob-profile-mode .sl-bio-block {
        padding: 8px 14px !important
      }

      .mob-profile-mode .col-center {
        border: none !important
      }

      .mob-profile-mode .feat-container {
        flex-direction: column !important;
        margin: 0 !important;
        gap: 0 !important
      }

      .mob-profile-mode .feat-container>div:first-child {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important
      }

      .mob-profile-mode .feat-embed {
        min-width: 0 !important;
        aspect-ratio: 16/9 !important;
        border-radius: 0 !important
      }

      .mob-profile-mode #latest-post-widget {
        margin-top: 0 !important;
        border-left: none !important;
        border-right: none !important
      }

      .mob-profile-mode #yt-list-side {
        margin-top: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 3px !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        background: var(--s1) !important;
        overflow: visible !important
      }

      .mob-profile-mode .feat-block {
        border-bottom: none !important
      }

      .mob-profile-mode .insta-grid {
        border-top: 1px solid var(--border) !important;
        grid-template-columns: repeat(3, 1fr) !important
      }

      .mob-scroll-mode .scrollables-layout {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        max-width: 100% !important;
        gap: 0 !important
      }

      .mob-scroll-mode .scrollables-left-panel {
        display: none
      }

      .mob-scroll-mode .scrollables-left-panel.mob-open {
        display: flex !important;
        position: fixed !important;
        inset: 54px 0 64px 0 !important;
        z-index: 450 !important;
        border-radius: 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important
      }

      .mob-scroll-mode #scroll-grid-btn {
        display: flex !important
      }

      .mob-scroll-mode #scroll-grid-overlay.mob-open {
        display: block !important
      }

      .mob-scroll-mode .scrollables-right {
        min-height: calc(100vh - 118px) !important
      }

      .mob-community-mode #community-card {
        display: none !important
      }

      .mob-community-mode #mob-community-inline {
        display: flex !important
      }

      .mob-community-mode #widgetbot-container {
        flex-direction: column !important;
        gap: 0 !important
      }

      .mob-community-mode #page-community>div {
        padding: 0 !important
      }

      .mob-community-mode #page-community>div>div {
        padding: 0 !important
      }

      .mob-talk-mode .app-column-right {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        border-left: none !important;
        border-bottom: 1px solid var(--border2) !important;
        padding: 6px 10px !important;
        height: auto !important;
        overflow: hidden !important;
        gap: 8 !important;
        align-items: center !important;
        order: -1 !important;
        flex-shrink: 0 !important
      }

      .mob-talk-mode .app-main {
        flex-direction: column !important
      }

      .mob-talk-mode .blog-sidebar-list,
      .mob-talk-mode .trending-sidebar-list {
        display: none !important
      }

      .mob-talk-mode .sidebar-section-header {
        font-size: 11px !important;
        padding: 5px 14px !important;
        border: 1px solid var(--border2) !important;
        border-radius: 999px !important;
        margin: 0 !important;
        padding-bottom: 5px !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        color: var(--ink2) !important
      }

      .mob-talk-mode .sidebar-section-header:hover {
        border-color: var(--pk) !important;
        color: var(--ink) !important
      }

      .mob-talk-mode .app-column-center {
        border-left: none !important;
        border-right: none !important
      }

      @media(max-width:768px) {
        .nav {
          display: none !important
        }
        body {
          padding-top: 54px;
          padding-bottom: 64px
        }
        #mobile-top-bar {
          display: grid !important
        }
        #mobile-bottom-bar {
          display: flex !important
        }
        .page.active {
          width: 100%;
          min-height: calc(100vh - 118px)
        }
        .three-col {
          display: flex !important;
          flex-direction: column !important
        }
        .sidebar-left {
          display: flex !important;
          flex-direction: column !important;
          border-right: none !important;
          border-bottom: 1px solid var(--border) !important;
          width: 100% !important
        }
        .sl-avatar-wrap {
          flex-direction: row !important;
          flex-wrap: wrap !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          padding: 12px 12px 8px !important
        }
        .sl-avatar {
          width: 90px !important;
          height: 90px !important;
          margin-bottom: 0 !important;
          flex-shrink: 0 !important;
          order: 1 !important;
          align-self: center !important;
          animation: fans-float 3.2s ease-in-out infinite !important;
          will-change: transform !important
        }
        .sl-avatar::after {
          content: '';
          position: absolute;
          bottom: -12px;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 72px;
          height: 10px;
          border-radius: 50%;
          background: rgba(0, 0, 0, .28);
          animation: fans-shadow-pulse 3.2s ease-in-out infinite;
          will-change: transform, opacity;
          transform-origin: center;
          pointer-events: none
        }
        .sl-avatar-wrap .panties-widget {
          order: 2 !important;
          width: min(124px, 40vw) !important;
          flex-shrink: 0 !important;
          align-self: center !important;
          margin: 0 !important;
          transform: none !important;
          filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35))
        }
        .fans-star-wrap {
          flex-shrink: 0 !important;
          margin-top: 0 !important;
          align-self: center !important;
          order: 3 !important;
          transform: none !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important
        }
        #fans-star-svg {
          width: 120px !important;
          height: 103px !important;
          display: block !important
        }
        .sl-profile-right {
          flex: 0 0 100% !important;
          align-items: center !important;
          text-align: center !important;
          gap: 2px !important;
          order: 4 !important;
          margin-top: 2px !important
        }
        .sl-name {
          text-align: center !important;
          font-size: 32px !important
        }
        .sl-bio-block {
          padding: 4px 14px 8px !important
        }
        .sl-bio-text {
          font-size: 12px !important;
          line-height: 1.4 !important
        }
        .sl-realname {
          text-align: center !important
        }
        #sl-origin {
          text-align: center !important
        }
        .sl-widgets-row {
          display: flex !important;
          flex-direction: row !important;
          gap: 0 !important;
          border-bottom: 1px solid var(--border) !important
        }
        .sl-info {
          flex: 1 !important;
          min-width: 0 !important;
          padding: 6px 10px !important;
          border-bottom: none !important;
          border-right: 1px solid var(--border) !important
        }
        .sl-song-block {
          flex: 1 !important;
          min-width: 0 !important;
          padding: 6px 10px !important;
          border-bottom: none !important
        }
        .sl-info .np-widget-inner {
          padding: 6px 8px !important
        }
        .sl-song-block .np-widget-inner {
          padding: 6px 8px !important
        }
        .np-title {
          font-size: 15px !important
        }
        .col-center {
          border: none !important
        }
        .feat-container {
          flex-direction: column !important;
          margin: 0 !important;
          gap: 0 !important
        }
        .feat-container>div:first-child {
          flex: none !important;
          min-width: 0 !important;
          width: 100% !important
        }
        .feat-embed {
          min-width: 0 !important;
          aspect-ratio: 16/9 !important;
          border-radius: 0 !important
        }
        #latest-post-widget {
          margin-top: 0 !important
        }
        #yt-list-side {
          margin-top: 0 !important;
          max-height: none !important;
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 3px !important;
          row-gap: 3px !important;
          column-gap: 3px !important;
          border-top: 1px solid var(--border) !important;
          border-radius: 0 !important;
          background: var(--s1) !important;
          overflow: visible !important;
          padding: 3px !important
        }
        .yt-list .yt-item,
        .yt-list.yt-thumb {
          border-radius: 4px !important;
          overflow: hidden !important
        }
        .yt-info {
          padding: 0 2px 2px !important;
          gap: 2px !important
        }
        .yt-title {
          font-size: 10px !important;
          line-height: 1.15 !important;
          display: -webkit-box !important;
          -webkit-line-clamp: 2 !important;
          line-clamp: 2 !important;
          -webkit-box-orient: vertical !important;
          overflow: hidden !important
        }
        #feat-yt-list {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 3px !important;
          padding: 3px !important
        }
        .feat-yt-item {
          display: flex !important;
          flex-direction: column !important;
          gap: 2px !important;
          margin: 0 !important;
          padding: 2px !important;
          min-width: 0 !important
        }
        .feat-yt-meta {
          padding-top: 0 !important
        }
        .feat-yt-title {
          font-size: 10px !important;
          line-height: 1.15 !important
        }
        .fans-star-g {
          animation: fans-float 3.2s ease-in-out infinite !important;
          will-change: transform, opacity !important;
          transform-origin: center !important
        }
        .fans-shadow-el {
          opacity: .28 !important;
          animation: fans-shadow-pulse 3.2s linear infinite !important;
          will-change: transform, opacity !important
        }
        .feat-block {
          border-bottom: none !important
        }
        .insta-grid {
          border-top: 1px solid var(--border) !important;
          grid-template-columns: repeat(3, 1fr) !important
        }
        .scrollables-layout {
          grid-template-columns: 1fr !important;
          padding: 0 !important;
          max-width: 100% !important;
          gap: 0 !important
        }
        .scrollables-left-panel {
          display: none
        }
        .scrollables-left-panel.mob-open {
          display: flex !important;
          position: fixed !important;
          inset: 54px 0 64px 0 !important;
          z-index: 450 !important;
          border-radius: 0 !important;
          min-height: 0 !important;
          overflow-y: auto !important
        }
        #scroll-grid-btn {
          display: flex !important
        }
        #page-scrollables .feed-wrap,
        #page-scrollables .scrollables-right {
          width: 100% !important;
          max-width: 100% !important;
          padding: 0 !important
        }
        #page-scrollables .tiktok-embed {
          min-width: 0 !important;
          max-width: 100% !important;
          width: 100% !important
        }
        #page-scrollables .tiktok-embed iframe,
        #page-scrollables .tiktok-embed section {
          width: 100% !important;
          min-width: 0 !important
        }
        #page-community {
          overflow: hidden !important;
          height: calc(100vh - 118px) !important;
          min-height: 0 !important
        }
        #page-community>div,
        #page-community>div>div {
          height: 100% !important;
          padding: 0 !important;
          max-width: 100% !important
        }
        #widgetbot-container>div:last-child {
          flex: 1 !important;
          min-height: 0 !important;
          overflow: hidden !important
        }
        widgetbot {
          display: block !important;
          width: 100% !important;
          height: 100% !important;
          min-height: 0 !important
        }
        .mp-sidebar-stream-head {
          display: none !important
        }
        .mp-sidebar-streams {
          flex-direction: row !important;
          flex-wrap: wrap !important;
          padding: 8px !important;
          gap: 6px !important;
          border-bottom: 1px solid var(--border)
        }
        .mp-sidebar-stream-link {
          flex: 1 !important;
          min-width: calc(50% - 3px) !important;
          padding: 10px 8px !important;
          border-radius: 8px !important;
          border: 1px solid var(--border) !important;
          justify-content: center !important
        }
        .mp-sidebar-stream-link::before {
          display: none !important
        }
        .mp-sidebar-stream-arrow {
          display: none !important
        }
        .mp-sidebar-stream-name {
          text-align: center !important;
          font-size: 7px !important
        }
        .app-column-right {
          justify-content: center !important
        }
        .app-search-input {
          max-width: 70px !important;
          font-size: 9px !important;
          padding: 0 6px !important;
          height: 15px !important
        }
        #topbar-refresh-btn {
          width: 18px !important;
          height: 18px !important
        }
        #topbar-refresh-btn svg {
          width: 12px !important;
          height: 12px !important
        }
        #community-card {
          display: none !important
        }
        #mob-community-inline {
          display: flex !important
        }
        #widgetbot-container {
          flex-direction: column !important;
          gap: 0 !important
        }
        .mp {
          grid-template-columns: 1fr !important
        }
        .mp-sidebar {
          position: static;
          height: auto
        }
      }

/* ── Profile right panties widget ── */
@media(max-width:768px) {
            .sl-profile-right .panties-widget {
              width: min(172px, 50vw) !important;
              margin: 7px auto 0 !important;
              display: block !important;
              align-self: center !important;
              filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .35)) !important
            }
            .sl-profile-right {
              gap: 1px !important;
              align-items: center !important
            }
          }

/* ── Mobile profile widget row 3-col grid ── */
@media(max-width:768px) {
            .mobile-profile-widget-row {
              display: grid !important;
              grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr) !important;
              gap: 6px !important;
              align-items: stretch !important;
              padding: 8px 10px 10px !important;
              border-bottom: 1px solid var(--border) !important;
              background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)) !important
            }
            .mobile-profile-widget-row>.sl-info,
            .mobile-profile-widget-row>.sl-song-block,
            .mobile-profile-widget-row>.panties-widget {
              min-width: 0 !important;
              margin: 0 !important;
              padding: 0 !important;
              border: none !important;
              align-self: stretch !important
            }
            .mobile-profile-widget-row>.panties-widget {
              width: 100% !important;
              max-width: none !important;
              display: flex !important;
              align-items: center !important;
              justify-content: center !important;
              filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .32)) !important
            }
            .mobile-profile-widget-row>.panties-widget .panties-svg {
              width: 100% !important;
              max-width: 132px !important;
              height: auto !important;
              margin: 0 auto !important
            }
            .mobile-profile-widget-row .np-widget,
            .mobile-profile-widget-row .sl-discord-widget {
              height: 100% !important
            }
            .mobile-profile-widget-row .np-widget-inner {
              height: 100% !important;
              border-radius: 8px !important
            }
            .mobile-profile-widget-row .sl-info .np-widget-inner,
            .mobile-profile-widget-row .sl-song-block .np-widget-inner {
              display: flex !important;
              flex-direction: column !important;
              justify-content: center !important
            }
            .mobile-profile-widget-row .sl-info .lvl-top,
            .mobile-profile-widget-row .sl-info .lvl-widget,
            .mobile-profile-widget-row .sl-info .lvl-range,
            .mobile-profile-widget-row .sl-info .lvl-endnums {
              justify-content: center !important
            }
            .mobile-profile-widget-row .sl-info .lvl-widget {
              width: 100% !important;
              margin: 0 auto !important
            }
            .mobile-profile-widget-row .sl-info .lvl-endnums {
              min-width: auto !important
            }
            .mobile-profile-widget-row .sl-info .lvl-val {
              width: 100% !important;
              text-align: center !important;
              justify-content: center !important;
              margin: 0 auto !important
            }
          }

/* ── Music sidebar mobile ── */
@media(max-width:768px) {
                .mp-sidebar-streams {
                  padding: 4px 2px !important;
                  gap: 2px !important;
                  flex: none !important;
                  height: auto !important;
                  flex-direction: row !important;
                  flex-wrap: wrap !important;
                  align-items: flex-start !important
                }
                .mp-sidebar-stream-link {
                  flex: 0 0 auto !important;
                  width: auto !important;
                  min-width: 0 !important;
                  max-width: none !important;
                  height: auto !important;
                  padding: 5px 8px !important;
                  gap: 4px !important;
                  border-radius: 6px !important;
                  flex-direction: row !important;
                  align-items: center !important;
                  justify-content: flex-start !important;
                  border-bottom: none !important
                }
                .mp-stream-icon-wrap {
                  width: 14px !important;
                  height: 14px !important;
                  flex-shrink: 0 !important
                }
                .mp-sidebar-stream-name {
                  font-size: 8px !important;
                  letter-spacing: 0.5px !important;
                  text-align: left !important;
                  white-space: nowrap !important
                }

                /* Make the "TAKE OFF MY CLOTHES" button slightly bigger on mobile and shift it a bit left to center */
                

              @media(max-width:768px) {
                #page-scrollables {
                  overflow-x: hidden !important;
                  background: #fff !important
                }
                #page-scrollables .scrollables-layout,
                #page-scrollables .scrollables-right,
                #page-scrollables .feed-wrap,
                #page-scrollables #scrollables-grid,
                #page-scrollables .tiktok-grid,
                #page-scrollables .tiktok-feed-column {
                  width: 100% !important;
                  max-width: 100% !important;
                  margin: 0 !important;
                  padding: 0 !important;
                }
                #page-scrollables .tiktok-grid {
                  background: transparent !important;
                }
                #page-scrollables .tiktok-embed,
                #page-scrollables .tiktok-embed blockquote,
                #page-scrollables .tiktok-embed iframe,
                #page-scrollables .tiktok-embed section {
                  width: 100% !important;
                  max-width: 100% !important;
                  min-width: 0 !important;
                  margin: 0 !important;
                  padding: 0 !important;
                }
                #scroll-grid-btn {
                  display: flex !important;
                  position: fixed !important;
                  left: 12px !important;
                  top: 66px !important;
                  right: auto !important;
                  bottom: auto !important;
                  width: 46px !important;
                  height: 46px !important;
                  border-radius: 12px !important;
                  z-index: 560 !important;
                }
                body.mob-scroll-mode #page-scrollables,
                body.mob-scroll-mode #page-scrollables .scrollables-layout,
                body.mob-scroll-mode #page-scrollables .scrollables-right,
                body.mob-scroll-mode #page-scrollables .feed-wrap,
                body.mob-scroll-mode #page-scrollables #scrollables-grid,
                body.mob-scroll-mode #page-scrollables .tiktok-grid,
                body.mob-scroll-mode #page-scrollables .tiktok-feed-column {
                  width: 100% !important;
                  max-width: 100% !important;
                  margin: 0 !important;
                  padding: 0 !important;
                }
                body.mob-scroll-mode #page-scrollables .scrollables-layout {
                  display: block !important;
                }
                body.mob-scroll-mode #page-scrollables .scrollables-right {
                  min-height: calc(100vh - 118px) !important;
                }
                body.mob-scroll-mode #page-scrollables .tiktok-grid {
                  display: block !important;
                  background: transparent !important;
                }
                body.mob-scroll-mode #page-scrollables .tiktok-embed,
                body.mob-scroll-mode #page-scrollables .tiktok-embed blockquote,
                body.mob-scroll-mode #page-scrollables .tiktok-embed iframe,
                body.mob-scroll-mode #page-scrollables .tiktok-embed section {
                  display: block !important;
                  width: 100% !important;
                  max-width: 100% !important;
                  min-width: 0 !important;
                  margin: 0 !important;
                  padding: 0 !important;
                  border-radius: 0 !important;
                }
                body.mob-scroll-mode #scroll-grid-btn {
                  display: flex !important;
                  position: fixed !important;
                  left: 12px !important;
                  top: 66px !important;
                  right: auto !important;
                  bottom: auto !important;
                  width: 46px !important;
                  height: 46px !important;
                  border-radius: 12px !important;
                  z-index: 560 !important;
                }
              }

              /* Ensure blog & trending header buttons moved into mobile talk tabs are visible and aligned to the right */

              #mob-talk-secondary-tabs {
                display: flex;
                gap: 8px;
                align-items: center;
                margin-left: auto;
                flex-shrink: 0;
              }

              #mob-talk-secondary-tabs .sidebar-section-header {
                display: inline-flex !important;
                align-items: center;
                gap: 8px;
                padding: 6px 10px !important;
                border-radius: 999px !important;
                border: 1px solid var(--border2) !important;
                background: transparent !important;
                font-size: 11px !important;
                white-space: nowrap !important;
                cursor: pointer;
              }

              /* Ensure the secondary container sits on the right inside the timeline tabs */

              #timeline-tabs {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;
              }

              #timeline-tabs .mob-talk-secondary-tabs {
                margin-left: auto;
                display: flex;
                align-items: center;
                gap: 8px;
              }

              @media(max-width:768px) {
                .mobile-profile-widget-row {
                  grid-template-columns: minmax(0, 1fr) minmax(0, 1.34fr) minmax(0, 1fr) !important;
                }
                .sl-realname {
                  margin-bottom: 1px !important;
                  line-height: 1.05 !important;
                }
                #sl-origin {
                  margin-top: 0 !important;
                  line-height: 1.05 !important;
                }
                .mobile-profile-widget-row>.panties-widget {
                  display: flex !important;
                  align-items: center !important;
                  justify-content: center !important;
                  justify-self: center !important;
                  align-self: center !important;
                  width: min(178px, 49vw) !important;
                  max-width: 178px !important;
                  margin: 0 auto !important;
                  padding: 0 !important;
                  transform: none !important;
                  position: relative !important;
                  z-index: 1 !important;
                }
                .mobile-profile-widget-row>.sl-info {
                  position: relative !important;
                  z-index: 3 !important;
                }
                .mobile-profile-widget-row>.panties-widget .panties-svg {
                  width: 100% !important;
                  max-width: 178px !important;
                  margin: 0 auto !important;
                }
              }

              @media(max-width:768px) {
                #page-live {
                  padding: 0 !important;
                  min-height: calc(100vh - 118px) !important;
                  background: var(--bg) !important;
                }
                #page-live::after {
                  display: none !important;
                }
                #page-live .live-wrap {
                  border-radius: 0 !important;
                  box-shadow: none !important;
                  border: none !important;
                  min-height: calc(100vh - 118px) !important;
                }
                #page-live .live-content {
                  display: flex !important;
                  flex-direction: column !important;
                  align-items: stretch !important;
                  gap: 0 !important;
                }
                #page-live .live-header {
                  padding: 10px 12px !important;
                  gap: 10px !important;
                  align-items: flex-start !important;
                  flex-wrap: wrap !important;
                  border-bottom: 1px solid var(--border) !important;
                }
                #page-live .live-header-left {
                  min-width: 0 !important;
                  gap: 10px !important;
                  flex: 1 1 auto !important;
                }
                #page-live .live-header-right {
                  width: 100% !important;
                  justify-content: space-between !important;
                  gap: 8px !important;
                }
                #page-live .live-title {
                  font-size: 16px !important;
                  letter-spacing: 1.5px !important;
                }
                #page-live .live-twitch-link,
                #page-live .live-viewer-count {
                  font-size: 8px !important;
                }
                #page-live .live-left {
                  width: 100% !important;
                  overflow: visible !important;
                }
                #page-live .live-player {
                  width: 100% !important;
                  aspect-ratio: 16/9 !important;
                  border-radius: 0 !important;
                }
                #page-live .live-desc {
                  max-height: none !important;
                  border-top: none !important;
                  border-bottom: 1px solid var(--border) !important;
                }
                #page-live .live-desc-inner {
                  padding: 12px !important;
                }
                #page-live .live-desc-content {
                  font-size: 10px !important;
                  line-height: 1.55 !important;
                }
                #page-live .live-chat-panel {
                  width: 100% !important;
                  flex: 1 1 auto !important;
                  border-left: none !important;
                  border-top: 1px solid var(--border) !important;
                  min-height: 56vh !important;
                  background: var(--s1) !important;
                }
                #page-live .live-chat-header {
                  padding: 10px 12px !important;
                  font-size: 8px !important;
                  letter-spacing: 2px !important;
                  position: sticky !important;
                  top: 54px !important;
                  z-index: 2 !important;
                }
                #page-live .live-chat-body {
                  min-height: 56vh !important;
                  height: 56vh !important;
                  overflow: auto !important;
                  -webkit-overflow-scrolling: touch !important;
                }
                #page-live #twitch-chat-container-live {
                  min-height: 56vh !important;
                  height: 56vh !important;
                }
              }

              /* final preview parity layer: keep preview visually identical to real mobile */

              @media(max-width:768px) {
                /* Keep the Tea Party tabs on one clean row on real mobile screens. */
                .mob-talk-mode #timeline-tabs {
                  display: flex !important;
                  align-items: center !important;
                  justify-content: flex-start !important;
                  gap: 8px !important;
                  flex-wrap: nowrap !important;
                  overflow-x: auto !important;
                  padding-right: 0 !important;
                }

                .mob-talk-mode #mob-talk-secondary-tabs {
                  margin-left: auto !important;
                  display: flex !important;
                  align-items: center !important;
                  gap: 8px !important;
                  flex-shrink: 0 !important;
                  white-space: nowrap !important;
                }

                .mob-talk-mode #timeline-tabs .sidebar-section-header,
                .mob-talk-mode #mob-talk-secondary-tabs .sidebar-section-header {
                  display: inline-flex !important;
                  align-items: center !important;
                  justify-content: center !important;
                  min-height: 32px !important;
                  font-size: 10px !important;
                  line-height: 1 !important;
                  padding: 7px 11px !important;
                  margin: 0 !important;
                  border-radius: 999px !important;
                  border: 1px solid var(--border2) !important;
                  white-space: nowrap !important;
                  flex-shrink: 0 !important;
                  transform: none !important;
                }
              }

/* ── Content-visibility lazy paint ── */
@media(max-width:768px) {
                .page:not(.active) {
                  content-visibility: hidden;
                  contain: layout style paint;
                }
                img[loading],
                iframe[loading] {
                  content-visibility: auto;
                }
              }

/* ── Touch / tap performance ── */
*{-webkit-tap-highlight-color:transparent}
button,a,[role=button],.nb,.bra-nav-btn,.panties-widget,.fans-star-wrap,.insta-cell,.scroll-thumb,.tiktok-cell,.yt-item,.mob-tab,.mob-tab-home,.mob-top-btn,.main-nav-btn,.sl-discord-widget,.np-play-btn,.feat-pin-btn,.da-btn,.fpa,.sheet-opt,.setting-btn,.modal-close,.det-close,.ep-av-wrap,.accent-sw,.lvl-wrapper,.talk-nav-pill,.sl-btn{touch-action:manipulation;cursor:pointer}
.app-column-center,.det-comments,.yt-list,.feat-yt-list,.ep-body,.live-desc,.live-chat-body,.settings-wrap,.scrollables-left-panel,.timeline-list{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html,body{overscroll-behavior-x:none}
@media(max-width:768px){
  body{-webkit-text-size-adjust:100%}
  input,textarea,select{font-size:16px!important}
}

/* ── GPU/performance overrides ── */
/* ─── Kill backdrop-filter on mobile (single biggest GPU win) ─── */

              @media (max-width: 768px) {
                .nav,
                html:not(.light-mode) .nav,
                html.light-mode .nav,
                .modal-bg,
                .detail-bg,
                .sheet-bg,
                .mp-sidebar,
                .mp-eras-header,
                html.light-mode .mp-eras-header,
                html.light-mode .mp-sidebar,
                .live-wrap,
                .talk-intro,
                #mobile-top-bar,
                #mobile-bottom-bar,
                body.dark-mode .app-column-right,
                body.dark-mode .timeline-header,
                body.dark-mode .update-box,
                body.dark-mode .quote-box,
                body.dark-mode .tweet,
                body.dark-mode .app-shell {
                  backdrop-filter: none !important;
                  -webkit-backdrop-filter: none !important;
                }

                /* Give the nav a solid background instead */
                .nav {
                  background-color: rgba(12, 11, 10, 0.96) !important;
                  background-image: none !important;
                }
                html.light-mode .nav {
                  background-color: rgba(255, 255, 255, 0.97) !important;
                }
                #mobile-top-bar {
                  background: rgba(12, 11, 10, 0.97) !important;
                }
                html.light-mode #mobile-top-bar {
                  background: rgba(255, 255, 255, 0.97) !important;
                }
                #mobile-bottom-bar {
                  background: rgba(12, 11, 10, 0.97) !important;
                }
                html.light-mode #mobile-bottom-bar {
                  background: rgba(255, 255, 255, 0.97) !important;
                }
                html:not(.light-mode) .mp-sidebar {
                  background: rgba(20, 18, 16, 0.99) !important;
                }
                html.light-mode .mp-sidebar {
                  background: rgba(255, 255, 255, 0.97) !important;
                }
                .mp-eras-header {
                  background: var(--s2) !important;
                }
                /* Ensure music sidebar text is always visible */
                .mp-sidebar-name,
                .mp-sidebar-stream-name {
                  color: var(--ink) !important;
                }
                html.light-mode .mp-sidebar-name,
                html.light-mode .mp-sidebar-stream-name {
                  color: var(--ink) !important;
                }

                /* ─── Stop all infinite animations on mobile (major CPU/battery win) ─── */
                .nb-icon,
                .main-nav-btn .nb-icon,
                .nav-live-mini .nb-icon,
                .mob-tab .mob-tab-inner,
                .mob-tab-inner {
                  animation: none !important;
                }

                /* Keep only the most important ones (live dot pulse, np bars) */
                .icon-float,
                .star-shadow-pulse,
                .glass-shine,
                .nav-glow,
                .ribbon-fall,
                .ribbon-sway,
                .talk-exclaim-pop,
                .shout-wave,
                .eye-blink,
                .finger-swipe,
                .scroll-lines,
                .music-wave,
                .fans-float-anim,
                .zebra-scroll,
                .shimmer,
                .fans-shadow-pulse-anim {
                  animation-play-state: paused !important;
                }

                /* Specifically target animated elements by their class/id */
                .nb-icon {
                  animation: none !important;
                }
                .nb-star polygon {
                  animation: none !important;
                  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)) !important;
                }
                .bra-bow-ribbon.ribbon-1,
                .bra-bow-ribbon.ribbon-2 {
                  animation: none !important;
                }
                .music-note-1,
                .music-note-2,
                .music-note-3 {
                  animation: none !important;
                }
                .shop-dollar-1,
                .shop-dollar-2,
                .shop-dollar-3 {
                  animation: none !important;
                }
                .talk-exclaim-pop {
                  animation: none !important;
                }
                .shout-1,
                .shout-2,
                .shout-3 {
                  animation: none !important;
                }
                .scroll-line-1,
                .scroll-line-2,
                .scroll-line-3,
                .scroll-line-4 {
                  animation: none !important;
                }
                .scroll-finger {
                  animation: none !important;
                }

                /* ── Re-enable animations for mobile bottom nav tab icons ── */
                #mobile-bottom-bar .mob-tab-inner {
                  animation: icon-float 2.8s ease-in-out infinite !important;
                }
                #mob-tab-music .music-note-1 {
                  animation: note-fly1 2.2s ease-out infinite !important;
                }
                #mob-tab-music .music-note-2 {
                  animation: note-fly2 2.2s ease-out infinite .7s !important;
                }
                #mob-tab-music .music-note-3 {
                  animation: note-fly3 2.2s ease-out infinite 1.4s !important;
                }
                #mob-tab-talk .talk-exclaim-pop {
                  animation: exclaim-pop 2.5s ease-in-out infinite !important;
                  transform-origin: 12px 13px !important;
                }
                #mob-tab-scroll .scroll-line-1 {
                  animation: scroll-lines 1.2s ease-in-out infinite 0s !important;
                }
                #mob-tab-scroll .scroll-line-2 {
                  animation: scroll-lines 1.2s ease-in-out infinite .15s !important;
                }
                #mob-tab-scroll .scroll-line-3 {
                  animation: scroll-lines 1.2s ease-in-out infinite .3s !important;
                }
                #mob-tab-scroll .scroll-finger {
                  animation: finger-swipe 1.8s ease-in-out infinite !important;
                }
                /* Shop bra ribbons in top bar */
                #mob-shop-btn .ribbon-1 {
                  animation: ribbon-fall 2.6s ease-in-out infinite, ribbon-sway 3.4s ease-in-out infinite !important;
                }
                #mob-shop-btn .ribbon-2 {
                  animation: ribbon-fall 3s ease-in-out infinite .3s, ribbon-sway 3.8s ease-in-out infinite .25s !important;
                }
                #mob-shop-btn .shop-dollar-1 {
                  animation: note-fly1 2.5s ease-out infinite !important;
                }
                #mob-shop-btn .shop-dollar-2 {
                  animation: note-fly2 2.5s ease-out infinite .8s !important;
                }
                #mob-shop-btn .shop-dollar-3 {
                  animation: note-fly3 2.5s ease-out infinite 1.6s !important;
                }
                .np-progress-fill {
                  animation: none !important;
                }
                .lvl-bar-fill {
                  animation: none !important;
                }
                .lvl-bar-fill::after {
                  animation: none !important;
                }
                .age18-ring {
                  animation: none !important;
                }
                .age18-ring2 {
                  animation: none !important;
                }
                .age18-inner {
                  animation: none !important;
                }
                .fans-star-num {
                  animation: none !important;
                }
                .fans-star-label {
                  animation: none !important;
                }
                .nav::after {
                  animation: none !important;
                  display: none !important;
                }
                .np-widget::after,
                .sl-discord-widget::after {
                  animation: none !important;
                  display: none !important;
                }
                .np-mini-bar {
                  animation: none !important;
                }
                #page-live::after {
                  display: none !important;
                }
                /* Site intro still plays since it's a one-time animation */
                /* ─── Kill will-change on mobile (saves GPU VRAM layers) ─── */
                .fans-star-g,
                .fans-shadow-el,
                .nb-icon,
                .main-nav-btn,
                .lvl-bar-fill,
                .np-progress-fill {
                  will-change: auto !important;
                }

                /* ─── Fix background-attachment:fixed (broken/slow in mobile Safari) ─── */
                #_doll_bg_fixed {
                  background-attachment: scroll !important;
                  position: absolute !important;
                }

                /* ─── content-visibility for hidden pages (don't render what's off screen) ─── */
                .page:not(.active) {
                  content-visibility: hidden !important;
                  contain: size layout paint style !important;
                }

                /* ─── Simplify nav star buttons on mobile (just use flat look) ─── */
                .main-nav-btn .nb-star-wrap {
                  filter: none !important;
                }
                .main-nav-btn:hover {
                  transform: none !important;
                  filter: none !important;
                  box-shadow: none !important;
                }

                /* ─── Scrollables: remove blanket TikTok iframe until visible ─── */
                .tiktok-embed[data-lazy-pending] iframe,
                .tiktok-embed[data-lazy-pending] section {
                  display: none !important;
                }

                /* Shrink panties widget slightly so it doesn't overlap other widgets */
                .panties-widget {
                  transform: scale(0.88) !important;
                  transform-origin: top center !important;
                  margin-bottom: -6px !important;
                }
              }

              /* ─── Respect prefers-reduced-motion system setting ─── */

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

/* ── Mobile equalizer bars ── */
@media (max-width: 768px) {
                /* Mini equalizer bars — run when playing */
                .np-widget.playing .np-mini-bar {
                  animation: npb var(--s) ease-in-out infinite alternate var(--d) !important;
                  animation-play-state: running !important;
                }
                /* Progress bar zebra scroll — run when playing */
                .np-widget.playing .np-progress-fill {
                  animation: zebra-scroll 3s linear infinite !important;
                  animation-play-state: running !important;
                }
                /* Floating music notes — run when playing */
                .np-widget.playing .np-notes .music-note-1 {
                  animation: note-fly1 1.8s ease-out infinite !important;
                }
                .np-widget.playing .np-notes .music-note-2 {
                  animation: note-fly2 1.9s ease-out infinite 0.18s !important;
                }
                .np-widget.playing .np-notes .music-note-3 {
                  animation: note-fly3 2s ease-out infinite 0.36s !important;
                }
              }

}