/* === Icon system: inline SVG sprite (Lucide/Feather style), colour = currentColor === */
    .ic {
      width: 1.2em;
      height: 1.2em;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      vertical-align: -0.22em;
      flex: none;
      pointer-events: none
    }

    .ic.fill {
      fill: currentColor
    }

    .ic.spin {
      animation: icspin 1s linear infinite
    }

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

    .logo-img {
      height: 48px;
      width: auto;
      border-radius: 0;
      background: none;
      object-fit: contain;
      vertical-align: middle;
      margin-right: 8px
    }

    .logo .logo-img { position: relative; top: -2px; height: 30px; margin-right: 4px }

    .tab-btn .nav-ic {
      width: 26px;
      height: 26px;
      display: block;
      margin: 0 auto;
      stroke-width: 1.75
    }

    .tab-btn.active .nav-ic {
      fill: currentColor;
      --ic-cut: var(--bgc, #fff)
    }

    .bottom-nav.on-video .tab-btn.active .nav-ic {
      --ic-cut: #000
    }

    .tab-btn.tab-plus .ic {
      width: 26px;
      height: 26px;
      stroke-width: 2.4
    }

    .empty .icon .ic {
      width: 1em;
      height: 1em;
      stroke-width: 1.5
    }

    .v-side button .ic.v-ic {
      width: 30px;
      height: 30px;
      font-size: 30px
    }

    .v-side button.liked .ic.v-ic {
      fill: currentColor
    }

    .post-actions .ic.fill,
    .liked .ic.fill {
      fill: currentColor
    }

    .v-top button .ic {
      width: 22px;
      height: 22px;
      vertical-align: middle
    }

    .chat-icon-btn .ic,
    .chat-send-btn .ic {
      width: 24px;
      height: 24px
    }

    .back-bar .ic,
    .chat-back .ic {
      width: 22px;
      height: 22px;
      vertical-align: -5px
    }

    .conv-av .ic {
      width: 22px;
      height: 22px
    }

    .edit-hint .ic {
      width: 14px;
      height: 14px
    }

    .pp-play .ic,
    .v-pause .ic {
      width: 1em;
      height: 1em
    }

    :root {
      /* Default browse chrome = pure white (sakura pink is opt-in via data-theme="sakura") */
      --p: #1a1a1a;
      --pl: #e6e6e6;
      --bg: #fff;
      --bgc: #fff;
      --bgi: #f8f8f8;
      --tx: #222;
      --txs: #999;
      --bd: #e8e8e8
    }

    [data-theme="sakura"] {
      --p: #e8556d;
      --pl: #f0a6ca;
      --bg: #fef7f9;
      --bgc: #fff;
      --bgi: #f9f0f3;
      --tx: #2d1f24;
      --txs: #8c6b75;
      --bd: #f0d0da
    }

    [data-theme="lavender"] {
      --p: #9b59b6;
      --pl: #d7bde2;
      --bg: #f9f5fc;
      --bgc: #fff;
      --bgi: #f3ecf7;
      --tx: #1f1a2d;
      --txs: #6b5b80;
      --bd: #d7bde2
    }

    [data-theme="ocean"] {
      --p: #3498db;
      --pl: #85c1e9;
      --bg: #f5f9fc;
      --bgc: #fff;
      --bgi: #ecf3f8;
      --tx: #1a2433;
      --txs: #5b7a95;
      --bd: #b3d4ea
    }

    [data-theme="mint"] {
      --p: #0f4c3a;
      --pl: #4f8a72;
      --bg: #f3f7f4;
      --bgc: #fff;
      --bgi: #e4ede8;
      --tx: #10261d;
      --txs: #4a6b5c;
      --bd: #a9c4b7
    }

    [data-theme="sunset"] {
      --p: #e67e22;
      --pl: #f5b041;
      --bg: #fdf8f3;
      --bgc: #fff;
      --bgi: #f9efe4;
      --tx: #2d221a;
      --txs: #957b5b;
      --bd: #e0c8a8
    }

    [data-theme="dark"] {
      --p: #f2f2f2;
      --pl: #3a3a3a;
      --bg: #121212;
      --bgc: #1c1c1c;
      --bgi: #262626;
      --tx: #ececec;
      --txs: #9a9a9a;
      --bd: #333
    }

    /* Comment action menu (long-press) */
    .cm-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9000;
    }

    .cm-menu {
      position: absolute;
      background: var(--bgc);
      border: 1px solid var(--bd);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,.15);
      padding: 4px 0;
      min-width: 140px;
      z-index: 9001;
      animation: cmFadeIn .15s ease;
    }

    @keyframes cmFadeIn {
      from {
        opacity: 0;
        transform: scale(.95)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .cm-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      font-size: 14px;
      color: var(--tx);
      cursor: pointer;
      transition: background .15s;
    }

    .cm-item:hover {
      background: var(--bgh, #f5f5f5)
    }

    .cm-item svg {
      flex-shrink: 0;
      color: var(--txs)
    }

    .cm-item.cm-danger {
      color: #e74c3c
    }

    .cm-item.cm-danger svg {
      color: #e74c3c
    }

    .cm-item.cm-danger:hover {
      background: #e74c3c10
    }
    /* long-press on comments: no iOS text selection / callout (copy is in the menu) */
    .c-item, .c-reply-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none }

    .rv-acts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; margin-top:8px }
    .rv-acts > button { width:100%; min-height:44px; margin:0; padding:0 8px; font-size:15px; border-radius:10px; box-sizing:border-box }
    .rv-card2 { display:flex; flex-wrap:wrap; align-items:center; gap:6px; background:var(--card,#fff); border:1px solid var(--bd,#eee); border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.06); padding:12px 14px; margin-bottom:10px; box-sizing:border-box }
    .rv-card2 > * { box-sizing:border-box }
    .rv-c-top { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px }
    .rv-c-name { font-size:16px; min-width:0; overflow-wrap:anywhere }
    .rv-c-sub { width:100%; font-size:12.5px; color:#888; overflow-wrap:anywhere; line-height:1.5 }
    .rv-c-reason { width:100%; font-size:13.5px; overflow-wrap:anywhere; background:rgba(245,158,11,.08); border-radius:8px; padding:6px 10px }
    .rv-c-foot { width:100%; margin-top:4px; padding-top:8px; border-top:1px solid var(--bd,#eee); font-size:12px; color:#999; overflow-wrap:anywhere }
    .rv-card2 .rv-acts { margin-top:4px }
    .rv-dec { flex-shrink:0; display:inline-block; padding:2px 10px; border-radius:999px; font-size:13px; font-weight:600; color:#fff; background:#888 }
    .rv-dec-approved { background:#22a06b } .rv-dec-rejected { background:#e5484d } .rv-dec-redo { background:#f59e0b }
    .hlp { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; margin:6px 0; border:1px solid var(--bd); border-radius:999px; background:var(--bgc); box-sizing:border-box }
    .hlp-btn { flex:none; width:34px; height:34px; border-radius:50%; border:none; background:var(--p); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer }
    .hlp-bar { position:relative; flex:1; height:22px; cursor:pointer; touch-action:none }
    .hlp-bar::before { content:''; position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; border-radius:2px; background:var(--bd) }
    .hlp-fill { position:absolute; left:0; top:50%; height:4px; margin-top:-2px; border-radius:2px; background:var(--p) }
    .hlp-knob { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--p); box-shadow:0 0 0 3px var(--bgc) }
    .hlp-time { flex:none; font-size:12px; color:var(--txs); font-variant-numeric:tabular-nums; min-width:74px; text-align:right }
    [data-theme="purewhite"] .hlp-btn, [data-theme="purewhite"] .hlp-fill, [data-theme="purewhite"] .hlp-knob { background:#111 }
    [data-theme="purewhite"] {
      --p: #1a1a1a;
      --pl: #e6e6e6;
      --bg: #fff;
      --bgc: #fff;
      --bgi: #f8f8f8;
      --tx: #222;
      --txs: #999;
      --bd: #e8e8e8
    }

    [data-theme="rosegold"] {
      --p: #b76e79;
      --pl: #dbb5b0;
      --bg: #fdf5f3;
      --bgc: #fff;
      --bgi: #f9eeec;
      --tx: #3d2229;
      --txs: #9b7a80;
      --bd: #e8c5c0
    }

    [data-theme="peach"] {
      --p: #ff8a80;
      --pl: #ffccbc;
      --bg: #fff8f6;
      --bgc: #fff;
      --bgi: #ffefe8;
      --tx: #3d1f1a;
      --txs: #a07060;
      --bd: #f0c8b8
    }

    [data-theme="lakeblue"] {
      --p: #4fc3f7;
      --pl: #b3e5fc;
      --bg: #f2f9fd;
      --bgc: #fff;
      --bgi: #e8f4fb;
      --tx: #1a2e3d;
      --txs: #6090a8;
      --bd: #b8ddf0
    }

    [data-theme="sage"] {
      --p: #7cb342;
      --pl: #c5e1a5;
      --bg: #f6faf2;
      --bgc: #fff;
      --bgi: #eef5e8;
      --tx: #1f2d1a;
      --txs: #6b9548;
      --bd: #c8deb0
    }

    [data-theme="lilac"] {
      --p: #ab47bc;
      --pl: #ce93d8;
      --bg: #f9f4fc;
      --bgc: #fff;
      --bgi: #f0e6f5;
      --tx: #261a2d;
      --txs: #7a5b8c;
      --bd: #d0b8e0
    }

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--tx);
      line-height: 1.6
    }

    a {
      color: var(--p);
      text-decoration: none
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all .2s
    }

    .btn-p {
      background: var(--p);
      color: #fff
    }

    .btn-p:hover {
      filter: brightness(.9)
    }

    .btn-o {
      background: transparent;
      border: 1px solid var(--bd);
      color: var(--tx)
    }

    .btn-sm {
      padding: 6px 14px;
      font-size: 13px
    }

    .btn-danger {
      background: #e74c3c;
      color: #fff
    }

    .btn-danger:hover {
      filter: brightness(.9)
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      color: var(--tx);
      font-size: 14px;
      font-family: inherit
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: var(--p)
    }

    .card {
      background: var(--bgc);
      border-radius: 12px;
      border: 1px solid var(--bd);
      padding: 16px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
      margin-bottom: 12px
    }

    .page {
      max-width: 640px;
      margin: 0 auto;
      padding: 20px
    }

    .page-post {
      display: flex;
      flex-direction: column;
      max-width: 640px;
      margin: 0 auto;
      padding: 0 16px;
      box-sizing: border-box;
      min-height: 0
    }

    /* Solid fixed strip under the status bar: iOS 26 Safari otherwise draws its frosted top-edge blur over the logo at scrollTop 0 */
    .page-post:not(.page-chat)::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: max(1px, env(safe-area-inset-top, 0px));
      background: var(--bg);
      z-index: 41;
      pointer-events: none
    }

    /* Post detail: no top blur. iOS 26 Safari draws a frosted scroll-edge blur over the top of a scrollable document;
       it disappeared only once the keyboard locked body (post-cmt-open). Lock the document the same way from entry
       (only .post-scroll scrolls), so the header/logo/author are never under the blur. */
    html:has(.page-post:not(.page-chat)),
    html:has(.page-post:not(.page-chat)) body {
      overflow: hidden;
      overscroll-behavior: none;
      height: 100%
    }

    html:has(.page-post:not(.page-chat)) body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%
    }

    /* Post detail only (not chat): full viewport — bottom tab bar is hidden on this page */
    .page-post:not(.page-chat) {
      width: 100%;
      max-width: 640px;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      overflow-x: hidden
    }

    /* Logo → back → author stacked top-left. Flex sibling (not sticky overlay) so text never runs under it */
    .page-post .post-hdr {
      flex-shrink: 0;
      position: relative;
      z-index: 40;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin: 0 -16px;
      padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 14px;
      background: var(--bg);
      border-bottom: 1px solid color-mix(in srgb, var(--bd) 55%, transparent)
    }

    .page-post .post-hdr .logo {
      font-size: 17px;
      display: inline-flex;
      align-items: flex-start;
      line-height: 17px;
      max-width: 100%
    }

    /* The mark's real aspect is 191/144, so height 22px would lay out at 29.18px and
       push 她域 onto a half pixel (blurry at DPR 3). An integer box keeps the word on the grid. */
    .page-post .post-hdr .logo .logo-img {
      height: 22px;
      width: 29px;
      object-fit: contain;
      object-position: left center;
      margin-right: 6px
    }

    .page-post .post-hdr .logo .logo-tx {
      position: relative;
      top: 3px
    }

    .page-post .post-hdr .back-btn {
      margin: 2px 0;
      padding: 10px 14px 10px 4px;
      min-height: 44px;
      align-self: flex-start;
      box-sizing: border-box
    }

    .page-post .post-hdr .post-hdr-author {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin-top: 4px;
      box-sizing: border-box
    }

    .page-post .post-hdr .post-hdr-author .post-avatar {
      width: 36px;
      height: 36px;
      font-size: 14px;
      flex-shrink: 0
    }

    .page-post .post-hdr .post-hdr-meta {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px
    }

    .page-post .post-hdr .post-hdr-meta .post-name {
      font-size: 15px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .page-post .post-hdr .post-hdr-meta .post-time {
      font-size: 12px
    }

    .page-post .post-scroll {
      flex: 1;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      /* leave room for comment bar + home-indicator (no bottom tab on post) */
      padding: 4px 0 calc(88px + env(safe-area-inset-bottom, 0px));
      box-sizing: border-box
    }

    .page-post .post-scroll .card {
      max-width: 100%;
      box-sizing: border-box;
      overflow-x: hidden
    }

    .page-post .post-scroll .post-body {
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word
    }

    /* Author lives in hdr; card keeps topic + actions only */
    .page-post .post-scroll .post-head {
      min-height: 0;
      align-items: center
    }

    .comment-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 90;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      background: var(--bg);
      border-top: 1px solid color-mix(in srgb, var(--bd) 55%, transparent);
      box-sizing: border-box
    }

    .comment-bottom .comment-box {
      margin-bottom: 0
    }

    .comment-bottom .comment-box input {
      font-size: 16px /* iOS: avoid focus zoom + clip */
    }

    .quick-phrases {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding: 6px 0 2px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .quick-phrases::-webkit-scrollbar {
      display: none
    }

    .quick-phrases span {
      flex-shrink: 0;
      padding: 4px 10px;
      border-radius: 14px;
      background: var(--bgi);
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
      color: var(--txs)
    }

    .quick-phrases span:active {
      background: var(--bd)
    }

    /* The top logo bar (.nav) only exists on the Home page. --hdr = its height, --sat0 = status-bar inset used instead on other pages */
    :root {
      --hdr: 52px;
      --sat0: 0px
    }

    html.no-hdr {
      --hdr: 0px;
      --sat0: env(safe-area-inset-top, 0px)
    }

    html.no-hdr .nav {
      display: none
    }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: var(--bg);
      border-bottom: 1px solid color-mix(in srgb, var(--bd) 50%, transparent)
    }

    .nav-in {
      max-width: 640px;
      margin: 0 auto;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 52px
    }

    /* Profile header, refined */
    .pf2 { position: relative; overflow: hidden; padding: 0 0 18px; border: none; border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px color-mix(in srgb, var(--p) 35%, transparent) }
    .pf2 { background: color-mix(in srgb, var(--p) 12%, var(--bgc)) }
    [data-theme="purewhite"] .pf2 { background: #fbf8f4; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -14px rgba(0,0,0,.12) }
    .pf2 .pf2-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center }
    .pf2 .pf2-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bgc) 8%, transparent) 0%, color-mix(in srgb, var(--bgc) 18%, transparent) 40%, color-mix(in srgb, var(--bgc) 38%, transparent) 100%) }
.pf2.hascov h2, .pf2.hascov .account-num, .pf2.hascov .profile-head p, .pf2.hascov .profile-stats b, .pf2.hascov .profile-stats small { color: var(--tx) !important }
.pf2.hascov h2, .pf2.hascov .profile-stats b { font-weight: 800 }
.pf2.hascov .account-num, .pf2.hascov .profile-head p, .pf2.hascov .profile-stats small { font-weight: 600 }
    .pf2 > :not(.pf2-bg) { position: relative; z-index: 1 }
    .pf2.me { cursor: pointer }
    .pf2 .pf2-cover { height: 96px }
    .pf2 .pf2-cam { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bgc) 70%, transparent); color: var(--tx); backdrop-filter: blur(6px) }
    html:has(.cvc-stage), body:has(.cvc-stage) { overscroll-behavior: none; overflow: hidden }
    .cvc-stage { position: relative; margin: 14px 16px; aspect-ratio: 16/9; overflow: hidden; border-radius: 14px; background: #111; touch-action: none; overscroll-behavior: none; cursor: grab }
    .cvc-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; pointer-events: none; max-width: none }
    .cvc-zoom { display: flex; align-items: center; gap: 10px; padding: 0 22px 10px; color: var(--txs); font-size: 13px }
    .cvc-zoom input { flex: 1; accent-color: var(--p) }
    .pf2 .profile-head { flex-direction: column; align-items: center; text-align: center; gap: 0; margin-top: -46px; padding: 0 20px }
    .pf2 .profile-av { width: 92px; height: 92px; border: 4px solid var(--bg); box-shadow: 0 6px 18px -6px rgba(0,0,0,.25); background: color-mix(in srgb, var(--p) 14%, var(--bg)); color: var(--p); font-size: 34px }
    .pf2 .profile-head > div:last-child { width: 100% }
    .pf2 h2 { margin-top: 10px; font-size: 20px !important; letter-spacing: .02em }
    .pf2 .account-num { margin: 6px auto 0; display: inline-block }
    .pf2 .prof-title-row { justify-content: center }
    .pf2 .profile-head p { margin: 8px 0 0 !important; line-height: 1.6 }
    .pf2 .profile-stats { display: flex; justify-content: center; gap: 0; margin: 16px auto 0; max-width: 300px; padding: 12px 0; border-radius: 16px; background: color-mix(in srgb, var(--p) 6%, transparent) }
    .pf2 .profile-stats span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; margin: 0 !important; position: relative }
    .pf2 .profile-stats span + span::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--bd) }
    .pf2 .profile-stats b { font-size: 18px; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums }
    .pf2 .profile-stats small { font-size: 12px; color: var(--txs) }
    .pf2 .profile-actions { justify-content: center; margin-top: 16px; padding: 0 20px; gap: 10px }
    .pf2 .profile-actions .btn, .pf2 .profile-actions .btn-follow { border-radius: 999px; padding-left: 18px; padding-right: 18px; min-height: 36px }

    .back-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      position: sticky;
      top: var(--navb, 52px);
      z-index: 50;
      background: var(--bg);
      margin-left: -16px;
      margin-right: -16px;
      padding: 8px 16px
    }

    .back-btn {
      background: none;
      border: none;
      color: var(--p);
      font-size: 16px;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 8px;
      transition: background .2s
    }

    .back-btn:hover {
      background: var(--bgi)
    }

    .logo {
      font-size: 21px;
      font-weight: 700;
      color: var(--p);
      cursor: pointer
    }

    /* header wordmark: 她域 in Chinese (same size/weight, slight tracking), HERLAND otherwise */
    .logo-tx.zh { letter-spacing: .06em }

    .nav-r {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .nav-icon {
      font-size: 18px;
      cursor: pointer;
      position: relative;
      text-decoration: none;
      padding: 4px
    }

    .badge {
      position: absolute;
      top: -4px;
      right: -6px;
      background: #e74c3c;
      color: #fff;
      font-size: 9px;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700
    }

    .v-badge {
      display: none
    }

    .v-icon {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 16px;
      height: 16px;
      /* official/verified V badge: fixed gold in every theme (never follows --p) */
      background-color: #D4AF37;
      background-image: linear-gradient(135deg, #F7D774, #D4AF37 55%, #B8860B);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      border: 2px solid var(--bgc);
      z-index: 2;
      line-height: 1
    }

    /* blogger V badge: fixed purple in every theme (never follows --p) */
    .b-icon {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 16px;
      height: 16px;
      background-color: #8B3FD6;
      background-image: linear-gradient(135deg, #B57BFF, #8B3FD6 55%, #6A24B8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      border: 2px solid var(--bgc);
      z-index: 3;
      line-height: 1
    }

    /* admin V badge: fixed black in every theme */
    .a-icon {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 16px;
      height: 16px;
      background-color: #111;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      border: 2px solid var(--bgc);
      z-index: 3;
      line-height: 1
    }

    .b-tag {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 10px;
      font-weight: 700;
      color: #8B3FD6;
      background: rgba(139, 63, 214, .12);
      border-radius: 4px;
      padding: 0 4px;
      margin-left: 4px;
      line-height: 1.4
    }

    .admin-del {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--txs);
      font-size: 13px;
      margin-left: 4px;
      padding: 2px 4px;
      border-radius: 4px;
      transition: background .2s
    }

    .admin-del:hover {
      background: #e74c3c22;
      color: #e74c3c
    }

    /* Official recommend badge (style C): pure black capsule, white text, no accent */
    .off-rec-tag {
      display: inline-block;
      margin-top: 8px;
      padding: 3px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      background: #000;
      border-radius: 999px;
      line-height: 1.35;
      letter-spacing: .02em;
      text-align: left
    }

    /* ===== Theme level titles: enamel-pin badge (metal-rim emblem per rank band + 思源宋体 subset) =====
       bands: rk1 萌新 Lv0-3 · rk2 学者 4-6 · rk3 学长 7-10 · rk4 前辈 11-15 · rk5 大师 16+ */
    @font-face {
      font-family: "HLBadgeSerif";
      src: url(/fonts/hl-badge-serif.woff2?v=1) format("woff2");
      font-weight: 700;
      font-display: swap
    }
    :root {
      --hl-title-ink: #1a1a1a;
      --hl-title-rule: rgba(0, 0, 0, .3);
      --hl-title-wash: linear-gradient(#fff, #f5f5f5)
    }
    .hl-title {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      position: relative;
      margin-left: 6px;
      max-width: 12em;
      height: 20px;
      box-sizing: border-box;
      padding: 0 8px 0 0;
      white-space: nowrap;
      font-family: "HLBadgeSerif", "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", "SimSun", serif;
      font-size: 11px;
      font-weight: 700;
      line-height: 20px;
      letter-spacing: .08em;
      color: var(--hl-title-ink);
      border-radius: 999px;
      border: 0;
      background: var(--hl-title-wash);
      box-shadow: 0 0 0 .5px var(--hl-title-rule), 0 1px 1.5px rgba(0, 0, 0, .08), inset 0 .5px 0 #fff;
      flex-shrink: 0
    }
    .hl-title .hl-pin {
      width: 20px;
      height: 20px;
      margin: 0 4px 0 -1px;
      flex: none;
      filter: drop-shadow(0 .6px .6px rgba(0, 0, 0, .28))
    }
    .hl-title .hl-t {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0
    }
    .hl-title.rk1 { --pm: #7a4a2a; --pe: #fbfaf7 }
    .hl-title.rk2 { --pm: #4a4f55; --pe: #f3f3f3 }
    .hl-title.rk3 { --pm: #f3d27a; --pe: #1c1c1c }
    .hl-title.rk4 { --pm: #e9eef5; --pe: #121212 }
    .hl-title.rk5 { --pm: #f5d77f; --pe: #0a0a0a }
    .hl-title.rk3,
    .hl-title.rk4 {
      box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .1), inset 0 .5px 0 #fff
    }
    .hl-title.rk5 {
      background: linear-gradient(#2a2a2a, #0b0b0b);
      box-shadow: 0 0 0 .5px #b8912f, inset 0 .5px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .25)
    }
    .hl-title.rk5 .hl-t {
      background: linear-gradient(#fff0bf, #d9ad48);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }
    .topic-subtabs {
      display: flex;
      gap: 0;
      margin: 0 0 10px;
      border-bottom: 1px solid var(--bd)
    }
    .topic-subtab {
      flex: 1;
      text-align: center;
      padding: 10px 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--txs);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      user-select: none
    }
    .topic-subtab.on {
      color: var(--tx);
      border-bottom-color: #111
    }
    .topic-zone-bar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 14px;
      margin: 0 0 12px;
      background: var(--bgi);
      border: 1px solid var(--bd)
    }
    .topic-zone-bar .tz-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap
    }
    .topic-zone-bar .tz-meta {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      color: var(--txs);
      line-height: 1.45
    }
    .topic-zone-bar .tz-meta b {
      color: var(--tx);
      font-weight: 600
    }
    .topic-zone-bar .tz-xp {
      width: 100%;
      height: 4px;
      background: #e8e8e8;
      border-radius: 2px;
      overflow: hidden
    }
    .topic-zone-bar .tz-xp > i {
      display: block;
      height: 100%;
      background: #111;
      border-radius: 2px
    }
    .topic-zone-bar { transition: padding .3s ease, background-color .3s ease, border-color .3s ease }
    .topic-zone-bar.tz-thin { padding: 0; background: transparent; border-color: transparent }
    .topic-zone-bar .tz-line { display: flex; align-items: center; gap: 8px; height: 22px; margin: -6px 0 -4px; cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; transition: height .3s ease, margin .3s ease, opacity .25s ease }
    /* not checked in yet: line stays mounted but takes no space (0 height, -10px cancels the bar gap), so check-in grows it smoothly instead of popping in */
    .topic-zone-bar .tz-line.off { height: 0; margin: 0 0 -10px; opacity: 0; pointer-events: none }
    .topic-zone-bar.tz-thin .tz-line { margin: 0 }
    .topic-zone-bar .tz-hr { flex: 1; height: 1px; background: var(--bd); transition: opacity .3s ease }
    .topic-zone-bar:not(.tz-thin) .tz-hr { opacity: 0 }
    .topic-zone-bar .tz-tri { flex-shrink: 0; fill: var(--txs); transition: transform .3s ease }
    .topic-zone-bar .tz-tri.up { transform: rotate(180deg) }
    .topic-zone-bar .tz-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease, opacity .25s ease, margin .3s ease; margin-top: -10px }
    .topic-zone-bar .tz-fold.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0 }
    .topic-zone-bar .tz-fold-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px }
    .topic-zone-bar .tz-fold-in.ck-bursting { overflow: visible }
    .topic-zone-bar > .tz-fold:first-child { margin-top: 0 }
    @media (prefers-reduced-motion: reduce) { .topic-zone-bar, .topic-zone-bar .tz-fold, .topic-zone-bar .tz-tri, .topic-zone-bar .tz-hr, .topic-zone-bar .tz-line { transition: none } }
    .topic-zone-bar .tz-hint {
      font-size: 11px;
      color: var(--txs)
    }
    /* check-in guide (not enabled yet for this theme) */
    .ck-intro { display: flex; align-items: center; gap: 12px }
    .ck-intro .ck-txt { flex: 1; min-width: 0 }
    .ck-intro .ck-txt b { display: block; font-size: 14px; font-weight: 600; color: var(--tx); line-height: 1.4 }
    .ck-intro .ck-txt p { margin: 3px 0 0; font-size: 12px; color: var(--txs); line-height: 1.5 }
    .ck-go-wrap { position: relative; flex-shrink: 0 }
    .ck-go { min-width: 88px; justify-content: center; position: relative; z-index: 1; transition: background .2s, color .2s, border-color .2s }
    .ck-go.on, .ck-go.on:hover { background: var(--p, #111); border-color: var(--p, #111); color: #fff; animation: ckPop .5s cubic-bezier(.3,1.6,.5,1) }
    .ck-intro.fx .ck-txt { animation: ckFade .35s ease .65s both }
    .ck-intro.fx { animation: ckOut .3s ease .75s both }
    .ck-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 0 }
    .ck-ring { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--p, #111); opacity: 0; animation: ckRing .7s ease-out both }
    .ck-ring.r2 { animation-delay: .15s; border-width: 1px }
    .ck-sp { position: absolute; left: -1.5px; top: -6px; width: 3px; height: 12px; border-radius: 2px; background: var(--p, #111); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: ckSpark .75s cubic-bezier(.2,.7,.3,1) var(--dl, 0ms) both }
    .ck-sp.dot { left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50% }
    .topic-zone-bar.tz-reveal > * { animation: ckIn .45s cubic-bezier(.2,.8,.3,1) both }
    .topic-zone-bar.tz-reveal > .tz-xp { animation-delay: .06s }
    .topic-zone-bar.tz-reveal > .tz-hint { animation-delay: .12s }
    .topic-zone-bar.tz-reveal .tz-xp > i { animation: ckBar .8s cubic-bezier(.2,.8,.3,1) .15s both }
    .topic-zone-bar.tz-reveal { animation: ckGlow .9s ease both }
    @keyframes ckPop { 0% { transform: scale(1) } 35% { transform: scale(.88) } 100% { transform: scale(1) } }
    @keyframes ckRing { 0% { opacity: .8; transform: scale(.8) } 100% { opacity: 0; transform: scale(2.4) } }
    @keyframes ckSpark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-26px) scale(.4) } 25% { opacity: 1 } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d) - 16px)) scale(1) } }
    @keyframes ckFade { to { opacity: .35 } }
    @keyframes ckOut { to { opacity: 0; transform: translateY(-4px) } }
    @keyframes ckIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
    @keyframes ckBar { from { transform: scaleX(0) } to { transform: scaleX(1) } }
    .topic-zone-bar.tz-reveal .tz-xp > i { transform-origin: left center }
    @keyframes ckGlow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p, #111) 16%, transparent) } 100% { box-shadow: 0 0 0 10px transparent } }
    @media (prefers-reduced-motion: reduce) {
      .ck-intro.fx, .ck-intro.fx .ck-go, .ck-intro.fx .ck-txt, .topic-zone-bar.tz-reveal, .topic-zone-bar.tz-reveal > *, .topic-zone-bar.tz-reveal .tz-xp > i { animation: none !important }
      .ck-burst { display: none }
    }
    .pf-name-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px }
    .pf-name-row .prof-title-row { margin:0 !important }
    .prof-title-row {
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }
    .prof-title-row .hl-title { margin-left: 0 }
    .title-pick {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px
    }
    .title-pick label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--tx);
      cursor: pointer
    }
    .title-pick .hl-title { margin-left: 0 }

    .report-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--txs);
      font-size: 13px;
      margin-left: 4px;
      padding: 2px 4px;
      border-radius: 4px;
      transition: background .2s;
      opacity: .5
    }

    .report-btn:hover {
      opacity: 1
    }

    .admin-panel .admin-section {
      margin-bottom: 20px
    }

    .admin-panel .admin-section h3 {
      margin-bottom: 12px;
      font-size: 15px;
      border-bottom: 1px solid var(--bd);
      padding-bottom: 8px
    }

    .report-item,
    .user-mgmt-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background: var(--bgi);
      border-radius: 8px;
      margin-bottom: 8px
    }

    .report-item .ri-info,
    .user-mgmt-item .um-info {
      flex: 1;
      min-width: 0
    }

    .report-item .ri-info p,
    .user-mgmt-item .um-info p {
      margin: 2px 0;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .report-item .ri-info .ri-meta,
    .user-mgmt-item .um-info .um-meta {
      font-size: 11px;
      color: var(--txs)
    }

    .btn-ban {
      background: #e74c3c;
      color: #fff;
      border: none;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer
    }

    .btn-ban:hover {
      filter: brightness(.9)
    }

    .btn-unban {
      background: #27ae60;
      color: #fff;
      border: none;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer
    }

    .btn-unban:hover {
      filter: brightness(.9)
    }

    .btn-resolve {
      background: var(--p);
      color: #fff;
      border: none;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer
    }

    .btn-resolve:hover {
      filter: brightness(.9)
    }

    .banned-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px
    }

    .banned-overlay h2 {
      color: var(--p);
      margin-bottom: 12px
    }

    /* 封禁 notice page (user-ban.sql): reason / dates / appeal */
    .banned-overlay.ban-page { align-items: flex-start; overflow-y: auto; padding: calc(56px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)) }
    .ban-box { width: 100%; max-width: 420px; margin: 0 auto; text-align: left }
    .ban-box .ban-ic { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, #e53935 12%, transparent); color: #e53935; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px }
    .ban-box .ban-ic .ic { width: 28px; height: 28px }
    .ban-box h2 { text-align: center; font-size: 20px; color: var(--tx); margin-bottom: 4px }
    .ban-box .ban-sub { text-align: center; color: var(--txs); font-size: 13px; margin-bottom: 16px }
    .ban-card { background: var(--bgi); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px }
    .ban-kv { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; padding: 4px 0 }
    .ban-kv > span { flex: none; width: 5.5em; color: var(--txs) }
    .ban-kv > b { font-weight: 500; color: var(--tx); white-space: pre-wrap; word-break: break-word; min-width: 0 }
    .ban-kv.reason > b { font-weight: 600 }
    .ban-st { display: inline-block; flex: none; white-space: nowrap; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 1px 8px; margin-bottom: 6px }
    .ban-st.open { background: color-mix(in srgb, #f39c12 16%, transparent); color: #b9770e }
    .ban-st.rejected { background: color-mix(in srgb, #e53935 12%, transparent); color: #c62828 }
    .ban-st.approved { background: color-mix(in srgb, #27ae60 14%, transparent); color: #1e8449 }
    .ban-st.closed { background: var(--bd); color: var(--txs) }
    .ban-quote { font-size: 13px; color: var(--tx); white-space: pre-wrap; word-break: break-word; line-height: 1.5 }
    .ban-quote + .ban-quote { margin-top: 6px }
    .ban-quote i { font-style: normal; color: var(--txs) }
    .ban-ta { width: 100%; resize: vertical; padding: 10px; border-radius: 8px; border: 1px solid var(--bd); background: var(--bgc); color: var(--tx); box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.5 }
    .ban-cnt { font-size: 11px; color: var(--txs); text-align: right; margin-top: 2px }
    .ban-acts { display: flex; gap: 10px; margin-top: 10px }
    .ban-acts .btn { flex: 1 }
    .ban-foot { text-align: center; margin-top: 18px }
    .ban-foot button { background: none; border: none; color: var(--txs); font-size: 14px; text-decoration: underline; cursor: pointer; font-family: inherit }
    .ban-days { display: flex; gap: 8px; margin: 6px 0 2px }
    .ban-days button { flex: 1; height: 36px; border-radius: 18px; border: 1px solid var(--bd); background: var(--bgc); color: var(--tx); font-size: 14px; font-family: inherit; cursor: pointer }
    .ban-days button.on { border-color: var(--tx); background: var(--tx); color: var(--bgc); font-weight: 600 }
    .ban-who { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px }
    .ban-who .post-avatar { width: 36px; height: 36px }
    .ban-who b { font-size: 15px }
    .ban-who small { display: block; font-size: 12px; color: var(--txs) }
    .um-ban { font-size: 11px; color: #e74c3c; white-space: normal !important; line-height: 1.4 }
    .apl-tabs { display: flex; gap: 8px; margin: 8px 0 10px }
    .apl-tabs button { flex: 1; height: 32px; border-radius: 16px; border: 1px solid var(--bd); background: var(--bgc); color: var(--tx); font-size: 13px; font-family: inherit; cursor: pointer }
    .apl-tabs button.on { background: var(--tx); color: var(--bgc); border-color: var(--tx); font-weight: 600 }
    .apl-item { background: var(--bgi); border-radius: 10px; padding: 12px; margin-bottom: 10px }
    .apl-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
    .apl-hd .post-avatar { width: 32px; height: 32px; font-size: 13px }
    .apl-hd b { font-size: 14px }
    .apl-hd small { display: block; font-size: 11px; color: var(--txs) }
    .apl-hd .ban-st { margin: 0 0 0 auto }
    .apl-k { font-size: 12px; color: var(--txs); margin-top: 6px }
    .apl-v { font-size: 13px; color: var(--tx); white-space: pre-wrap; word-break: break-word; line-height: 1.5 }
    .apl-item textarea { margin-top: 8px; font-size: 14px }
    .apl-acts { display: flex; gap: 8px; margin-top: 8px }
    .apl-acts button { flex: 1 }
    .ban-demo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px; background: #fff8e1; border-bottom: 1px solid #f0d58c; font-size: 12px; color: #6d5200 }
    .ban-demo-bar b { width: 100%; font-weight: 600 }
    .ban-demo-bar button { border: 1px solid #e0c060; background: #fff; color: #6d5200; border-radius: 12px; padding: 2px 9px; font-size: 12px; font-family: inherit; cursor: pointer }
    .ban-demo-bar button.on { background: #6d5200; color: #fff; border-color: #6d5200 }
    body.ban-demo #app { padding-top: 84px }
    body.ban-demo .banned-overlay.ban-page { padding-top: calc(146px + env(safe-area-inset-top, 0px)) }

    .banned-overlay p {
      color: var(--txs);
      font-size: 14px
    }

    .avatar-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--p);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      overflow: hidden;
      border: none
    }

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

    .topic-tabs {
      display: flex;
      overflow-x: auto;
      gap: 8px;
      padding: 12px 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .topic-tabs::-webkit-scrollbar {
      display: none
    }

    .topic-tab {
      flex-shrink: 0;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--bd);
      background: var(--bgc);
      color: var(--txs);
      transition: all .2s;
      white-space: nowrap
    }

    .topic-tab:hover {
      border-color: var(--p);
      color: var(--p)
    }

    .topic-tab.active {
      background: var(--p);
      color: #fff;
      border-color: var(--p)
    }

    .topic-picker {
      background: var(--bgc);
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 8px;
      margin-bottom: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 6px
    }

    .topic-pick-item {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
      text-align: center;
      transition: all .2s;
      background: var(--bgi)
    }

    .topic-pick-item:hover {
      background: var(--pl);
      color: var(--p)
    }

    /* Champagne-gold topic glyphs (small SVGs). Same box as .ic so they sit on the label like the old emoji. */
    .tp-ico {
      width: 1.2em;
      height: 1.2em;
      vertical-align: -0.22em;
      display: inline-block;
      object-fit: contain;
      pointer-events: none;
      flex: none;
      border: 0;
      background: none
    }

    .anon-banner .tp-ico {
      width: 24px;
      height: 24px;
      vertical-align: middle
    }

    /* ===== 功能 (tools) panel + tool pages ===== */
    .tools-panel { grid-template-columns: repeat(2, 1fr); gap: 6px }
    .fx-sec { grid-column: 1 / -1; font-size: 12px; color: var(--txs); padding: 2px 4px }
    .fx-tile { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--bgi); cursor: pointer; border: 1px solid transparent; transition: all .2s; min-width: 0 }
    .fx-tile:hover { background: var(--pl); color: var(--p) }
    .fx-tile .fx-e { width: 28px; height: 28px; flex-shrink: 0; display: flex }
    .fx-tile .fx-e img { width: 28px; height: 28px; display: block }
    .fx-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; display: inline-block }
    .fx-tile .fx-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3 }
    .fx-tile b { font-size: 13px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .fx-tile small { font-size: 11px; color: var(--txs) }
    .fx-tile.soon { opacity: .6; border: 1px dashed var(--bd); background: transparent; cursor: default }
    .fx-tile.soon:hover { background: transparent; color: inherit }
    .fx-seg { display: flex; gap: 8px; margin: 4px 0 12px }
    .fx-seg .topic-tab { flex: 1; text-align: center; padding: 10px 8px }
    .fx-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 600 }
    .fx-h small { font-weight: 400; color: var(--txs); font-size: 12px }
    .fx-link { background: none; border: none; color: var(--p); font-size: 12px; cursor: pointer; padding: 0; font-weight: 400 }
    .fx-chips { display: flex; flex-wrap: wrap; gap: 8px }
    .fx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; border-radius: 18px; background: var(--bgi); font-size: 13px; color: var(--tx); border: 1px solid transparent; transition: all .2s }
    .fx-chip button { width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--bgc); color: var(--txs); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; padding: 0; line-height: 1 }
    .fx-chip.hit { background: var(--p); color: #fff; border-color: var(--p); font-weight: 600 }
    .fx-chip.hit button { background: rgba(255, 255, 255, .25); color: inherit }
    .fx-addrow { display: flex; gap: 8px; margin-top: 12px }
    .fx-addrow input { flex: 1; min-width: 0; border: 1px solid var(--bd); background: var(--bgi); color: var(--tx); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit }
    .fx-stage { text-align: center; padding: 22px 16px 18px }
    .fx-wheel { width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; line-height: 1.25; padding: 0 14px; text-align: center; word-break: break-word; background: radial-gradient(circle at 35% 30%, var(--bgc), var(--bgi)); border: 3px solid var(--pl); box-shadow: 0 6px 22px color-mix(in srgb, var(--p) 18%, transparent), inset 0 0 0 6px var(--bgc) }
    .fx-wheel img { width: 72px; height: 72px; display: block }
    .fx-hint { font-size: 13px; color: var(--txs); margin-bottom: 14px; min-height: 19px }
    .fx-hint.flick { color: var(--tx); font-weight: 600; font-size: 15px }
    .fx-go { width: 100%; max-width: 260px; height: 50px; border: none; border-radius: 25px; background: var(--p); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 4px; box-shadow: 0 6px 18px color-mix(in srgb, var(--p) 35%, transparent); cursor: pointer; font-family: inherit }
    .fx-go:disabled { opacity: .5; cursor: default; box-shadow: none }
    .fx-res { text-align: center; padding: 20px 16px 16px; border-color: var(--p); position: relative; overflow: hidden }
    .fx-res .lab { font-size: 12px; color: var(--txs); letter-spacing: 2px }
    .fx-res .big { font-size: 34px; font-weight: 800; color: var(--p); margin: 6px 0 2px; word-break: break-all }
    .fx-res .sub { font-size: 13px; color: var(--txs); margin-bottom: 14px }
    .fx-res .row { display: flex; gap: 10px; justify-content: center }
    .fx-res .row .btn { flex: 1; max-width: 150px }
    .fx-res .fx-wheel { margin: 10px auto; width: 132px; height: 132px; font-size: 26px }
    .fx-page:not(.aa-pg) .fx-res { border-color: var(--bd) }
    .fx-page:not(.aa-pg) .fx-wheel { width: 120px; height: 120px; border: 0; background: transparent; box-shadow: none; font-size: 22px; font-weight: 600; color: var(--tx) }
    .fx-page:not(.aa-pg) .fx-wheel img { width: 120px; height: 120px }
    .fx-page:not(.aa-pg) .fx-wheel.on { background: linear-gradient(#fefcf8, #f4ebe0); border: 1px solid #efe4d4; box-shadow: 0 1px 2px rgba(154, 115, 64, .18) }
    /* ===== 自习室 ===== */
    .page.study-pg { height: calc(100dvh - var(--hdr) - 60px - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - var(--hdr) - 60px - env(safe-area-inset-bottom, 0px)); padding: 2px 16px 10px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(var(--bgc) 0%, var(--bgc) 46%, var(--bgc) 100%) }
    .study-logo { flex-shrink: 0; align-self: flex-start; display: inline-flex; align-items: center; line-height: 1; font-size: 17px; font-weight: 700; color: var(--p); cursor: pointer; padding: calc(8px + env(safe-area-inset-top, 0px)) 0 2px }
    .study-logo .logo-img { height: 22px; margin-right: 6px }
    .study-bar { position: relative; flex-shrink: 0; margin-bottom: 0; min-height: 44px }
    .study-bar .study-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; pointer-events: none; white-space: nowrap }
    .study-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; z-index: 1 }
    .pv-list { padding: 0; overflow: hidden }
    .pv-item { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 16px; border: none; background: transparent; font: inherit; font-size: 15px; color: var(--tx); cursor: pointer }
    .pv-item + .pv-item { border-top: 1px solid var(--bd) }
    .pv-val { color: var(--txs); font-size: 14px }
    .ttl-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; font: inherit; color: var(--tx); cursor: pointer }
    .ttl-cur { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--txs) }
    .ttl-box { padding-top: 6px }
    .ttl-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 8px }
    .ttl-bar button { background: none; border: none; font: inherit; font-size: 15px; color: var(--txs); padding: 6px 4px; cursor: pointer }
    .ttl-bar button.ok { color: var(--p); font-weight: 600 }
    .ttl-wrap { position: relative; height: 220px; overflow: hidden }
    .ttl-hl { position: absolute; left: 16px; right: 16px; top: 88px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--p) 8%, transparent); pointer-events: none }
    .ttl-wheel { position: relative; height: 220px; overflow-y: auto; scroll-snap-type: y mandatory; padding: 88px 0; box-sizing: border-box; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent) }
    .ttl-wheel::-webkit-scrollbar { display: none }
    .ttl-it { height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 15px; color: var(--txs); opacity: .55; transition: opacity .15s, transform .15s; cursor: pointer }
    .ttl-it.on { opacity: 1; color: var(--tx); transform: scale(1.06) }
    .inv-box { max-height: 90vh; overflow-y: auto; text-align: left; padding: 6px 0 calc(16px + env(safe-area-inset-bottom)) }
    .inv-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px 14px }
    .inv-title { font-size: 18px; font-weight: 700; color: var(--tx) }
    .inv-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bd); color: var(--txs); display: grid; place-items: center }
    .inv-card, .inv-sec { text-align: left }
    .inv-card { margin: 0 16px 20px; padding: 18px 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--p) 6%, var(--bgc)); border: 1px solid color-mix(in srgb, var(--p) 18%, var(--bd)) }
    .inv-lbl { font-size: 13px; font-weight: 600; color: var(--txs); margin: 0 0 8px }
    .inv-seg { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--bd) }
    .inv-seg button { min-width: 0; height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--txs); font-size: 15px; font-weight: 600; transition: background .15s, color .15s; box-shadow: none; margin: 0 }
    .inv-seg button.on { background: var(--bgc); color: var(--p); box-shadow: 0 1px 4px rgba(0,0,0,.12) }
    .inv-seg button.on.g-purple_v { color: #8e44ad }
    .inv-desc { margin: 10px 2px 18px; font-size: 13px; line-height: 1.5; color: var(--txs) }
    .inv-qty { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; margin-bottom: 18px }
    .inv-qty button { height: 44px; border-radius: 12px; border: 1px solid var(--bd); background: var(--bgc); color: var(--tx); font-size: 20px }
    .inv-qty button:disabled { opacity: .4 }
    .inv-qty input { height: 44px; text-align: center; font-size: 18px; font-weight: 600; border: 1px solid var(--bd); border-radius: 12px; background: var(--bgc); color: var(--tx); min-width: 0 }
    .inv-go { width: 100%; height: 48px; font-size: 16px; border-radius: 14px }
    .inv-new { margin-top: 16px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--p) 30%, var(--bd)) }
    .inv-new-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--txs); margin-bottom: 10px }
    .inv-new-codes { display: flex; flex-wrap: wrap; gap: 8px }
    .inv-chip { font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: .08em; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bd); background: var(--bgc); color: var(--tx) }
    .inv-sec { margin: 0 16px }
    .inv-tabs { display: flex; gap: 6px; margin-bottom: 6px }
    .inv-tabs button { border: 0; background: transparent; padding: 6px 10px; border-radius: 999px; font-size: 13px; color: var(--txs) }
    .inv-tabs button.on { background: var(--bd); color: var(--tx); font-weight: 600 }
    .inv-tabs i { font-style: normal; opacity: .6; margin-left: 2px }
    .inv-scroll { height: 252px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; border: 1px solid var(--bd); border-radius: 14px; padding: 0 12px; scroll-behavior: smooth }
    .inv-empty { padding: 14px 0 }
    .inv-row { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 2px; border-bottom: 1px solid var(--bd); font-size: 13px }
    .inv-row:last-of-type { border-bottom: 0 }
    .inv-code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: .06em; color: var(--tx) }
    .inv-gt { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--bd); color: var(--txs); white-space: nowrap } .inv-gt.g-purple_v { background: #8e44ad; color: #fff }
    .inv-st { flex: 1; min-width: 0; color: var(--txs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .inv-st.free { color: #1e8449 }
    .inv-ib { width: 34px; height: 34px; flex: none; border-radius: 10px; border: 0; background: transparent; color: var(--txs); display: grid; place-items: center }
    .inv-ib.del { color: #e5484d }
    .inv-more { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 12px; background: var(--bd); color: var(--txs); font-size: 13px }
    .pv-mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; justify-content: center; z-index: 9999; animation: pvFade .2s ease }
    .pv-box { background: var(--bgc); border-radius: 16px 16px 0 0; width: 100%; max-width: 520px; padding: 18px 0 calc(8px + env(safe-area-inset-bottom)); text-align: center; animation: pvUp .25s ease-out }
    @keyframes pvUp { from { transform: translateY(100%) } to { transform: none } }
    @keyframes pvFade { from { background: rgba(0,0,0,0) } }
    .pv-tt { font-size: 13px; font-weight: 400; color: var(--txs); padding-bottom: 12px }
    .pv-opt { display: block; width: 100%; border: none; border-top: 1px solid var(--bd); background: transparent; font: inherit; font-size: 15px; color: var(--tx); padding: 14px 0; text-align: center; cursor: pointer }
    .pv-opt.on { color: var(--p) }
    .pv-opt.on::after { content: ' ✓' }
    .pv-opt.on::before { content: '✓ '; visibility: hidden }
    .pv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px }
    .pv-lab { font-size: 15px; font-weight: 600; color: var(--tx); white-space: nowrap }
    .pv-seg { display: inline-flex; background: var(--bgi); border-radius: 10px; padding: 3px; flex-shrink: 0 }
    .pv-seg button { border: none; background: transparent; color: var(--txs); font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap }
    .pv-seg button.on { background: var(--bgc); color: var(--p); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08) }
    .study-online { display: block; text-align: center; margin-top: 6px; font-size: 12px; color: var(--p); letter-spacing: 1px }
    .study-leave-mask { position: fixed; inset: 0; z-index: 9999; background: rgba(40, 30, 20, .35); display: flex; align-items: center; justify-content: center; padding: 24px }
    .study-leave-box { background: var(--bgc); border-radius: 16px; padding: 20px; max-width: 300px; width: 100%; text-align: center; color: var(--tx) }
    .study-leave-box b { font-size: 16px }
    .study-leave-box p { font-size: 13px; color: var(--txs); margin: 8px 0 16px }
    .study-leave-acts { display: flex; gap: 10px; justify-content: center }
    .study-leave-acts .study-end { padding: 8px 14px; font-size: 13px }
    .study-leave-acts .study-end.on { background: var(--p); color: var(--bgc); border-color: var(--p) }
    .study-end { flex-shrink: 0; border: 1px solid var(--bd); background: var(--bgc); color: var(--p); border-radius: 14px; padding: 5px 10px; font: inherit; font-size: 12px; letter-spacing: 1px; cursor: pointer }
    .study-hero { flex: 1 1 auto; min-height: 196px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: flex-grow .72s cubic-bezier(.22,1,.3,1), min-height .72s cubic-bezier(.22,1,.3,1) }
    .study-pg.run .study-hero, .study-pg.pause .study-hero { flex-grow: 0; min-height: 56px }
    .study-fx { position: absolute; left: 50%; top: 46%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 1.5px solid var(--p); pointer-events: none; animation: study-bloom .72s ease-out forwards }
    .study-fx.late { animation-delay: .14s; opacity: 0 }
    @keyframes study-bloom { 0% { transform: scale(.4); opacity: .85 } 100% { transform: scale(3.2); opacity: 0 } }
    .study-disc { width: 168px; height: 168px; border-radius: 50%; border: 1px solid var(--bd); background: linear-gradient(var(--bgc), var(--bgi)); box-shadow: 0 1px 2px color-mix(in srgb, var(--p) 18%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; color: var(--p); font-family: inherit; cursor: pointer }
    .study-disc img { width: 78px; height: 78px; display: block }
    .study-disc .study-go-t { font-size: 15px; font-weight: 700; letter-spacing: 3px; line-height: 1.2 }
    .study-pg.run .study-disc, .study-pg.pause .study-disc { width: auto; height: 40px; min-width: 96px; padding: 0 16px; border-radius: 20px; flex-direction: row; cursor: default }
    .study-pg.record .study-disc { width: 168px; height: 168px; border-radius: 50%; padding: 0; cursor: default }
    .study-num { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--tx); line-height: 1 }
    .study-pg.record .study-num { font-size: 32px; margin-top: 4px }
    .study-disc small { font-size: 11px; letter-spacing: 3px; color: var(--p); font-weight: 600 }
    .study-plan-wrap { flex: 0 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center }
    .study-pg.run .study-plan-wrap, .study-pg.pause .study-plan-wrap, .study-pg.record .study-plan-wrap { flex: 1 1 auto }
    .study-plan { width: min(100%, 420px); margin: 0; background: linear-gradient(var(--bgc), var(--bgc)); border: 1px solid var(--bd); border-radius: 16px; box-shadow: none; padding: 14px 16px 12px }
    .study-title-in, .study-title-show { display: block; width: 100%; box-sizing: border-box; text-align: center; border: none; background: transparent; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--p); padding: 0 8px 8px }
    .study-title-in::placeholder { color: var(--txs); font-weight: 500 }
    .study-lock { display: block; text-align: center; color: var(--txs); font-size: 12px; margin: -2px 0 8px }
    .study-logs { flex: 1; min-height: 0; overflow: auto; padding-top: 6px; width: min(100%, 420px); margin: 0 auto }
    .study-box.static { cursor: default }
    .study-log-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border: none; border-bottom: 1px solid var(--bd); background: none; font: inherit; color: var(--tx); cursor: pointer }
    .study-log-row b { font-size: 15px; font-weight: 600; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .study-log-row span { flex-shrink: 0; color: var(--p); font-size: 13px }
    .study-log-empty { text-align: center; color: var(--txs); font-size: 13px; padding: 48px 0 }
    .study-plan .fx-h { margin-bottom: 4px }
    .study-plan .fx-h span { letter-spacing: 2px; font-size: 13px; color: var(--p) }
    .study-plan .fx-h small { color: var(--txs) }
    .study-row { display: flex; align-items: center; gap: 10px; min-height: 42px }
    .study-row + .study-row { border-top: 1px solid var(--bd) }
    .study-box { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--bd); background: var(--bgc); padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer }
    .study-box svg { width: 12px; height: 12px; display: block }
    .study-box.on { background: var(--p); border-color: var(--p) }
    .study-row input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--tx); font: inherit; font-size: 15px; outline: none; padding: 8px 0 }
    .study-txt { flex: 1; min-width: 0; font-size: 15px; color: var(--tx); padding: 8px 0; word-break: break-word }
    .study-txt.done { color: var(--txs); text-decoration: line-through }
    .study-x { width: 22px; height: 22px; border: none; border-radius: 50%; background: transparent; color: var(--txs); cursor: pointer; padding: 0; font-size: 14px; line-height: 1 }
    .study-add { display: flex; gap: 8px; margin-top: 8px }
    .study-add .btn { background: var(--p); border-color: var(--p) }
    .study-add input { flex: 1; min-width: 0; border: 1px solid var(--bd); background: color-mix(in srgb, var(--bgc) 70%, transparent); color: var(--tx); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px }
    .study-dm { flex: 0 1 156px; min-height: 48px; max-height: 156px; height: auto; margin-top: 8px; display: flex; flex-direction: column; border: none; background: transparent; overflow: hidden }
    .study-dm-log { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 8px 12px 4px; gap: 8px }
    .study-dm-push { margin-top: auto }
    .study-dm-empty { font-size: 12px; color: var(--txs); text-align: center }
    /* 自习室跟随主题色 (purewhite 保持原金色) */
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .page.study-pg { background: linear-gradient(var(--bgc) 0%, var(--bg) 46%, var(--bgc) 100%) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-disc, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-end, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-leave-box { background: var(--bgc); border-color: var(--bd); color: var(--tx) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-plan { background: var(--bgc); border-color: var(--bd) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-end, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-online, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-title-in, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-title-show, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-disc small, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-log-row span, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-plan .fx-h span { color: var(--p) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-num, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-txt, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-log-row, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-dm-line, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-leave-box { color: var(--tx) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-lock, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-log-empty, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-dm-empty, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-txt.done, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-leave-box p { color: var(--txs) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-row + .study-row, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-log-row { border-color: var(--bd) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-box { border-color: var(--bd); background: var(--bgc) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-box.on, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-add .btn, html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-leave-acts .study-end.on { background: var(--p); border-color: var(--p); color: var(--bgc) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-add input { border-color: var(--bd); background: var(--bgi) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-fx { border-color: var(--p) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-dm button { background: var(--p) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-dm form { background: var(--bgc); border: 1px solid var(--bd); border-radius: 14px; padding: 4px 4px 4px 12px; margin-top: 6px }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-dm form button { background: var(--p); color: var(--bgc); border-radius: 10px }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-dm input { color: var(--tx) }
    html[data-theme]:not([data-theme="purewhite"]):not([data-theme=""]) .study-dm input::placeholder { color: var(--txs) }
    .study-dm-line { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--tx); word-break: break-word }
    .study-av { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--bgi); color: var(--p); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700 }
    .study-av img { width: 100%; height: 100%; object-fit: cover; display: block }
    .study-dm-tx { padding-top: 2px }
    .study-dm form { display: flex; gap: 8px; padding: 8px 0 0; flex-shrink: 0 }
    .study-dm input { flex: 1; min-width: 0; border: none; border-radius: 0; padding: 8px 2px; font: inherit; font-size: 16px; background: transparent; color: var(--tx) }
    .study-dm button { border: none; background: var(--p); color: var(--bgc); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer }
    .study-dm button:disabled { opacity: .45; cursor: default }
    @media (prefers-reduced-motion: reduce) {
      .study-hero { transition: none }
      .study-fx { display: none }
    }
    /* Study room stays pinned to the top of the screen. The shell height follows the
       visible area (--svh / --study-nav from JS) so the keyboard can cover the bottom
       without the browser lifting the danmaku field over the timer. */
    html.study-open,
    html.study-open body {
      overflow: hidden !important;
      overscroll-behavior: none;
      height: 100%
    }
    html.study-open body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%
    }
    html.study-open .page.study-pg {
      position: fixed;
      top: var(--svt, 0px);
      left: 0;
      right: 0;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      height: calc(var(--svh, 100dvh) - var(--study-nav, 60px) - env(safe-area-inset-bottom, 0px));
      max-height: none;
      z-index: 6;
      overflow-anchor: none
    }
    html.study-preview.study-open .page.study-pg {
      height: calc(var(--svh, 100dvh) - var(--study-nav, 0px) - env(safe-area-inset-bottom, 0px))
    }
    html.study-open.kb-open .page.study-pg {
      height: calc(var(--svh, 100dvh) - var(--study-nav, 0px))
    }
    .study-dm,
    .study-dm form,
    .study-dm input { overflow-anchor: none }
    /* ================= NEW: 决定器「定」最终特效 (dz-*) ================= */
    .fx-page .fx-wheel.on { color: #3b2d1d } /* ivory tile keeps dark ink in every theme (dark theme was light-on-ivory) */
    .dz { --g1: #fde7b8; --g2: #e7c58c; --g3: #dcbb7f; --g4: #c9a265 }
    .dz-wrap { position: relative; width: 120px; height: 120px; margin: 16px auto 14px }
    .dz-wrap .fx-wheel { margin: 0; position: relative; z-index: 2; overflow: hidden; animation: dzSettle .52s cubic-bezier(.3, 1.5, .5, 1) both }
    .dz-wrap .fx-wheel::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 236, .95) 50%, transparent 62%); transform: translateX(-120%); animation: dzSheen .8s cubic-bezier(.4, 0, .2, 1) .42s both; pointer-events: none }
    .dz-txt { position: relative; z-index: 1; display: block; animation: dzInk .5s cubic-bezier(.2, .8, .3, 1) both }
    .dz-halo { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; background: radial-gradient(circle, rgba(231, 197, 140, .55) 0%, rgba(253, 231, 184, .28) 42%, transparent 70%); opacity: 0; z-index: 0; pointer-events: none; animation: dzHalo 1.1s ease-out .18s both }
    .dz-ring { position: absolute; left: 50%; top: 50%; width: 148px; height: 148px; margin: -74px 0 0 -74px; z-index: 1; overflow: visible; pointer-events: none; transform: rotate(-90deg) }
    .dz-ring circle { fill: none; stroke-linecap: round }
    .dz-ring .a { stroke: url(#dzG); stroke-width: 1.4; stroke-dasharray: 440; stroke-dashoffset: 440; animation: dzDraw .78s cubic-bezier(.55, .1, .25, 1) .1s both }
    .dz-ring .b { stroke: var(--g3); stroke-width: .8; opacity: 0; animation: dzEcho .9s ease-out .82s both }
    .dz-gl { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) }
    .dz-gl::before { content: ""; position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); background: linear-gradient(135deg, var(--g1), var(--g4)); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); transform: rotate(calc(-1 * var(--a))) scale(0); opacity: 0; animation: dzGlint .7s cubic-bezier(.3, 1.4, .5, 1) var(--dl) both }
    .dz .lab { animation: dzFade .4s ease both }
    .dz .sub { display: flex; align-items: center; justify-content: center; gap: 10px; color: #a8844c; letter-spacing: 1px }
    [data-theme="dark"] .dz .sub { color: var(--g3) }
    .dz .sub span { animation: dzFade .45s ease .62s both }
    .dz .sub::before, .dz .sub::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--g3)); transform: scaleX(0); transform-origin: right center; animation: dzLine .55s cubic-bezier(.2, .8, .3, 1) .7s both }
    .dz .sub::after { background: linear-gradient(270deg, transparent, var(--g3)); transform-origin: left center }
    .dz .row { animation: dzUp .45s cubic-bezier(.2, .8, .3, 1) .86s both }
    @keyframes dzSettle { 0% { transform: scale(1.07) } 38% { transform: scale(.94) } 100% { transform: scale(1) } }
    @keyframes dzInk { 0% { opacity: .3; transform: scale(1.12); filter: blur(2.5px) } 100% { opacity: 1; transform: none; filter: none } }
    @keyframes dzSheen { to { transform: translateX(120%) } }
    @keyframes dzHalo { 0% { opacity: 0; transform: scale(.7) } 35% { opacity: 1 } 100% { opacity: 0; transform: scale(1.18) } }
    @keyframes dzDraw { 0% { stroke-dashoffset: 440; opacity: .2 } 100% { stroke-dashoffset: 0; opacity: 1 } }
    @keyframes dzEcho { 0% { opacity: .7; transform: scale(1) } 100% { opacity: 0; transform: scale(1.16) } }
    @keyframes dzGlint { 0% { opacity: 0; transform: rotate(calc(-1 * var(--a))) scale(0) } 45% { opacity: 1; transform: rotate(calc(-1 * var(--a) + 45deg)) scale(1) } 100% { opacity: 0; transform: rotate(calc(-1 * var(--a) + 90deg)) scale(.2) } }
    @keyframes dzFade { from { opacity: 0 } to { opacity: 1 } }
    @keyframes dzLine { to { transform: scaleX(1) } }
    @keyframes dzUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
    .dz-ring .b { transform-origin: 74px 74px }
    @media (prefers-reduced-motion: reduce) {
      .dz *, .dz *::before, .dz *::after, .dz .sub::before, .dz .sub::after { animation: none !important }
      .dz-ring .a { stroke-dashoffset: 0 }
      .dz .sub::before, .dz .sub::after { transform: none }
      .dz-halo, .dz-gl, .dz-ring .b, .dz-wrap .fx-wheel::after { display: none }
    }
    /* ===== AA分账 ===== */
    .fx-page.aa-pg { padding-bottom: 0 }
    .aa4 { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; min-height: calc(100vh - 131px - env(safe-area-inset-bottom, 0px)); min-height: calc(100dvh - 131px - env(safe-area-inset-bottom, 0px)); padding-bottom: 16px }
    .aa4.led { height: calc(100vh - 131px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 131px - env(safe-area-inset-bottom, 0px)) }
    .aa4.led .aa-list { max-height: none }
    .aa4 .card { margin-bottom: 0; padding: 16px 18px }
    .aa4 .grow { flex: 1; min-height: 0; display: flex; flex-direction: column }
    .aa4 .fx-h { font-size: 15px; margin-bottom: 8px }
    .aa-amt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--bd); background: var(--bgi); border-radius: 14px; padding: 8px 16px }
    .aa-amt i { font-style: normal; font-size: 26px; font-weight: 700; color: var(--p) }
    .aa-amt input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--tx); font-size: 36px; font-weight: 700; font-family: inherit; outline: none; padding: 0 }
    .aa-amt small { font-size: 12px; color: var(--txs) }
    .aa-step { display: flex; align-items: center; gap: 12px }
    .aa-step button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--bd); background: var(--bgi); color: var(--tx); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; cursor: pointer }
    .aa-step button:disabled { opacity: .4; cursor: default }
    .aa-step .n { flex: 1; border: 1px solid var(--bd); background: var(--bgi); border-radius: 14px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 30px; font-weight: 700 }
    .aa-step .n small { font-size: 15px; font-weight: 400; color: var(--txs) }
    .aa-seg { display: flex; gap: 10px; height: 54px; flex-shrink: 0 }
    .aa-seg button { flex: 1; height: 54px; border: 1.5px solid var(--p); border-radius: 28px; background: transparent; color: var(--p); font-size: 18px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s, color .15s }
    .aa-seg button.on { background: var(--p); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--p) 32%, transparent) }
    .aa-go { height: 54px; border: none; border-radius: 28px; background: var(--p); color: #fff; font-size: 19px; font-weight: 700; letter-spacing: 8px; box-shadow: 0 8px 22px color-mix(in srgb, var(--p) 35%, transparent); font-family: inherit; width: 100%; flex-shrink: 0; cursor: pointer }
    [data-theme="purewhite"] .aa-seg button { background: #fff; color: #111; border-color: #1a1a1a }
    [data-theme="purewhite"] .aa-seg button.on { background: #111; color: #fff; box-shadow: none }
    [data-theme="dark"] .aa-seg button { background: #141414; color: #cfcfcf; border-color: #3a3a3a }
    [data-theme="dark"] .aa-seg button.on { background: #f2f2f2; color: #111; border-color: #f2f2f2; box-shadow: none }
    .aa-go:disabled { opacity: .5; cursor: default; box-shadow: none }
    .aa4 .btns { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0 }
    .aa4 .btns .btn { height: 48px; font-size: 16px; border-radius: 14px }
    .aa4 .fx-res { padding: 16px 18px 14px; text-align: center; justify-content: space-between }
    .aa4 .fx-res .lab { font-size: 14px }
    .aa4 .fx-res .big { font-size: 56px; margin: 8px 0 2px; line-height: 1.1; word-break: break-all }
    .aa4 .fx-res .sub { font-size: 15px; margin-bottom: 8px }
    .aa4 .fx-res.empty { border: 1.5px dashed var(--bd); box-shadow: none; background: transparent }
    .aa4 .fx-res.empty .big { color: var(--bd) }
    .aa4 .fx-res.empty .btn { opacity: .45 }
    .aa-hint { font-size: 13px; color: var(--txs); line-height: 1.6; margin-top: 6px }
    .aa-rnd { padding: 10px 12px; border-radius: 10px; background: var(--bgi); font-size: 13px; color: var(--txs); line-height: 1.6; text-align: left }
    .aa-rnd b { color: var(--tx) }
    .aa-rnd.ghost { background: transparent; border: 1px dashed var(--bd) }
    .aa-note { font-size: 12.5px; color: var(--txs); line-height: 1.5; text-align: center; flex-shrink: 0 }
    .aa-ava { width: 20px; height: 20px; border-radius: 50%; background: var(--pl); color: var(--p); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0 }
    .aa-person { display: inline-flex; align-items: center; gap: 6px }
    .aa-nrow { display: flex; gap: 8px; margin-top: 10px }
    .aa-nrow input, .aa-form input, .aa-form select { border: 1px solid var(--bd); background: var(--bgi); color: var(--tx); border-radius: 10px; padding: 11px 12px; font-size: 14px; font-family: inherit; min-width: 0 }
    .aa-nrow input { flex: 1 }
    .aa-list { flex: 1; min-height: 120px; max-height: 38vh; overflow-y: auto; padding-right: 2px }
    .aa-list::-webkit-scrollbar { width: 4px }
    .aa-list::-webkit-scrollbar-thumb { background: var(--pl); border-radius: 2px }
    .aa-ex { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bgi); margin-bottom: 8px }
    .aa-ex .ava { width: 34px; height: 34px; border-radius: 50%; background: var(--pl); color: var(--p); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0 }
    .aa-ex .mid { flex: 1; min-width: 0; line-height: 1.35 }
    .aa-ex .mid b { font-size: 15px }
    .aa-ex .mid small { display: block; font-size: 12px; color: var(--txs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .aa-ex .amt { font-weight: 700; font-size: 16px }
    .aa-ex .x { width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--bgc); color: var(--txs); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer }
    .aa-form { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 8px; margin-top: 10px; flex-shrink: 0 }
    .aa-form .full { grid-column: 1 / -1 }
    .aa-sum { display: flex; gap: 10px; margin-bottom: 10px }
    .aa-sum div { flex: 1; background: var(--bgi); border-radius: 12px; padding: 12px 10px; text-align: center }
    .aa-sum small { display: block; font-size: 12px; color: var(--txs) }
    .aa-sum b { font-size: 21px }
    .aa-bal { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px }
    .aa-bal span { font-size: 13px; padding: 5px 12px; border-radius: 14px; background: var(--bgi); color: var(--txs) }
    .aa-bal span b { margin-left: 4px }
    .aa-bal .pos b { color: #27ae60 }
    .aa-bal .neg b { color: #e0245e }
    .aa-trs { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0 }
    .aa-tr { display: flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 64px; border-radius: 12px; background: var(--bgi); margin-bottom: 10px; font-size: 17px }
    .aa-tr .nm { font-weight: 600 }
    .aa-tr .ar { color: var(--txs) }
    .aa-tr .v { margin-left: auto; font-weight: 800; font-size: 19px; color: var(--p) }
    .topic-pick-item.te-tile { border: 1px dashed var(--p); color: var(--p); background: transparent }
    .te-panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px }
    .te-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px }
    .te-note { font-size: 12px; color: var(--t2, #888); line-height: 1.5 }
    .te-err { font-size: 12px; color: #e0245e; line-height: 1.5; font-weight: 600 }
    .te-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bgi); font-size: 13px }
    .te-row .te-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer }
    .te-row.te-fixed { opacity: .65 }
    .st-ranges{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 6px}
    .st-chip{border:1px solid var(--bd);background:var(--bgi);color:inherit;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
    .st-chip.on{background:var(--p,#c13584);border-color:transparent;color:#fff}
    .st-custom{display:flex;gap:6px;align-items:center;margin:6px 0}
    .st-custom input{flex:1;min-width:0;border:1px solid var(--bd);background:var(--bgi);color:inherit;border-radius:8px;padding:6px}
    .st-meta{font-size:12px;opacity:.7;margin:6px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .st-re{border:0;background:none;color:inherit;cursor:pointer;padding:2px}
    .st-h{font-weight:700;font-size:14px;margin:14px 0 8px}.st-h small{font-weight:400;opacity:.6;font-size:11px}
    .st-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .st-card{border:1px solid var(--bd);border-radius:12px;padding:10px 12px;background:var(--bgi);display:flex;flex-direction:column;gap:2px;min-width:0}
    .st-card b{font-size:22px;line-height:1.2}.st-card span{font-size:13px}.st-card small{font-size:11px;opacity:.6;overflow-wrap:anywhere}
    .st-tbl{overflow-x:auto;border:1px solid var(--bd);border-radius:12px}
    .st-tbl table{border-collapse:collapse;width:100%;font-size:12px}
    .st-tbl th,.st-tbl td{padding:6px 7px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--bd)}
    .st-tbl th:first-child,.st-tbl td:first-child{text-align:left;position:sticky;left:0;background:var(--bg,#fff)}
    .st-tbl td.z{opacity:.35}
    .st-week{border:1px solid var(--bd);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--bgi)}
    .st-wk-h{font-weight:600;font-size:13px;margin-bottom:6px}.st-tag{font-size:11px;font-weight:400;margin-left:6px;opacity:.7}
    .st-wk-g{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 4px}
    .st-wk-g div{display:flex;flex-direction:column;align-items:center;font-size:11px}.st-wk-g b{font-size:15px}.st-wk-g span{opacity:.7}
    .st-wk-g i{font-style:normal;font-size:10px;opacity:.7}.st-wk-g i.up{color:#16a34a;opacity:1}.st-wk-g i.dn{color:#dc2626;opacity:1}
    .adm-toggle { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; margin: 0 }
    .adm-toggle .adm-chev { margin-left: auto; transition: transform .2s }
    .adm-toggle .adm-chev.open { transform: rotate(180deg) }
    .adm-tag { font-size: 10px; padding: 1px 6px; border-radius: 8px; background-color: #D4AF37; background-image: linear-gradient(135deg, #F7D774, #D4AF37 55%, #B8860B); color: #fff; font-weight: 600; vertical-align: middle }
    .adm-vbtn { width: auto; height: auto; padding: 6px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; margin-left: 6px }
    .user-mgmt-item { flex-wrap: wrap; row-gap: 6px }
    .adm-sec .adm-usearch { margin: 10px 0 8px }
    .adm-sec .adm-usearch input { flex: 1; min-width: 0; border: 1px solid var(--bd); background: var(--bgi); color: inherit; border-radius: 8px; padding: 8px 10px; font-size: 14px }
    .adm-roles .te-note { white-space: pre-line }
    .adm-vm .te-note { white-space: pre-line }
    .adm-roles .ar-subrow { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; font-weight: 600; font-size: 13px; padding: 9px 10px; margin: 10px 0 6px; border-radius: 8px; background: var(--bgi) }
    .adm-vm .ar-subrow { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; font-weight: 600; font-size: 13px; padding: 9px 10px; margin: 10px 0 6px; border-radius: 8px; background: var(--bgi) }
    .adm-roles .ar-subrow .adm-chev { transition: transform .2s }
    .adm-vm .ar-subrow .adm-chev { transition: transform .2s }
    .adm-roles .ar-subrow .adm-chev.open { transform: rotate(180deg) }
    .adm-vm .ar-subrow .adm-chev.open { transform: rotate(180deg) }
    .adm-roles .ar-sub { font-weight: 600; font-size: 13px; margin: 10px 0 4px }
    .adm-vm .ar-sub { font-weight: 600; font-size: 13px; margin: 10px 0 4px }
    .adm-roles .ar-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bgi); margin-bottom: 6px }
    .adm-vm .ar-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bgi); margin-bottom: 6px }
    .adm-roles .ar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px }
    .adm-vm .ar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px }
    .adm-roles .ar-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .adm-vm .ar-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .adm-roles .ar-info small { color: var(--txs) }
    .adm-vm .ar-info small { color: var(--txs) }
    .adm-roles .ar-search { display: flex; gap: 6px }
    .adm-vm .ar-search { display: flex; gap: 6px }
    .adm-roles .ar-search input { flex: 1; min-width: 0; border: 1px solid var(--bd); background: var(--bgi); color: inherit; border-radius: 8px; padding: 8px 10px; font-size: 14px }
    .adm-vm .ar-search input { flex: 1; min-width: 0; border: 1px solid var(--bd); background: var(--bgi); color: inherit; border-radius: 8px; padding: 8px 10px; font-size: 14px }
    .adm-roles .ar-add { width: auto; height: auto; padding: 6px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap }
    .adm-vm .ar-add { width: auto; height: auto; padding: 6px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap }
    .adm-roles .btn-ban { white-space: nowrap }
    .adm-vm .btn-ban { white-space: nowrap }
    .te-row .te-lock { font-size: 11px; color: var(--t2, #888) }
    .te-btn { border: 1px solid var(--bd); background: var(--bgc); color: var(--t, inherit); border-radius: 6px; min-width: 30px; height: 30px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px }
    .te-btn:disabled { opacity: .35; cursor: default }
    .te-btn.te-del { color: #e0245e }
    .te-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--p); border-radius: 8px; background: var(--bgc) }
    .te-form .te-fr { display: flex; gap: 6px }
    .te-form input { border: 1px solid var(--bd); background: var(--bgi); color: inherit; border-radius: 6px; padding: 7px 8px; font-size: 14px; min-width: 0 }
    .te-emojis { display: flex; flex-wrap: wrap; gap: 4px }
    .te-emojis span { cursor: pointer; font-size: 18px; padding: 2px 4px; border-radius: 6px }
    .te-emojis span.on { background: var(--pl) }

    /* 每日话题 (daily topic) */
    .dt-card { background: var(--bgc); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px }
    .dt-card:not(.dt-detail):not(.dt-cms):not(.dt-hist) { border: 2px solid var(--tx) }
    .dt-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 30px }
    .dt-badge { font: inherit; font-size: 12px; font-weight: 600; color: var(--p); background: var(--pl); border: none; border-radius: 10px; padding: 3px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px }
    .dt-badge .ic { transform: rotate(-90deg); opacity: .7 }
    .dt-date { font-size: 12px; color: var(--txs) }
    .dt-gear { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bd); background: var(--bgc); color: var(--txs); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 }
    .dt-gear:active { color: var(--p); border-color: var(--p) }
    .dt-closed, .dt-today { margin-left: auto; font-size: 11px; color: var(--txs); border: 1px solid var(--bd); border-radius: 10px; padding: 1px 8px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap }
    .dt-today { color: var(--p); border-color: var(--p) }
    .dt-closed + .dt-gear { margin-left: 4px }
    .dt-body { font-size: 15px; line-height: 1.55; color: var(--tx); white-space: pre-wrap; word-break: break-word; margin: 4px 0 8px }
    .dt-tap { cursor: pointer }
    .dt-detail .dt-body { font-size: 17px; margin: 8px 0 12px }
    .dt-acts { gap: 18px; padding-top: 8px }
    .dt-off button { opacity: .55 }
    .dt-draft { width: 100%; box-sizing: border-box; border: 1px solid var(--bd); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 16px; background: var(--bgi, var(--bg)); color: var(--tx); resize: vertical }
    .dt-pub, .dt-sh-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px }
    .dt-hint { font-size: 12px; color: var(--txs); margin-right: auto }
    .dt-cm-h { font-size: 14px; font-weight: 600; color: var(--tx); margin-bottom: 8px }
    /* topic detail: room for the fixed comment bar; no tab bar on this page (like post detail) */
    .dt-topic-pg { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) }
    html.dt-topic-open .bottom-nav { display: none }
    .comment-box .dt-cm-ta { flex: 1; min-width: 0; box-sizing: border-box; height: 38px; max-height: 118px; padding: 8px 14px; border-radius: 19px; border: 1px solid var(--bd); background: var(--bgi); color: var(--tx); font: inherit; font-size: 16px; line-height: 20px; resize: none; overflow-y: hidden; outline: none; white-space: pre-wrap; word-break: break-word; display: block }
    .comment-box .dt-cm-ta:focus { border-color: var(--p) }
    .comment-box:has(.dt-cm-ta) { align-items: flex-end }
    .comment-box:has(.dt-cm-ta) > button { margin-bottom: 3px; flex-shrink: 0 }
    .dt-cm-bottom .comment-box { align-items: flex-end }
    .dt-cm-bottom .comment-send { flex: none; margin-bottom: 3px }
    /* topic detail: lock the page (keeping its scroll position) while the comment box has focus, so iOS can't pan it */
    html.dt-cmt-open, html.dt-cmt-open body { overflow: hidden !important; overscroll-behavior: none }
    html.dt-cmt-open body { position: fixed; left: 0; right: 0; width: 100%; top: var(--dt-lock-y, 0px) }
    .dt-cm-none { font-size: 12px; color: var(--txs); padding: 10px 0; text-align: center }
    .dt-cm { display: flex; gap: 8px; padding: 10px 0 }
    .dt-cm + .dt-cm { border-top: 1px dashed var(--bd) }
    .dt-cm-av { width: 30px; height: 30px; border-radius: 50%; background: var(--pl); color: var(--p); display: flex; align-items: center; justify-content: center; font-size: 12px; overflow: hidden; flex-shrink: 0 }
    .dt-cm-av img { width: 100%; height: 100%; object-fit: cover }
    .dt-cm-main { flex: 1; min-width: 0 }
    .dt-cm-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txs) }
    .dt-cm-top b { color: var(--tx); font-weight: 600 }
    .dt-cm-del { margin-left: auto; background: none; border: none; color: var(--txs); cursor: pointer; padding: 2px }
    .dt-cm-txt { font-size: 14px; color: var(--tx); line-height: 1.5; word-break: break-word; white-space: pre-wrap }
    .dt-cm-txt { cursor: pointer }
    .dt-cm-re { background: none; border: none; color: var(--txs); cursor: pointer; padding: 2px 4px; font: inherit; font-size: 12px }
    .dt-cm-re:active, .dt-cm-re:hover { color: var(--p) }
    .dt-cm-top .dt-cm-re { margin-left: auto }
    .dt-cm-top .dt-cm-re + .dt-cm-del { margin-left: 0 }
    .dt-cm-reps { margin-top: 6px }
    .dt-cm-rep { cursor: default }
    .dt-cm-rl { font-size: 12px; line-height: 1.5; word-break: break-word; white-space: pre-wrap }
    .dt-cm-rw { color: var(--txs); margin: 0 4px }
    .dt-cm-rt { color: var(--tx); cursor: pointer }
    .dt-cm-rm { display: flex; align-items: center; gap: 4px; margin-top: 1px }
    .dt-cm-rm .dt-cm-del { margin-left: 0 }
    .dt-reply-ind { margin-bottom: 6px; padding: 6px 12px }
    .dt-reply-ind span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .dt-hist { cursor: pointer }
    .dt-hist-d { font-weight: 600; color: var(--tx); font-size: 13px }
    .dt-hist-t { font-size: 14px; color: var(--tx); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word }
    .dt-hist-n { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--txs) }
    .dt-hist-n span { display: inline-flex; align-items: center; gap: 3px }
    .dt-sheet { max-height: 86vh }
    .dt-sh-hd { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px }
    .dt-sh-note { font-size: 12px; color: var(--txs); margin-bottom: 8px }
    .dt-sh-sec { font-size: 13px; font-weight: 600; color: var(--p); margin: 14px 0 6px }
    .dt-sh-new input[type=date] { border: 1px solid var(--bd); border-radius: 10px; padding: 6px 10px; font-size: 16px; margin-bottom: 6px; background: var(--bgi, var(--bg)); color: var(--tx) }
    .dt-sched { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bd) }
    .dt-sched-d { flex-shrink: 0; width: 64px; font-size: 13px; font-weight: 600; color: var(--tx) }
    .dt-sched-m { flex: 1; min-width: 0 }
    .dt-sched-t { font-size: 14px; color: var(--tx); word-break: break-word }
    .dt-sched .dt-sh-acts { margin-top: 4px }
    .dt-del { color: #d33 }
    .dt-demo-bar { font-size: 12px; color: var(--txs); background: var(--pl); border-radius: 10px; padding: 6px 10px; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
    .dt-demo-bar button { border: 1px solid var(--bd); background: var(--bgc); color: var(--txs); border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer }
    .dt-demo-bar button.on { border-color: var(--p); color: var(--p); font-weight: 600 }

    /* Feed cards + app chrome: a scroll / long drag on iOS must never start a text selection (open the post to copy its text) */
    .post-card, .dt-card:not(.dt-detail):not(.dt-cms), .nav, .bottom-nav, .ptr {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none
    }
    /* while a pull-to-refresh gesture owns the touch (touchmove is preventDefault'ed, so iOS sees a held finger = long-press) */
    html.ptr-on, html.ptr-on * {
      -webkit-user-select: none !important;
      user-select: none !important;
      -webkit-touch-callout: none !important
    }

    .post-card {
      background: var(--bgc);
      border-radius: 12px;
      border: 1px solid var(--bd);
      padding: 16px;
      margin-bottom: 12px
    }

    .bookmark-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 8px
    }

    .bookmark-grid-item {
      border-radius: 12px;
      background: var(--bgc);
      border: 1px solid var(--bd);
      overflow: hidden;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .bookmark-grid-img {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: var(--bd)
    }

    .bookmark-grid-img img,
    .bookmark-grid-img video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center
    }

    .bookmark-grid-count {
      position: absolute;
      bottom: 6px;
      right: 6px;
      background: rgba(0,0,0,0.6);
      color: #fff;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px
    }

    .bookmark-grid-text {
      padding: 10px;
      font-size: 13px;
      color: var(--tx);
      line-height: 1.4;
      min-height: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical
    }

    .bookmark-grid-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 8px;
      border-top: 1px solid var(--bd)
    }

    .bookmark-grid-stats {
      font-size: 11px;
      color: var(--txs)
    }

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

    .post-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--pl);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: var(--tx);
      flex-shrink: 0;
      overflow: visible;
      cursor: pointer;
      position: relative
    }

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

    .post-name {
      font-weight: 600;
      font-size: 14px;
      cursor: pointer
    }

    .post-name:hover {
      color: var(--p)
    }

    .post-time {
      font-size: 12px;
      color: var(--txs)
    }

    .post-topic-tag {
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--pl) 30%, transparent);
      color: var(--p);
      margin-left: 0;
      flex-shrink: 0
    }

    .post-body {
      margin-bottom: 12px;
      white-space: pre-wrap;
      word-break: break-word;
      cursor: pointer
    }

    .post-body:hover {
      color: var(--p)
    }

    /* Home feed: long text stays within a normal card height; small gray 展开 → post detail */
    .home-post-body {
      position: relative;
      margin-bottom: 12px
    }

    .home-post-body .post-body {
      margin-bottom: 0
    }

    .home-post-body.clamped .post-body {
      max-height: 8.4em; /* ~5 lines at line-height 1.6 */
      overflow: hidden
    }

    .home-post-body.clamped::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2.2em;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, var(--bgc))
    }

    .post-expand-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
      margin: 0;
      border: none;
      background: var(--bgc);
      color: #9a9a9a;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.3;
      padding: 2px 6px;
      border-radius: 4px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent
    }

    .post-expand-btn:hover {
      color: #6a6a6a
    }

    [data-theme="dark"] .post-expand-btn {
      color: #8a8a8a
    }

    [data-theme="dark"] .post-expand-btn:hover {
      color: #b0b0b0
    }

    /* Hashtags on posts: gray, clickable → tag feed */
    .post-hash,
    .v-cap .post-hash {
      color: #8a8a8a;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer
    }
    .post-hash:hover,
    .v-cap .post-hash:hover {
      color: #555;
      text-decoration: underline
    }
    .post-body:hover .post-hash {
      color: #8a8a8a
    }
    [data-theme="dark"] .post-hash,
    [data-theme="dark"] .v-cap .post-hash,
    [data-theme="dark"] .post-body:hover .post-hash {
      color: #a0a0a0
    }
    [data-theme="dark"] .post-hash:hover,
    [data-theme="dark"] .v-cap .post-hash:hover {
      color: #d0d0d0
    }

    /* Tag feed: same pinned chrome as post (logo + back fixed; list scrolls) */
    .page-tag {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 0 16px;
      box-sizing: border-box;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      min-height: 0
    }

    .page-tag .tag-hdr {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin: 0 -16px;
      padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 14px;
      background: var(--bg);
      border-bottom: 1px solid color-mix(in srgb, var(--bd) 55%, transparent);
      z-index: 40
    }

    .page-tag .tag-hdr .logo {
      font-size: 17px;
      display: inline-flex;
      align-items: center;
      line-height: 1
    }

    .page-tag .tag-hdr .logo .logo-img {
      height: 22px;
      margin-right: 6px
    }

    .page-tag .tag-hdr .back-btn {
      margin: 2px 0;
      padding: 10px 14px 10px 4px;
      min-height: 44px;
      align-self: flex-start;
      box-sizing: border-box
    }

    .page-tag .tag-page-title {
      margin: 4px 0 0;
      font-size: 22px;
      font-weight: 700;
      color: #666;
      letter-spacing: .02em
    }

    [data-theme="dark"] .page-tag .tag-page-title { color: #b0b0b0 }

    .page-tag .tag-page-meta {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--txs)
    }

    .page-tag .tag-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 12px 0 calc(24px + env(safe-area-inset-bottom, 0px))
    }

    /* post images: one grid for home, search, profile, post detail and topic pages.
       1 image keeps its own aspect. 2 and 4 are a 2-column block. 3 and 5–9 are a 3-column block.
       Every cell in a multi-image post is the same square, cropped with cover, so a portrait next
       to a landscape cannot make the row uneven or shift when the file finishes loading. */
    .post-imgs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 4px;
      margin-bottom: 12px;
      max-width: 72%;
      min-width: 0
    }

    .post-imgs.n1 {
      grid-template-columns: minmax(0, 1fr);
      max-width: min(240px, 68%)
    }

    .post-imgs.n3,
    .post-imgs.n5,
    .post-imgs.n6,
    .post-imgs.n7,
    .post-imgs.n8,
    .post-imgs.n9 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 100%
    }

    .post-imgs .pi {
      position: relative;
      min-width: 0;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: 8px;
      background: var(--bgi);
      cursor: zoom-in
    }

    .post-imgs .pi img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: cover;
      object-position: center;
      border-radius: 0;
      background: transparent;
      -webkit-touch-callout: none
    }

    /* Square cells without relying on aspect-ratio: Safari/WebKit stretches grid items to the row height and
       ignores aspect-ratio when the only child is absolute, so cells collapsed to 0 and multi-image posts showed
       no images on iPhone. The padding spacer works in every engine (old WebViews too). */
    .post-imgs .pi img { top: 0; left: 0; right: 0; bottom: 0 }
    /* Safari treats a grid item with aspect-ratio as justify-self:start (shrink-to-fit = 0 wide), so set the width. */
    .post-imgs .pi { width: 100%; justify-self: stretch; align-self: start }
    .post-imgs .pi::before { content: ''; display: block; padding-top: 100% }
    .post-imgs.n1 .pi::before { content: none }
    .post-imgs.n1 .pi { width: auto; justify-self: start }

    .post-imgs.n1 .pi {
      aspect-ratio: auto;
      overflow: visible;
      border-radius: 0;
      background: transparent
    }

    .post-imgs.n1 .pi img {
      position: static;
      width: auto;
      height: auto;
      max-height: 220px;
      max-width: 100%;
      object-fit: contain; /* single: keep full frame, just smaller */
      object-position: left top;
      border-radius: 8px
    }

    .post-imgs .pi.long img {
      object-position: top center
    }

    .post-imgs.n1 .pi.long {
      width: 100%
    }

    .post-imgs.n1 .pi.long img {
      aspect-ratio: 1 / 1.15;
      width: 100%;
      height: auto;
      max-height: 220px;
      object-fit: cover;
      object-position: top center
    }

    .pi-badge {
      display: none;
      position: absolute;
      right: 6px;
      bottom: 6px;
      background: rgba(0, 0, 0, .6);
      color: #fff;
      font-size: 11px;
      line-height: 1.4;
      padding: 2px 7px;
      border-radius: 4px;
      pointer-events: none
    }

    .post-imgs .pi.long .pi-badge {
      display: block
    }

    .legal-doc h3 { font-size: 15px; margin: 18px 0 6px }
    .legal-doc p { font-size: 14px; line-height: 1.75; color: var(--tx); margin: 4px 0 }
    .legal-doc .legal-upd { color: var(--txs); font-size: 12px; margin-bottom: 4px }
    .legal-doc .legal-links { margin-top: 18px; font-size: 14px }
    .legal-doc .legal-links a, .agree-line a { color: var(--p); text-decoration: none }
    .agree-line { font-size: 12px; color: var(--txs); line-height: 1.6; margin: 10px 0; text-align: center }
    .ts-box { display: flex; justify-content: center; margin: 8px 0; min-height: 0 }
    .about-link { display: flex; align-items: center; gap: 8px; padding: 12px 2px; color: var(--tx); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--bd) }
    .about-link span { margin-left: auto; color: var(--txs) }
    .terms-modal { z-index: 400 }
    .review-gate { position: fixed; inset: 0; z-index: 390; background: var(--bg, #fff); overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)) }
    .review-gate.rg-wait { background: #FAF6F0 } /* review-status wait loader: cream, not white */
    .review-gate > * { margin: auto 0 } /* vertically centred; still scrolls from the top when taller than the screen */
    .auth-lang { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 395 }
    .auth-lang-btn { width: 40px; height: 40px; border: 0; background: none; color: var(--tx, #333); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; padding: 0 }
    .auth-lang-btn .ic { width: 22px; height: 22px }
    .auth-lang-menu { position: absolute; top: 46px; right: 0; min-width: 150px; background: var(--card, #fff); border: 1px solid var(--bd, #ddd); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 6px; overflow: hidden }
    .auth-lang-menu .al-h { font-size: 12px; color: var(--txs, #888); padding: 4px 10px 6px }
    .auth-lang-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 0; background: none; color: var(--tx, #333); font-size: 15px; border-radius: 8px; cursor: pointer; text-align: left }
    .auth-lang-menu button.on { background: color-mix(in srgb, var(--pr, #e91e63) 12%, transparent); font-weight: 600 }
    .review-card { max-width: 420px; width: 100%; text-align: center }
    .review-card h3 { margin-bottom: 10px }
    .review-card p { margin: 8px 0; line-height: 1.6 }
    .vr-box { margin-top: 12px }
    /* Registration voice-upload page only — forced B&W (site default white; no pink) */
    .review-gate:has(.vr-card) { background: #fff }
    /* Voice preview deep-link: true fullscreen B&W, no app chrome / pink shell */
    html.voice-preview,
    html.voice-preview body {
      background: #fff !important;
      --p: #111; --pl: #ddd; --bg: #fff; --bgc: #fff; --bgi: #f5f5f5; --tx: #111; --txs: #666; --bd: #e5e5e5
    }
    html.voice-preview #splash { display: none !important }
    html.voice-preview .nav,
    html.voice-preview .bottom-nav,
    html.voice-preview .auth-lang,
    html.voice-preview .update-banner { display: none !important }
    html.voice-preview #app > .page,
    html.voice-preview #app > .main,
    html.voice-preview .home-wrap { visibility: hidden !important }
    html.voice-preview .review-gate,
    .review-gate.vr-fs {
      position: fixed; inset: 0; z-index: 9999;
      background: #fff !important;
      padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
      overflow-y: auto; display: flex; align-items: flex-start; justify-content: center
    }
    html.voice-preview .review-gate > *,
    .review-gate.vr-fs > * { margin: auto 0 }
    .review-card.vr-card {
      --p: #111; --pl: #ddd; --bg: #fff; --bgc: #fff; --bgi: #f5f5f5; --tx: #111; --txs: #666; --bd: #e5e5e5;
      padding: 22px 18px 18px; border-radius: 16px; background: #fff; border: 1px solid #e5e5e5;
      color: #111; box-shadow: 0 8px 28px rgba(0, 0, 0, .06)
    }
    .vr-card .btn-p { background: #111; color: #fff }
    .vr-card .btn-p:hover { filter: none; background: #000 }
    .vr-card .btn-p:disabled { background: #bbb; color: #fff; opacity: 1 }
    .vr-card .btn-o { background: #fff; border-color: #d0d0d0; color: #111 }
    .vr-card .btn-o:hover { background: #f5f5f5 }
    .vr-card .err, .vr-card .te-err { color: #111 }
    .vr-card a { color: #111; text-decoration: underline; text-underline-offset: 2px }
    .vr-card .hlp-btn, .vr-card .hlp-fill, .vr-card .hlp-knob { background: #111 }
    .vr-step {
      display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 12px;
      padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
      color: #111; background: #f5f5f5; border: 1px solid #e0e0e0
    }
    .vr-title { margin: 0 0 8px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: #111 }
    .vr-lead { margin: 0 auto 14px; max-width: 34em; font-size: 14px; line-height: 1.65; color: #666 }
    .vr-lead.te-err { color: #111; font-weight: 600 }
    .vr-script-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #666 }
    .vr-script {
      margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; text-align: left;
      background: #fff; border: 1.5px solid #111; color: #111;
      font-size: 15px; line-height: 1.7; font-weight: 600
    }
    .vr-more-label { margin: 0 0 8px; font-size: 12.5px; color: #666 }
    .vr-tips {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none
    }
    .vr-tips li {
      padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: #111;
      background: #f5f5f5; border: 1px solid #e5e5e5
    }
    .vr-stage {
      margin: 4px 0 8px; padding: 18px 14px 16px; border-radius: 14px;
      background: #fafafa; border: 1px solid #e5e5e5
    }
    .vr-meter {
      --vr-pct: 0%;
      position: relative; width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 50%;
      background: #f5f5f5; box-shadow: inset 0 0 0 3px #e5e5e5
    }
    @supports (background: conic-gradient(#000, #fff)) {
      .vr-meter {
        box-shadow: none;
        background:
          radial-gradient(closest-side, #fff 72%, transparent 73%),
          conic-gradient(#111 var(--vr-pct), #e5e5e5 0)
      }
    }
    .vr-meter-in {
      position: absolute; inset: 18px; border-radius: 50%; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 2px; background: #fff;
      box-shadow: inset 0 0 0 1px #e5e5e5
    }
    .vr-meter-in .vr-sec { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #111 }
    .vr-meter-in .vr-sec small { font-size: 13px; font-weight: 600; color: #666; margin-left: 1px }
    .vr-meter-in .vr-cap { font-size: 11px; color: #666; letter-spacing: .04em; text-transform: uppercase }
    .vr-meter.is-live { animation: vr-pulse 1.4s ease-in-out infinite }
    .vr-meter.is-live .vr-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #111; margin-bottom: 4px;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, .35); animation: vr-dot 1.2s ease-out infinite
    }
    @keyframes vr-pulse {
      0%, 100% { transform: scale(1) }
      50% { transform: scale(1.015) }
    }
    @keyframes vr-dot {
      0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .35) }
      70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0) }
      100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) }
    }
    .vr-live-label { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111 }
    .vr-left { margin: 0; font-size: 13px; line-height: 1.5; color: #666 }
    .vr-hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: #666 }
    .vr-start {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; font-size: 16px; border-radius: 12px
    }
    .vr-start .ic { width: 20px; height: 20px }
    .vr-preview-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #666 }
    .vr-preview-note.is-err { color: #111; font-weight: 600 }
    .vr-preview-note.is-ok { color: #111 }
    .vr-acts { display: flex; gap: 10px; margin-top: 12px }
    .vr-acts > button { flex: 1; min-height: 44px; border-radius: 11px }
    .vr-privacy { font-size: 12px; color: #666; margin-top: 14px }
    .vr-foot { margin-top: 12px }
    .vr-foot .btn { margin-top: 0 }
    .vr-foot .btn + .btn, .vr-foot .btn + a { margin-top: 8px }
    /* Sign-up voice step: one screen, primary actions stay in view (no page scroll) */
    html:has(.review-gate .vr-card),
    html:has(.review-gate .vr-card) body { overflow: hidden !important; height: 100%; height: 100dvh }
    .review-gate:has(.vr-card) {
      height: 100vh; height: 100dvh; overflow: hidden; align-items: center;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom))
    }
    .review-gate:has(.vr-card) > * { margin: 0; max-height: 100%; overflow: hidden }
    /* voice step: roomy, scrolls if the screen is short (was squeezed into one screen) */
    html:has(.review-gate .vr-card), html:has(.review-gate .vr-card) body { overflow: auto !important; height: auto }
    .review-gate:has(.vr-card) { height: auto; min-height: 100dvh; overflow-y: auto; align-items: flex-start; padding: max(20px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)) }
    .review-gate:has(.vr-card) > * { margin: 0 auto; max-height: none; overflow: visible }
    .review-card.vr-card { padding: 28px 20px 20px }
    .vr-step { margin-bottom: 16px }
    .vr-title { margin-bottom: 12px }
    .vr-lead { line-height: 1.7; margin-bottom: 20px }
    .vr-script { margin-bottom: 20px }
    .vr-more-label { margin-bottom: 10px }
    .vr-tips { gap: 10px; margin-bottom: 24px }
    .vr-tips li { flex: 0 0 auto }
    .vr-stage { padding: 24px 16px 20px }
    .vr-meter { width: 150px; height: 150px; margin-bottom: 20px }
    .vr-meter-in { inset: 20px }
    .vr-hint { margin-top: 14px; line-height: 1.6 }
    .vr-privacy { margin-top: 20px }
    .vr-foot { margin-top: 8px }
    .vr-foot .vr-logout { background: none; border: 0; box-shadow: none; width: auto; min-height: 0; padding: 8px 12px; font-size: 13px; color: #888; text-decoration: underline; text-underline-offset: 2px; cursor: pointer }
    @media (prefers-reduced-motion: reduce) {
      .vr-meter.is-live, .vr-meter.is-live .vr-dot { animation: none }
    }
    .su-code { letter-spacing: 6px; font-size: 20px; text-align: center }

    .iv {
      position: fixed;
      inset: 0;
      z-index: 350; /* above the compose sheet (320) and the visibility sheet (340), under the draft prompt (360) */
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: none;
      overflow: hidden;
      -webkit-user-select: none;
      user-select: none
    }

    .iv-bg {
      position: absolute;
      inset: 0;
      background: #000
    }

    .iv-img {
      position: relative;
      max-width: 100vw;
      max-height: 100vh;
      max-height: 100dvh;
      width: auto;
      height: auto;
      object-fit: contain;
      will-change: transform;
      -webkit-user-drag: none;
      -webkit-touch-callout: none
    }

    .iv-idx {
      position: absolute;
      top: calc(14px + env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 14px;
      background: rgba(0, 0, 0, .45);
      padding: 3px 12px;
      border-radius: 14px;
      pointer-events: none
    }

    /* feed video: tap opens the site's own full-screen player (no native fullscreen) */
    .post-vid-local.pv-tap { position: relative; cursor: pointer; width: fit-content }
    .post-vid-local.pv-tap video { pointer-events: none }
    .pv-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; pointer-events: none }
    .vo { position: fixed; inset: 0; z-index: 270; background: #000; display: flex; align-items: center; justify-content: center; overscroll-behavior: contain }
    .vo-v { display: block; width: 100vw; height: 100vh; height: 100dvh; object-fit: contain; background: #000 }
    .vo-x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent }

    .iv-x {
      position: absolute;
      top: calc(10px + env(safe-area-inset-top, 0px));
      right: 12px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, .45);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0
    }

    .post-video-wrap {
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      padding-top: 56.25%
    }

    .post-video-wrap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 8px
    }

    .post-vid-local {
      margin-bottom: 12px
    }

    .post-vid-local video {
      display: block;
      background: #000;
      width: 100%;
      border-radius: 8px;
      max-height: 400px
    }

    /* feed cards: video same footprint as a single image */
    .post-card .post-vid-local {
      max-width: min(240px, 68%)
    }

    .post-card .post-vid-local video {
      width: auto;
      max-width: 100%;
      max-height: 220px
    }

    .post-actions {
      display: flex;
      gap: 20px;
      padding-top: 10px;
      border-top: 1px solid var(--bd)
    }

    .post-actions button,
    .post-actions a {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
      color: var(--txs);
      transition: color .2s;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .post-actions button:hover,
    .post-actions a:hover {
      color: var(--p)
    }

    .post-actions .liked {
      color: var(--p)
    }

    .post-actions button svg {
      transition: all .2s
    }

    .post-actions .bookmarked {
      color: #f39c12
    }

    /* Post action rows (feed / post detail / profile): every item - like, comment (<a>), bookmark, share - uses the same
       font metrics and a fixed minimum slot, so the spacing is identical whether or not a count is shown (share count is
       empty until post-shares.sql is run). Daily-topic rows (.dt-acts) keep their own layout. */
    .post-actions:not(.dt-acts) {
      gap: 12px;
      align-items: center
    }

    .post-actions:not(.dt-acts) > button:not(.report-btn),
    .post-actions:not(.dt-acts) > a {
      font-family: inherit;
      font-size: 14px;
      line-height: 20px;
      min-width: 44px;
      height: 28px;
      padding: 0;
      justify-content: flex-start;
      font-variant-numeric: tabular-nums;
      -webkit-tap-highlight-color: transparent
    }

    .auth-p {
      display: flex;
      justify-content: center;
      padding-top: 60px
    }

    .auth-c {
      width: 100%;
      max-width: 400px;
      padding: 32px
    }

    .auth-c h2 {
      text-align: center;
      margin-bottom: 24px;
      color: var(--p)
    }

    .fg {
      margin-bottom: 16px
    }

    .pw-wrap { position: relative }
    .pw-wrap input { padding-right: 44px }
    .pw-eye { position: absolute; right: 4px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 36px; height: 36px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--txs); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent }
    .pw-eye:active { color: var(--p) }

    .fg label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 500
    }

    .fw {
      width: 100%
    }

    .alink {
      text-align: center;
      margin-top: 16px;
      font-size: 14px;
      color: var(--txs)
    }

    .err {
      color: #e74c3c;
      text-align: center;
      margin-top: 12px;
      font-size: 14px
    }

    .ok-msg {
      color: #27ae60;
      text-align: center;
      margin-top: 12px;
      font-size: 14px
    }

    .profile-head {
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .profile-av {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--p);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      flex-shrink: 0;
      cursor: pointer;
      position: relative;
      overflow: visible
    }

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

    .profile-av .edit-hint {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: rgba(0, 0, 0, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity .2s;
      font-size: 18px;
      color: #fff
    }

    .profile-av:hover .edit-hint {
      opacity: 1
    }

    .profile-stats {
      display: flex;
      gap: 16px;
      margin-top: 8px;
      font-size: 14px
    }

    .profile-stats span {
      cursor: pointer
    }

    .profile-stats span:hover {
      color: var(--p)
    }

    .account-num {
      font-size: 12px;
      color: var(--txs);
      background: var(--bgi);
      padding: 2px 8px;
      border-radius: 10px;
      margin-top: 4px;
      display: inline-block
    }

    .modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .modal {
      background: var(--bgc);
      border-radius: 16px;
      padding: 24px;
      width: 90%;
      max-width: 440px;
      max-height: 80vh;
      overflow-y: auto
    }

    .modal h3 {
      margin-bottom: 16px;
      color: var(--p)
    }

    .tab-bar {
      display: flex;
      border-bottom: 1px solid var(--bd);
      margin-bottom: 16px
    }

    .tab-item {
      padding: 10px 16px;
      cursor: pointer;
      font-size: 14px;
      border-bottom: 2px solid transparent;
      color: var(--txs);
      transition: all .2s;
      white-space: nowrap
    }

    .tab-item.active {
      color: var(--p);
      border-bottom-color: var(--p);
      font-weight: 600
    }

    .tab-item:hover {
      color: var(--p)
    }

    .draft-ask { z-index: 360 }
    .draft-ask .draft-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px }
    .draft-ask .draft-acts .btn { width: 100% }
    .draft-list { display: flex; flex-direction: column; gap: 10px }
    .draft-row { display: flex; align-items: center; gap: 8px; background: var(--bgc); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; cursor: pointer; text-align: left }
    .draft-row .tx { flex: 1; min-width: 0 }
    .draft-row .sn { font-size: 14px; color: var(--tx); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
    .draft-row .tm { font-size: 12px; color: var(--txs); margin-top: 4px }
    .draft-del { border: 0; background: transparent; color: var(--txs); padding: 6px; cursor: pointer; flex: none }

    .comment-box {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 16px
    }

    .comment-box input {
      flex: 1;
      padding: 8px 14px;
      border-radius: 20px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      font-size: 14px;
      outline: none
    }

    .comment-box input:focus {
      border-color: var(--p)
    }

    .comment-send {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--p);
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0
    }

    .comment-send:disabled {
      opacity: .4;
      cursor: default
    }

    .comment-emoji-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--txs);
      flex-shrink: 0;
      padding: 0
    }

    .comment-emoji-btn.on {
      color: var(--tx)
    }

    .comment-emoji-area {
      margin-top: 6px;
      border-top: 1px solid var(--bd);
      background: var(--bgc)
    }

    .comment-emoji-area .emoji-grid {
      max-height: 180px;
      padding: 6px 2px
    }

    .guest-gate{position:relative;margin:4px 0 16px;border-radius:16px;overflow:hidden;border:1px solid var(--bd);background:var(--bgc);min-height:190px}
    .guest-gate .gg-fake{padding:18px;filter:blur(6px);opacity:.55}
    .guest-gate .gg-fake i{display:block;height:12px;border-radius:6px;background:var(--txs);margin:12px 0;opacity:.5}
    .guest-gate .gg-fake i:nth-child(1){width:40%}.guest-gate .gg-fake i:nth-child(2){width:92%}.guest-gate .gg-fake i:nth-child(3){width:80%}.guest-gate .gg-fake i:nth-child(4){width:60%}
    .guest-gate .gg-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:color-mix(in srgb,var(--bgc) 55%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;padding:16px}
    .guest-gate .gg-box p{font-size:15px;font-weight:600;color:var(--tx);margin:0}
    .guest-gate .gg-acts{display:flex;gap:10px}
    .guest-gate .gg-acts .btn{min-width:88px}
    .guest-gate.gg-v{height:100vh;height:100dvh;margin:0;border:0;border-radius:0;background:#111;scroll-snap-align:start}
    .guest-gate.gg-v .gg-box{background:rgba(0,0,0,.55)}
    .guest-gate.gg-v .gg-box p{color:#fff}
    .age-toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tx);margin:-4px 0 12px;cursor:pointer}
    .age-toggle input{width:18px;height:18px;margin:0;accent-color:var(--p)}
    .prof-age{font-size:13px;color:var(--txs);margin:2px 0}
    .pw-hint{font-size:12px;color:var(--txs);margin-top:4px;line-height:1.4}
    .pw-hint.bad{color:#e5484d}
    .del-acct-warn{font-size:13px;line-height:1.6;color:var(--tx);margin:8px 0 12px}
    .del-acct-err{color:#e5484d;font-size:13px;margin:4px 0}
    .del-acct-modal .modal-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
    .c-hl{background:color-mix(in srgb,var(--accent,#c9a227) 18%,transparent)!important;border-radius:10px;transition:background .6s}
    .c-item {
      margin-bottom: 12px;
      padding: 10px 0;
      border-bottom: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
      cursor: pointer
    }

    .c-main {
      display: flex;
      gap: 8px;
      align-items: flex-start
    }

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

    .c-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--tx);
      cursor: pointer
    }

    .c-text {
      font-size: 14px;
      margin-top: 2px;
      color: var(--tx);
      word-break: break-word;
      white-space: pre-wrap
    }

    .c-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px
    }

    .c-like {
      margin-left: auto;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 11px;
      color: var(--txs);
      padding: 0;
      display: flex;
      align-items: center;
      gap: 2px
    }

    .c-like.liked {
      color: var(--p)
    }

    .c-rname {
      font-size: 12px;
      font-weight: 600;
      color: var(--tx);
      cursor: pointer
    }

    .c-rlike {
      font-size: 11px;
      color: var(--txs);
      margin-left: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 1px
    }

    .c-rlike.liked {
      color: var(--p)
    }

    .author-liked {
      font-size: 11px;
      color: var(--p);
      font-weight: 500
    }

    .c-replies {
      margin-top: 6px;
      padding-left: 12px;
      border-left: 2px solid color-mix(in srgb, var(--p) 30%, transparent)
    }

    .c-reply-item {
      margin-bottom: 2px;
      padding: 2px 0;
      line-height: 1.4;
      cursor: pointer
    }

    .c-reply-to {
      font-size: 11px;
      color: var(--p);
      margin-bottom: 0;
      display: inline;
      gap: 4px
    }

    .c-expand {
      font-size: 12px;
      color: var(--p);
      cursor: pointer;
      padding: 4px 8px;
      margin-top: 4px
    }

    .c-expand:hover {
      text-decoration: underline
    }

    .c-time {
      font-size: 11px;
      color: var(--txs)
    }

    .c-actions {
      display: flex;
      gap: 12px;
      margin-top: 6px
    }

    .c-actions button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 12px;
      color: var(--txs);
      padding: 0;
      display: flex;
      align-items: center;
      gap: 3px
    }

    .c-actions button:hover {
      color: var(--p)
    }

    .c-actions .liked {
      color: var(--p)
    }

    .reply-indicator {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: color-mix(in srgb, var(--p) 10%, transparent);
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 13px
    }

    .reply-indicator span {
      color: var(--txs)
    }

    .reply-indicator button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
      color: var(--txs)
    }

    .theme-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      gap: 8px;
      margin-top: 12px
    }

    .theme-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px;
      border-radius: 10px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all .2s;
      font-size: 11px
    }

    .theme-item:hover {
      border-color: var(--bd)
    }

    .theme-item.active {
      border-color: var(--p)
    }

    .theme-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(128, 128, 128, .45)
    }

    .toast {
      position: fixed;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      padding: 12px 24px;
      border-radius: 8px;
      background: var(--bg, #fff);
      color: var(--tx, #222);
      border: 1px solid var(--p, #ccc);
      box-shadow: 0 4px 16px rgba(0,0,0,.12);
      font-size: 14px;
      z-index: 999;
      animation: fadeout 2s forwards
    }

    .empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--txs)
    }

    .empty .icon {
      font-size: 40px;
      margin-bottom: 8px
    }

    .compose-type {
      display: flex;
      gap: 8px;
      margin-bottom: 8px
    }

    .compose-type button {
      padding: 6px 12px;
      border-radius: 16px;
      border: 1px solid var(--bd);
      background: var(--bgc);
      color: var(--txs);
      font-size: 12px;
      cursor: pointer;
      transition: all .2s
    }

    .compose-type button.active {
      background: var(--p);
      color: #fff;
      border-color: var(--p)
    }

    .compose-type button:hover {
      border-color: var(--p)
    }

    .img-preview {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 8px 0
    }

    .img-preview .img-item.dragging {
      transform: scale(1.1);
      opacity: .85;
      z-index: 2
    }

    .img-preview .img-add {
      width: 64px;
      height: 64px;
      box-sizing: border-box;
      border: 1.5px dashed var(--txs, #999);
      border-radius: 6px;
      background: transparent;
      color: var(--txs, #999);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer
    }

    .img-preview .img-add:disabled {
      opacity: .5;
      cursor: default
    }

    .img-preview .img-item {
      position: relative;
      -webkit-touch-callout: none;
      user-select: none;
      -webkit-user-select: none;
      transition: transform .15s;
      width: 64px;
      height: 64px
    }

    .img-preview .img-item img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border-radius: 6px;
      cursor: pointer
    }

    .img-preview .img-item button {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--p);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 10px;
      cursor: pointer
    }

    .video-preview {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 8px 0;
      padding: 8px;
      background: var(--bgi);
      border-radius: 8px
    }

    .video-preview video {
      width: 100px;
      border-radius: 6px
    }

    .video-preview .remove-vid {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--p);
      font-size: 18px
    }

    .pw-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--bd)
    }

    .pw-section h3 {
      margin-bottom: 12px
    }

    /* Notifications */
    .notif-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .2s
    }

    .notif-item:hover {
      background: var(--bgi)
    }

    .notif-item.unread {
      background: color-mix(in srgb, var(--pl) 15%, transparent)
    }

    .notif-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--pl);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      flex-shrink: 0;
      overflow: hidden
    }

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

    .notif-avs {
      display: flex;
      flex-shrink: 0;
      align-items: center
    }

    .notif-avs .notif-av { cursor: pointer }

    .notif-avs.multi .notif-av {
      width: 28px;
      height: 28px;
      font-size: 12px;
      margin-left: -8px;
      box-shadow: 0 0 0 2px var(--bg)
    }

    .notif-avs.multi .notif-av:first-child { margin-left: 0 }

    .notif-name { cursor: pointer }

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

    .notif-text p {
      font-size: 14px;
      margin: 0;
      line-height: 1.4
    }

    .notif-text .time {
      font-size: 12px;
      color: var(--txs)
    }

    .notif-quote {
      margin: 4px 0 0;
      color: var(--txs);
      font-size: 13px;
      line-height: 1.35;
      max-height: 2.7em;
      overflow: hidden;
      word-break: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2
    }

    .notif-quote.gone { font-style: italic }

    .notif-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--p);
      flex-shrink: 0;
      margin-top: 6px
    }

    /* Messages */
    .conv-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .2s
    }

    .conv-item:hover {
      background: var(--bgi)
    }

    .conv-av {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--pl);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      flex-shrink: 0;
      overflow: hidden
    }

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

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

    .conv-name {
      font-weight: 600;
      font-size: 14px
    }

    .conv-last {
      font-size: 13px;
      color: var(--txs);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .conv-unread {
      background: var(--p);
      color: #fff;
      font-size: 11px;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      flex-shrink: 0
    }

    /* Chat */
    .chat-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid var(--bd);
      margin-bottom: 12px;
      position: sticky;
      top: calc(var(--hdr) + var(--sat0));
      z-index: 10;
      background: var(--bg)
    }

    .chat-back {
      font-size: 18px;
      cursor: pointer
    }

    .chat-msgs.chat-hold {
      visibility: hidden
    }

    .chat-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;
      padding-bottom: calc(70px + var(--ta-extra, 0px))
    }

    .chat-bubble {
      width: fit-content;
      max-width: 75%;
      padding: 10px 14px;
      border-radius: 14px;
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 1.5;
      word-break: break-word
    }

    .chat-mine {
      background: var(--p);
      color: #fff;
      margin-left: auto;
      border-bottom-right-radius: 4px
    }

    .chat-theirs {
      background: var(--bgi);
      margin-right: auto;
      border-bottom-left-radius: 4px
    }

    .chat-stk {
      display: flex;
      margin-bottom: 8px
    }

    .chat-stk.mine {
      justify-content: flex-end
    }

    .chat-stk img {
      max-width: 120px;
      max-height: 120px;
      width: auto;
      height: auto;
      object-fit: contain;
      background: none;
      cursor: pointer;
      -webkit-touch-callout: none
    }

    .stk-preview {
      position: fixed;
      inset: 0;
      z-index: 700;
      background: rgba(0, 0, 0, .75);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .stk-preview img {
      max-width: 80vw;
      max-height: 60vh;
      object-fit: contain
    }

    .chat-time {
      font-size: 11px;
      color: var(--txs);
      margin-bottom: 12px
    }

    .chat-input {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
      background: var(--bg)
    }

    .chat-input input {
      flex: 1;
      padding: 8px 14px;
      border-radius: 20px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      font-size: 14px;
      outline: none
    }

    .chat-input {
      align-items: flex-end
    }

    .chat-input .chat-ta {
      flex: 1;
      min-width: 0;
      padding: 8px 14px;
      border-radius: 20px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      color: var(--tx);
      font: inherit;
      font-size: 16px;
      line-height: 22px;
      height: 40px;
      max-height: 148px; /* ~6 lines, then scrolls inside */
      resize: none;
      overflow-y: hidden;
      outline: none;
      white-space: pre-wrap;
      word-break: break-word
    }

    .chat-input .chat-ta:focus,
    .chat-input input:focus {
      border-color: var(--p)
    }

    .chat-bar-wrap {
      position: fixed;
      bottom: var(--kb, 0px);
      left: 0;
      right: 0;
      z-index: 90;
      background: transparent;
      border-top: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%)
    }

    .chat-emoji-area {
      background: var(--bg);
      border-top: 1px solid var(--bd)
    }

    .emoji-tabs {
      display: flex;
      gap: 8px;
      padding: 6px 12px;
      border-bottom: 1px solid var(--bd)
    }

    .emoji-tab {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--txs);
      background: var(--bgi)
    }

    .emoji-tab.active {
      background: var(--p);
      color: #fff
    }

    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4px;
      padding: 8px;
      max-height: 200px;
      overflow-y: auto
    }

    .emoji-grid span {
      font-size: 24px;
      text-align: center;
      padding: 4px;
      cursor: pointer;
      border-radius: 8px
    }

    .emoji-grid span:hover {
      background: var(--bgi)
    }

    .chat-icon-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--txs);
      flex-shrink: 0;
      padding: 0
    }

    .chat-icon-btn:hover {
      color: var(--p)
    }



    .chat-voice {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      position: relative;
      padding: 9px 14px;
      min-height: 38px
    }
    .chat-voice.chat-mine { flex-direction: row-reverse }
    .chat-voice.chat-mine .vw { transform: scaleX(-1) }
    .chat-voice .vw { flex-shrink: 0 }
    .chat-voice .vsec { font-size: 14px; white-space: nowrap }
    .chat-voice .vdot {
      position: absolute;
      right: -14px;
      top: 50%;
      margin-top: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #f43f3f
    }
    .chat-voice.playing .vw path:nth-child(2) { animation: vwv2 1s steps(1) infinite }
    .chat-voice.playing .vw path:nth-child(3) { animation: vwv3 1s steps(1) infinite }
    @keyframes vwv2 { 0% { opacity: 0 } 34% { opacity: 1 } }
    @keyframes vwv3 { 0% { opacity: 0 } 67% { opacity: 1 } }
    .voice-hold {
      flex: 1;
      min-width: 0;
      padding: 9px 14px;
      border-radius: 20px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      color: var(--tx);
      font-size: 14px;
      font-weight: 600;
      line-height: 18px;
      cursor: pointer;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent
    }
    .voice-hold.on { background: var(--bd) }
    .voice-hold.cancel { background: #f43f3f; border-color: #f43f3f; color: #fff }
    .voice-hold.off { opacity: .5 }
    .vrec-ov {
      position: fixed;
      inset: 0;
      z-index: 150;
      background: rgba(0, 0, 0, .35);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none
    }
    .vrec-box {
      width: 150px;
      height: 150px;
      border-radius: 18px;
      background: rgba(30, 30, 30, .92);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px
    }
    .vrec-box.cancel { background: rgba(200, 40, 40, .92) }
    .vrec-cnt { font-size: 64px; font-weight: 700; line-height: 1 }
    .vrec-bars { display: flex; align-items: center; gap: 4px; height: 40px }
    .vrec-bars i { display: block; width: 5px; border-radius: 3px; background: #fff; transition: height .08s linear }
    .vrec-hint {
      font-size: 14px;
      color: #fff;
      padding: 4px 12px;
      border-radius: 6px
    }
    .vrec-hint.cancel { background: #f43f3f }

    .lp-able, .chat-stk img, .chat-bubble img {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation
    }

    .lp-able.lp {
      filter: brightness(.88)
    }

    .lp-able.flash {
      animation: msgFlash 1.4s ease-out
    }

    @keyframes msgFlash {
      0%, 60% { box-shadow: 0 0 0 3px var(--p) }
      100% { box-shadow: 0 0 0 0 transparent }
    }

    .chat-quote {
      display: flex;
      flex-direction: column;
      gap: 1px;
      font-size: 12px;
      padding: 4px 8px;
      margin-bottom: 4px;
      border-left: 3px solid rgba(0, 0, 0, .25);
      background: rgba(0, 0, 0, .07);
      border-radius: 4px;
      max-width: 220px;
      cursor: pointer;
      opacity: .85
    }

    .chat-quote b {
      font-weight: 600
    }

    .chat-quote span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .chat-mine .chat-quote {
      border-left-color: rgba(255, 255, 255, .7);
      background: rgba(255, 255, 255, .18)
    }

    .recall-line {
      margin: 10px 0
    }

    .msg-menu-back {
      position: fixed;
      inset: 0;
      z-index: 9990;
      background: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation
    }

    .msg-menu {
      position: fixed;
      z-index: 9991;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      max-width: calc(100vw - 16px);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      background: #2b2b2e;
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      touch-action: manipulation
    }

    .msg-menu button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-width: 60px;
      padding: 7px 8px;
      background: none;
      border: none;
      color: #fff;
      font-size: 11px;
      cursor: pointer;
      border-radius: 8px
    }

    .msg-menu button:active {
      background: rgba(255, 255, 255, .14)
    }

    .reply-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      background: var(--bgi);
      border-bottom: 1px solid var(--bd);
      font-size: 12px;
      color: var(--txs)
    }

    .reply-bar-t {
      flex: 1;
      min-width: 0;
      display: flex;
      gap: 6px
    }

    .reply-bar-t b {
      color: var(--tx);
      flex-shrink: 0
    }

    .reply-bar-t span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .reply-bar-x {
      background: none;
      border: none;
      color: var(--txs);
      cursor: pointer;
      padding: 2px;
      display: flex
    }

    .chat-plus-area {
      background: var(--bg);
      border-top: 1px solid var(--bd);
      padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
      animation: plusUp .22s ease-out
    }

    @keyframes plusUp {
      from { transform: translateY(28px); opacity: 0 }
      to { transform: none; opacity: 1 }
    }

    .plus-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px 8px
    }

    .plus-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--txs);
      font-size: 12px;
      padding: 0
    }

    .plus-ic {
      width: 58px;
      height: 58px;
      border-radius: 16px;
      background: var(--bgi);
      color: var(--tx);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .plus-item:active .plus-ic {
      background: var(--pl)
    }

    .chat-plus-btn.on {
      color: var(--p);
      transform: rotate(45deg)
    }

    .chat-call .ic {
      vertical-align: -3px
    }

    .call-ov:not(.on),
    .call-pill:not(.on) {
      display: none !important
    }

    .call-ov {
      position: fixed;
      inset: 0;
      z-index: 100000;
      background: linear-gradient(180deg, #2b2030 0%, #14101a 100%);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: calc(80px + env(safe-area-inset-top, 0px)) 24px calc(56px + env(safe-area-inset-bottom, 0px))
    }

    .call-mid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px
    }

    .call-av {
      width: 128px;
      height: 128px;
      border-radius: 50%;
      background: var(--p);
      color: #fff;
      font-size: 52px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 0 0 8px rgba(255, 255, 255, .08)
    }

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

    .call-name {
      font-size: 24px;
      font-weight: 700;
      max-width: 80vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .call-sub {
      font-size: 15px;
      opacity: .75
    }

    .call-sub.pulse {
      animation: callPulse 1.6s ease-in-out infinite
    }

    @keyframes callPulse {
      50% { opacity: .35 }
    }

    .call-btns {
      display: flex;
      justify-content: center;
      gap: 44px;
      width: 100%
    }

    .call-b {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      background: none;
      border: none;
      color: #fff;
      font-size: 13px;
      cursor: pointer;
      padding: 0
    }

    .call-c {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .16);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff
    }


    .call-min {
      position: absolute;
      top: calc(14px + env(safe-area-inset-top, 0px));
      left: 14px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .14);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0
    }

    .call-hint {
      font-size: 12px;
      opacity: .55;
      max-width: 78vw;
      text-align: center;
      line-height: 1.4
    }

    .call-pill {
      position: fixed;
      top: calc(var(--hdr) + 20px + env(safe-area-inset-top, 0px));
      right: 8px;
      z-index: 99990;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px 5px 5px;
      border-radius: 999px;
      background: #1f1a24;
      color: #fff;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
      cursor: pointer;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      border: 1.5px solid #2fb457
    }

    .call-pill.drag {
      opacity: .85
    }

    .call-pill-av {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--p);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      overflow: hidden;
      flex-shrink: 0
    }

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

    .call-pill .ic {
      color: #2fb457
    }

    .call-pill-t {
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      min-width: 38px
    }

    .call-c.red { background: #e5484d }
    .call-c.green { background: #2fb457 }
    .call-c.on { background: #fff; color: #222 }
    .call-c .hang { transform: rotate(135deg) }
    .chat-send-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--p);
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0
    }

    .chat-send-btn:disabled {
      opacity: .4;
      cursor: default
    }

    .chat-hint {
      font-size: 12px;
      color: var(--txs);
      text-align: center;
      padding: 8px
    }

    .update-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      background: var(--p);
      color: #fff;
      text-align: center;
      padding: 8px 16px;
      font-size: 13px;
      cursor: pointer;
      animation: slideDown .3s
    }

    .stranger-hint {
      font-size: 12px;
      color: var(--p);
      text-align: center;
      padding: 8px 12px;
      background: color-mix(in srgb, var(--pl) 20%, transparent);
      border-radius: 8px;
      margin-bottom: 8px
    }

    @keyframes slideDown {
      from {
        transform: translateY(-100%)
      }

      to {
        transform: translateY(0)
      }
    }

    /* Search */
    .search-box {
      display: flex;
      gap: 8px;
      margin-bottom: 16px
    }

    .search-box input {
      flex: 1
    }

    .search-result {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .2s
    }

    .search-result:hover {
      background: var(--bgi)
    }

    .search-result .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--pl);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      flex-shrink: 0;
      overflow: hidden
    }

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

    .search-result .info {
      flex: 1
    }

    .search-result .name {
      font-weight: 600;
      font-size: 14px
    }

    .search-result .acct {
      font-size: 12px;
      color: var(--txs)
    }

    /* User list (followers/following) */
    .user-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .2s
    }

    .user-item:hover {
      background: var(--bgi)
    }

    .user-item .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--pl);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      flex-shrink: 0;
      overflow: hidden
    }

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

    .user-item .name {
      font-weight: 600;
      font-size: 14px
    }

    .user-item .acct {
      font-size: 12px;
      color: var(--txs)
    }

    /* Follow button */
    .btn-follow {
      padding: 6px 16px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      border: none
    }

    .btn-follow.following {
      background: transparent;
      border: 1px solid var(--bd);
      color: var(--txs)
    }

    .btn-follow.not-following {
      background: var(--p);
      color: #fff
    }

    .btn-follow:hover {
      filter: brightness(.9)
    }

    /* Follow overlay */
    .follow-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg);
      z-index: 100;
      overflow-y: auto;
      padding: 12px 16px
    }

    .follow-overlay-header {
      display: flex;
      align-items: center;
      padding: 8px 0 12px;
      border-bottom: 1px solid var(--bd);
      margin-bottom: 12px
    }

    /* Profile actions */
    .profile-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap
    }

    /* admin 封禁 / 解封 on profiles: same user-ban line icon as the video ⋯ menu item */
    .btn.prof-ban { color: #e53935; border-color: color-mix(in srgb, #e53935 45%, var(--bd)) }
    .btn.prof-ban.on { color: #1e8449; border-color: color-mix(in srgb, #27ae60 45%, var(--bd)) }
    .btn.prof-ban .ic { width: 16px; height: 16px }
    .prof-ban-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, #e53935 8%, var(--bgc)); border: 1px solid color-mix(in srgb, #e53935 25%, var(--bd)); font-size: 13px; line-height: 1.5; color: var(--tx) }
    .prof-ban-note .ic { flex: none; width: 18px; height: 18px; color: #e53935; margin-top: 1px }
    .prof-ban-note b { color: #c62828; font-weight: 600 }
    .prof-ban-note small { display: block; color: var(--txs); font-size: 12px }


    /* Video tab (short-video feed) */
    .vfeed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      background: #000;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .vfeed::-webkit-scrollbar {
      display: none
    }

    .vcard {
      position: relative;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      overflow: hidden;
      background: #000
    }

    .vcard video {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: transparent;
      opacity: 0;
      transition: opacity .18s ease
    }

    /* never show the browser's empty (grey) video box: the cover / black stays until the first frame is decoded */
    .vcard video.rdy { opacity: 1 }
    /* Android browsers other than verified Chrome pull a visible <video> into their own player (听 / 存网盘).
       The element stays a tiny source and frames are painted onto a <canvas> under the like/comment UI. */
    video.v-hid, .vcard video.v-hid { position: fixed !important; left: 0 !important; top: 0 !important; width: 2px !important; height: 2px !important; opacity: .01 !important; pointer-events: none !important; z-index: -1 !important; transition: none !important }
    .v-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block }
    .vo-cv { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: auto; background: #000 }
    .v-pause.vo-pause { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: auto }
    .v-cv-hint { position: fixed; left: 12px; right: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 61; max-width: 616px; margin: 0 auto; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; line-height: 1.45; border-radius: 10px; padding: 8px 30px 8px 10px }
    .v-cv-hint button { position: absolute; right: 4px; top: 4px; border: none; background: none; color: #fff; font-size: 16px; width: 24px; height: 24px; cursor: pointer }
    .vcard .v-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none }
    .vcard .v-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; opacity: 0; animation: vLoadIn .2s ease .25s forwards }
    .vcard .v-load img { height: 64px; width: auto; display: block; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)) }
    @keyframes vLoadIn { to { opacity: 1 } }

    .v-tap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1
    }

    .v-iframe-wrap {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      aspect-ratio: 16/9;
      z-index: 1
    }

    .v-iframe-wrap iframe {
      width: 100%;
      height: 100%;
      border: none
    }

    .v-hint,
    .v-pause {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      pointer-events: none;
      color: #fff;
      background: rgba(0, 0, 0, .45);
      border-radius: 24px;
      padding: 8px 16px;
      font-size: 14px
    }

    .v-pause {
      font-size: 36px;
      border-radius: 50%;
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0
    }

    .v-info {
      position: absolute;
      left: 14px;
      right: 84px;
      bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
      z-index: 3;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
      pointer-events: none
    }

    .v-author {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      pointer-events: auto
    }

    .v-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--pl);
      color: var(--p);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .8);
      text-shadow: none
    }

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

    .v-cap {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word
    }

    .v-side {
      position: absolute;
      right: 8px;
      bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 24px);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px
    }

    .v-side button {
      background: none;
      border: none;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .7)
    }

    .v-side button .v-ic {
      font-size: 28px;
      line-height: 1;
      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6))
    }

    .v-side button.liked {
      color: #ff4d6d
    }

    .v-side button.bookmarked {
      color: #ffc53d
    }

    .v-side button.bookmarked .ic.v-ic {
      fill: currentColor
    }

    .v-prog {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(56px + env(safe-area-inset-bottom, 0px));
      height: 28px;
      z-index: 4;
      touch-action: none;
      -webkit-touch-callout: none;
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
      --pg: 0%
    }

    .v-prog-line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: rgba(255, 255, 255, .28);
      transition: height .15s
    }

    .v-prog.on .v-prog-line {
      height: 6px;
      bottom: 4px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .35)
    }

    .v-prog-fill {
      display: block;
      height: 100%;
      width: var(--pg);
      background: #fff;
      border-radius: inherit;
      transition: width .25s linear
    }

    .v-prog.on .v-prog-fill {
      transition: none
    }

    .v-prog-thumb {
      display: none;
      position: absolute;
      top: 50%;
      left: var(--pg);
      width: 16px;
      height: 16px;
      margin: -8px 0 0 -8px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .5)
    }

    .v-prog.on .v-prog-thumb {
      display: block
    }

    .v-seek-time {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 80px);
      text-align: center;
      z-index: 5;
      color: rgba(255, 255, 255, .75);
      font-size: 20px;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
      pointer-events: none;
      font-variant-numeric: tabular-nums
    }

    .v-seek-time b {
      color: #fff;
      font-size: 28px
    }

    .vcard.seeking .v-info,
    .vcard.seeking .v-side {
      opacity: 0;
      transition: opacity .15s
    }

    .v-top {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 10px);
      left: 10px;
      right: 10px;
      z-index: 60;
      display: grid;
      grid-template-columns: 36px 1fr 36px;
      align-items: center;
      pointer-events: none
    }

    .v-top > button {
      pointer-events: auto;
      background: rgba(0, 0, 0, .35);
      color: #fff;
      border: none;
      border-radius: 18px;
      min-width: 36px;
      height: 36px;
      padding: 0 12px;
      font-size: 16px;
      cursor: pointer
    }

    .v-top > button:last-child {
      justify-self: end
    }

    .v-tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      pointer-events: auto
    }

    .v-tab {
      background: none;
      border: none;
      color: rgba(255, 255, 255, .55);
      font-size: 16px;
      font-weight: 500;
      padding: 6px 2px;
      cursor: pointer;
      position: relative;
      line-height: 1.2;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .55)
    }

    .v-tab.active {
      color: #fff;
      font-weight: 700
    }

    .v-tab.active::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 18px;
      height: 2px;
      border-radius: 1px;
      background: #fff
    }

    .v-top-spacer {
      width: 36px;
      height: 36px
    }

    .v-msg {
      position: fixed;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      z-index: 55;
      text-align: center;
      color: #fff;
      font-size: 15px;
      padding: 0 24px
    }

    .v-msg .icon {
      font-size: 48px;
      margin-bottom: 8px
    }

    .v-more {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 6px);
      z-index: 55;
      color: #fff;
      background: rgba(0, 0, 0, .5);
      border-radius: 14px;
      padding: 4px 12px;
      font-size: 12px
    }

    /* Video tab: in-page comment bottom sheet (Douyin style) */
    .vfeed.locked {
      overflow-y: hidden
    }

    .cm-wrap {
      position: fixed;
      inset: 0;
      z-index: 250;
      pointer-events: none
    }

    .cm-mask {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .3);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: auto;
      touch-action: none
    }

    .cm-mask.show {
      opacity: 1
    }

    .cm-sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto;
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      background: var(--bgc);
      color: var(--tx);
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
      overflow: hidden;
      pointer-events: auto;
      will-change: transform
    }

    .cm-head {
      position: relative;
      flex-shrink: 0;
      padding: 8px 44px 10px;
      text-align: center;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      border-bottom: 1px solid color-mix(in srgb, var(--bd) 50%, transparent)
    }

    .cm-handle {
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: var(--bd);
      margin: 0 auto 8px
    }

    .cm-title {
      font-size: 14px;
      font-weight: 600
    }

    .cm-x {
      position: absolute;
      right: 6px;
      top: 8px;
      width: 36px;
      height: 36px;
      border: none;
      background: none;
      color: var(--txs);
      font-size: 22px;
      line-height: 36px;
      cursor: pointer;
      padding: 0
    }

    .cm-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 4px 16px
    }

    .cm-item {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      cursor: pointer
    }

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

    .cm-name {
      font-size: 12px;
      color: var(--txs)
    }

    .cm-text {
      font-size: 14px;
      margin: 2px 0;
      white-space: pre-wrap;
      word-break: break-word
    }

    .cm-text .cm-at {
      color: var(--txs)
    }

    .cm-empty {
      text-align: center;
      color: var(--txs);
      padding: 40px 0;
      font-size: 14px
    }

    .cm-bar {
      flex-shrink: 0;
      border-top: 1px solid var(--bd);
      background: var(--bgc);
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px))
    }

    .cm-bar.kb {
      padding-bottom: 8px
    }

    .cm-bar .comment-box {
      margin-bottom: 0
    }

    .cm-bar .comment-box input {
      font-size: 16px
    }

    .cm-reply {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--txs);
      padding: 0 4px 6px
    }

    .cm-reply button {
      background: none;
      border: none;
      color: var(--txs);
      cursor: pointer;
      font-size: 14px
    }

    .bottom-nav.on-video {
      background: rgba(0, 0, 0, .55);
      border-top-color: rgba(255, 255, 255, .15)
    }

    .bottom-nav.on-video .tab-btn {
      color: #fff
    }

    .bottom-nav.on-video .tab-btn.active,
    .bottom-nav.on-video .tab-btn.active .tab-label {
      color: var(--p)
    }

    .bottom-nav.on-video .tab-label {
      color: #ddd
    }

    /* Swipe-to-delete conversation */
    .conv-swipe {
      position: relative;
      overflow: hidden;
      border-radius: 8px
    }

    .conv-swipe .conv-item {
      background: var(--bg);
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      transition: transform .2s
    }

    .conv-swipe .conv-item img {
      -webkit-user-drag: none;
      pointer-events: none
    }

    .conv-del {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 80px;
      border: none;
      background: #e74c3c;
      color: #fff;
      font-size: 15px;
      cursor: pointer
    }

    /* Publish "+" (video tab only) and sheets */
    .tab-plus {
      width: 48px;
      height: 34px;
      padding: 0;
      border: none;
      border-radius: 12px;
      background: var(--p);
      color: #fff;
      font-size: 26px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
    }

    .bottom-nav.on-video .tab-btn.tab-plus {
      color: #fff
    }

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

    .sheet {
      width: 100%;
      max-width: 640px;
      background: var(--bgc);
      color: var(--tx);
      border-radius: 16px 16px 0 0;
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      max-height: 90vh;
      overflow-y: auto
    }

    .sheet-opt {
      display: block;
      width: 100%;
      padding: 15px 0;
      border: none;
      border-bottom: 1px solid var(--bd);
      background: none;
      color: var(--tx);
      font-size: 16px;
      cursor: pointer
    }

    .sheet-opt.cancel {
      border: none;
      border-top: 8px solid var(--bgi);
      color: var(--txs);
      margin-top: 4px
    }

    .sheet-opt.danger {
      color: #e53935
    }

    /* Video ⋯ menu: unified line icons (24px, stroke 1.9, same colour) in round tiles, label under each; cancel stays full-width below */
    .sheet-opt-row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 4px;
      padding: 12px 0 10px
    }

    .sheet-opt-row .sheet-opt {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      flex: 0 0 25%;
      max-width: 25%;
      min-width: 0;
      width: auto;
      padding: 4px 2px;
      border: none;
      background: none;
      color: var(--tx);
      text-align: center;
      font: inherit;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent
    }

    .sheet-opt-row .so-ic {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--bgi);
      color: var(--tx);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .12s, background .12s
    }

    .sheet-opt-row .sheet-opt:active .so-ic {
      transform: scale(.92);
      background: var(--bd)
    }

    .sheet-opt-row .sheet-opt .ic {
      width: 24px;
      height: 24px;
      margin: 0;
      flex-shrink: 0
    }

    .sheet-opt-row .so-tx {
      font-size: 12px;
      line-height: 1.3;
      color: var(--txs);
      max-width: 100%;
      overflow-wrap: anywhere
    }

    /* ===== bottom-bar "+" sheet (Xiaohongshu style) + compose screen ===== */
    .ps-bg {
      animation: psFade .2s ease-out
    }

    .ps-sheet {
      min-height: 25vh;
      padding-top: 8px;
      animation: psUp .26s cubic-bezier(.2, .8, .2, 1)
    }

    .ps-grip {
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: var(--bd);
      margin: 0 auto 6px
    }

    .ps-grid {
      display: flex;
      flex-direction: column;
      padding: 0 0 6px
    }

    .file-vh {
      position: fixed;
      left: 0;
      top: 0;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
      overflow: hidden
    }

    .file-ov {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 2;
      cursor: pointer;
      font-size: 100px;
      -webkit-appearance: none;
      appearance: none
    }

    label.ps-opt,
    label.sheet-opt {
      position: relative;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
      box-sizing: border-box;
      text-align: center
    }

    .ps-opt {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--bd);
      background: none;
      color: var(--tx);
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      padding: 9px 4px
    }

    .ps-opt:last-child {
      border-bottom: none
    }

    .ps-ic {
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--bgi);
      color: var(--p);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .ps-ic .ic {
      width: 21px;
      height: 21px
    }

    .ps-label {
      width: 110px;
      text-align: left;
      line-height: 1
    }

    .ps-opt:active {
      background: var(--bgi)
    }

    @keyframes psUp {
      from {
        transform: translateY(100%)
      }

      to {
        transform: none
      }
    }

    @keyframes psFade {
      from {
        background: rgba(0, 0, 0, 0)
      }
    }

    .cmp-shield {
      position: fixed;
      left: 0;
      right: 0;
      top: -100vh;
      height: 300vh;
      background: var(--bg);
      z-index: 319
    }

    .cmp-page {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--vvt, 0px);
      height: var(--vvh, 100%);
      /* opaque full screen even with the iOS keyboard open: the page itself always reaches the screen bottom,
         content is lifted with padding, and a huge shadow paints over anything iOS reveals while panning */
      box-shadow: 0 0 0 100vmax var(--bg);
      z-index: 320;
      background: var(--bg);
      color: var(--tx);
      display: flex;
      flex-direction: column;
      animation: none
    }

    .cmp-top {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px;
      border-bottom: 1px solid var(--bd);
      background: var(--bgc)
    }

    .cmp-top,
    .cmp-body,
    .cmp-bar {
      width: 100%;
      max-width: 640px;
      margin: 0 auto
    }

    .cmp-back {
      width: 40px;
      height: 40px;
      border: none;
      background: none;
      color: var(--tx);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .cmp-back .ic {
      width: 22px;
      height: 22px
    }

    .cmp-title {
      font-size: 16px;
      font-weight: 600
    }

    .cmp-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      /* lift content off the bottom edge / home indicator */
      padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column
    }

    .cmp-spacer {
      flex: 1 1 auto;
      min-height: 24px
    }

    /* 「主题」本身是唯一入口；点开才出选项。三行共用 .cmp-opt-row 铬 */
    .cmp-topic-block {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      width: 100%
    }

    /* Selected topic sits on the left (not stretched mid-row) */
    .cmp-topic-block > .cmp-opt-row {
      width: auto;
      max-width: 100%;
      align-self: flex-start
    }

    .cmp-topic-block .cmp-opt-chev {
      margin-left: 6px
    }

    .cmp-opt-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 44px;
      padding: 8px 0;
      margin: 0;
      border: 0;
      background: transparent;
      color: var(--tx);
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;
      font: inherit;
      -webkit-appearance: none;
      appearance: none
    }

    .cmp-opt-row.cmp-vis {
      cursor: default;
      flex-wrap: wrap
    }

    .cmp-opt-row:disabled {
      opacity: .45;
      cursor: not-allowed
    }

    .cmp-opt-row.on .cmp-opt-lbl {
      color: var(--p)
    }

    .cmp-opt-ic {
      width: 18px;
      height: 18px;
      flex: none;
      opacity: .85;
      stroke-width: 1.75
    }

    .cmp-opt-lbl {
      font-size: 14px;
      font-weight: 600;
      color: var(--tx);
      line-height: 1.2;
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cmp-opt-chev {
      width: 16px;
      height: 16px;
      flex: none;
      margin-left: auto;
      opacity: .55
    }

    .cmp-opt-row .cmp-seg {
      margin-left: auto;
      flex: none
    }

    .cmp-topic-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
      padding: 0 0 4px 28px
    }

    .cmp-topic-chip {
      border: 1px solid var(--border, #f0d6dd);
      background: #fff;
      color: var(--tx, #555);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px
    }

    .cmp-topic-chip.on {
      background: var(--p);
      color: #fff;
      border-color: var(--p)
    }
    /* 黑色主题：发帖「主题」按钮/芯片与视频编辑页 .pp-topic-btn / .pp-chip 同一套黑底 */
    [data-theme="dark"] .cmp-topic-block > .cmp-opt-row {
      border: 1px solid #333;
      background: #1f1f1f;
      color: #ddd;
      border-radius: 999px;
      padding: 7px 12px
    }
    [data-theme="dark"] .cmp-topic-block > .cmp-opt-row .cmp-opt-lbl {
      color: #ddd
    }
    [data-theme="dark"] .cmp-topic-block > .cmp-opt-row.on {
      border-color: var(--p);
      color: #fff
    }
    [data-theme="dark"] .cmp-topic-block > .cmp-opt-row.on .cmp-opt-lbl {
      color: #fff
    }
    [data-theme="dark"] .cmp-topic-chip {
      border: 1px solid #333;
      background: #1f1f1f;
      color: #ddd
    }
    .cmp-sec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 8px 10px 8px 28px; background: var(--bgi); border-radius: 10px }
    .cmp-sec-row.picked { background: transparent }
    .cmp-sec-lbl { font-size: 12px; font-weight: 600; color: var(--tx); margin-right: 2px }
    .cmp-sec-lbl small { font-weight: 400; color: var(--txs); font-size: 11px }
    .cmp-sec-chip { padding: 5px 12px; font-size: 12.5px }
    /* theme / section page: post here */
    /* theme / section "post here" hero card: centered emblem, hairline frame + corner ticks, pill CTA */
    .zone-post-cta { --zc: var(--p, #111); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; box-sizing: border-box; margin: 4px 0 16px; padding: 30px 22px 26px; border: 1px solid var(--bd); border-radius: 18px; color: var(--tx); font: inherit; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
      background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--zc) 7%, transparent), transparent 60%), radial-gradient(color-mix(in srgb, var(--tx) 9%, transparent) .6px, transparent .8px) 0 0 / 14px 14px, var(--bgc);
      animation: zpcIn .6s cubic-bezier(.2,.8,.25,1) both; transition: transform .2s ease, box-shadow .25s ease }
    .zone-post-cta::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--tx) 8%, transparent); border-radius: 13px; pointer-events: none }
    .zone-post-cta:active { transform: scale(.985) }
    @media (hover: hover) { .zone-post-cta:hover { box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--zc) 45%, transparent) } }
    .zone-post-cta .zpc-cn { position: absolute; width: 10px; height: 10px; border: 0 solid var(--tx); opacity: .55; pointer-events: none }
    .zone-post-cta .zpc-cn.tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px }
    .zone-post-cta .zpc-cn.tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px }
    .zone-post-cta .zpc-cn.bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px }
    .zone-post-cta .zpc-cn.br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px }
        .zpc-spacer { height: 120px }
    .zone-post-cta .zpc-eye { display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--txs); margin-bottom: 10px; animation: zpcIn .6s ease .14s both }
    .zone-post-cta .zpc-eye::before, .zone-post-cta .zpc-eye::after { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .5 }
    .zone-post-cta .zpc-t { display: block; font-size: 19px; font-weight: 700; letter-spacing: .02em; line-height: 1.35; animation: zpcIn .6s ease .18s both }
    .zone-post-cta .zpc-s { display: block; max-width: 30em; margin-top: 6px; font-size: 12.5px; color: var(--txs); line-height: 1.6; animation: zpcIn .6s ease .22s both }
    .zone-post-cta .zpc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 10px 28px; border-radius: 999px; background: var(--tx); color: var(--bgc); font-size: 14px; font-weight: 600; letter-spacing: .08em; box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--tx) 70%, transparent); animation: zpcIn .6s ease .28s both; transition: transform .2s ease }
    .zone-post-cta:active .zpc-go { transform: translateY(1px) }
    .zph { position: absolute; left: 50%; bottom: calc(100% + 4px); width: 0; height: 0; pointer-events: none; font-size: 11px; font-weight: 400; color: var(--txs); animation: zphIn .7s ease .5s both }
    .zph-ar { position: absolute; left: -8px; bottom: 0; overflow: visible }
    .zph-ar .ln, .zph-ar .hd { fill: none; stroke: color-mix(in srgb, var(--tx) 38%, transparent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round }
    .zph-ar .ln { stroke-dasharray: 2 3.2 }
    .zph-tx { position: absolute; left: 70px; bottom: 50px; width: max-content; max-width: calc(50vw - 82px); text-align: left; line-height: 1.45; letter-spacing: .02em; white-space: normal; background: color-mix(in srgb, var(--bgc) 94%, transparent); padding: 3px 7px; border-radius: 7px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tx) 6%, transparent) }
    @keyframes zphIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
    @media (prefers-reduced-motion: reduce) { .zph { animation: none } }
    @keyframes zpcIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
    @keyframes zpcSpin { to { transform: rotate(360deg) } }
    @media (prefers-reduced-motion: reduce) { .zone-post-cta, .zone-post-cta * { animation: none !important; transition: none !important } }

    /* user picker for the "only selected people" visibility */
    .acl-picker {
      margin-top: 10px;
      border: 1px solid var(--border, #f4dde3);
      border-radius: 12px;
      padding: 10px;
      background: #fff8fa
    }

    .acl-search {
      display: flex;
      gap: 6px
    }

    .acl-search input {
      flex: 1;
      border: 1px solid var(--border, #f0d6dd);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 13px;
      background: #fff
    }

    .acl-results {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .acl-user {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: #fff;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 13px;
      color: var(--tx, #444);
      width: 100%;
      text-align: left
    }

    .acl-user img {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      object-fit: cover;
      background: #f3e3e8
    }

    .acl-user .add {
      margin-left: auto;
      color: var(--p, #ec5d83)
    }

    .acl-sel {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .acl-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--p, #ec5d83);
      color: #fff;
      border-radius: 999px;
      padding: 4px 6px 4px 10px;
      font-size: 12px
    }

    .acl-chip button {
      border: 0;
      background: rgba(255, 255, 255, .3);
      color: #fff;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      line-height: 1;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .acl-empty {
      font-size: 12px;
      color: var(--txs);
      margin-top: 6px
    }

    /* poll duration selector */
    .poll-days {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      font-size: 13px;
      color: var(--tx, #555)
    }

    .poll-days select {
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 8px
    }

    .poll-ended {
      margin-top: 8px;
      font-size: 12px;
      color: var(--txs, #999)
    }

    .cmp-media {
      margin-bottom: 10px
    }

    .cmp-text {
      width: 100%;
      border: none;
      background: transparent;
      color: var(--tx);
      padding: 4px 0;
      resize: none;
      font-size: 16px;
      line-height: 1.6;
      min-height: 140px;
      outline: none
    }

    .cmp-bar {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--bd);
      background: var(--bgc)
    }

    .cmp-bar select {
      width: auto;
      padding: 6px 12px;
      font-size: 13px;
      border-radius: 16px
    }

    html.cmp-open,
    html.cmp-open body {
      overflow: hidden !important;
      overscroll-behavior: none;
      background: var(--bg) !important
    }

    html.cmp-open body {
      position: fixed;
      left: 0;
      right: 0;
      width: 100%
    }

    html.cmp-open .bottom-nav {
      display: none !important
    }

    .cmp-top .cmp-publish {
      min-width: 72px;
      padding: 7px 16px
    }

    .cmp-body {
      display: flex;
      flex-direction: column
    }

    .cmp-text {
      flex: 0 0 auto;
      height: 33vh;
      min-height: 120px !important;
      max-height: 33vh
    }

    /* Douyin/XHS-style # theme tag under the compose textarea */
    .cmp-tagbar {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      min-height: 32px;
      z-index: 2
    }

    .cmp-hash-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--bd);
      background: var(--bgi, var(--bg));
      color: var(--tx);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex-shrink: 0
    }

    .post-at { color: var(--p); text-decoration: none; font-weight: 500; cursor: pointer }
    .cmp-at-btn { font-size: 17px }
    .cm-at-btn { font-size: 18px; font-weight: 600; line-height: 1 }
    .at-sheet { z-index: 1 }
    .at-bg { z-index: 10050 }
    .at-row .at-v { position: static; display: inline-flex; margin-left: 4px; vertical-align: middle; width: 14px; height: 14px; font-size: 9px; align-items: center; justify-content: center; border-radius: 50% }
    .dt-tr-btn { display: inline-block; border: none; background: none; padding: 2px 0; margin: 2px 0 0; font-size: 12px; color: var(--txs); cursor: pointer; text-decoration: underline; text-underline-offset: 2px }
    .dt-cm-rl .dt-tr-btn { margin-left: 6px }
    .cmp-hash-btn:hover,
    .cmp-hash-btn.on {
      border-color: var(--p);
      color: var(--p)
    }

    .cmp-tag-edit {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: 1;
      min-width: 140px;
      border: 1px solid var(--bd);
      border-radius: 16px;
      padding: 4px 10px;
      background: var(--bgc)
    }

    .cmp-tag-edit .hash-pre {
      color: #8a8a8a;
      font-weight: 700;
      font-size: 15px
    }

    .cmp-tag-edit input {
      flex: 1;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--tx);
      font-size: 14px;
      min-width: 0;
      padding: 4px 0
    }

    .cmp-tag-sel {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 13px;
      background: #f0f0f0;
      color: #666;
      font-weight: 600;
      max-width: 100%;
      border: none;
      cursor: pointer
    }
    [data-theme="dark"] .cmp-tag-sel {
      background: #2a2a2a;
      color: #b0b0b0
    }

    .cmp-tag-sel .x {
      margin-left: 2px;
      opacity: .7;
      font-weight: 700
    }

    .tag-suggest {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      z-index: 40;
      width: 100%;
      margin-top: 0;
      border: 1px solid var(--bd);
      border-radius: 12px;
      background: var(--bgc);
      overflow: hidden;
      max-height: 200px;
      overflow-y: auto;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
    }

    .tag-suggest button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      border: 0;
      background: none;
      padding: 10px 12px;
      font-size: 14px;
      color: var(--tx);
      cursor: pointer;
      text-align: left
    }

    .tag-suggest button:hover,
    .tag-suggest button.on {
      background: var(--bgi, #f6f6f6)
    }

    .tag-suggest .ts-name {
      color: var(--p);
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .tag-suggest .ts-use {
      flex-shrink: 0;
      font-size: 12px;
      color: var(--txs)
    }

    .tag-suggest .ts-new {
      color: var(--txs);
      font-weight: 500
    }

    .pp-tagbar {
      position: relative;
      margin-top: 10px;
      z-index: 5;
      overflow: visible
    }

    .pp-tagbar .cmp-hash-btn {
      background: #1f1f1f;
      border-color: #333;
      color: #ddd
    }

    .pp-tagbar .cmp-hash-btn.on,
    .pp-tagbar .cmp-hash-btn:hover {
      border-color: var(--p);
      color: #fff
    }

    .pp-tagbar .cmp-tag-edit {
      background: #1a1a1a;
      border-color: #333
    }

    .pp-tagbar .cmp-tag-edit input {
      color: #eee
    }

    .pp-tagbar .tag-suggest {
      /* open upward so the video preview above stays put */
      top: auto;
      bottom: calc(100% + 6px);
      max-height: min(180px, 28vh);
      background: #1a1a1a;
      border-color: #333;
      box-shadow: 0 -8px 24px rgba(0, 0, 0, .35)
    }

    .pp-tagbar .tag-suggest button {
      color: #ddd
    }

    .pp-tagbar .tag-suggest button:hover {
      background: #242424
    }

    /* topic / visibility / poll sit in the middle-lower part of the page */
    .cmp-opts {
      margin-top: 8px;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid var(--bd)
    }

    .cmp-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap
    }

    .cmp-lbl {
      font-size: 14px;
      font-weight: 600;
      color: var(--tx);
      display: inline-flex;
      align-items: center;
      gap: 10px
    }

    .cmp-sel {
      position: relative;
      max-width: 60%;
      display: inline-block
    }

    .cmp-sel::after {
      content: '▾';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--txs)
    }

    .cmp-sel .cmp-topic {
      -webkit-appearance: none;
      appearance: none;
      max-width: 100%;
      background: var(--bgi, var(--bgc)) !important;
      color: var(--tx) !important;
      border: 1px solid var(--bd);
      padding-right: 30px !important
    }

    .cmp-topic {
      width: auto;
      max-width: 60%;
      padding: 6px 12px;
      font-size: 16px;
      border-radius: 16px
    }

    .cmp-seg {
      display: inline-flex;
      border: 1px solid var(--bd);
      border-radius: 16px;
      overflow: hidden
    }

    .cmp-seg button {
      border: none;
      background: transparent;
      color: var(--tx);
      font-size: 12px;
      padding: 6px 10px;
      cursor: pointer
    }

    .cmp-seg button.on {
      background: var(--p);
      color: #fff
    }
    /* Composer "who can see": one hairline track, pill segments, selected = 1px ink outline on white (same radius), 1.5px line icons */
    .cmp-seg.cmp-seg-vis { gap: 2px; padding: 2px; border: 1px solid var(--bd); border-radius: 999px; background: var(--bgi) }
    .cmp-seg.cmp-seg-vis button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid transparent !important; border-radius: 999px; background: transparent !important; color: var(--txs) !important; font-size: 12px; line-height: 1.2; white-space: nowrap; transition: color .15s, border-color .15s, background .15s }
    .cmp-seg.cmp-seg-vis button .ic { width: 13px; height: 13px; stroke-width: 1.5; flex: none }
    .cmp-seg.cmp-seg-vis button.on { background: var(--bgc, #fff) !important; border-color: var(--tx) !important; color: var(--tx) !important; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06) }
    .cmp-seg.cmp-seg-vis button.on .ic { stroke-width: 1.75 }

    .cmp-visusers {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center
    }

    .vis-chip {
      font-size: 12px;
      background: color-mix(in srgb, var(--p) 14%, transparent);
      color: var(--tx);
      border-radius: 12px;
      padding: 3px 8px
    }

    .vis-chip b {
      cursor: pointer;
      margin-left: 2px
    }

    .cmp-poll {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px;
      border: 1px dashed var(--bd);
      border-radius: 12px
    }

    .cmp-poll-opt {
      display: flex;
      gap: 6px;
      align-items: center
    }

    .cmp-poll-opt input {
      flex: 1;
      font-size: 16px;
      padding: 8px 10px;
      border-radius: 10px
    }

    .cmp-poll-x {
      border: none;
      background: none;
      color: var(--txs);
      font-size: 20px;
      cursor: pointer;
      width: 32px
    }

    .cmp-poll-days {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: var(--txs)
    }

    .cmp-poll-days select {
      width: auto;
      font-size: 16px;
      padding: 4px 10px;
      border-radius: 12px
    }

    .cmp-bar-hint {
      font-size: 12px;
      color: var(--txs)
    }

    .vis-bg {
      z-index: 340
    }

    .vis-sheet {
      max-height: 70vh;
      display: flex;
      flex-direction: column
    }

    .vis-search {
      font-size: 16px;
      width: 100%;
      padding: 8px 12px;
      border-radius: 12px;
      margin-bottom: 8px
    }

    .vis-list {
      overflow-y: auto;
      flex: 1;
      min-height: 120px
    }

    .vis-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 4px;
      cursor: pointer;
      border-bottom: 1px solid var(--bd)
    }

    .vis-ck {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--bd);
      color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px
    }

    .vis-ck.on {
      background: var(--p);
      border-color: var(--p);
      color: #fff
    }

    .poll-card {
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 10px;
      margin: 10px 0 14px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .poll-h {
      font-size: 13px;
      font-weight: 600;
      color: var(--txs)
    }

    .poll-h { display: flex; align-items: center; gap: 4px }
    .poll-h .poll-ic { flex-shrink: 0 }

    .poll-opt {
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid var(--bd);
      border-radius: 10px;
      background: var(--bgc);
      color: var(--tx);
      padding: 9px 12px;
      font-size: 14px;
      text-align: left;
      cursor: pointer
    }

    .poll-opt:disabled {
      cursor: default;
      opacity: 1
    }

    .poll-opt.mine {
      border-color: var(--p)
    }

    .poll-bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: color-mix(in srgb, var(--p) 20%, transparent);
      transition: width .4s
    }

    .poll-tx,
    .poll-n {
      position: relative
    }

    .poll-n {
      font-weight: 600;
      font-size: 13px
    }

    .poll-foot {
      font-size: 12px;
      color: var(--txs)
    }

    .cmp-publish {
      min-width: 88px;
      padding: 8px 20px;
      border-radius: 18px
    }

    @media (prefers-reduced-motion: reduce) {

      .ps-bg,
      .ps-sheet,
      .cmp-page {
        animation: none
      }
    }

    .priv-tag {
      font-size: 11px;
      color: var(--txs)
    }

    .v-info .priv-tag {
      display: inline-block;
      color: #fff;
      background: rgba(0, 0, 0, .45);
      border-radius: 10px;
      padding: 1px 8px
    }

    .v-side button .v-more-ic {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 1px
    }

    .pc-more {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--txs);
      font-size: 22px;
      line-height: 1;
      padding: 2px 8px;
      cursor: pointer
    }

    .share-avatars {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      padding: 8px 4px 14px;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .share-avatars::-webkit-scrollbar {
      display: none
    }

    .share-av {
      position: relative;
      flex: 0 0 auto;
      width: 56px;
      height: 56px;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 50%
    }

    .share-av .post-avatar {
      width: 56px;
      height: 56px;
      font-size: 22px;
      box-sizing: border-box;
      border: 2px solid transparent
    }

    .share-av.on .post-avatar {
      border-color: var(--p)
    }

    .share-av-check {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--p);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 2px var(--bgc, #fff)
    }

    .share-av-check .ic {
      width: 12px;
      height: 12px;
      stroke-width: 2.4
    }

    /* Share sheet send: always the theme accent fill (var(--p)), never a hard-coded blue. */
    .sheet .share-send.btn-p {
      background: var(--p) !important;
      color: #fff !important;
      border: none !important
    }

    [data-theme="dark"] .sheet .share-send.btn-p {
      color: #121212 !important
    }

    [data-theme="purewhite"] .sheet .share-send.btn-p {
      color: #fff !important
    }

    .chat-share {
      display: block;
      color: inherit;
      text-decoration: none;
      min-width: 180px;
      max-width: 240px
    }

    .chat-share-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px
    }

    .chat-share-hd b {
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0
    }

    .chat-share-av {
      width: 28px;
      height: 28px;
      font-size: 12px;
      flex-shrink: 0
    }

    .chat-share-tx {
      font-size: 13px;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 6px;
      word-break: break-word;
      white-space: pre-wrap
    }

    .hp-field {
      position: absolute !important;
      left: -9999px !important;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0
    }

    .bg-chip {
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(66px + env(safe-area-inset-bottom));
      z-index: 120;
      background: rgba(30, 30, 36, .92);
      color: #fff;
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 12.5px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
      max-width: 520px;
      margin: 0 auto
    }

    .bg-chip.fail {
      background: #c0392b
    }

    .bg-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px
    }

    .bg-row span {
      opacity: .8
    }

    .bg-bar {
      height: 4px;
      background: rgba(255, 255, 255, .25);
      border-radius: 2px;
      margin: 6px 0 3px;
      overflow: hidden
    }

    .bg-bar i {
      display: block;
      height: 100%;
      background: var(--p);
      transition: width .3s
    }

    .bg-hint {
      font-size: 11px;
      opacity: .7
    }

    .bg-btns button {
      background: #fff;
      color: #c0392b;
      border: 0;
      border-radius: 6px;
      padding: 3px 10px;
      margin-left: 6px;
      font-size: 12px;
      font-weight: 600
    }

    .bg-btns button.ghost {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .6)
    }

    .rc-note {
      text-align: center;
      font-size: 12px;
      color: var(--txs);
      margin: 6px 0
    }

    .rc-tabs {
      display: flex;
      gap: 6px;
      margin: 8px 0
    }

    .rc-tabs button {
      flex: 1;
      padding: 7px 4px;
      border-radius: 8px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      color: var(--tx);
      font-size: 12.5px
    }

    .rc-tabs button.on {
      background: #e5484d;
      border-color: #e5484d;
      color: #fff
    }

    .rc-warn {
      font-size: 12px;
      color: #b9770e;
      background: #fcf3cf;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 8px
    }

    .rc-card.done {
      opacity: .7;
      border-color: var(--bd);
      border-left-color: #27ae60
    }

    .rc-st {
      float: right;
      font-size: 11px;
      font-weight: 600;
      padding: 1px 8px;
      border-radius: 10px
    }

    .rc-st.wait {
      background: #fdebd0;
      color: #b9770e
    }

    .rc-st.ok {
      background: #d5f5e3;
      color: #1e8449
    }

    .rc-target {
      margin: 8px 0;
      padding: 8px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--bd) 35%, transparent)
    }

    .rc-tl {
      font-size: 11px;
      color: var(--txs);
      margin-bottom: 4px
    }

    .rc-tb {
      display: flex;
      gap: 8px;
      align-items: flex-start
    }

    .rc-thumb {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border-radius: 6px;
      flex: none
    }

    .rc-text {
      font-size: 13px;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .rc-by {
      font-size: 11.5px;
      color: var(--txs);
      margin-top: 3px
    }

    .rc-gone {
      color: var(--txs);
      font-style: italic
    }

    .rc-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .rc-actions .rc-btn {
      margin-top: 0;
      flex: 1 1 45%;
      border: 0;
      font-size: 13px
    }

    .rc-btn.dng {
      background: #922b21
    }

    .rc-btn.ghost {
      background: transparent;
      color: var(--tx);
      border: 1px solid var(--bd)
    }

    .rc-btn:disabled {
      opacity: .5
    }

    .rc-card {
      align-self: stretch;
      margin: 8px 0;
      width: 100%;
      border: 1px solid #e5484d;
      border-left-width: 4px;
      border-radius: 10px;
      background: var(--bgc, var(--bgi));
      padding: 10px 12px;
      font-size: 13px
    }

    .rc-h {
      font-weight: 700;
      color: #e5484d;
      margin-bottom: 6px
    }

    .rc-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 2px 0
    }

    .rc-row span {
      color: var(--txs);
      flex: none
    }

    .rc-row b {
      text-align: right;
      word-break: break-all
    }

    .rc-btn {
      display: block;
      margin-top: 8px;
      text-align: center;
      padding: 8px;
      border-radius: 8px;
      background: #e5484d;
      color: #fff;
      text-decoration: none;
      font-weight: 600
    }

    .rc-tag {
      display: inline-block;
      font-size: 11px;
      color: #fff;
      background: #e5484d;
      border-radius: 4px;
      padding: 0 5px;
      margin-right: 5px;
      line-height: 16px
    }

    .chat-share span {
      font-size: 12px;
      opacity: .8
    }

    .acct-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 2px;
      border-bottom: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
      cursor: pointer
    }

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

    .acct-name {
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .acct-id {
      font-size: 12px;
      color: var(--txs)
    }

    .acct-check {
      color: var(--p);
      font-size: 20px;
      font-weight: 700
    }

    /* ===== Welcome page (logged out) ===== */
    .aboutus { position: fixed; inset: 0; z-index: 255; background: #FAF6F0; color: #5a4a3c }
    .aboutus picture { display: contents }
    .aboutus .au-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none }
    .aboutus .au-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(env(safe-area-inset-top) + 12px) 26px calc(env(safe-area-inset-bottom) + 40px); max-width: 640px; margin: 0 auto }
    .aboutus .au-back { position: sticky; top: 0; z-index: 2; color: #6b5a4a; background: rgba(250,246,240,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 18px; padding: 6px 12px; margin-left: -8px }
    .aboutus .au-head { display: flex; flex-direction: column; align-items: center; margin-top: 14px }
    .aboutus .au-mark { height: 72px; width: auto }
    .aboutus .au-word { width: 150px; height: auto; margin-top: 6px }
    .aboutus .au-line { text-align: center; margin: 18px 0 2px; font-size: 17px; letter-spacing: .08em; color: #6b5a4a; font-weight: 500 }
    .aboutus .au-en, .aboutus .au-hen { text-align: center; margin: 0; font-size: 12px; font-style: italic; color: #b8935a; letter-spacing: .04em }
    .aboutus .au-rule { width: 90px; height: 1px; background: #c9b79f; margin: 18px auto 22px }
    .aboutus .au-h { text-align: center; margin: 22px 0 2px; font-size: 17px; letter-spacing: .12em; color: #5a4a3c }
    .aboutus .au-hen { margin-bottom: 14px }
    .aboutus .au-p { font-size: 14px; line-height: 1.9; text-indent: 2em; margin: 0 0 12px; text-align: justify }
    .aboutus .au-v { margin: 0 0 14px }
    .aboutus .au-v b { display: block; font-size: 15px; color: #8a6a3c; margin-bottom: 4px }
    .aboutus .au-v p { margin: 0; font-size: 14px; line-height: 1.9; text-align: justify }
    .aboutus .au-credit { text-align: center; margin: 28px 0 4px; font-size: 13px; color: #9a8a78 }
    .aboutus .au-credit2 { margin-top: 0 }
    .aboutus.en .au-p, .aboutus.en .au-v p { text-align: left; text-indent: 0 }
    .aboutus .au-foot { text-align: center; margin: 0; font-size: 11px; letter-spacing: .1em; color: #b0a090 }
    .welcome { position: fixed; inset: 0; z-index: 255; overflow: hidden; background: #FAF6F0 }
    .welcome picture { display: contents }
    .welcome .wl-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none }
    /* start exactly where the splash had the logo / text, then glide up */
    .welcome .wl-logo { position: absolute; left: 22.727%; width: 59.659%; top: 34.595%; height: 22.846%; object-fit: contain; pointer-events: none; transition: top .9s cubic-bezier(.3,.8,.3,1), left .9s cubic-bezier(.3,.8,.3,1), width .9s cubic-bezier(.3,.8,.3,1), height .9s cubic-bezier(.3,.8,.3,1), transform .9s cubic-bezier(.3,.8,.3,1) }
    .welcome .wl-word { position: absolute; left: 20.43%; width: 60%; top: 55.2%; height: 11.03%; object-fit: contain; pointer-events: none; transition: top .9s cubic-bezier(.3,.8,.3,1), left .9s cubic-bezier(.3,.8,.3,1), width .9s cubic-bezier(.3,.8,.3,1), height .9s cubic-bezier(.3,.8,.3,1), transform .9s cubic-bezier(.3,.8,.3,1) }
    .welcome .wl-logo canvas, .welcome .wl-logo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: contain }
    .welcome.settled .wl-logo { top: 14%; transform: scale(.82) }
    .welcome.settled .wl-word { top: 33%; transform: scale(.9) }
    .welcome .wl-body { position: absolute; left: 0; right: 0; top: 47%; padding: 0 36px; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .6s ease .5s, transform .6s ease .5s }
    .welcome.settled .wl-body { opacity: 1; transform: none }
    .welcome .wl-line { margin: 0; font-size: 17px; letter-spacing: .08em; color: #6b5a4a; font-weight: 500 }
    .welcome .wl-sub { margin: 8px 0 30px; font-size: 13px; letter-spacing: .04em; color: #9a8a78 }
    .welcome .wl-btn { width: 100%; max-width: 300px; height: 46px; border-radius: 23px; font-size: 16px; letter-spacing: .12em; margin: 0 0 14px; justify-content: center }
    .welcome .btn-p.wl-btn, .welcome .btn-p.wl-btn:hover { background: #b8955a !important; border: 1px solid #b8955a !important; color: #fff !important; box-shadow: 0 6px 18px rgba(184, 149, 90, .28) !important }
    .welcome .wl-btn2 { background: rgba(255, 255, 255, .6); border: 1px solid #d9c6a3; color: #8a6d3f }
    @media (max-height: 640px) { .welcome.settled .wl-logo { top: 8% } .welcome.settled .wl-word { top: 27% } .welcome .wl-body { top: 42% } .welcome .wl-sub { margin-bottom: 20px } }
    @media (prefers-reduced-motion: reduce) { .welcome .wl-logo, .welcome .wl-word, .welcome .wl-body { transition: none } }
    /* Register continues the welcome page: same paper, butterfly, and gold button */
    html.reg-open, html.reg-open body { overflow: hidden !important; height: 100%; height: 100dvh }
    .reg-pg { position: fixed; inset: 0; z-index: 200; overflow: hidden; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #FAF6F0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom) }
    /* Keep 获取验证码 on the original layout bottom. interactive-widget=resizes-content and
       Android adjustResize shrink the viewport; --kb would also lift this fixed page above the
       keyboard. Stay the pre-keyboard height instead, so the footer stays behind the keyboard. */
    html.kb-open .reg-pg { top: 0; bottom: auto; height: var(--lay-h, 100dvh) }
    html.kb-open .reg-pg .reg-fields { padding-bottom: var(--reg-cover, 0px) }
    .reg-pg .reg-bg, .page.login-pg .reg-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none }
    /* Login sits on the same paper as sign-up. No card behind the fields.
       Auto margins keep the block where it was. The keyboard must cover the buttons, not push them up. */
    .page.login-pg {
      position: fixed; inset: 0; z-index: 200; max-width: none; width: auto;
      height: 100vh; height: 100dvh; margin: 0; overflow: auto; background: #FAF6F0;
      display: -webkit-box; display: -webkit-flex; display: flex;
      -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;
      -webkit-box-align: center; -webkit-align-items: center; align-items: center;
      -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start;
      padding: env(safe-area-inset-top, 0px) 20px env(safe-area-inset-bottom, 0px);
      -webkit-overflow-scrolling: touch
    }
    .page.login-pg picture { display: contents }
    html.kb-open .page.login-pg { top: 0; bottom: auto; height: var(--lay-h, 100dvh) }
    .page.login-pg .auth-c {
      position: relative; z-index: 1; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto;
      width: 100%; max-width: 400px; margin-top: auto; margin-bottom: auto;
      background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: 0
    }
    .page.login-pg input, .page.login-pg .btn { scroll-margin: 16px }
    .reg-pg .reg-top { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; padding: 8px 0 0 }
    .reg-pg .reg-mark { width: 44px; height: 44px; object-fit: contain }
    .reg-pg .reg-word { width: 92px; height: auto; margin-top: 0 }
    .reg-pg .reg-h { margin: 2px 0 0; font-size: 13px; letter-spacing: .18em; color: #6b5a4a; font-weight: 600; line-height: 1.2 }
    .reg-pg .reg-main { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: min(334px, calc(100% - 106px)); max-width: 334px; margin: 0 auto; display: flex; flex-direction: column; padding: 4px 0 6px }
    .reg-pg .reg-fields { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch }
    .reg-pg .reg-foot { flex: 0 0 auto; padding-top: 4px }
    .reg-pg .fg { margin-bottom: 5px }
    .reg-pg .fg label { margin-bottom: 1px; font-size: 12px; line-height: 1.2 }
    .reg-pg .fg label, .reg-pg .age-toggle { color: #6b5a4a }
    .reg-pg .fg input { background: rgba(255,255,255,.88); border: 1px solid #e4d3bb; border-radius: 8px; padding: 10px 14px; font-size: 14px; font-family: inherit; line-height: normal }
    .reg-pg .pw-wrap input { padding-right: 44px }
    .reg-pg .age-toggle { margin: 0 0 5px; font-size: 12px; line-height: 1.2; gap: 6px }
    .reg-pg .age-toggle input { width: 15px; height: 15px }
    .reg-pg .pw-hint { margin-top: 1px; font-size: 11px; line-height: 1.25 }
    .reg-pg .pw-hint, .reg-pg .agree-line, .reg-pg .te-note, .reg-pg .alink { color: #9a8a78 }
    .reg-pg .agree-line { margin: 3px 0; font-size: 11px; line-height: 1.3 }
    .reg-pg .te-note { font-size: 11px !important; line-height: 1.3; margin: 2px 0 0 !important }
    .reg-pg .ts-box { margin: 2px 0; max-height: 66px }
    .reg-pg .ts-fail { font-size: 11px; line-height: 1.3; color: #9a8a78; margin: 2px 0 }
    .reg-pg .agree-line a, .reg-pg .alink a { color: #8a6d3f }
    .reg-pg .alink { margin: 4px 0 0; font-size: 12px; line-height: 1.2 }
    .reg-pg .err { margin-top: 4px; font-size: 12px; line-height: 1.3 }
    .reg-pg .btn.btn-p { background: #b8955a; border: 1px solid #b8955a; color: #fff; border-radius: 23px; height: 40px; letter-spacing: .06em; box-shadow: 0 4px 12px rgba(184, 149, 90, .28) }
    .reg-pg .code-lead { margin: 2px 0 6px; font-size: 12px; line-height: 1.35; color: #6b5a4a }
    .reg-pg .code-extra { margin-top: 6px; font-size: 12px; line-height: 1.3; color: #9a8a78 }
    .reg-pg .code-acts { margin-top: 6px; display: flex; gap: 8px }
    @media (min-height: 780px) {
      .reg-pg .reg-top { padding-top: 18px }
      .reg-pg .reg-mark { width: 60px; height: 60px }
      .reg-pg .reg-word { width: 112px }
      .reg-pg .reg-h { font-size: 15px; margin-top: 4px }
      .reg-pg .fg { margin-bottom: 8px }
      .reg-pg .btn.btn-p { height: 44px }
    }
    /* Short phones: keep the same input boxes, give the English copy a little less chrome so the button stays on screen. */
    @media (max-height: 720px) {
      .reg-pg .reg-top { padding-top: 2px }
      .reg-pg .reg-mark { width: 32px; height: 32px }
      .reg-pg .reg-word { width: 76px }
      .reg-pg .reg-h { margin-top: 0 }
      .reg-pg .reg-main { padding-top: 2px; padding-bottom: 2px }
      .reg-pg .fg { margin-bottom: 3px }
      .reg-pg .agree-line { margin: 1px 0 }
      .reg-pg .te-note { font-size: 10px !important; line-height: 1.25 }
    }

    .a2hs {
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(66px + env(safe-area-inset-bottom, 0px));
      z-index: 260;
      max-width: 620px;
      margin: 0 auto;
      background: var(--bgc);
      color: var(--tx);
      border: 1px solid var(--bd);
      border-radius: 14px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
      padding: 12px 36px 12px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      line-height: 1.5
    }

    .a2hs img {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      flex-shrink: 0
    }

    .a2hs b {
      color: var(--p)
    }

    .a2hs .a2hs-x {
      position: absolute;
      top: 2px;
      right: 4px;
      width: 30px;
      height: 30px;
      border: none;
      background: none;
      color: var(--txs);
      font-size: 20px;
      cursor: pointer
    }

    .a2hs-steps {
      margin-top: 10px;
      padding: 12px;
      border-radius: 10px;
      background: var(--bgi);
      font-size: 13px;
      line-height: 1.9;
      color: var(--tx)
    }

    .a2hs-steps b {
      color: var(--p)
    }

    .cv-label {
      margin: 12px 0 6px;
      font-size: 13px;
      font-weight: 600
    }

    .cv-label span {
      font-weight: 400;
      color: var(--txs);
      font-size: 12px;
      margin-left: 6px
    }

    .cv-strip {
      position: relative;
      display: flex;
      height: 64px;
      border-radius: 6px;
      overflow: hidden;
      background: var(--bgi);
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer
    }

    .cv-strip.off {
      opacity: .5;
      pointer-events: none
    }

    .cv-cell {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: #000
    }

    .cv-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none
    }

    .cv-win {
      position: absolute;
      top: 0;
      bottom: 0;
      border: 3px solid #fff;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
      pointer-events: none
    }

    .pub-row video {
      width: 120px !important;
      height: 160px !important
    }

    .fb-new {
      display: inline-block;
      background: #e53935;
      color: #fff;
      font-size: 10px;
      line-height: 1;
      padding: 2px 5px;
      border-radius: 8px;
      margin-right: 6px;
      vertical-align: middle;
      font-weight: 600
    }

    /* Full-page publish screen (Douyin style, dark) */
    .pub-page {
      position: fixed;
      inset: 0 0 var(--kb, 0px) 0;
      z-index: 320;
      background: #121212;
      color: #fff;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 100vw;
      overflow: hidden
    }

    .pp-top {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px
    }

    .pp-title {
      font-size: 17px;
      font-weight: 600
    }

    .pp-back,
    .pp-text-btn {
      width: 44px;
      height: 40px;
      border: none;
      background: none;
      color: #fff;
      font-size: 32px;
      line-height: 40px;
      cursor: pointer;
      padding: 0
    }

    .pp-text-btn {
      font-size: 16px;
      width: auto;
      padding: 0 10px
    }

    .pp-done {
      color: var(--p);
      font-weight: 600
    }

    .pp-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 8px 16px calc(28px + env(safe-area-inset-bottom, 0px))
    }

    .pp-card {
      position: relative;
      width: min(52vw, 220px);
      aspect-ratio: 9 / 16;
      max-height: 40vh;
      margin: 0 auto 16px;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
      isolation: isolate;
      z-index: 1;
      flex-shrink: 0
    }

    .pp-card video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .pp-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .45);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      padding-left: 3px
    }

    .pp-card { transition: width .25s ease, max-height .25s ease }

    .pp-card.zoomed {
      width: min(92vw, 440px);
      max-height: 72vh
    }

    .pp-card.zoomed video { object-fit: contain }

    .pp-zoom-btn {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 2;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      box-shadow: none;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 1px rgba(0, 0, 0, .6))
    }

    .pp-zoom-btn .ic { width: 24px; height: 24px; stroke-width: 2.3 }

    .pp-cover-btn {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      border: none;
      border-radius: 14px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font-size: 13px;
      padding: 5px 14px;
      white-space: nowrap;
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px)
    }

    .pp-cap {
      position: relative;
      background: #1f1f1f;
      border-radius: 12px;
      padding: 10px 12px 26px
    }

    .pp-cap textarea {
      background: transparent;
      border: none;
      color: #fff;
      padding: 0;
      resize: none;
      width: 100%
    }

    .pp-cap textarea::placeholder {
      color: #777
    }

    .pp-count {
      position: absolute;
      right: 12px;
      bottom: 6px;
      font-size: 12px;
      color: #777
    }

    .pp-topics {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px
    }

    .pp-topic-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #333;
      background: #1f1f1f;
      color: #ddd;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      max-width: 100%
    }

    .pp-topic-btn.on {
      border-color: var(--p);
      color: #fff
    }

    .pp-topic-btn .ic {
      width: 14px;
      height: 14px;
      flex: none;
      opacity: .75
    }

    .pp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%
    }

    .pp-chip {
      border: 1px solid #333;
      background: #1f1f1f;
      color: #ddd;
      font-size: 13px;
      border-radius: 16px;
      padding: 6px 12px;
      cursor: pointer
    }

    .pp-chip.on {
      background: var(--p);
      border-color: var(--p);
      color: #fff
    }

    .pp-bar {
      flex-shrink: 0;
      padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid #262626;
      background: #121212
    }

    .pp-publish {
      position: relative;
      width: 100%;
      height: 48px;
      border: none;
      border-radius: 24px;
      background: var(--p);
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      overflow: hidden
    }

    .pp-publish:disabled {
      background: color-mix(in srgb, var(--p) 45%, #222);
      cursor: default
    }

    .pp-publish .pp-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: var(--p);
      transition: width .2s
    }

    .pp-publish span {
      position: relative
    }

    .pp-cover {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: #121212;
      display: flex;
      flex-direction: column
    }

    .pp-cover-prev {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 0
    }

    .pp-cover-prev video {
      height: 100%;
      max-width: 90%;
      aspect-ratio: 9 / 16;
      object-fit: cover;
      border-radius: 10px;
      background: #000
    }

    .pp-cover-low {
      flex-shrink: 0;
      padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px))
    }

    .mail-hint {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--p) 10%, var(--bgc));
      border: 1px solid color-mix(in srgb, var(--p) 35%, transparent);
      color: var(--tx);
      font-size: 14px;
      line-height: 1.6
    }

    /* on-screen keyboard (set from visualViewport): hide the tab bar, keep bottom input bars above the keyboard */
    html.kb-open .bottom-nav {
      display: none
    }

    html.kb-open .comment-bottom {
      bottom: var(--kb, 0px);
      padding-bottom: 10px
    }

    html.kb-open .chat-input {
      padding-bottom: 8px
    }

    /* Post detail: lock page while commenting so keyboard focus cannot pan content away */
    html.post-cmt-open,
    html.post-cmt-open body {
      overflow: hidden !important;
      overscroll-behavior: none;
      height: 100%
    }

    html.post-cmt-open body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%
    }

    html.post-cmt-open .page-post:not(.page-chat) {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      height: 100vh;
      height: 100dvh;
      z-index: 5
    }

    /* post comment composer (iOS keyboard): page column = visual viewport (--pvh/--pvt from JS), composer flush on the keyboard */
    html.post-cmt-open .page-post:not(.page-chat) {
      top: var(--pvt, 0px);
      height: var(--pvh, 100dvh)
    }

    html.post-cmt-open .page-post:not(.page-chat) .comment-bottom {
      bottom: auto;
      top: calc(var(--pvt, 0px) + var(--pvh, 100dvh));
      transform: translateY(-100%);
      padding-bottom: 10px
    }


    /* DM chat: fixed column sized to the visual viewport (--cvh/--cvt from JS). Header on top, message list
       scrolls in between, input bar right above the keyboard; body is locked so iOS can't scroll the page on focus */
    html.chat-open,
    html.chat-open body {
      overflow: hidden !important;
      overscroll-behavior: none;
      height: 100%
    }

    html.chat-open body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%
    }

    html.chat-open .page-chat {
      position: fixed;
      top: var(--cvt, 0px);
      left: 0;
      right: 0;
      height: 100%;
      height: var(--cvh, 100%);
      padding-top: calc(var(--hdr) + var(--sat0));
      box-sizing: border-box;
      overflow: hidden;
      z-index: 5
    }

    html.chat-open .page-chat .chat-header {
      position: relative;
      top: auto;
      flex-shrink: 0;
      margin-bottom: 0
    }

    html.chat-open .page-chat .chat-msgs {
      -webkit-box-flex: 1;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      position: relative;
      z-index: 1;
      padding-bottom: 8px
    }

    html.chat-open .page-chat .chat-bar-wrap {
      position: relative;
      bottom: auto;
      flex-shrink: 0;
      margin: 0 -16px
    }

    html.chat-open .bottom-nav {
      display: none !important
    }

    /* chat-open: the custom background covers only the message list box (inside the fixed column, measured by chatVV),
       the input bar / emoji area are opaque, and nothing below the input can show the image */
    html.chat-open .page-chat .chat-bg-layer {
      position: absolute;
      inset: auto 0 auto 0;
      top: var(--cmt, 0px);
      height: var(--cmh, 0px)
    }

    html.chat-open .page-chat .chat-bar-wrap {
      background: var(--bg);
      -webkit-backdrop-filter: none;
      backdrop-filter: none
    }

    html.chat-open,
    html.chat-open body,
    html.chat-open .page-chat {
      background: var(--bg) !important
    }

    html.app-up:not(.splash-on) #splash {
      display: none !important
    }

    /* long-press menus (DM messages, comments): no native text selection / iOS callout; inputs stay selectable */
    .page-chat, .page-chat *:not(textarea):not(input),
    .c-item, .c-item *, .c-reply-item, .c-reply-item *, .cm-list, .cm-list *:not(textarea):not(input) {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none
    }

    .page-chat textarea, .page-chat input, .cm-list textarea, .cm-list input {
      -webkit-touch-callout: default;
      -webkit-user-select: text;
      user-select: text
    }

    /* Avatar crop screen */
    .avc {
      position: fixed;
      inset: 0;
      z-index: 600;
      background: #000;
      color: #fff;
      display: flex;
      flex-direction: column;
      user-select: none;
      -webkit-user-select: none
    }

    .avc-top {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 8px
    }

    .avc-title {
      font-size: 16px;
      font-weight: 600
    }

    .avc-btn {
      border: none;
      background: none;
      color: #fff;
      font-size: 16px;
      padding: 8px 14px;
      cursor: pointer
    }

    .avc-btn.avc-ok {
      background: var(--p, #ff4d6d);
      border-radius: 18px;
      font-weight: 600
    }

    .avc-btn:disabled {
      opacity: .5
    }

    .avc-stage {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      touch-action: none
    }

    .avc-img {
      position: absolute;
      left: 0;
      top: 0;
      max-width: none;
      transform-origin: 0 0;
      pointer-events: none;
      will-change: transform
    }

    .avc-frame {
      position: absolute;
      border: 2px solid #fff;
      box-sizing: border-box;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6);
      pointer-events: none
    }

    .sec-panel {
      background: color-mix(in srgb, var(--bd) 25%, transparent);
      border-radius: 10px;
      padding: 12px
    }

    .sec-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px
    }

    .sec-email {
      flex: 1;
      min-width: 0;
      word-break: break-all;
      color: var(--tx)
    }

    .sk {
      background: linear-gradient(90deg, color-mix(in srgb, var(--bd) 55%, transparent) 25%, color-mix(in srgb, var(--bd) 25%, transparent) 50%, color-mix(in srgb, var(--bd) 55%, transparent) 75%);
      background-size: 200% 100%;
      animation: skShimmer 1.3s linear infinite;
      border-radius: 6px
    }

    @keyframes skShimmer {
      from {
        background-position: 200% 0
      }

      to {
        background-position: -200% 0
      }
    }

    .sk-line {
      height: 12px;
      margin-top: 10px
    }

    .sk-row {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .sk-av {
      width: 38px;
      height: 38px;
      border-radius: 50%
    }

    .pub-title {
      text-align: center;
      font-weight: 600;
      margin: 4px 0 12px
    }

    .pub-row {
      display: flex;
      gap: 10px;
      align-items: flex-start
    }

    .pub-row video {
      width: 96px;
      height: 128px;
      object-fit: cover;
      background: #000;
      border-radius: 8px;
      flex-shrink: 0
    }

    .pub-row textarea {
      flex: 1;
      height: 128px;
      resize: none;
      padding: 8px;
      border: 1px solid var(--bd);
      border-radius: 8px;
      background: var(--bgi);
      color: var(--tx);
      font-size: 14px;
      font-family: inherit
    }

    .pub-prog {
      height: 6px;
      border-radius: 3px;
      background: var(--bgi);
      margin-top: 12px;
      overflow: hidden
    }

    .pub-prog i {
      display: block;
      height: 100%;
      background: var(--p);
      transition: width .2s
    }

    .pub-actions {
      display: flex;
      gap: 10px;
      margin-top: 14px
    }

    .pub-actions .btn {
      flex: 1
    }

    /* Bottom Navigation Bar */
    html {
      overscroll-behavior-y: contain
    }

    .ptr {
      position: fixed;
      top: calc(var(--hdr) + env(safe-area-inset-top, 0px));
      left: 0;
      right: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 46px;
      font-size: 13px;
      color: var(--txs);
      pointer-events: none
    }

    .ptr .ptr-ic {
      transition: transform .15s
    }

    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      /* sit lower: the home indicator only needs ~20px of the 34px inset */
      padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px));
      background: transparent;
      border-top: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%)
    }

    .bottom-nav-in {
      max-width: 640px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 56px
    }

    .tab-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 22px;
      padding: 4px 12px;
      position: relative;
      transition: transform .2s
    }

    .tab-btn:hover {
      transform: scale(1.1)
    }

    .tab-btn.active {
      color: var(--p)
    }

    .tab-btn .tab-badge {
      position: absolute;
      top: -2px;
      right: 2px;
      background: #e74c3c;
      color: #fff;
      font-size: 9px;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700
    }

    /* Inline red "1" badge next to settings / account-security entries */
    .pwd-badge-wrap {
      position: relative
    }

    .inline-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e74c3c;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 8px;
      margin-left: 6px;
      vertical-align: middle;
      line-height: 1
    }

    .pwd-sec-tip {
      font-size: 12.5px;
      color: var(--txs);
      line-height: 1.6;
      margin: 2px 2px 0
    }

    .tab-label {
      font-size: 10px;
      color: var(--txs);
      display: block;
      text-align: center;
      margin-top: 2px
    }

    .tab-btn.active .tab-label {
      color: var(--p)
    }

    /* centre "+" (all pages): filled accent pill, Xiaohongshu style; on the black video page it stays the plain white "+" */
    .tab-btn.tab-plus {
      background: var(--p);
      color: #fff;
      box-shadow: 0 2px 8px color-mix(in srgb, var(--p) 35%, transparent)
    }

    .tab-btn.tab-plus {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      width: 48px;
      height: 34px;
      line-height: 0;
      align-self: center;
      flex: 0 0 auto
    }

    .tab-btn.tab-plus .ic {
      display: block;
      margin: 0;
      vertical-align: middle
    }

    .bottom-nav.on-video .tab-btn.tab-plus {
      background: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
    }

    @keyframes fadeout {

      0%,
      70% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }
  
    /* iOS: never overflow horizontally and never auto-zoom when focusing a field (inputs must be >=16px) */
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      overflow-x: hidden;
      max-width: 100%
    }

    img,
    video,
    iframe,
    canvas {
      max-width: 100%
    }

    input,
    textarea,
    select {
      min-width: 0;
      max-width: 100%;
      font-size: 16px !important
    }

    input[type=checkbox],
    input[type=radio] {
      min-width: 0;
      max-width: none
    }

    /* ===== Pure-white theme: no pink anywhere. Accent = black. Accent-FILLED controls become white with a thin dark border and black
       text (so they stay visible on white); active tab/nav/brand text use black via --p; small indicators (dots, badges, progress) stay solid dark. ===== */
    [data-theme="purewhite"] .btn-p,
    [data-theme="purewhite"] .btn-resolve,
    [data-theme="purewhite"] .avatar-btn,
    [data-theme="purewhite"] .topic-tab.active,
    [data-theme="purewhite"] .profile-av,
    [data-theme="purewhite"] .comment-send,
    [data-theme="purewhite"] .compose-type button.active,
    [data-theme="purewhite"] .chat-mine,
    [data-theme="purewhite"] .emoji-tab.active,
    [data-theme="purewhite"] .call-av,
    [data-theme="purewhite"] .call-pill-av,
    [data-theme="purewhite"] .chat-send-btn,
    [data-theme="purewhite"] .update-banner,
    [data-theme="purewhite"] .btn-follow.not-following,
    [data-theme="purewhite"] .tab-plus,
    [data-theme="purewhite"] .cmp-seg button.on,
    [data-theme="purewhite"] .vis-ck.on,
    [data-theme="purewhite"] .pp-chip.on,
    [data-theme="purewhite"] .pp-publish,
    [data-theme="purewhite"] .fx-go,
    [data-theme="purewhite"] .aa-go,
    [data-theme="purewhite"] .fx-chip.hit,
    [data-theme="purewhite"] [style*="background:var(--p)"] {
      background: #fff !important;
      color: #111 !important;
      border: 1px solid #1a1a1a !important
    }

    [data-theme="purewhite"] .btn-p:hover,
    [data-theme="purewhite"] .btn-follow.not-following:hover {
      background: #f2f2f2 !important
    }

    [data-theme="purewhite"] .btn-p:disabled,
    [data-theme="purewhite"] .pp-publish:disabled {
      color: #8a8a8a !important;
      border-color: #c8c8c8 !important
    }

    [data-theme="purewhite"] .pp-publish .pp-fill {
      background: #e2e2e2
    }

    [data-theme="purewhite"] .update-banner {
      border-width: 0 0 1px 0 !important
    }

    /* the bottom bar on the dark video page keeps a light active colour */
    [data-theme="purewhite"] .bottom-nav.on-video .tab-btn.active,
    [data-theme="purewhite"] .bottom-nav.on-video .tab-btn.active .tab-label {
      color: #fff
    }

    /* HERLAND line-logo loader (replaces skeletons / spinners on main pages) */
    .hl-loader {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 46vh;
      width: 100%
    }

    .hl-loader img {
      height: 84px;
      width: auto;
      display: block
    }

    .hl-loader-sm {
      min-height: 0;
      padding: 18px 0
    }

    .hl-loader-sm img {
      height: 56px
    }

    .hl-loader-v {
      min-height: 0
    }

    /* ===== 匿名日记 (anonymous diary) ===== */
    .anon-pick { background: linear-gradient(135deg, color-mix(in srgb, var(--pl) 55%, transparent), color-mix(in srgb, var(--p) 14%, transparent)) !important; color: var(--p) !important; font-weight: 600 }
    .post-avatar-sm {
      width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; background: var(--pl); font-size: 11px; color: var(--tx)
    }
    .post-avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }
    .post-avatar.anon-av, .post-avatar-sm.anon-av, .notif-av.anon-av {
      font-size: 0; cursor: default; overflow: hidden; padding: 0;
      background: #f7f1e7;
      box-shadow: 0 0 0 1px color-mix(in srgb, #c49656 35%, transparent)
    }
    .notif-avs .notif-av.anon-av { cursor: default }
    .post-avatar.anon-av img.anon-glyph, .post-avatar-sm.anon-av img.anon-glyph,
    .notif-av.anon-av img.anon-glyph,
    .anon-id .anon-big img.anon-glyph {
      width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block
    }
    .anon-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 0 7px; line-height: 16px; border-radius: 9px; background: var(--p); color: #fff; margin-left: 6px; vertical-align: 1px }
    .anon-real { font-size: 11px; color: var(--txs); margin-top: 1px }
    .anon-banner { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txs); margin-bottom: 10px; line-height: 1.4 }
    .anon-banner b { color: var(--p); font-size: 15px }
    .anon-id { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--pl) 28%, var(--bgi)); border: 1px dashed color-mix(in srgb, var(--p) 45%, transparent); margin-bottom: 10px }
    .anon-id .anon-big {
      width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 0; flex-shrink: 0; overflow: hidden; padding: 0; background: #f7f1e7;
      box-shadow: 0 0 0 2px var(--bgc), 0 0 0 3px color-mix(in srgb, #c49656 45%, transparent)
    }
    [data-theme="dark"] .post-avatar.anon-av,
    [data-theme="dark"] .post-avatar-sm.anon-av,
    [data-theme="dark"] .notif-av.anon-av,
    [data-theme="dark"] .anon-id .anon-big {
      background: #2a241c;
      box-shadow: 0 0 0 1px color-mix(in srgb, #c49656 40%, transparent)
    }
    [data-theme="dark"] .anon-id .anon-big {
      box-shadow: 0 0 0 2px var(--bgc), 0 0 0 3px color-mix(in srgb, #c49656 45%, transparent)
    }
    .anon-id .nm { flex: 1; min-width: 0 }
    .anon-id .nm small { display: block; color: var(--txs); font-size: 11px }
    .anon-id .nm b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .anon-id .nm input {
      width: 100%; margin: 0; padding: 2px 0 3px; font-size: 15px; font-weight: 700; font-family: inherit;
      color: inherit; background: transparent; border: none; border-radius: 0;
      border-bottom: 1px dashed color-mix(in srgb, var(--p) 55%, transparent)
    }
    .anon-id .nm input:focus { outline: none; border-bottom-color: var(--p) }
    .anon-id { flex-wrap: wrap }
    .anon-avs { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .anon-avopt { width: 36px; height: 36px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background: #f7f1e7; cursor: pointer; -webkit-appearance: none; appearance: none; }
    .anon-avopt.on { border-color: #c49656 }
    .anon-avopt picture, .anon-avopt img { width: 100%; height: 100%; display: block; object-fit: cover }
    .post-avatar.anon-av > picture, .post-avatar-sm.anon-av > picture, .notif-av.anon-av > picture, .anon-id .anon-big > picture { display: block; width: 100%; height: 100% }
    .anon-id .acts { display: flex; flex-direction: column; gap: 6px }
    .anon-id .acts .btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; justify-content: center }
    .anon-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px 5px 12px; border-radius: 16px; background: color-mix(in srgb, var(--pl) 40%, transparent); color: var(--p); border: 1px solid color-mix(in srgb, var(--p) 40%, transparent); cursor: pointer }
    .anon-note { font-size: 11px; color: var(--txs); margin-top: 8px }

    /* ===== Chat details / per-chat prefs / message selection ===== */
    .chat-set-btn {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--tx);
      padding: 6px 8px;
      cursor: pointer;
      display: flex;
      align-items: center
    }

    .chat-set-btn .ic {
      width: 24px;
      height: 24px;
      fill: currentColor;
      stroke: currentColor
    }

    .ci-ov {
      position: fixed;
      inset: 0;
      z-index: 270;
      background: var(--bg);
      color: var(--tx);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    .ci-in {
      max-width: 640px;
      margin: 0 auto
    }

    .ci-top {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding-top: env(safe-area-inset-top, 0px);
      background: var(--bg);
      border-bottom: 1px solid var(--bd);
      font-weight: 700;
      font-size: 17px
    }

    .ci-back {
      position: absolute;
      left: 6px;
      bottom: 6px;
      background: none;
      border: none;
      color: var(--tx);
      padding: 8px;
      display: flex;
      cursor: pointer
    }

    .ci-people {
      display: flex;
      gap: 16px;
      padding: 18px 16px;
      background: var(--bgc);
      border-bottom: 1px solid var(--bd)
    }

    .ci-person {
      width: 68px;
      text-align: center;
      cursor: pointer;
      font-size: 12px;
      color: var(--txs)
    }

    .ci-person .conv-av {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      margin: 0 auto 6px;
      font-size: 22px
    }

    .ci-person span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .ci-gap {
      height: 10px
    }

    .ci-card {
      background: var(--bgc);
      border-top: 1px solid var(--bd);
      border-bottom: 1px solid var(--bd)
    }

    .ci-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      background: none;
      border: none;
      border-bottom: 1px solid var(--bd);
      color: var(--tx);
      font-size: 16px;
      text-align: left;
      cursor: pointer
    }

    .ci-card>.ci-row:last-child {
      border-bottom: none
    }

    .ci-row small {
      display: block;
      font-size: 12px;
      color: var(--txs);
      margin-top: 3px;
      line-height: 1.35
    }

    .ci-chev {
      color: var(--txs);
      font-size: 20px;
      line-height: 1
    }

    .ci-sw {
      flex-shrink: 0;
      width: 48px;
      height: 28px;
      border-radius: 14px;
      border: none;
      padding: 0;
      position: relative;
      background: color-mix(in srgb, var(--tx) 22%, var(--bgc));
      transition: background .2s;
      cursor: pointer
    }

    .ci-sw::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      transition: transform .2s, background .2s
    }

    .ci-sw.on {
      background: var(--p)
    }

    .ci-sw.on::after {
      transform: translateX(20px);
      background: var(--bgc)
    }

    .ci-search {
      display: flex;
      gap: 8px;
      padding: 10px 12px;
      background: var(--bgc);
      border-bottom: 1px solid var(--bd)
    }

    .ci-search input {
      flex: 1;
      font-size: 16px;
      padding: 9px 12px;
      border-radius: 18px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      color: var(--tx);
      min-width: 0
    }

    .ci-res {
      padding: 12px 16px;
      border-bottom: 1px solid var(--bd);
      background: var(--bgc);
      cursor: pointer
    }

    .ci-res b {
      font-size: 13px;
      color: var(--txs);
      font-weight: 500
    }

    .ci-res .ci-t {
      float: right;
      font-size: 12px;
      color: var(--txs)
    }

    .ci-res p {
      margin-top: 4px;
      font-size: 15px;
      word-break: break-word
    }

    .ci-res mark {
      background: none;
      color: var(--p);
      font-weight: 700
    }

    .ci-empty {
      text-align: center;
      padding: 40px 16px;
      color: var(--txs)
    }

    .ci-bg-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 14px 16px
    }

    .ci-bgsw {
      aspect-ratio: 3/4;
      border-radius: 10px;
      border: 2px solid var(--bd);
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: var(--txs);
      cursor: pointer;
      padding: 0
    }

    .ci-bgsw.on {
      border-color: var(--p);
      box-shadow: 0 0 0 2px var(--p)
    }

    /* custom chat background: one fixed layer from just under the chat header to the bottom of the screen (the opaque input bar sits on top),
       so it always fills the message area, never scrolls with the messages and ignores how many messages there are */
    .chat-bg-layer {
      position: fixed;
      inset: var(--cbt, 127px) 0 0 0;
      z-index: 0;
      pointer-events: none;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat
    }

    .chat-bg-layer.img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .10)
    }

    .chat-msgs.chat-hasbg {
      position: relative;
      z-index: 1;
      background: transparent
    }

    /* system texts get a small translucent pill so they stay readable on any photo/colour */
    .chat-msgs.chat-hasbg .chat-time,
    .chat-msgs.chat-hasbg .rc-note,
    .chat-msgs.chat-hasbg .stranger-hint {
      display: block;
      width: fit-content;
      max-width: 86%;
      margin-left: auto;
      margin-right: auto;
      padding: 3px 12px;
      border-radius: 12px;
      background: rgba(0, 0, 0, .38);
      color: #fff;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .chat-msgs.chat-hasbg .chat-time {
      margin-bottom: 12px
    }

    .chat-msgs.chat-hasbg .chat-theirs {
      box-shadow: 0 1px 2px rgba(0, 0, 0, .12)
    }

    .ci-bgsw.img-on span {
      background: rgba(0, 0, 0, .45);
      color: #fff;
      border-radius: 8px;
      padding: 2px 6px
    }

    .chat-msgs.selmode .lp-able {
      cursor: pointer
    }

    .lp-able.sel-picked {
      outline: 2px solid var(--p);
      outline-offset: 2px;
      position: relative
    }

    .lp-able.sel-picked::after {
      content: '\2713';
      position: absolute;
      top: -8px;
      right: -8px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--p);
      color: var(--bgc);
      font-size: 11px;
      line-height: 18px;
      text-align: center;
      font-weight: 700
    }

    .sel-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 150;
      display: flex;
      gap: 10px;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
      background: var(--bgc);
      border-top: 1px solid var(--bd)
    }

    .sel-bar button {
      flex: 1;
      padding: 11px;
      border-radius: 10px;
      border: 1px solid var(--bd);
      background: var(--bgi);
      color: var(--tx);
      font-size: 15px
    }

    .sel-bar button.dng {
      background: #e74c3c;
      border-color: #e74c3c;
      color: #fff
    }

    .sel-bar button:disabled {
      opacity: .45
    }

    .conv-swipe.pinned .conv-item {
      background: color-mix(in srgb, var(--pl) 22%, var(--bg))
    }

    .conv-pin {
      width: 12px;
      height: 12px;
      margin-left: 5px;
      vertical-align: -1px;
      color: var(--txs)
    }

    .conv-unread.muted {
      background: #9a9a9a;
      min-width: 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      font-size: 0
    }

    /* ===== 反馈中心 (official account) ===== */
    .fbc-body {
      white-space: pre-wrap;
      word-break: break-word;
      background: var(--bgi);
      border-radius: 8px;
      padding: 8px 10px;
      margin: 6px 0;
      font-size: 14px;
      line-height: 1.5
    }

    .fbc-reply-box {
      border-left: 3px solid #27ae60;
      background: color-mix(in srgb, #27ae60 8%, transparent);
      border-radius: 6px;
      padding: 6px 10px;
      margin: 6px 0;
      font-size: 13px;
      white-space: pre-wrap;
      word-break: break-word
    }

    .fbc-hov { display: none; margin-left: auto }
    @media (hover: hover) and (pointer: fine) { .rc-card:hover .fbc-hov { display: inline-flex } }

    .fbc-edit textarea {
      width: 100%;
      min-height: 90px;
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 8px 10px;
      background: var(--bgc);
      color: var(--tx);
      font-size: 16px;
      resize: vertical;
      margin: 6px 0
    }

    /* ===== Bottom nav follows the theme (no fixed/system blue). Inactive = muted tone of the theme text colour,
       active = theme accent; white theme = black/grey only; dark theme = white/grey only. ===== */
    :root {
      --nav-bg: var(--bgc);
      --nav-in: color-mix(in srgb, var(--tx) 66%, var(--bgc));
      --nav-ac: var(--p);
      --nav-bd: color-mix(in srgb, var(--bd) 50%, transparent)
    }

    [data-theme="dark"] {
      --nav-bg: #121212;
      --nav-in: #8c8c8c;
      --nav-ac: #fff;
      --nav-bd: #2a2a2a
    }

    [data-theme="purewhite"] {
      --nav-bg: #fff;
      --nav-in: #767676;
      --nav-ac: #1a1a1a;
      --nav-bd: #e6e6e6
    }

    .bottom-nav {
      background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
      border-top-color: var(--nav-bd)
    }

    .tab-btn,
    .tab-label {
      color: var(--nav-in)
    }

    .tab-btn.active,
    .tab-btn.active .tab-label {
      color: var(--nav-ac)
    }

    .tab-btn.active .nav-ic {
      --ic-cut: var(--nav-bg)
    }

    /* over the black video page the active item is white in the dark / white themes */
    [data-theme="dark"] .bottom-nav.on-video .tab-btn.active,
    [data-theme="dark"] .bottom-nav.on-video .tab-btn.active .tab-label {
      color: #fff
    }

    /* ===== Dark theme: neutral greys only (no pink). Accent = white/light grey for text, links, active tab/nav and brand text;
       accent-FILLED controls become dark surfaces with a thin light-grey border and white text. Semantic red (danger, badges) is kept. ===== */
    [data-theme="dark"] .btn-p,
    [data-theme="dark"] .btn-resolve,
    [data-theme="dark"] .avatar-btn,
    [data-theme="dark"] .topic-tab.active,
    [data-theme="dark"] .profile-av,
    [data-theme="dark"] .comment-send,
    [data-theme="dark"] .compose-type button.active,
    [data-theme="dark"] .chat-mine,
    [data-theme="dark"] .emoji-tab.active,
    [data-theme="dark"] .call-av,
    [data-theme="dark"] .call-pill-av,
    [data-theme="dark"] .chat-send-btn,
    [data-theme="dark"] .update-banner,
    [data-theme="dark"] .btn-follow.not-following,
    [data-theme="dark"] .tab-plus,
    [data-theme="dark"] .cmp-seg button.on,
    [data-theme="dark"] .vis-ck.on,
    [data-theme="dark"] .pp-chip.on,
    [data-theme="dark"] .cmp-topic-chip.on,
    [data-theme="dark"] .pp-publish,
    [data-theme="dark"] .avc-btn.avc-ok,
    [data-theme="dark"] .fx-go,
    [data-theme="dark"] .aa-go,
    [data-theme="dark"] .fx-chip.hit,
    [data-theme="dark"] [style*="background:var(--p)"] {
      background: #1c1c1c !important;
      color: #fff !important;
      border: 1px solid #8c8c8c !important
    }

    [data-theme="dark"] .btn-p:hover,
    [data-theme="dark"] .btn-follow.not-following:hover {
      background: #2a2a2a !important
    }

    [data-theme="dark"] .btn-p:disabled,
    [data-theme="dark"] .pp-publish:disabled {
      color: #7a7a7a !important;
      border-color: #444 !important
    }

    [data-theme="dark"] .pp-publish .pp-fill {
      background: #3a3a3a
    }

    [data-theme="dark"] .update-banner {
      border-width: 0 0 1px 0 !important
    }

    /* small badges that carry text: light chip with dark text (still clearly visible on dark) */
    [data-theme="dark"] .conv-unread,
    [data-theme="dark"] .img-preview .img-item button {
      background: #f2f2f2;
      color: #111
    }

    /* anon「匿名」chip: --p is near-white in dark theme → invert to dark chip + light text */
    [data-theme="dark"] .anon-tag {
      background: #111;
      color: #fff
    }

    /* logo images (rose-gold PNG) -> light grey on the dark theme */
    [data-theme="dark"] .logo-img,
    [data-theme="dark"] .hl-loader img {
      filter: none
    }

    /* ===== Composer tools / visibility ===== */
    .cmp-tools {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    .cmp-tool {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--border, #f0d6dd);
      background: #fff;
      color: var(--tx, #555);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
    }
    .cmp-tool.on {
      background: var(--p, #ec5d83);
      color: #fff;
      border-color: var(--p, #ec5d83);
    }
    .cmp-tool:disabled {
      opacity: .5;
    }
    .vis-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 12px;
    }
    .vis-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--tx, #555);
    }
    .vis-switch {
      display: inline-flex;
      border: 1px solid var(--border, #f0d6dd);
      border-radius: 999px;
      overflow: hidden;
    }
    .vis-switch button {
      border: 0;
      background: #fff;
      color: var(--tx, #555);
      font-size: 12px;
      padding: 6px 14px;
    }
    .vis-switch button.on {
      background: var(--p);
      color: #fff;
    }

    /* ===== Poll editor ===== */
    .poll-edit {
      margin-top: 10px;
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 12px;
      background: var(--bgc);
    }
    .poll-q-input {
      width: 100%;
      border: 0;
      border-bottom: 1px solid var(--bd);
      background: transparent;
      padding: 6px 2px;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .poll-opt-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
    }
    .poll-opt-row input {
      flex: 1;
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 13px;
      background: var(--bgc);
    }
    .poll-opt-x {
      border: 0;
      background: transparent;
      color: var(--txs, #999);
      font-size: 18px;
      line-height: 1;
      width: 26px;
    }
    .poll-add-btn {
      margin-top: 10px;
    }

    /* ===== Poll display ===== */
    .poll-box {
      margin: 10px 0 4px;
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 12px;
      background: var(--bgc);
    }
    .poll-question {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .poll-choice {
      display: block;
      width: 100%;
      text-align: left;
      border: 1px solid var(--bd);
      background: var(--bgc);
      border-radius: 10px;
      padding: 9px 12px;
      margin-top: 8px;
      font-size: 13px;
      color: var(--tx, #444);
    }
    .poll-choice:active {
      background: color-mix(in srgb, var(--p) 8%, var(--bgc));
    }
    .poll-result {
      position: relative;
      margin-top: 8px;
      border-radius: 10px;
      min-height: 36px;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: color-mix(in srgb, var(--p) 8%, var(--bgc));
    }
    .poll-bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: color-mix(in srgb, var(--p) 20%, transparent);
      border-radius: 10px;
      transition: width .3s ease;
    }
    .poll-bar.mine {
      background: var(--p);
      opacity: .35;
    }
    .poll-opt-text {
      position: relative;
      flex: 1;
      padding: 8px 12px;
      font-size: 13px;
      color: var(--tx, #444);
    }
    .poll-pct {
      position: relative;
      padding-right: 12px;
      font-size: 12px;
      color: var(--txs, #888);
      white-space: nowrap;
    }
    .poll-meta {
      margin-top: 8px;
      font-size: 12px;
      color: var(--txs, #999);
    }
  
    /* study room v2 (milky-white) */
    .study-pg.sv2 .sv-hero-i { position: relative; flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 0 clamp(12px,2.6vh,24px) }
    .study-pg.sv2 .sv-hero { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: clamp(6px,2.2vh,20px) 0 clamp(10px,2.4vh,22px) }
    .study-pg.sv2 .sv-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 11px; font-size: 12px; letter-spacing: 2px; background: var(--bgc); color: var(--tx); border: 1px solid var(--bd); box-shadow: 0 1px 2px color-mix(in srgb, var(--tx) 6%, transparent) }
    .study-pg.sv2 .sv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tx); opacity: .55; animation: sv-br 2.4s ease-in-out infinite }
    .study-pg.sv2.pause .sv-state, .study-pg.sv2 .sv-idle-st { color: var(--txs) }
    .study-pg.sv2.pause .sv-dot, .study-pg.sv2 .sv-idle-st .sv-dot { animation: none; opacity: .3 }
    @keyframes sv-br { 50% { opacity: .15 } }
    .study-pg.sv2 .sv-num { font-variant-numeric: tabular-nums; font-size: clamp(52px,9.4vh,72px); font-weight: 300; letter-spacing: 2px; line-height: 1.1; color: var(--tx); margin-top: clamp(6px,1.4vh,12px); transition: color .3s }
    .study-pg.sv2.pause .sv-num { color: var(--txs) }
    .study-pg.sv2 .sv-num.sv-ghost { color: var(--bgi) }
    .study-pg.sv2 .sv-online { font-size: 12px; color: var(--txs); letter-spacing: 1px; margin-top: 2px }
    .study-pg.sv2 .sv-go { margin-top: clamp(12px,2.4vh,22px); height: 52px; min-width: 200px; padding: 0 28px; border-radius: 26px; background: var(--bgc); color: var(--tx); border: 1px solid var(--bd); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px color-mix(in srgb, var(--tx) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--tx) 8%, transparent); cursor: pointer; transition: transform .15s }
    .study-pg.sv2 .sv-go:active { transform: scale(.97) }
    .study-pg.sv2 .sv-go img { width: 24px; height: 24px; filter: brightness(0) saturate(100%) invert(14%) sepia(9%) saturate(900%) hue-rotate(350deg) }
    .study-pg.sv2 .sv-plan { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; width: min(100%, 420px); margin: 0 auto; box-sizing: border-box; background: var(--bgc); border: 1px solid var(--bd); border-radius: 16px; padding: 12px 16px 6px }
    .study-pg.sv2 .sv-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bd) }
    .study-pg.sv2 .sv-pl { flex-shrink: 0; font-size: 11px; letter-spacing: 2px; background: var(--bgc); color: var(--tx); border: 1px solid var(--bd); border-radius: 6px; padding: 1px 7px; box-shadow: 0 1px 2px color-mix(in srgb, var(--tx) 6%, transparent) }
    .study-pg.sv2 .sv-ti { flex: 1; min-width: 0; display: block; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--p); outline: none; padding: 0 }
    .study-pg.sv2 .sv-ti::placeholder { color: var(--txs); font-weight: 500 }
    .study-pg.sv2 .sv-pt { min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--p); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .study-pg.sv2 .sv-pm { flex-shrink: 0; font-size: 12px; color: var(--txs); display: flex; gap: 8px; align-items: center }
    .study-pg.sv2 .sv-pm b { font-weight: 600; color: var(--p); font-variant-numeric: tabular-nums }
    .study-pg.sv2 .sv-lock { display: inline-flex; align-items: center; gap: 3px }
    .study-pg.sv2 .sv-lock svg { width: 11px; height: 11px }
    .study-pg.sv2 .sv-rows { flex: 0 1 auto; min-height: 0; overflow: auto }
    .study-pg.sv2 .sv-row { display: flex; align-items: center; gap: 12px; min-height: 44px }
    .study-pg.sv2 .sv-row + .sv-row { border-top: 1px solid var(--bd) }
    .study-pg.sv2 .sv-box { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--bd); background: var(--bgc); padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer }
    .study-pg.sv2 .sv-box svg { width: 12px; height: 12px; display: block }
    .study-pg.sv2 .sv-box.on { background: var(--tx); border-color: var(--tx) }
    .study-pg.sv2 .sv-row input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--tx); outline: none; padding: 10px 0 }
    .study-pg.sv2 .sv-row input::placeholder, .study-pg.sv2 .sv-add input::placeholder { color: var(--txs) }
    .study-pg.sv2 .sv-txt { flex: 1; min-width: 0; font-size: 15px; color: var(--tx); word-break: break-word; transition: color .2s }
    .study-pg.sv2 .sv-txt.done { color: var(--txs); text-decoration: line-through }
    .study-pg.sv2 .sv-x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--txs); font-size: 16px; cursor: pointer; flex-shrink: 0; padding: 0 }
    .study-pg.sv2 .sv-empty { font-size: 12px; color: var(--txs); text-align: center; padding: 10px 0 6px }
    .study-pg.sv2 .sv-add { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--bd) }
    .study-pg.sv2 .sv-add.first { border-top: 0 }
    .study-pg.sv2 .sv-add input { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; border: 1px solid var(--bd); border-radius: 20px; background: var(--bgc); padding: 0 14px; font: inherit; font-size: 14px; color: var(--tx); outline: none }
    .study-pg.sv2 .sv-add button { height: 40px; padding: 0 16px; border-radius: 20px; background: var(--bgc); color: var(--tx); border: 1px solid var(--bd); box-shadow: 0 1px 2px color-mix(in srgb, var(--tx) 6%, transparent); font: inherit; font-size: 14px; letter-spacing: 1px; cursor: pointer }
    .study-pg.sv2 .sv-add button:disabled { color: var(--txs); box-shadow: none; cursor: default }
    .study-pg.sv2 .study-end { background: var(--bgc); color: var(--tx); border: 1px solid var(--bd); box-shadow: 0 1px 2px color-mix(in srgb, var(--tx) 6%, transparent); padding: 5px 11px }
    .study-pg.sv2 .sv-dm { flex: 1 1 auto; min-height: 64px; max-height: none; margin-top: 10px }
    .study-pg.sv2 .sv-dm .study-dm-log { padding: 8px 4px 4px }
    .study-pg.sv2 .sv-dm form { display: flex; gap: 8px; align-items: center; height: 44px; box-sizing: border-box; padding: 0 4px 0 14px; margin-top: 0; border: 1px solid var(--bd); border-radius: 22px; background: color-mix(in srgb, var(--bgc) 85%, transparent) }
    .study-pg.sv2 .sv-dm input { padding: 0; font-size: 16px; color: var(--tx) }
    .study-pg.sv2 .sv-dm input::placeholder { color: var(--txs) }
    .study-pg.sv2 .sv-dm form button { height: 34px; padding: 0 14px; border-radius: 17px; background: var(--bgc); color: var(--txs); border: 1px solid var(--bd); font: inherit; font-size: 13px; letter-spacing: 1px; opacity: 1 }
    .study-pg.sv2 .sv-dm form button.on { color: var(--tx); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--tx) 10%, transparent) }
    .study-pg.sv2 .sv-ctl { flex-shrink: 0; display: flex; gap: 10px; margin-top: 10px }
    .study-pg.sv2 .sv-cb { flex: 1; height: 46px; border-radius: 23px; font: inherit; font-size: 15px; letter-spacing: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--bgc); color: var(--txs); border: 1px solid var(--bd); box-shadow: 0 1px 2px color-mix(in srgb, var(--tx) 6%, transparent) }
    .study-pg.sv2 .sv-cb svg { width: 14px; height: 14px }
    .study-pg.sv2 .sv-cb.pri { color: var(--tx); font-weight: 700; box-shadow: 0 6px 16px color-mix(in srgb, var(--tx) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--tx) 8%, transparent) }
    .study-pg.sv2 .sv-cb.end { flex: 0 0 38% }

/* welcome 注册/登录: milky white, identical text */
.welcome .btn-p.wl-btn,.welcome .btn-p.wl-btn:hover,.welcome .wl-btn2,.welcome .wl-btn2:hover{background:#FFFDF8 !important;border:1px solid #ece3d6 !important;color:#2A2622 !important;font-family:inherit !important;font-size:16px !important;font-weight:600 !important;letter-spacing:2px !important}
.welcome .btn-p.wl-btn,.welcome .btn-p.wl-btn:hover{box-shadow:0 6px 18px rgba(90,70,45,.12),0 1px 2px rgba(90,70,45,.08) !important}
.welcome .wl-btn2,.welcome .wl-btn2:hover{box-shadow:0 1px 2px rgba(90,70,45,.06) !important}
/* Android APK download sheet */
.apks-mask{position:fixed;inset:0;z-index:9990;background:rgba(42,38,34,.32);animation:apksFi .25s ease}
.apks{position:fixed;left:0;right:0;bottom:0;z-index:9991;background:#fefcf8;border-radius:22px 22px 0 0;border-top:1px solid #efe4d4;padding:10px 22px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(90,70,45,.12);color:#2A2622;animation:apksUp .32s cubic-bezier(.22,1,.3,1)}
.apks-grab{width:36px;height:4px;border-radius:2px;background:#e8ddcf;margin:0 auto 18px}
.apks-hd{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.apks-ico{width:56px;height:56px;border-radius:14px;background:#FFFDF8;border:1px solid #ece3d6;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(90,70,45,.08);flex-shrink:0}.apks-ico img{width:38px;height:38px;border-radius:9px}
.apks-tt b{display:block;font-size:18px;letter-spacing:1px}.apks-tt small{display:block;margin-top:4px;font-size:13px;color:#8a7f73}
.apks-wx{font-size:14px;color:#6b5f52;line-height:1.6;margin-bottom:6px}
.apks-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:25px;font:inherit;font-size:16px;letter-spacing:3px;text-decoration:none;cursor:pointer;background:#FFFDF8;border:1px solid #ece3d6;color:#2A2622}
.apks-pri{font-weight:700;box-shadow:0 6px 18px rgba(90,70,45,.12),0 1px 2px rgba(90,70,45,.08)}.apks-pri svg{width:18px;height:18px}
.apks-sec{margin-top:10px;border-color:transparent;background:none;color:#8a7f73;font-size:14px;height:40px;letter-spacing:2px}
@keyframes apksFi{from{opacity:0}}@keyframes apksUp{from{transform:translateY(100%)}}
/* study room fixes: count under the pill (fixed line height = no jump); pause row stays put under the keyboard */
.study-pg.sv2 .sv-online{display:block;height:18px;line-height:18px;margin-top:6px;font-variant-numeric:tabular-nums}
.study-pg.sv2 .sv-online+.sv-num{margin-top:clamp(2px,.8vh,8px)}
html.study-kb .study-pg.sv2 .sv-ctl{position:absolute;left:16px;right:16px;bottom:calc(10px - var(--study-kb,0px));margin-top:0}
.study-pg.sv2 .sv-dm .study-dm-log{overflow-anchor:none;contain:content}
/* study buttons = same style as the food/AA tool buttons (.fx-go primary, .btn-o secondary), incl. purewhite/dark overrides */
.study-pg.sv2 .sv-go,.study-pg.sv2 .sv-cb.pri{background:var(--p);color:#fff;border:none;border-radius:25px;font-weight:700;letter-spacing:4px;box-shadow:0 6px 18px color-mix(in srgb, var(--p) 35%, transparent)}
.study-pg.sv2 .sv-go{height:50px;font-size:17px}
.study-pg.sv2 .sv-go img{filter:brightness(0) invert(1)}
.study-pg.sv2 .sv-cb:not(.pri){background:transparent;border:1px solid var(--bd);color:var(--tx);box-shadow:none}
[data-theme="purewhite"] .study-pg.sv2 .sv-go,[data-theme="purewhite"] .study-pg.sv2 .sv-cb.pri{background:#fff !important;color:#111 !important;border:1px solid #1a1a1a !important}
[data-theme="purewhite"] .study-pg.sv2 .sv-go img{filter:brightness(0)}
[data-theme="dark"] .study-pg.sv2 .sv-go,[data-theme="dark"] .study-pg.sv2 .sv-cb.pri{background:#1c1c1c !important;color:#fff !important;border:1px solid #8c8c8c !important}
.study-pg.sv2 .sv-cb:not(.pri){font-weight:500}
.study-pg.sv2 .sv-go:active{transform:none}

/* Appeal result page: same cards, radii and the report-center red, in light and dark themes. */
.apl-page { padding-top: 8px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.apl-page .back-bar { position: relative; top: auto; margin-bottom: 14px; }
.apl-page .back-btn { min-height: 44px; font-size: 16px; touch-action: manipulation; }
.apl-page .back-bar > span { font-size: 18px; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; }
.apl-card { padding: 16px; margin-bottom: 12px; }
.apl-empty { text-align: center; color: var(--txs); }
.apl-top { display: flex; gap: 12px; align-items: flex-start; }
.apl-head { min-width: 0; flex: 1; }
.apl-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(229, 72, 77, .14); background: color-mix(in srgb, #e5484d 14%, var(--bgc)); color: #e5484d; }
.apl-ico .ic { width: 22px; height: 22px; }
.apl-status.is-restored .apl-ico { background: rgba(30, 132, 73, .16); background: color-mix(in srgb, #1e8449 16%, var(--bgc)); color: #1e8449; }
.apl-status.is-pending .apl-ico { background: rgba(185, 119, 14, .16); background: color-mix(in srgb, #b9770e 16%, var(--bgc)); color: #b9770e; }
.apl-status.is-expired .apl-ico, .apl-status.is-unknown .apl-ico { background: var(--bgi); color: var(--txs); }
.apl-kicker { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #e5484d; }
.apl-status.is-restored .apl-kicker { color: #1e8449; }
.apl-status.is-pending .apl-kicker { color: #b9770e; }
.apl-status.is-expired .apl-kicker, .apl-status.is-unknown .apl-kicker { color: var(--txs); }
.apl-status h1 { margin: 2px 0 0; font-size: 18px; line-height: 1.35; font-weight: 700; }
.apl-lead { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--tx); }
.apl-rows { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--bd); }
.apl-rows .rc-row { padding: 8px 0; font-size: 14px; align-items: flex-start; }
.apl-rows .rc-row b { font-weight: 600; }
.apl-preview { background: var(--bgi); }
.apl-preview .rc-tl { font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-bottom: 10px; }
.apl-preview .rc-tb { margin-top: 0; }
.apl-kind { font-size: 12px; color: var(--txs); margin-bottom: 4px; }
.apl-prev-tx { min-width: 0; flex: 1; }
.apl-thumb { width: 64px; height: 64px; border-radius: 10px; flex: none; background: var(--bgc); color: var(--txs); display: flex; align-items: center; justify-content: center; border: 1px solid var(--bd); }
.apl-thumb .ic { width: 26px; height: 26px; }
.apl-preview .rc-text { font-size: 15px; line-height: 1.5; color: var(--tx); -webkit-line-clamp: 4; }
.apl-preview .rc-gone { margin-top: 0; }
.apl-hint { margin: 0 0 12px; text-align: center; font-size: 14px; line-height: 1.55; color: var(--txs); }
.apl-go { width: 100%; min-height: 48px; font-size: 17px; font-weight: 700; border-radius: 12px; background: #fff; color: #1a1a1a; border: 1px solid #d4d4d4; appearance: none; -webkit-appearance: none; touch-action: manipulation; }
.apl-go:disabled { opacity: .45; }
[data-theme="dark"] .apl-go { background: #fff; color: #1a1a1a; border-color: #8c8c8c; }
.apl-lab { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.apl-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 128px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd); background: var(--bgi); color: var(--tx); font-size: 16px; line-height: 1.5; font-family: inherit; }
.apl-ta:focus { outline: none; border-color: #1a1a1a; }
[data-theme="dark"] .apl-ta:focus { border-color: #f2f2f2; }
.apl-count { font-size: 12px; color: var(--txs); text-align: right; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.apl-block { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bgi); }
.apl-block .rc-tl { font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--txs); }
.apl-block p { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.apl-status.is-rejected .apl-block.is-note { background: rgba(229, 72, 77, .10); background: color-mix(in srgb, #e5484d 10%, var(--bgc)); }
.apl-status.is-rejected .apl-block.is-note .rc-tl { color: #e5484d; }
.apl-status.is-rejected .apl-block.is-note p { font-size: 16px; font-weight: 600; }
.apl-status.is-restored .apl-block { background: rgba(30, 132, 73, .10); background: color-mix(in srgb, #1e8449 10%, var(--bgc)); }
.apl-status.is-pending .apl-block { background: rgba(185, 119, 14, .10); background: color-mix(in srgb, #b9770e 10%, var(--bgc)); }
[data-theme="dark"] .apl-status.is-restored .apl-kicker,
[data-theme="dark"] .apl-status.is-restored .apl-ico { color: #3ddc84; }
[data-theme="dark"] .apl-status.is-pending .apl-kicker,
[data-theme="dark"] .apl-status.is-pending .apl-ico { color: #f0b429; }
@media (max-width: 360px) {
  .apl-page { padding-left: 12px; padding-right: 12px; }
  .apl-status h1 { font-size: 17px; }
  .apl-card { padding: 14px; }
}

    /* video publish page: composer visibility + poll controls on the dark screen */
    .pp-opts { --bd: #333; --bgi: #1f1f1f; --bgc: #1a1a1a; --tx: #fff; --txs: #aaa; color: #fff; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; width: 100% }
    .pp-opts .cmp-opt-row { color: #fff }
    .pp-opts .cmp-poll input, .pp-opts .cmp-poll select { background: #1f1f1f; color: #fff; border-color: #333 }
    .vis-bg.vis-pub { z-index: 340 }
    .cm-poll { margin: 2px 0 12px }
    .pp-opts .cmp-opt-row.on .cmp-opt-lbl, .pp-opts .cmp-opt-ic { color: #fff }

    /* video drafts box (Douyin-style grid) */
    .v-tab-drafts { margin-right: 4px }
    .vd-page { position: fixed; inset: 0; z-index: 330; background: #000; color: #fff; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px) }
    .vd-top { flex-shrink: 0; display: flex; align-items: center; height: 52px; padding: 0 8px }
    .vd-back { width: 44px; height: 44px; border: none; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer }
    .vd-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600 }
    .vd-mgr { min-width: 44px; border: none; background: transparent; color: #fff; font-size: 15px; padding: 8px; cursor: pointer }
    .vd-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; align-content: start; -webkit-overflow-scrolling: touch }
    .vd-cell { position: relative; aspect-ratio: 3 / 4; background: #1a1a1a; overflow: hidden; cursor: pointer }
    .vd-cell img, .vd-cell video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none }
    .vd-cell.sel::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); border: 2px solid var(--p) }
    .vd-date { position: absolute; left: 8px; top: 7px; font-size: 12px; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, .7) }
    .vd-ck { position: absolute; right: 7px; top: 7px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25) }
    .vd-ck.on { background: var(--p); border-color: var(--p); color: #fff }
    .vd-bar { flex-shrink: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #222 }
    .vd-del { width: 100%; height: 44px; border: none; border-radius: 22px; background: var(--p); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer }
    .vd-del:disabled { opacity: .4 }
    .vd-ask-bg { z-index: 340 }

    .plus-sheet-bg { z-index: 340 }
    .pp-repick-btn {
      position: absolute;
      left: 8px;
      top: 8px;
      z-index: 2;
      border: none;
      border-radius: 14px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font-size: 13px;
      padding: 5px 12px;
      cursor: pointer;
    }
    .pp-repick-btn:disabled { opacity: .5 }
    .vo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 28px 14px calc(34px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums }
    .vo-pp { flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; padding: 0 }
    .vo-t { flex: none; min-width: 36px; text-align: center }
    .vo-rng { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: none }
    .vo-rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--pct,0%), rgba(255,255,255,.3) var(--pct,0%)) }
    .vo-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: none }
    .vo-rng::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.3) }
    .vo-rng::-moz-range-progress { height: 4px; background: #fff }
    .vo-rng::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: none }

/* === 举报 reason sheet (one picker for every report entry) — theme tokens only === */
.rpt-bg{position:fixed;inset:0;z-index:9100;background:color-mix(in srgb,var(--tx) 45%,transparent);display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--kb,0px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;animation:rptFade .18s ease}
.rpt-sheet{width:100%;max-width:480px;box-sizing:border-box;background:var(--bgc);color:var(--tx);
  border-radius:20px 20px 0 0;border:1px solid var(--bd);border-bottom:0;box-shadow:0 -10px 40px -12px color-mix(in srgb,var(--tx) 30%,transparent);
  display:flex;flex-direction:column;max-height:calc(100vh - var(--kb,0px) - env(safe-area-inset-top,0px) - 16px);
  max-height:calc(100dvh - var(--kb,0px) - env(safe-area-inset-top,0px) - 16px);overflow:hidden;animation:rptUp .22s cubic-bezier(.2,.8,.2,1)}
.rpt-grab{flex:none;width:36px;height:4px;border-radius:2px;background:var(--bd);margin:8px auto 0}
.rpt-hd{flex:none;display:flex;align-items:center;gap:8px;padding:12px 18px 10px;font-size:16px;line-height:1.3;min-width:0}
.rpt-hd b{font-weight:600;min-width:0;overflow-wrap:anywhere}
.rpt-hic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--pl);color:var(--p)}
.rpt-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2px 14px 6px}
.rpt-list{display:flex;flex-direction:column;gap:8px}
.rpt-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;box-sizing:border-box;padding:11px 14px;margin:0;
  border-radius:14px;border:1px solid var(--bd);background:var(--bgi);color:var(--tx);
  font:inherit;font-size:15px;line-height:1.35;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.rpt-opt:active{transform:scale(.99)}
.rpt-tx{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.rpt-dot{flex:none;width:22px;height:22px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--txs);
  display:inline-flex;align-items:center;justify-content:center;color:transparent}
.rpt-opt.on{background:color-mix(in srgb,var(--p) 10%,var(--bgc));border-color:var(--p);color:var(--tx);font-weight:600}
.rpt-opt.on .rpt-dot{border-color:var(--p);background:var(--p);color:var(--bgc)}
.rpt-more{margin-top:12px}
.rpt-more label{display:block;font-size:13px;color:var(--txs);margin:0 2px 6px;font-weight:600}
.rpt-more textarea{display:block;width:100%;box-sizing:border-box;min-height:84px;max-height:30vh;resize:none;padding:10px 12px;
  border-radius:12px;border:1px solid var(--bd);background:var(--bgi);color:var(--tx);font:inherit;font-size:15px;line-height:1.45;outline:none}
.rpt-more textarea::placeholder{color:var(--txs)}
.rpt-more textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent)}
.rpt-meta{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:var(--txs)}
.rpt-n{margin-left:auto;flex:none}
.rpt-err{color:var(--p);min-width:0}
.rpt-act{flex:none;display:flex;gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);background:var(--bgc)}
.rpt-btn{flex:1 1 0;min-width:0;min-height:46px;padding:10px 12px;border-radius:999px;font:inherit;font-size:15px;line-height:1.25;cursor:pointer;
  overflow-wrap:anywhere;box-sizing:border-box}
.rpt-c{background:transparent;border:1px solid var(--bd);color:var(--tx)}
.rpt-s{border:1px solid var(--p);background:var(--p);color:var(--bgc);font-weight:600}
.rpt-s:disabled{background:var(--bgi);border-color:var(--bd);color:var(--txs);cursor:default}
[data-theme="dark"] .rpt-bg{background:color-mix(in srgb,var(--bg) 72%,transparent)}
[data-theme="dark"] .rpt-sheet{box-shadow:0 -10px 40px -12px color-mix(in srgb,var(--bg) 90%,transparent)}
@keyframes rptFade{from{opacity:0}to{opacity:1}}
@keyframes rptUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.rpt-bg,.rpt-sheet{animation:none}}
/* themed confirm (取关 / 拉黑) and profile ⋯ / 黑名单 — colors follow the active theme */
.hl-ask{position:fixed;inset:0;z-index:10000;background:color-mix(in srgb,var(--tx) 32%,transparent);display:flex;align-items:center;justify-content:center;padding:24px}
.hl-ask-box{width:100%;max-width:300px;background:var(--bgc);color:var(--tx);border:1px solid var(--bd);border-radius:16px;padding:20px 18px 16px;box-shadow:0 12px 40px color-mix(in srgb,var(--tx) 16%,transparent);text-align:center}
.hl-ask-box p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--tx)}
.hl-ask-act{display:flex;gap:10px}
.hl-ask-act .btn{flex:1;border-radius:999px;min-height:40px}
.back-bar .prof-more{margin-left:auto;position:relative}
.prof-more .pf2-covmore{width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;background:transparent;color:var(--tx);cursor:pointer}
.pm-sheet{min-height:50dvh;text-align:left;padding-top:8px;background:var(--bgc);color:var(--tx);touch-action:none}
.pm-sheet.pull{animation:none;transition:none}
.pm-grab{width:36px;height:4px;border-radius:99px;background:var(--bd);margin:6px auto 16px}
.pm-acts{display:flex;gap:8px;padding:0 18px 18px}
.pm-act{width:76px;display:flex;flex-direction:column;align-items:center;gap:8px;border:none;background:transparent;color:var(--tx);font:inherit;font-size:13px;cursor:pointer}
.pm-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--p) 12%,var(--bgc));color:var(--p);border:1px solid var(--bd)}
.pm-ic .ic{width:22px;height:22px}
.pm-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;border:none;border-top:1px solid var(--bd);background:transparent;color:var(--tx);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.pm-on{color:var(--p);font-weight:700}
.pm-cancel{justify-content:center;color:var(--txs)}
.perm-sheet{display:flex;flex-direction:column;max-height:78dvh;touch-action:pan-y;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.perm-hd{padding:0 20px 6px;font-size:16px;font-weight:600;text-align:center}
.perm-sheet .pm-row{gap:12px}
.perm-sheet .pm-row:disabled{opacity:.55}
.perm-who{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 10px}
.perm-search{display:block;width:calc(100% - 32px);box-sizing:border-box;margin:4px 16px 8px}
.perm-list{flex:1 1 auto;min-height:120px;max-height:42vh;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.perm-empty{color:var(--txs);font-size:13px;text-align:center;padding:12px}
.perm-done{margin:8px 16px 4px}
.rm-in{display:block;width:100%;box-sizing:border-box;margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--bgi);color:var(--tx);font:inherit;font-size:15px}
.prof-lock{padding:28px 16px;text-align:center;color:var(--txs);font-size:14px;line-height:1.6}
.page.page-prof{display:flex;flex-direction:column;align-items:stretch}
.page.page-prof>.back-bar,.page.page-prof>.card,.page.page-prof>.tab-bar,.page.page-prof>div{width:100%;max-width:100%;min-width:0}
.namecard{display:flex;align-items:center;gap:10px;width:286px;max-width:100%;box-sizing:border-box;text-decoration:none;color:var(--tx);background:color-mix(in srgb,var(--p) 6%,var(--bgc));border:1px solid color-mix(in srgb,var(--p) 18%,var(--bd));border-radius:14px;padding:8px 10px}
.nc-prev{display:flex;justify-content:center;padding:0 12px 10px}
.nc-av{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;display:block;background:color-mix(in srgb,var(--p) 14%,var(--bg));color:var(--p);font-weight:700;font-size:15px;line-height:40px;text-align:center}
.nc-av img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block}
.nc-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nc-name{display:flex;align-items:baseline;gap:4px;min-width:0}
.nc-name i{flex:none;font-style:normal;font-size:11px;font-weight:600;line-height:1;color:var(--p)}
.nc-name b{min-width:0;font-size:14px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;line-height:1.2;color:var(--txs)}
.nc-meta>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-rank{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1;color:var(--p);background:color-mix(in srgb,var(--p) 12%,transparent);border-radius:999px;padding:2px 6px}
.nc-bio{font-size:11px;line-height:1.25;color:var(--txs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-go{flex:none;font-size:12px;font-weight:600;color:var(--p);white-space:nowrap}
.blk-card{padding:4px 6px 8px}
.blk-h{padding:12px 10px 4px;font-size:15px;font-weight:600;color:var(--tx)}
.blk-empty{padding:4px 10px 14px;font-size:13px;color:var(--txs)}
.blk-note{text-align:center;font-size:13px;color:var(--txs);margin-top:8px}
.hide-ask .pv-tt,.hide-ask .pv-opt{text-align:center}

/* Post card ⋯ (home): bare icons, no round tile; narrower sheet; counts right of label only when >0 */
.sheet.pm-home{max-width:420px;width:calc(100% - 32px)}
.sheet.pm-home .sheet-opt-row .so-ic{width:auto;height:32px;border-radius:0;background:none}
.sheet.pm-home .sheet-opt-row .sheet-opt:active .so-ic{background:none}
.sheet.pm-home .sheet-opt-row .so-n{font-size:11px;color:var(--txs);margin-left:3px}
    /* anon avatars v4: self-contained illustrated tiles, fixed per-icon palettes */
    .post-avatar.anon-av, .post-avatar-sm.anon-av, .notif-av.anon-av, .anon-id .anon-big,
    [data-theme="dark"] .post-avatar.anon-av, [data-theme="dark"] .post-avatar-sm.anon-av, [data-theme="dark"] .notif-av.anon-av, [data-theme="dark"] .anon-id .anon-big {
      background: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.12) }
    .anon-id .anon-big, [data-theme="dark"] .anon-id .anon-big { box-shadow: 0 0 0 2px var(--bgc), 0 2px 6px rgba(0,0,0,.15) }

    /* 登录/注册页: 左上角返回 + 设置里的反馈 */
    .auth-back { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 8px; z-index: 395; height: 40px; padding: 0 6px; border: 0; background: none; box-shadow: none; color: var(--tx, #333); display: flex; align-items: center; gap: 4px; font-size: 15px; cursor: pointer }
    .auth-back .ic { width: 22px; height: 22px }
    .auth-lang-menu .al-sep { border-top: 1px solid var(--bd, #eee); margin-top: 4px; padding-top: 8px }
    .auth-lang-menu .al-fb .ic { width: 18px; height: 18px }
    .auth-fb-mask { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)) }
    @media (min-width: 600px) { .auth-fb-mask { align-items: center } }
    .auth-fb { width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; margin: 0 }
    .auth-fb-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 17px }
    .auth-fb-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--txs, #888); cursor: pointer; padding: 0 4px }
    .auth-fb select, .auth-fb textarea { width: 100%; box-sizing: border-box }
    .auth-fb textarea { resize: vertical }
    .auth-fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
    .auth-fb-contact { font-size: 13px; color: var(--txs, #888); margin: -4px 0 12px } .auth-fb-contact a { color: inherit; text-decoration: underline }