/* ═══════════════════════════════════════════════════
   YUNI OS · Global Design System
═══════════════════════════════════════════════════ */
        
         :root {
            --accent: #007aff;
            --accent-soft: rgba(0, 122, 255, 0.12);
            --red: #ff3b30;
            --green: #34c759;
            --orange: #ff9500;
            --bg-gradient: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 50%, #fbc2eb 100%);
            --bg: rgba(255, 255, 255, 0.22);
            --glass: rgba(255, 255, 255, 0.24);
            --glass-border: rgba(255, 255, 255, 0.42);
            --blur-val: 12px;
            --sidebar-w: 260px;
            --r-xl: 28px;
            --r-l: 20px;
            --r-m: 14px;
            --r-s: 10px;
            --t-speed: 0.3s;
            --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease: cubic-bezier(0.4, 0, 0.2, 1);
            --ease-out: cubic-bezier(0, 0, 0.2, 1);
            --text: #1a1a2e;
            --text-2: #636366;
            --text-3: #aeaeb2;
            --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.07);
            --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.12);
            --shadow-modal: 0 40px 80px rgba(0, 0, 0, 0.18);
        }
        /* Dark mode */
        
        body.dark {
            --glass: rgba(20, 22, 26, 0.36);
            --glass-border: rgba(255, 255, 255, 0.06);
            --text: #f2f2f7;
            --text-2: #c5c5cc;
            --text-3: #8e8e93;
            --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
            --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            background: #15171b;
        }
        
        body.dark .form-input,
        body.dark input[type="text"],
        body.dark input[type="password"],
        body.dark textarea {
            background: rgba(255, 255, 255, 0.08) !important;
            color: var(--text) !important;
        }
        
        body.dark .card-text {
            color: var(--text);
        }
        
        body.dark .post-card {
            background: var(--glass);
        }
        /* ═══════════════════════════ Settings Live CSS ═══════════════════════════ */
        /* reduce-motion — override CSS variable so all var(--t-speed) usages resolve to near-zero;
           target only known animating containers for hardcoded durations, avoiding the universal * penalty */
        
        body.reduce-motion {
            --t-speed: 0.01ms;
        }
        
        body.reduce-motion .view,
        body.reduce-motion .nav-item,
        body.reduce-motion .card,
        body.reduce-motion .post-card,
        body.reduce-motion .modal,
        body.reduce-motion .modal-overlay,
        body.reduce-motion .msg-row,
        body.reduce-motion .conv-item,
        body.reduce-motion .friend-item,
        body.reduce-motion .int-item,
        body.reduce-motion .reply-box,
        body.reduce-motion .cmt-item,
        body.reduce-motion .search-input,
        body.reduce-motion .search-result,
        body.reduce-motion .toast,
        body.reduce-motion .lightbox,
        body.reduce-motion .badge,
        body.reduce-motion .settings-card,
        body.reduce-motion .explore-card,
        body.reduce-motion .profile-header,
        body.reduce-motion .sidebar-user-av,
        body.reduce-motion .action-btn,
        body.reduce-motion .toggle-thumb,
        body.reduce-motion .send-btn,
        body.reduce-motion .emoji-pick,
        body.reduce-motion .v-title {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
        /* no-bg-anim */
        
        body.no-bg-anim #auth-overlay {
            animation: none !important;
        }
        /* hide-timestamps */
        
        body.hide-timestamps .card-time,
        body.hide-timestamps .int-time,
        body.hide-timestamps .cmt-time {
            display: none !important;
        }
        /* no-glass */
        
        body.no-glass .card,
        body.no-glass .post-card,
        body.no-glass .modal,
        body.no-glass .settings-card {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            background: #fff !important;
        }
        
        body.dark.no-glass .card,
        body.dark.no-glass .post-card,
        body.dark.no-glass .modal,
        body.dark.no-glass .settings-card {
            background: #1c1c1e !important;
        }
        /* no-list-anim */
        
        body.no-list-anim .card,
        body.no-list-anim .post-card,
        body.no-list-anim .settings-card,
        body.no-list-anim .friend-item,
        body.no-list-anim .int-item,
        body.no-list-anim .lb-item,
        body.no-list-anim .conv-item,
        body.no-list-anim .profile-hero,
        body.no-list-anim .chat-container {
            animation: none !important;
        }
        /* no-sticky-hdr */
        
        body.no-sticky-hdr .top-bar {
            position: relative !important;
        }
        /* card-style */
        
        body.card-style-flat .card,
        body.card-style-flat .post-card {
            box-shadow: none !important;
            border-radius: 8px !important;
        }
        
        body.card-style-elevated .card,
        body.card-style-elevated .post-card {
            box-shadow: var(--shadow-float) !important;
        }
        /* gradient-bg-on */
        
        body.gradient-bg-on {
            --bg-gradient: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 30%, #a18cd1 70%, #fbc2eb 100%) !important;
        }
        
        body.dark.gradient-bg-on {
            --bg-gradient: linear-gradient(135deg, #0c0c1d 0%, #1a1a3e 30%, #16213e 70%, #0f3460 100%) !important;
        }
        /* high-contrast */
        
        body.high-contrast {
            --text: #000;
            --text-2: #222;
            --glass: rgba(255, 255, 255, 0.95);
            --glass-border: #000;
        }
        
        body.dark.high-contrast {
            --text: #fff;
            --text-2: #eee;
            --glass: rgba(0, 0, 0, 0.95);
            --glass-border: #fff;
        }
        /* large-text */
        
        body.large-text {
            font-size: 1.15em;
        }
        
        body.large-text .card-text,
        body.large-text .post-body,
        body.large-text .cmt-text {
            font-size: 1.1em !important;
            line-height: 1.7 !important;
        }
        /* compact-posts — add base transitions so the switch isn't a hard jump */
        
        .post-card,
        .post-title,
        .post-body,
        .card-body,
        .card-text {
            transition: padding 0.2s ease, margin-bottom 0.2s ease, font-size 0.2s ease, line-height 0.2s ease;
        }
        
        body.compact-posts .post-card {
            padding: 12px 16px !important;
            margin-bottom: 8px !important;
        }
        
        body.compact-posts .card-body {
            margin-bottom: 6px !important;
        }
        /* auto-hide-sidebar — animate width & label fade instead of hard display:none */
        
        body.auto-hide-sidebar .sidebar {
            width: 60px !important;
        }
        
        body.auto-hide-sidebar .sidebar .nav-label,
        body.auto-hide-sidebar .sidebar .nav-section-label,
        body.auto-hide-sidebar .sidebar .sidebar-sub {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
        }
        /* one-hand-mode */
        
        body.one-hand-mode main {
            max-width: 480px !important;
            margin: 0 auto !important;
        }
        /* custom-scroll */
        
        body.custom-scroll ::-webkit-scrollbar {
            width: 6px;
        }
        
        body.custom-scroll ::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 3px;
        }
        
        body.custom-scroll ::-webkit-scrollbar-track {
            background: transparent;
        }
        /* allow-select */
        
        body.allow-select {
            user-select: text !important;
            -webkit-user-select: text !important;
        }
        
        body.allow-select * {
            user-select: text !important;
            -webkit-user-select: text !important;
        }
        /* 设置页下拉框 — 基础过渡 */
        
        select[id^="sel-"] {
            transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
            cursor: pointer;
            outline: none;
        }
        
        select[id^="sel-"]:focus {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
        }
        /* no-inf-scroll */
        
        body.no-inf-scroll #explore-grid {
            overflow-y: auto;
        }
        /* hide-online */
        
        body.hide-online .fi-online {
            display: none !important;
        }
        /* hide-location */
        
        body.hide-location .ip-tag {
            display: none !important;
        }
        /* mute-sound */
        
        body.mute-sound .msg-sound-indicator {
            display: none !important;
        }
        /* no-quick-emoji */
        
        body.no-quick-emoji .emoji-btn,
        body.no-quick-emoji .quick-emoji {
            display: none !important;
        }
        /* no-link-preview */
        
        body.no-link-preview .link-card,
        body.no-link-preview .link-preview {
            display: none !important;
        }
        /* no-lazy-img */
        
        body.no-lazy-img img {
            loading: eager !important;
        }
        /* hide-typing */
        
        body.hide-typing .typing-indicator {
            display: none !important;
        }
        /* hide-nav-labels */
        
        body.hide-nav-labels .nav-label {
            display: none !important;
        }
        /* abs-time */
        
        body.abs-time .card-time,
        body.abs-time .cmt-time {
            font-family: monospace !important;
        }
        /* no-profile-blur */
        
        body.no-profile-blur .profile-header {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        /* confirm-exit */
        
        body.confirm-exit {
            /* handled by JS beforeunload */
        }
        /* page-trans — use --ease instead of --spring to prevent horizontal bounce/overscroll
           on iOS WebView and during layout shifts; the view itself is paint-contained */
        
        body.page-trans-slide .view.active {
            animation: viewSlideIn 0.35s var(--ease) !important;
        }
        
        @keyframes viewSlideIn {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        body.page-trans-fade .view.active {
            animation: viewFadeIn 0.25s var(--ease) !important;
        }
        
        @keyframes viewFadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        body.page-trans-none .view.active {
            animation: none !important;
        }
        /* particles-on */
        
        body.particles-on #auth-overlay::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
        }
        /* ── 隐私扩展 ── */
        
        body.no-search-vis {
            /* filtered in search results JS-side */
        }
        
        body.no-read-rcpt .msg-read-status {
            display: none !important;
        }
        
        body.hide-my-likes .profile-likes-section,
        body.hide-my-likes .my-likes-list {
            display: none !important;
        }
        
        body.hide-my-comments .profile-comments-section,
        body.hide-my-comments .my-comments-list {
            display: none !important;
        }
        
        body.hide-my-stars .profile-stars-section,
        body.hide-my-stars .my-stars-list {
            display: none !important;
        }
        
        body.share-confirm-on {
            /* JS adds confirm dialog before share */
        }
        /* ── 通知扩展 ── */
        
        body.desktop-notify-on {
            /* JS handles Notification API */
        }
        
        body.no-notify-preview .toast-content {
            /* truncated in JS */
        }
        
        body.mute-group-notify .notif-group,
        body.mute-group-notify .notif-type-group {
            display: none !important;
        }
        
        body.mute-sys-notify .notif-system,
        body.mute-sys-notify .notif-type-system {
            display: none !important;
        }
        
        body.mute-at-notify .notif-mention,
        body.mute-at-notify .notif-type-mention {
            display: none !important;
        }
        
        body.mute-dm-notify .notif-dm,
        body.mute-dm-notify .notif-type-dm {
            display: none !important;
        }
        
        body.mute-fr-notify .notif-fr,
        body.mute-fr-notify .notif-type-fr {
            display: none !important;
        }
        
        body.mute-int-notify .notif-interact,
        body.mute-int-notify .notif-type-interact {
            display: none !important;
        }
        
        body.no-notify-group .notif-grouped {
            display: block !important;
        }
        
        body.no-badge .badge-dot,
        body.no-badge .unread-badge {
            display: none !important;
        }
        
        body.daily-digest-on {
            /* JS schedules daily summary */
        }
        
        body.dnd-smart .notif-toast,
        body.dnd-always .notif-toast,
        body.dnd-night .notif-toast {
            display: none !important;
        }
        
        body.welcome-sound-on {
            /* JS plays Audio on login */
        }
        
        body.haptic-on {
            /* JS uses navigator.vibrate on interactions */
        }
        /* ── 消息&聊天 ── */
        
        body.bubble-classic .msg-bubble {
            border-radius: 4px 18px 18px 18px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
        }
        
        body.bubble-minimal .msg-bubble {
            border-radius: 2px !important;
            box-shadow: none !important;
            background: transparent !important;
            border: 1px solid var(--glass-border) !important;
        }
        
        body.bubble-classic .msg-row.mine .msg-bubble {
            border-radius: 18px 4px 18px 18px !important;
        }
        
        body.bubble-minimal .msg-row.mine .msg-bubble {
            border-radius: 2px !important;
        }
        
        body.chatbg-grid .chat-body {
            background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) !important;
            background-size: 20px 20px !important;
        }
        
        body.chatbg-dots .chat-body {
            background-image: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
            background-size: 16px 16px !important;
        }
        
        body.chatbg-solid .chat-body {
            background: var(--glass) !important;
        }
        
        body.thread-nested .comment-reply {
            margin-left: 32px !important;
            border-left: 2px solid var(--accent-soft) !important;
            padding-left: 12px !important;
        }
        
        body.thread-chrono .comment-reply {
            margin-left: 0 !important;
        }
        
        body.dbl-click-reply {
            /* JS handles dblclick on messages */
        }
        /* ── 内容&浏览 ── */
        
        body.sort-popular .post-card,
        body.sort-random .post-card {
            /* sorted in JS */
        }
        
        body.csort-oldest .comment-item,
        body.csort-popular .comment-item,
        body.csort-likes .comment-item {
            /* sorted in JS */
        }
        
        body.no-gif-autoplay img[src$=".gif"] {
            /* JS sets static frame */
        }
        
        body.img-medium img {
            image-rendering: auto !important;
        }
        
        body.img-low img {
            image-rendering: pixelated !important;
        }
        
        body.vid-always video {
            /* autoplay */
        }
        
        body.vid-never video {
            /* no autoplay */
        }
        
        body.draft-autosave-on {
            /* JS auto-saves draft on input */
        }
        /* ── 辅助扩展 ── */
        
        body.no-sound-vib .sound-wave,
        body.no-sound-vib .vibrate-indicator {
            display: none !important;
        }
        
        body.no-autoplay-vid video[autoplay] {
            /* JS pauses autoplay videos */
        }
        
        body.show-grid-lines .post-card,
        body.show-grid-lines .card,
        body.show-grid-lines .settings-card {
            outline: 1px dashed rgba(0, 0, 0, 0.08) !important;
        }
        
        body.voice-input-on .voice-input-btn {
            display: inline-flex !important;
        }
        
        body.no-swipe {
            touch-action: auto !important;
        }
        /* ── 存储扩展 ── */
        
        body.auto-clean-on {
            /* JS handles old message cleanup */
        }
        
        body.offline-mode-on {
            /* JS caches content for offline */
        }
        /* ── 账号安全 ── */
        
        body.login-notify-on {
            /* server-driven, flag saved */
        }
        
        body.activity-log-on {
            /* JS logs activity to localStorage */
        }
        /* ── 免打扰时段 ── */
        
        body.hide-last-seen .last-seen-time {
            display: none !important;
        }
        
        body.no-vibrate {
            /* JS suppresses vibrate */
        }
        
        body.no-profanity-filter {
            /* content check bypassed in JS */
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        body {
            animation: fadeIn 0.35s var(--ease);
        }
        /* Button White Mode (背景音乐关闭时) — add transitions so the shift isn't a hard cut */
        
        .btn-sm,
        .btn-full,
        .btn-pub,
        .chat-tool-btn,
        .chat-send-btn,
        .action-btn,
        .cmt-send {
            transition: background var(--t-speed) var(--ease), color var(--t-speed) var(--ease), border var(--t-speed) var(--ease), backdrop-filter var(--t-speed) var(--ease), -webkit-backdrop-filter var(--t-speed) var(--ease);
        }
        
        html.btn-white-mode-init .btn-sm,
        html.btn-white-mode-init .btn-full,
        html.btn-white-mode-init .btn-pub,
        html.btn-white-mode-init .chat-tool-btn,
        html.btn-white-mode-init .chat-send-btn,
        html.btn-white-mode-init .action-btn,
        html.btn-white-mode-init .cmt-send,
        body.btn-white-mode .btn-sm,
        body.btn-white-mode .btn-full,
        body.btn-white-mode .btn-pub,
        body.btn-white-mode .chat-tool-btn,
        body.btn-white-mode .chat-send-btn,
        body.btn-white-mode .action-btn,
        body.btn-white-mode .cmt-send {
            background: #ffffff !important;
            color: #000 !important;
            border: 1px solid #e0e0e0 !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        
        html.btn-white-mode-init .btn-sm.primary,
        body.btn-white-mode .btn-sm.primary {
            background: #ffffff !important;
            color: var(--accent) !important;
        }
        
        html.btn-white-mode-init .btn-sm.danger,
        body.btn-white-mode .btn-sm.danger {
            background: #ffffff !important;
            color: var(--red) !important;
        }
        
        html.btn-white-mode-init .btn-sm.ghost,
        body.btn-white-mode .btn-sm.ghost {
            background: #ffffff !important;
            color: var(--text) !important;
        }
        
        html.btn-white-mode-init .btn-full.secondary,
        body.btn-white-mode .btn-full.secondary {
            background: #ffffff !important;
            color: var(--text) !important;
        }
        
        html.btn-white-mode-init .btn-full.danger,
        body.btn-white-mode .btn-full.danger {
            background: #ffffff !important;
            color: var(--red) !important;
        }
        /* 暗黑模式 + 白底按钮 冲突修复：当两者同时激活时，使用深色背景
           避免白色按钮 + 浅色文字导致文字完全不可见 */
        
        body.dark.btn-white-mode .btn-sm,
        body.dark.btn-white-mode .btn-full,
        body.dark.btn-white-mode .btn-pub,
        body.dark.btn-white-mode .chat-tool-btn,
        body.dark.btn-white-mode .chat-send-btn,
        body.dark.btn-white-mode .action-btn,
        body.dark.btn-white-mode .cmt-send {
            background: #2c2c2e !important;
            color: #e5e5ea !important;
            border: 1px solid #3a3a3c !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        
        body.dark.btn-white-mode .btn-sm.primary {
            background: #2c2c2e !important;
            color: var(--accent) !important;
        }
        
        body.dark.btn-white-mode .btn-sm.danger {
            background: #2c2c2e !important;
            color: var(--red) !important;
        }
        
        body.dark.btn-white-mode .btn-sm.ghost {
            background: #2c2c2e !important;
            color: #e5e5ea !important;
        }
        
        body.dark.btn-white-mode .btn-full.secondary {
            background: #2c2c2e !important;
            color: #e5e5ea !important;
        }
        
        body.dark.btn-white-mode .btn-full.danger {
            background: #2c2c2e !important;
            color: var(--red) !important;
        }
        
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        body {
            font-family: 'Noto Sans SC', -apple-system, sans-serif;
            background: #f4f6f8;
            display: flex;
            color: var(--text);
            font-size: 15px;
            -webkit-font-smoothing: antialiased;
        }

        body.wallpaper-on {
            background: #10141b url("../../内置文件/视频/Gargantua_BGM.poster.webp") center / cover fixed no-repeat;
        }
        
        /* Entrance overlay */
        
        #bg-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.65s ease;
            filter: none;
        }

        .liquid-filter-defs {
            position: fixed;
            width: 0;
            height: 0;
            overflow: hidden;
            pointer-events: none;
        }
        /* Scrollbar */
        
         ::-webkit-scrollbar {
            width: 5px;
            height: 5px
        }
        
         ::-webkit-scrollbar-track {
            background: transparent
        }
        
         ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 10px
        }
        /* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
        
        .sidebar {
            width: var(--sidebar-w);
            height: 100%;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            padding: 36px 16px 24px;
            background: rgba(255, 255, 255, 0.16);
            backdrop-filter: url('#yuni-panel-liquid') blur(2px) saturate(135%) contrast(1.03);
            -webkit-backdrop-filter: blur(var(--blur-val)) saturate(135%);
            border-right: 1px solid var(--glass-border);
            z-index: 100;
            overflow-y: auto;
            overflow-x: hidden;
            transition: width 0.35s var(--spring), background 0.4s var(--ease);
        }
        
        .logo-wrap {
            width: 108px;
            height: 54px;
            margin-left: 10px;
            margin-bottom: 36px;
            overflow: hidden;
        }

        .brand-logo {
            display: block;
            width: 108px;
            height: 108px;
            transform: translateY(-27px);
            object-fit: contain;
        }

        body.dark .brand-logo {
            filter: invert(1);
        }
        
        .nav-section-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--text-3);
            padding: 0 12px;
            margin: 18px 0 6px;
            text-transform: uppercase;
            transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
        }
        /* base transition for auto-hide-sidebar label/sublabel fade */
        
        .nav-label,
        .sidebar-sub {
            transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
        }
        
        .nav-item {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 12px 14px;
            border-radius: var(--r-m);
            margin-bottom: 3px;
            cursor: pointer;
            /* max() prevents spring bounce from breaking when --t-speed is fast (0.15s) */
            transition: background var(--t-speed) var(--ease), transform max(0.22s, calc(var(--t-speed) * 1.17)) var(--spring), color calc(var(--t-speed) * 0.83);
            font-weight: 600;
            font-size: 14.5px;
            color: var(--text-2);
            position: relative;
            user-select: none;
        }
        
        .nav-item:hover {
            background: rgba(255, 255, 255, 0.38);
            transform: translateX(4px) scale(1.02);
            color: var(--text);
        }
        
        .nav-item.active {
            background: #fff;
            color: var(--accent);
            box-shadow: var(--shadow-card);
        }
        
        body.dark .nav-item.active {
            background: rgba(58, 58, 60, 0.9);
        }
        
        .nav-item .n-icon {
            font-size: 18px;
            width: 24px;
            text-align: center;
        }
        
        .nav-badge {
            margin-left: auto;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            background: var(--red);
            color: #fff;
            font-size: 10.5px;
            font-weight: 800;
            border-radius: 9px;
            display: none;
            align-items: center;
            justify-content: center;
            animation: badgePop 0.4s var(--spring);
        }
        
        .nav-badge.show {
            display: flex;
        }
        
        @keyframes badgePop {
            from {
                transform: scale(0)
            }
            to {
                transform: scale(1)
            }
        }
        
        .sidebar-spacer {
            flex: 1;
        }
        
        .sidebar-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: var(--r-m);
            cursor: pointer;
            transition: background 0.3s var(--ease);
        }
        
        .sidebar-user:hover {
            background: rgba(255, 255, 255, 0.38);
            transform: scale(1.02);
        }
        
        .sidebar-user-av {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid #fff;
            background: #ddd center/cover;
            flex-shrink: 0;
            transition: transform 0.3s var(--spring), border-color 0.3s;
        }
        
        .sidebar-user:hover .sidebar-user-av {
            transform: scale(1.08);
            border-color: var(--accent);
        }
        
        .sidebar-user-info {
            flex: 1;
            min-width: 0;
        }
        
        .sidebar-user-name {
            font-weight: 800;
            font-size: 13.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .sidebar-user-id {
            font-size: 10.5px;
            color: var(--text-3);
            margin-top: 1px;
        }
        
        body.dark .sidebar {
            background: rgba(20, 20, 24, 0.55);
        }
        
        body.dark .nav-item {
            color: #c5c5cc;
        }
        
        body.dark .nav-item:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #e5e5ea;
        }
        
        body.dark .nav-section-label {
            color: #8e8e93;
        }
        
        body.dark .sidebar-user-name {
            color: #e5e5ea;
        }
        /* ═══════════════════════════════════════════════════
   MAIN STAGE
═══════════════════════════════════════════════════ */
        
        .main-stage {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
        
        .top-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 28px 44px 20px;
            flex-shrink: 0;
        }
        
        .v-title {
            font-size: 32px;
            font-weight: 900;
            letter-spacing: -1px;
            /* use --ease instead of --spring so the title transition doesn't compete
               with the view slide-in direction during page switches */
            transition: opacity 0.3s, transform 0.35s var(--ease);
        }
        
        .v-title.blurring {
            opacity: 0;
            transform: translateY(12px) scale(0.97);
        }
        
        .top-actions {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        /* Search bar */
        
        .search-wrap {
            position: relative;
            margin: 0;
        }
        
        .search-input {
            width: 200px;
            padding: 10px 16px 10px 38px;
            border-radius: 22px;
            border: 1.5px solid var(--glass-border);
            background: var(--glass);
            backdrop-filter: url('#yuni-panel-liquid') blur(2px) saturate(135%) contrast(1.03);
            -webkit-backdrop-filter: blur(var(--blur-val)) saturate(135%);
            font-size: 14px;
            color: var(--text);
            outline: none;
            transition: border-color calc(var(--t-speed) * 0.83), background calc(var(--t-speed) * 0.83);
            font-family: inherit;
            appearance: none;
            -webkit-appearance: none;
        }
        
        .search-input:focus {
            border-color: var(--accent);
            background: rgba(255, 255, 255, 0.9);
        }

        .search-input::-webkit-search-cancel-button {
            display: none;
        }
        
        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            border: 1.5px solid currentColor;
            border-radius: 50%;
            color: var(--text-3);
            pointer-events: none;
        }

        .search-icon::after {
            content: '';
            position: absolute;
            width: 5px;
            height: 1.5px;
            right: -4px;
            bottom: -2px;
            background: currentColor;
            transform: rotate(45deg);
            transform-origin: left center;
        }
        
        .search-results {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(30px);
            border-radius: var(--r-l);
            box-shadow: var(--shadow-float);
            border: 1px solid var(--glass-border);
            z-index: 500;
            max-height: 380px;
            overflow-y: auto;
            display: none;
            animation: dropIn 0.3s var(--spring);
        }
        
        .search-results.open {
            display: block;
        }
        
        @keyframes dropIn {
            from {
                opacity: 0;
                transform: translateY(-8px) scale(0.98)
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }
        
        .sr-section-title {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1px;
            color: var(--text-3);
            padding: 14px 16px 6px;
            text-transform: uppercase;
        }
        
        .sr-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            cursor: pointer;
            transition: background 0.2s;
            animation: srIn 0.3s var(--spring) forwards;
        }
        
        @keyframes srIn {
            from {
                opacity: 0;
                transform: translateX(-12px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes srOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(12px);
            }
        }
        
        .sr-item:hover {
            background: rgba(0, 122, 255, 0.06);
            transform: scale(1.02);
        }
        
        .sr-av {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #ddd center/cover;
            flex-shrink: 0;
        }
        
        .sr-name {
            font-weight: 700;
            font-size: 14px;
        }
        
        .sr-sub {
            font-size: 12px;
            color: var(--text-3);
            margin-top: 1px;
        }
        
        .sr-post-text {
            font-size: 13px;
            color: var(--text-2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }

        .sr-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 76px;
            padding: 20px 16px;
            color: var(--text-3);
            font-size: 13px;
            font-weight: 500;
            line-height: 1.5;
            text-align: center;
            white-space: normal;
            overflow-wrap: anywhere;
            box-sizing: border-box;
        }
        
        .btn-pub {
            background: #fff;
            color: #1a1a1a;
            border: 1px solid #d1d1d6;
            padding: 11px 22px;
            border-radius: 22px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.3s var(--spring), box-shadow 0.3s;
            white-space: nowrap;
            font-family: inherit;
        }
        
        .btn-pub:hover {
            transform: scale(1.05) translateY(-1px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
        
        .btn-pub:active {
            transform: scale(0.97);
        }
        
        body.dark .btn-pub {
            background: #1c1c1e;
            color: #e5e5ea;
            border-color: #3a3a3c;
        }
        
        body.dark .btn-pub:hover {
            box-shadow: 0 8px 20px rgba(255, 255, 255, 0.06);
        }
        
        .top-av {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 2.5px solid rgba(255, 255, 255, 0.9);
            background: #eee center/cover;
            cursor: pointer;
            transition: transform 0.3s var(--spring), box-shadow 0.3s;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .top-av:hover {
            transform: scale(1.08);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        /* ═══════════════════════════════════════════════════
   VIEW CONTAINER
═══════════════════════════════════════════════════ */
        
        .view {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 44px 44px;
            display: none;
            contain: layout style paint;
        }
        
        .view.active {
            display: flex;
            flex-direction: column;
        }
        
        @keyframes viewIn {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.985)
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }
        /* ═══════════════════════════════════════════════════
   POST FEED
═══════════════════════════════════════════════════ */
        
        .post-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 22px;
        }
        
        .post-card {
            background: var(--glass);
            backdrop-filter: url('#yuni-panel-liquid') blur(2px) saturate(135%) contrast(1.03);
            -webkit-backdrop-filter: blur(var(--blur-val)) saturate(135%);
            border-radius: var(--r-xl);
            padding: 22px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            transition: padding 0.2s ease, margin-bottom 0.2s ease, transform max(0.22s, calc(var(--t-speed) * 1.33)) var(--spring), box-shadow calc(var(--t-speed) * 1.33), background var(--t-speed);
            animation: cardIn 0.5s var(--spring) backwards;
            cursor: default;
        }

        .post-card.pinned-post {
            grid-column: 1 / -1;
            border-color: color-mix(in srgb, var(--accent) 42%, var(--glass-border));
        }

        .card-author-meta {
            min-width: 0;
            flex: 1;
        }

        .card-author-line {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .pinned-label {
            display: inline-flex;
            align-items: center;
            min-height: 20px;
            padding: 2px 7px;
            border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
            border-radius: 6px;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 9%, transparent);
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .announcement-title {
            margin: 2px 0 10px;
            color: var(--text);
            font-size: 18px;
            font-weight: 800;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }
        
        .post-card:hover {
            transform: translateY(-6px) scale(1.01);
            box-shadow: var(--shadow-float);
            background: rgba(255, 255, 255, 0.88);
        }
        
        body.dark .post-card:hover {
            background: rgba(44, 44, 46, 0.9);
        }
        
        @keyframes cardIn {
            from {
                opacity: 0;
                transform: translateY(28px) scale(0.95)
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }
        
        @keyframes pulse {
            0%,
            100% {
                opacity: 1;
            }
            50% {
                opacity: 0.4;
            }
        }
        
        .card-head {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 14px;
        }
        
        .card-av {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc center/cover;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.3s var(--spring);
        }
        
        .card-av:hover {
            transform: scale(1.1);
        }
        
        .card-name {
            font-weight: 800;
            font-size: 15px;
            flex: 1;
            transition: color 0.25s, transform 0.3s var(--spring);
            cursor: pointer;
        }
        
        .card-name:hover {
            color: var(--accent);
            transform: scale(1.03);
        }
        
        .card-time {
            font-size: 11.5px;
            color: var(--text-3);
        }
        
        .card-text {
            font-size: 15.5px;
            line-height: 1.65;
            color: var(--text);
            margin-bottom: 14px;
            word-break: break-word;
        }
        
        .card-img-wrap {
            width: 100%;
            max-height: 400px;
            overflow: hidden;
            border-radius: var(--r-l);
            margin-bottom: 14px;
        }
        
        .card-img {
            width: 100%;
            max-height: 400px;
            object-fit: contain;
            display: block;
            transition: transform 0.4s var(--spring);
            cursor: pointer;
            background: rgba(0, 0, 0, 0.03);
        }
        
        .card-img:hover {
            transform: scale(1.02);
        }
        
        .card-actions {
            display: flex;
            gap: 6px;
            padding-top: 12px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
        }
        
        body.dark .card-actions {
            border-top-color: rgba(255, 255, 255, 0.07);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 9px 16px;
            border-radius: 20px;
            border: none;
            background: transparent;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-2);
            cursor: pointer;
            transition: background 0.25s, color 0.25s, transform 0.3s var(--spring);
            font-family: inherit;
        }
        
        .action-btn:hover {
            background: rgba(0, 0, 0, 0.06);
            transform: scale(1.06);
        }
        
        .action-btn:active {
            transform: scale(0.94);
        }
        
        .action-btn.liked {
            color: var(--red);
            background: rgba(255, 59, 48, 0.1);
        }
        
        .action-btn.starred {
            color: var(--orange);
            background: rgba(255, 149, 0, 0.1);
        }
        
        .action-btn.more-menu-btn {
            margin-left: auto;
        }
        /* Comment section */
        
        .comment-section {
            margin-top: 14px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            padding: 0 12px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            background: transparent;
            border-radius: 0;
            will-change: max-height, opacity;
            transition: max-height calc(var(--t-speed) * 1.5) var(--ease), opacity calc(var(--t-speed) * 1.17) var(--ease), padding calc(var(--t-speed) * 1.17) var(--ease), background calc(var(--t-speed) * 1.17) var(--ease), border-radius calc(var(--t-speed) * 1.17) var(--ease), margin calc(var(--t-speed) * 1.17) var(--ease);
        }
        
        .comment-section.open {
            max-height: 600px;
            opacity: 1;
            padding: 14px 12px;
            margin-top: 16px;
            background: var(--glass);
            backdrop-filter: blur(calc(var(--blur-val) * 0.5)) saturate(180%);
            -webkit-backdrop-filter: blur(calc(var(--blur-val) * 0.5)) saturate(180%);
            border-radius: 18px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            border-top: 1px solid var(--glass-border);
        }
        
        @keyframes fadeSlide {
            from {
                opacity: 0;
                transform: translateY(-8px)
            }
            to {
                opacity: 1;
                transform: translateY(0)
            }
        }
        
        @keyframes fadeSlideOut {
            from {
                opacity: 1;
                transform: translateY(0)
            }
            to {
                opacity: 0;
                transform: translateY(-8px)
            }
        }
        
        .comments-list {
            max-height: 280px;
            overflow-y: auto;
            padding-right: 4px;
            margin-bottom: 2px;
        }
        
        .comments-list::-webkit-scrollbar {
            width: 3px;
        }
        
        .comments-list::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.12);
            border-radius: 3px;
        }
        
        .comment-item {
            display: flex;
            gap: 9px;
            margin-bottom: 10px;
            align-items: flex-start;
            animation: fadeSlide 0.3s var(--spring);
            transition: opacity 0.3s var(--ease), max-height 0.35s var(--ease), margin-bottom 0.35s var(--ease), padding 0.35s var(--ease);
            overflow: hidden;
        }
        /* 删除评论时的渐隐+收缩动画 */
        
        .comment-item.deleting {
            opacity: 0;
            max-height: 0;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
            pointer-events: none;
        }
        
        .cmt-av {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #ccc center/cover;
            flex-shrink: 0;
        }
        
        .cmt-bubble {
            background: rgba(0, 0, 0, 0.04);
            border-radius: 14px 14px 14px 4px;
            padding: 8px 12px;
            flex: 1;
        }
        
        body.dark .cmt-bubble {
            background: rgba(255, 255, 255, 0.10);
        }
        
        body.dark .cmt-name {
            color: #f2f2f7;
        }
        
        body.dark .cmt-text {
            color: #d1d1d6;
        }
        
        body.dark .cmt-input {
            color: #1a1a2e !important;
            background: rgba(255, 255, 255, 0.85) !important;
        }
        
        body.dark .cmt-input::placeholder {
            color: #8e8e93;
        }
        
        .cmt-name {
            font-weight: 800;
            font-size: 12.5px;
            margin-bottom: 2px;
        }
        
        .cmt-text {
            font-size: 13.5px;
            line-height: 1.5;
        }
        
        .comment-input-row {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }
        
        .cmt-input {
            flex: 1;
            padding: 9px 14px;
            border-radius: 18px;
            border: 1.5px solid rgba(0, 0, 0, 0.08);
            background: rgba(0, 0, 0, 0.03);
            font-size: 13.5px;
            outline: none;
            transition: border-color 0.25s, background 0.25s;
            font-family: inherit;
            color: var(--text);
        }
        
        .cmt-input:focus {
            border-color: var(--accent);
            background: #fff;
        }
        
        .cmt-send {
            padding: 10px 18px;
            border-radius: 20px;
            border: none;
            background: var(--accent);
            color: #fff;
            font-weight: 800;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.3s var(--spring), opacity 0.2s, box-shadow 0.2s;
            font-family: inherit;
        }
        
        .cmt-send:hover {
            transform: scale(1.06);
            box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
        }
        
        .cmt-send:active {
            transform: scale(0.94);
        }
        /* 评论回复 */
        
        .comment-reply {
            margin-left: 36px;
            margin-bottom: 6px;
            padding-left: 8px;
            border-left: 2px solid rgba(0, 122, 255, 0.25);
        }
        
        .comment-reply .cmt-av {
            width: 22px;
            height: 22px;
        }
        
        .comment-reply .cmt-bubble {
            padding: 6px 10px;
            border-radius: 10px 10px 10px 3px;
        }
        
        .comment-reply .cmt-name {
            font-size: 11px;
        }
        
        .comment-reply .cmt-text {
            font-size: 12.5px;
        }
        
        .cmt-reply-btn {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: transparent;
            font-size: 13px;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-3);
            margin-top: 2px;
        }
        
        .cmt-reply-btn:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            transform: scale(1.05);
        }
        
        body.dark .cmt-reply-btn {
            border-color: rgba(255, 255, 255, 0.12);
            color: var(--text-2);
        }
        
        .cmt-del-btn {
            display: inline-block;
            margin-left: 8px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-3);
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s, color 0.2s;
            vertical-align: middle;
            line-height: 1;
        }
        
        .comment-item:hover .cmt-del-btn {
            opacity: 1;
        }
        
        .cmt-del-btn:hover {
            color: var(--red);
        }
        /* 评论三点菜单 */
        
        .cmt-menu-wrap {
            position: relative;
            flex-shrink: 0;
            margin-top: 2px;
        }
        
        .cmt-dot-btn {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid transparent;
            background: transparent;
            font-size: 14px;
            cursor: pointer;
            color: var(--text-3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            letter-spacing: -1px;
            transition: 0.2s;
            font-family: inherit;
            line-height: 0;
        }
        
        .cmt-dot-btn:hover {
            background: rgba(0, 0, 0, 0.06);
            border-color: var(--glass-border);
        }
        
        body.dark .cmt-dot-btn:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        
        .cmt-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background: var(--glass);
            backdrop-filter: blur(20px);
            border-radius: 14px;
            border: 1px solid var(--glass-border);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            z-index: 150;
            min-width: 120px;
            overflow: hidden;
            padding: 4px;
        }
        
        .cmt-dropdown.open {
            display: block;
        }
        
        .cmt-dropdown .ctx-item {
            padding: 8px 14px;
            font-size: 13px;
            cursor: pointer;
            border-radius: 10px;
            transition: 0.15s;
            white-space: nowrap;
        }
        
        .cmt-dropdown .ctx-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }
        
        body.dark .cmt-dropdown .ctx-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        
        .cmt-dropdown .ctx-item.red {
            color: var(--red);
        }
        /* Load more */
        
        .load-more-btn {
            margin: 28px auto 0;
            display: block;
            padding: 14px 40px;
            border-radius: 26px;
            border: 1.5px solid rgba(0, 0, 0, 0.12);
            background: var(--glass);
            backdrop-filter: blur(12px);
            font-weight: 800;
            font-size: 15px;
            cursor: pointer;
            transition: transform 0.3s var(--spring), background 0.25s, box-shadow 0.25s;
            font-family: inherit;
            color: var(--text);
        }
        
        .load-more-btn:hover {
            background: rgba(255, 255, 255, 0.85);
            transform: scale(1.02);
        }
        /* Empty state */
        
        .empty-state {
            text-align: center;
            padding: 80px 20px;
            color: rgba(25, 34, 49, 0.72);
            text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.12);
        }
        
        .empty-state .es-icon {
            font-size: 60px;
            display: block;
            margin-bottom: 16px;
        }
        
        .empty-state p {
            font-size: 16px;
            font-weight: 600;
        }

        .text-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            height: 22px;
            color: var(--accent);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .08em;
        }
        /* ═══════════════════════════════════════════════════
   FRIENDS VIEW
═══════════════════════════════════════════════════ */
        
        .friends-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
        }
        
        .friend-section-card {
            background: var(--glass);
            backdrop-filter: blur(20px);
            border-radius: var(--r-xl);
            padding: 22px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            animation: cardIn 0.5s var(--spring) backwards;
        }
        
        .fsc-title {
            font-size: 17px;
            font-weight: 900;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .friend-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            border-radius: var(--r-m);
            transition: background 0.25s, transform 0.3s var(--spring);
            cursor: pointer;
            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
            animation: cardIn 0.4s var(--spring) backwards;
        }
        
        .friend-item:last-child {
            border-bottom: none;
        }
        
        .friend-item:hover {
            background: rgba(0, 0, 0, 0.04);
            transform: scale(1.02);
        }
        
        .friend-item:nth-child(1) {
            animation-delay: 0s;
        }
        
        .friend-item:nth-child(2) {
            animation-delay: 0.04s;
        }
        
        .friend-item:nth-child(3) {
            animation-delay: 0.08s;
        }
        
        .friend-item:nth-child(4) {
            animation-delay: 0.12s;
        }
        
        .friend-item:nth-child(5) {
            animation-delay: 0.16s;
        }
        
        .friend-item:nth-child(6) {
            animation-delay: 0.20s;
        }
        
        .friend-item:nth-child(7) {
            animation-delay: 0.24s;
        }
        
        .friend-item:nth-child(8) {
            animation-delay: 0.28s;
        }
        
        .friend-item:nth-child(9) {
            animation-delay: 0.32s;
        }
        
        .friend-item:nth-child(10) {
            animation-delay: 0.36s;
        }
        
        .fi-av {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #ddd center/cover;
            flex-shrink: 0;
            position: relative;
        }
        
        .fi-online {
            position: absolute;
            bottom: 1px;
            right: 1px;
            width: 11px;
            height: 11px;
            background: var(--green);
            border-radius: 50%;
            border: 2px solid #fff;
        }
        
        .int-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: var(--r-m);
            transition: background 0.25s, transform 0.3s var(--spring);
            cursor: pointer;
            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
            animation: cardIn 0.4s var(--spring) backwards;
        }
        
        .int-item:last-child {
            border-bottom: none;
        }
        
        .int-item:hover {
            background: rgba(0, 0, 0, 0.04);
            transform: scale(1.02);
        }
        
        .int-item:nth-child(1) {
            animation-delay: 0s;
        }
        
        .int-item:nth-child(2) {
            animation-delay: 0.04s;
        }
        
        .int-item:nth-child(3) {
            animation-delay: 0.08s;
        }
        
        .int-item:nth-child(4) {
            animation-delay: 0.12s;
        }
        
        .int-item:nth-child(5) {
            animation-delay: 0.16s;
        }
        
        .int-item:nth-child(6) {
            animation-delay: 0.20s;
        }
        
        .int-item:nth-child(7) {
            animation-delay: 0.24s;
        }
        
        .int-item:nth-child(8) {
            animation-delay: 0.28s;
        }
        
        .int-av {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #ddd center/cover;
            flex-shrink: 0;
        }
        
        .int-type {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 700;
            flex-shrink: 0;
        }
        
        .int-type.like {
            background: rgba(255, 59, 48, 0.12);
            color: #e74c3c;
        }
        
        .int-type.comment {
            background: rgba(0, 122, 255, 0.12);
            color: #007aff;
        }
        
        .int-type.mention {
            background: rgba(255, 149, 0, 0.12);
            color: #ff9500;
        }
        
        .int-preview {
            font-size: 12px;
            color: var(--text-3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 160px;
        }
        
        .int-time {
            font-size: 11px;
            color: var(--text-3);
            margin-left: auto;
            flex-shrink: 0;
        }
        
        .int-empty {
            text-align: center;
            padding: 30px;
            color: var(--text-3);
            font-size: 14px;
        }
        
        .list-toggle {
            text-align: center;
            padding: 10px;
            color: var(--accent);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            border-radius: var(--r-m);
            transition: background 0.25s, transform 0.3s var(--spring);
            user-select: none;
            outline: none;
        }
        
        .list-toggle:focus {
            outline: none;
        }
        
        .list-toggle:hover {
            background: var(--accent-soft);
            transform: scale(1.04);
        }
        
        .list-collapse-wrap {
            overflow: hidden;
            will-change: max-height, opacity;
            transition: max-height calc(var(--t-speed) * 1.33) var(--ease), opacity calc(var(--t-speed) * 1.17) var(--ease);
            user-select: none;
        }
        
        .list-collapse-wrap.list-expanding {
            max-height: 0;
            opacity: 0;
        }
        
        .list-collapse-wrap.list-collapsing {
            max-height: 0;
            opacity: 0;
        }
        
        .int-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        
        .int-tab {
            padding: 4px 12px;
            border-radius: 14px;
            border: 1px solid var(--glass-border);
            background: transparent;
            font-size: 12px;
            color: var(--text-3);
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }
        
        .int-tab.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        
        .int-tab:hover:not(.active) {
            background: var(--accent-soft);
            transform: scale(1.03);
        }
        /* @mention dropdown */
        
        .mention-dropdown {
            position: absolute;
            background: var(--glass);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: var(--r-m);
            box-shadow: var(--shadow-float);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            min-width: 200px;
        }
        
        .mention-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            transition: background 0.15s;
        }
        
        .mention-item:hover,
        .mention-item.active {
            background: var(--accent-soft);
            transform: scale(1.02);
        }
        
        .mention-av {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #ddd center/cover;
            flex-shrink: 0;
        }
        /* Share preview */
        
        .share-preview {
            background: var(--accent-soft);
            border-radius: var(--r-m);
            padding: 12px;
            margin-bottom: 10px;
            font-size: 12px;
            color: var(--text-3);
            border-left: 3px solid var(--accent);
        }
        
        .share-preview .sp-original {
            font-size: 11px;
            color: var(--text-3);
            margin-top: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .fi-name {
            font-weight: 800;
            font-size: 14px;
        }
        
        .fi-id {
            font-size: 11px;
            color: var(--text-3);
            margin-top: 1px;
        }
        
        .fi-actions {
            margin-left: auto;
            display: flex;
            gap: 6px;
        }
        
        .btn-sm {
            padding: 9px 18px;
            border-radius: 18px;
            border: none;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.3s var(--spring), opacity 0.2s, box-shadow 0.2s;
            font-family: inherit;
            letter-spacing: 0.01em;
        }
        
        .btn-sm:hover {
            transform: scale(1.06);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
        }
        
        .btn-sm:active {
            transform: scale(0.94);
        }
        
        .btn-sm.primary {
            background: var(--accent);
            color: #fff;
        }
        
        .btn-sm.danger {
            background: rgba(255, 59, 48, 0.10);
            color: var(--red);
        }
        
        .btn-sm.ghost {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-2);
        }
        /* ═══════════════════════════════════════════════════
   CHAT VIEW
═══════════════════════════════════════════════════ */
        
        .chat-layout {
            display: flex;
            gap: 0;
            flex: 1;
            background: var(--glass);
            backdrop-filter: blur(20px);
            border-radius: var(--r-xl);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            overflow: hidden;
            min-height: 0;
            height: 100%;
        }
        
        .conv-list {
            width: 240px;
            flex-shrink: 0;
            border-right: 1px solid rgba(0, 0, 0, 0.06);
            overflow-y: auto;
            padding: 16px 10px;
        }
        
        body.dark .conv-list {
            border-right-color: rgba(255, 255, 255, 0.07);
        }
        
        .conv-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 10px;
            border-radius: var(--r-m);
            cursor: pointer;
            transition: background 0.25s, transform 0.3s var(--spring);
            animation: cardIn 0.4s var(--spring) backwards;
        }
        
        .conv-item:nth-child(1) {
            animation-delay: 0s;
        }
        
        .conv-item:nth-child(2) {
            animation-delay: 0.04s;
        }
        
        .conv-item:nth-child(3) {
            animation-delay: 0.08s;
        }
        
        .conv-item:nth-child(4) {
            animation-delay: 0.12s;
        }
        
        .conv-item:nth-child(5) {
            animation-delay: 0.16s;
        }
        
        .conv-item:nth-child(6) {
            animation-delay: 0.20s;
        }
        
        .conv-item:nth-child(7) {
            animation-delay: 0.24s;
        }
        
        .conv-item:nth-child(8) {
            animation-delay: 0.28s;
        }
        
        .conv-item:nth-child(9) {
            animation-delay: 0.32s;
        }
        
        .conv-item:nth-child(10) {
            animation-delay: 0.36s;
        }
        
        .conv-item:hover {
            background: rgba(0, 0, 0, 0.04);
            transform: scale(1.02);
        }
        
        .conv-item.active {
            background: var(--accent-soft);
        }
        
        .ci-av {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #ddd center/cover;
            flex-shrink: 0;
            position: relative;
        }
        
        .ci-unread {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 16px;
            height: 16px;
            background: var(--red);
            border-radius: 50%;
            border: 2px solid #fff;
            font-size: 9px;
            font-weight: 800;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .ci-info {
            flex: 1;
            min-width: 0;
        }
        
        .ci-name {
            font-weight: 800;
            font-size: 13.5px;
        }
        
        .ci-last {
            font-size: 11.5px;
            color: var(--text-3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
        }
        
        .chat-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
        }
        
        .chat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            flex-shrink: 0;
        }
        
        body.dark .chat-header {
            border-bottom-color: rgba(255, 255, 255, 0.07);
        }
        
        .chat-header-av {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #ddd center/cover;
        }
        
        .chat-header-name {
            font-weight: 900;
            font-size: 16px;
            flex: 1;
        }
        
        .chat-header-actions {
            display: flex;
            gap: 8px;
        }
        
        .chat-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 0;
        }
        
        .msg-row {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            animation: msgIn 0.35s var(--spring);
        }
        
        @keyframes msgIn {
            from {
                opacity: 0;
                transform: translateY(12px)
            }
            to {
                opacity: 1;
                transform: translateY(0)
            }
        }
        
        .msg-row.mine {
            flex-direction: row-reverse;
        }
        
        .msg-av {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #ddd center/cover;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.3s var(--spring);
        }
        
        .msg-av:hover {
            transform: scale(1.15);
        }
        
        .msg-bubble {
            max-width: 65%;
            padding: 10px 14px;
            border-radius: 18px 18px 18px 4px;
            background: rgba(0, 0, 0, 0.06);
            font-size: 14.5px;
            line-height: 1.55;
            word-break: break-word;
            color: var(--text);
        }
        
        body.dark .msg-bubble {
            background: rgba(255, 255, 255, 0.18);
            color: #f2f2f7;
        }
        
        body.dark #gchat-body .msg-row:not(.mine) .msg-bubble {
            background: rgba(255, 255, 255, 0.14);
            color: #f2f2f7;
        }
        
        .msg-row.mine .msg-bubble {
            background: var(--accent);
            color: #fff;
            border-radius: 18px 18px 4px 18px;
        }
        
        .msg-bubble img {
            max-width: 200px;
            border-radius: 10px;
            display: block;
            cursor: pointer;
        }
        
        .msg-bubble audio {
            width: 200px;
        }
        
        .msg-time {
            font-size: 10.5px;
            color: var(--text-3);
            margin: 0 4px 2px;
            flex-shrink: 0;
        }
        /* Shared post in chat */
        
        .msg-share-card {
            background: rgba(255, 255, 255, 0.85);
            border-radius: 12px;
            padding: 10px 12px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: background 0.2s;
            max-width: 220px;
        }
        
        .msg-share-card:hover {
            background: rgba(255, 255, 255, 0.98);
        }
        
        .msg-share-label {
            font-size: 10.5px;
            color: var(--text-3);
            margin-bottom: 4px;
        }
        
        .msg-share-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }
        
        .chat-input-bar {
            padding: 12px 16px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        
        body.dark .chat-input-bar {
            border-top-color: rgba(255, 255, 255, 0.07);
        }
        
        .chat-input {
            flex: 1;
            padding: 11px 16px;
            border-radius: 22px;
            border: 1.5px solid rgba(0, 0, 0, 0.08);
            background: rgba(0, 0, 0, 0.03);
            font-size: 14px;
            outline: none;
            transition: border-color 0.25s, background 0.25s;
            font-family: inherit;
            color: var(--text);
        }
        
        .chat-input:focus {
            border-color: var(--accent);
            background: #fff;
        }
        
        body.dark .chat-input:focus {
            background: rgba(255, 255, 255, 0.14);
        }
        
        .chat-tool-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            background: rgba(0, 0, 0, 0.05);
            cursor: pointer;
            font-size: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.25s, transform 0.3s var(--spring);
            flex-shrink: 0;
        }
        
        .chat-tool-btn:hover {
            background: rgba(0, 0, 0, 0.1);
            transform: scale(1.1);
        }
        
        .chat-send-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            background: var(--accent);
            color: #fff;
            cursor: pointer;
            font-size: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s var(--spring), opacity 0.2s;
            flex-shrink: 0;
        }
        
        .chat-send-btn:hover {
            transform: scale(1.1);
        }
        
        .chat-send-btn:active {
            transform: scale(0.92);
        }
        /* No conversation selected */
        
        .chat-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-3);
            gap: 12px;
        }
        
        .chat-empty .ce-icon {
            font-size: 56px;
        }
        
        .chat-empty p {
            font-size: 15px;
            font-weight: 600;
        }
        /* ═══════════════════════════════════════════════════
   PROFILE VIEW
═══════════════════════════════════════════════════ */
        
        .profile-hero {
            background: var(--glass);
            backdrop-filter: blur(20px);
            border-radius: var(--r-xl);
            padding: 36px 40px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            display: flex;
            align-items: center;
            gap: 32px;
            margin-bottom: 24px;
            animation: cardIn 0.5s var(--spring) backwards;
        }
        
        .profile-av-wrap {
            position: relative;
            cursor: pointer;
        }
        
        .profile-av {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            border: 4px solid #fff;
            background: #ddd center/cover;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            transition: transform 0.3s var(--spring), box-shadow 0.3s;
        }
        
        .profile-av-wrap:hover .profile-av {
            transform: scale(1.05);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
        }
        
        .profile-av-edit {
            position: absolute;
            bottom: 4px;
            right: 4px;
            width: 28px;
            height: 28px;
            background: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            border: 2px solid #fff;
        }
        
        .profile-info {
            flex: 1;
        }
        
        .profile-nick {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: -0.8px;
            margin-bottom: 4px;
        }
        
        .profile-uid {
            font-size: 12.5px;
            color: var(--text-3);
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .profile-bio {
            font-size: 15px;
            color: var(--text-2);
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        .profile-stats {
            display: flex;
            gap: 28px;
            margin-bottom: 20px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-num {
            font-size: 22px;
            font-weight: 900;
        }
        
        .stat-lbl {
            font-size: 11.5px;
            color: var(--text-3);
            font-weight: 600;
        }
        
        .profile-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        /* iOS-style toggle */
        
        .toggle {
            position: relative;
            width: 46px;
            height: 26px;
            background: #ddd;
            border-radius: 13px;
            cursor: pointer;
            transition: background 0.35s var(--ease);
            flex-shrink: 0;
        }
        
        .toggle::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
            transition: left 0.35s var(--spring), transform 0.15s;
        }
        
        .toggle.on {
            background: var(--green);
        }
        
        .toggle.on::after {
            left: 23px;
        }
        
        .toggle:active::after {
            transform: scaleX(1.15);
        }
        /* ═══════════════════════════════════════════════════
   GROUPS VIEW
═══════════════════════════════════════════════════ */
        
        .groups-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 18px;
        }
        
        .group-card {
            background: var(--glass);
            backdrop-filter: blur(16px);
            border-radius: var(--r-xl);
            padding: 22px;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-card);
            cursor: pointer;
            transition: transform 0.4s var(--spring), box-shadow 0.4s;
            animation: cardIn 0.5s var(--spring) backwards;
        }
        
        .group-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: var(--shadow-float);
        }
        
        .gc-av {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: #ddd center/cover;
            margin-bottom: 12px;
        }
        
        .gc-name {
            font-weight: 900;
            font-size: 17px;
            margin-bottom: 4px;
        }
        
        .gc-count {
            font-size: 12.5px;
            color: var(--text-3);
            margin-bottom: 12px;
        }
        
        .gc-notice {
            font-size: 13px;
            color: var(--text-2);
            line-height: 1.5;
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.03);
            border-radius: var(--r-m);
        }
        /* ═══════════════════════════════════════════════════
   MODALS & OVERLAYS
═══════════════════════════════════════════════════ */
        
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(24px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.35s var(--ease);
        }
        
        .overlay.opening {
            opacity: 1;
        }
        
        .overlay.open {
            display: flex;
        }
        
        .modal {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(40px);
            border-radius: var(--r-xl);
            padding: 36px;
            width: 90%;
            max-width: 480px;
            box-shadow: var(--shadow-modal);
            transform: translateY(40px) scale(0.95);
            transition: transform 0.45s var(--spring), opacity 0.35s;
            opacity: 0;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        body.dark .modal {
            background: rgba(30, 30, 32, 0.96);
        }
        
        .overlay.opening .modal {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        
        .modal-title {
            font-size: 22px;
            font-weight: 900;
            letter-spacing: -0.5px;
            margin-bottom: 24px;
        }
        
        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.06);
            border: none;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, transform 0.3s var(--spring);
        }
        
        .modal-close:hover {
            background: rgba(0, 0, 0, 0.12);
            transform: rotate(90deg);
        }
        
        .form-label {
            display: block;
            font-size: 12.5px;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: var(--text-3);
            text-transform: uppercase;
            margin-bottom: 7px;
        }
        
        .form-input {
            width: 100%;
            padding: 13px 16px;
            border-radius: var(--r-m);
            border: 1.5px solid rgba(0, 0, 0, 0.09);
            background: rgba(0, 0, 0, 0.03);
            font-size: 15px;
            outline: none;
            transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
            font-family: inherit;
            color: var(--text);
            margin-bottom: 18px;
        }
        
        .form-input:focus {
            border-color: var(--accent);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
        }
        
        .form-textarea {
            resize: none;
            height: 110px;
            line-height: 1.6;
        }
        
        .pub-img-pre {
            width: 100%;
            max-height: 220px;
            object-fit: contain;
            border-radius: var(--r-m);
            background: rgba(0, 0, 0, 0.03);
            margin-bottom: 14px;
            display: none;
            animation: cardIn 0.4s var(--spring);
        }
        
        .btn-full {
            width: 100%;
            padding: 16px 20px;
            border-radius: var(--r-l);
            border: none;
            background: #1a1a2e;
            color: #fff;
            font-size: 17px;
            font-weight: 900;
            cursor: pointer;
            transition: transform 0.3s var(--spring), box-shadow 0.3s, opacity 0.2s;
            font-family: inherit;
            letter-spacing: 0.02em;
        }
        
        .btn-full:hover {
            transform: scale(1.02);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
        }
        
        .btn-full:active {
            transform: scale(0.97);
            opacity: 0.9;
        }
        
        .btn-full.secondary {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text);
            box-shadow: none;
        }
        
        .btn-full.secondary:hover {
            background: rgba(0, 0, 0, 0.09);
            box-shadow: none;
        }
        
        .btn-full.danger {
            background: rgba(255, 59, 48, 0.10);
            color: var(--red);
            box-shadow: none;
        }
        
        .btn-full.danger:hover {
            background: rgba(255, 59, 48, 0.16);
            box-shadow: none;
        }
        
        .modal-divider {
            height: 1px;
            background: rgba(0, 0, 0, 0.07);
            margin: 20px 0;
        }
        /* ═══════════════════════════════════════════════════
   CONTEXT MENU (右键/更多菜单)
═══════════════════════════════════════════════════ */
        
        .ctx-menu {
            position: fixed;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(30px);
            border-radius: var(--r-l);
            box-shadow: var(--shadow-float);
            border: 1px solid rgba(0, 0, 0, 0.08);
            z-index: 2000;
            min-width: 170px;
            padding: 6px;
            display: none;
            animation: dropIn 0.25s var(--spring);
        }
        
        body.dark .ctx-menu {
            background: rgba(36, 36, 38, 0.97);
        }
        
        .ctx-menu.open {
            display: block;
        }
        
        .ctx-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: var(--r-s);
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: background 0.2s;
            color: var(--text);
        }
        
        .ctx-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }
        
        .ctx-item.red {
            color: var(--red);
        }
        
        .ctx-item.red:hover {
            background: rgba(255, 59, 48, 0.08);
        }
        
        .ctx-sep {
            height: 1px;
            background: rgba(0, 0, 0, 0.06);
            margin: 4px 0;
        }
        /* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */
        
        .toast-root {
            position: fixed;
            bottom: 36px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            pointer-events: none;
        }
        
        .toast {
            background: rgba(30, 30, 30, 0.92);
            color: #fff;
            padding: 12px 24px;
            border-radius: 28px;
            font-weight: 700;
            font-size: 14.5px;
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            animation: toastIn 0.4s var(--spring);
            white-space: nowrap;
        }
        
        .toast.success {
            background: rgba(52, 199, 89, 0.92);
        }
        
        .toast.error {
            background: rgba(255, 59, 48, 0.92);
        }
        
        .toast.warn {
            background: rgba(255, 149, 0, 0.92);
        }
        
        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateY(16px) scale(0.92)
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }
        
        @keyframes toastOut {
            to {
                opacity: 0;
                transform: translateY(10px) scale(0.95)
            }
        }
        
        .toast.leaving {
            animation: toastOut 0.35s var(--ease) forwards;
        }
        /* ═══════════════════════════════════════════════════
   IMAGE LIGHTBOX
═══════════════════════════════════════════════════ */
        
        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.88);
            z-index: 5000;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: zoom-out;
            animation: fadeIn 0.3s var(--ease);
        }
        
        .lightbox.open {
            display: flex;
        }
        
        .lightbox img {
            max-width: 90%;
            max-height: 90%;
            border-radius: var(--r-xl);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
            animation: lbIn 0.4s var(--spring);
        }
        
        @keyframes lbIn {
            from {
                transform: scale(0.85) translateY(20px);
                opacity: 0
            }
            to {
                transform: scale(1) translateY(0);
                opacity: 1
            }
        }
        /* ═══════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════ */
        
        .privacy-select {
            width: 100%;
            padding: 12px 16px;
            border-radius: var(--r-m);
            border: 1.5px solid rgba(0, 0, 0, 0.09);
            background: rgba(0, 0, 0, 0.03);
            font-size: 15px;
            outline: none;
            font-family: inherit;
            color: var(--text);
            margin-bottom: 18px;
            appearance: none;
            cursor: pointer;
            transition: border-color 0.25s;
        }
        
        .privacy-select:focus {
            border-color: var(--accent);
        }
        
        .row-btns {
            display: flex;
            gap: 10px;
            margin-top: 6px;
        }
        
        .row-btns .btn-full {
            flex: 1;
        }
        /* Recording indicator */
        
        .rec-indicator {
            display: none;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: rgba(255, 59, 48, 0.1);
            border-radius: 22px;
            color: var(--red);
            font-size: 13px;
            font-weight: 800;
        }
        
        .rec-indicator.active {
            display: flex;
        }
        
        .rec-dot {
            width: 8px;
            height: 8px;
            background: var(--red);
            border-radius: 50%;
            animation: recPulse 1s ease infinite;
        }
        
        @keyframes recPulse {
            0%,
            100% {
                opacity: 1;
                transform: scale(1)
            }
            50% {
                opacity: 0.4;
                transform: scale(0.8)
            }
        }
        /* Group chat modal large */
        
        .modal.large {
            max-width: 680px;
        }
        
        .group-chat-body {
            height: 320px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 4px 0 10px;
            margin-bottom: 14px;
        }
        /* ═════════════════════════════════════════════════════
           极致完美主义：苹果风液态玻璃私信 UI
           ═════════════════════════════════════════════════════ */
        
         :root {
            --ios-blue: #0A84FF;
            --ios-gray: #E5E5EA;
            --ios-gray-dark: #3A3A3C;
            --glass-bg: rgba(255, 255, 255, 0.65);
            --glass-border: rgba(255, 255, 255, 0.3);
            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }
        /* 黑暗模式适配 */
        
        @media (prefers-color-scheme: dark) {
             :root {
                --glass-bg: rgba(28, 28, 30, 0.65);
                --glass-border: rgba(255, 255, 255, 0.1);
                --ios-gray: #2C2C2E;
                --ios-gray-dark: #E5E5EA;
            }
        }
        
        body.dark {
            --ios-gray-dark: #E5E5EA;
        }
        
        .chat-container {
            display: flex;
            height: 85vh;
            border-radius: 24px;
            background: var(--glass-bg);
            backdrop-filter: blur(25px) saturate(200%);
            -webkit-backdrop-filter: blur(25px) saturate(200%);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            overflow: hidden;
            transform: translateZ(0);
            animation: cardIn 0.5s var(--spring) backwards;
            /* 切换回聊天视图时重新播放入场动画 */
            .chat-container.view-enter {
                animation: chatEnter 0.4s var(--spring) forwards;
            }
            @keyframes chatEnter {
                from {
                    opacity: 0.8;
                    transform: scale(0.98) translateZ(0);
                }
                to {
                    opacity: 1;
                    transform: scale(1) translateZ(0);
                }
            }
        }
        /* 左侧会话/好友列表 */
        
        .chat-sidebar {
            width: 280px;
            min-height: 0;
            border-right: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }

        .chat-sidebar-header {

            padding: 20px;
            font-size: 20px;
            font-weight: 700;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .chat-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }
        
        .chat-list::-webkit-scrollbar {
            width: 6px;
        }
        
        .chat-list::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }
        
        .conv-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            margin-bottom: 4px;
            position: relative;
        }
        
        .conv-item:hover {
            background: rgba(0, 0, 0, 0.05);
            transform: scale(1.02);
        }
        
        .conv-item.active {
            background: var(--ios-blue);
            color: white;
            box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3);
        }
        
        .conv-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-size: cover;
            margin-right: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
        }
        
        .conv-unread {
            position: absolute;
            top: 8px;
            left: 48px;
            background: #FF3B30;
            color: white;
            font-size: 11px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 10px;
            border: 2px solid white;
        }
        /* 右侧聊天主区域 */
        
        .chat-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .chat-back-btn {
            display: none;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 700;
            color: var(--ios-blue);
            cursor: pointer;
            background: none;
            border: none;
            font-family: inherit;
            transition: transform 0.3s var(--spring);
        }
        
        .chat-back-btn:hover {
            transform: scale(1.06);
        }
        
        .is-mobile .chat-container.in-conversation .chat-back-btn {
            display: flex;
        }
        
        .chat-header {
            padding: 16px 20px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--glass-border);
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            z-index: 10;
        }
        
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            scroll-behavior: smooth;
            transition: opacity 0.25s var(--ease);
        }
        
        .chat-messages.switching {
            opacity: 0;
        }
        
        .chat-messages::-webkit-scrollbar {
            width: 6px;
        }
        
        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }
        /* 主面板内置 Chat 消息容器 */
        
        #chat-messages-box {
            align-items: flex-start;
        }
        
        #chat-messages-box>.msg-row {
            animation: none;
            opacity: 1;
            transform: none;
        }
        /* 新发送消息的飞入动画 — 用 !important 覆盖 #chat-messages-box 的 animation:none */
        
        .msg-row.msg-fly-in {
            animation: msgFlyIn 0.35s var(--spring) !important;
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        
        @keyframes msgFlyIn {
            from {
                opacity: 0;
                transform: translateY(14px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        body.dark #chat-messages-box>.msg-row:not(.mine) .msg-bubble {
            background: rgba(255, 255, 255, 0.18);
            color: #f2f2f7;
        }
        /* 简易气泡（兼容旧格式） */
        
        #chat-messages-box>.msg {
            align-self: flex-start;
            max-width: 78%;
            padding: 10px 14px;
            border-radius: 18px;
            background: var(--ios-gray);
            color: var(--ios-gray-dark);
            font-size: 15px;
            line-height: 1.4;
            word-break: break-word;
        }
        
        #chat-messages-box>.msg.mine {
            align-self: flex-end;
            background: var(--ios-blue);
            color: #fff;
        }
        
        body.dark #chat-messages-box>.msg:not(.mine) {
            background: rgba(255, 255, 255, 0.12);
            color: var(--text);
        }
        /* 苹果风气泡核心实现 */
        
        .msg-row {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            max-width: 75%;
            animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            opacity: 0;
            transform: translateY(20px);
        }
        
        .msg-row.mine {
            align-self: flex-end;
            align-items: flex-end;
        }
        
        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .msg-bubble {
            padding: 12px 18px;
            border-radius: 20px;
            font-size: 15px;
            line-height: 1.4;
            position: relative;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        /* 对方的气泡 */
        
        .msg-row:not(.mine) .msg-bubble {
            background: var(--ios-gray);
            color: var(--ios-gray-dark);
            border-bottom-left-radius: 4px;
        }
        /* 自己的气泡 */
        
        .msg-row.mine .msg-bubble {
            background: var(--ios-blue);
            color: white;
            border-bottom-right-radius: 4px;
            box-shadow: 0 4px 15px rgba(10, 132, 255, 0.2);
        }
        
        .msg-meta {
            font-size: 11px;
            color: rgba(0, 0, 0, 0.4);
            margin-top: 4px;
            display: flex;
            gap: 8px;
        }
        
        .msg-row.mine .msg-meta {
            flex-direction: row-reverse;
        }
        /* 底部输入框 */
        
        .chat-input-area {
            padding: 16px 20px;
            padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            background: var(--glass-bg);
            border-top: 1px solid var(--glass-border);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .is-mobile .chat-input-area {
            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 70px);
        }
        
        .chat-input {
            flex: 1;
            border: none;
            padding: 14px 20px;
            border-radius: 24px;
            background: rgba(0, 0, 0, 0.05);
            font-size: 15px;
            outline: none;
            transition: all 0.3s ease;
            color: var(--text);
        }
        
        .chat-input::placeholder {
            color: var(--text-3);
        }
        
        .chat-input:focus {
            background: rgba(0, 0, 0, 0.08);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .chat-send-btn {
            background: var(--ios-blue);
            color: white;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 10px rgba(10, 132, 255, 0.3);
        }
        
        .chat-send-btn:hover {
            transform: scale(1.1);
        }
        
        .chat-send-btn:active {
            transform: scale(0.9);
        }
        /* ── 身份牌 ── */
        
        .identity-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 8px;
        }
        
        .id-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 600;
            background: rgba(0, 0, 0, 0.07);
            color: var(--text-2);
            margin: 2px;
        }
        
        body.dark .id-tag {
            background: rgba(255, 255, 255, 0.1);
        }
        /* ── 设置页面 ── */
        
        .settings-page {
            max-width: 820px;
            margin: 0 auto;
            min-height: 70vh;
        }
        
        .settings-tabs-wrapper {
            margin-bottom: 28px;
        }
        
        .settings-tabs-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding: 6px 6px 18px 6px;
            margin-left: -6px;
            margin-right: -6px;
        }
        
        .settings-tabs-scroll::-webkit-scrollbar {
            height: 0;
        }
        
        .settings-tabs {
            display: flex;
            gap: 6px;
            min-width: max-content;
        }
        
        .settings-tab {
            padding: 10px 22px;
            border-radius: 24px;
            border: 1.5px solid var(--glass-border);
            background: transparent;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.25s var(--spring);
            white-space: nowrap;
            color: var(--text-2);
            font-family: inherit;
        }
        
        .settings-tab:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: scale(1.04);
        }
        
        .settings-tab.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
            transform: scale(1.04);
        }
        
        .settings-content {
            animation: settingsFadeIn 0.4s var(--spring);
        }
        
        @keyframes settingsFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px);
                filter: blur(3px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }
        
        .settings-content.switching {
            animation: settingsFadeOut 0.2s var(--spring) forwards;
        }
        
        @keyframes settingsFadeOut {
            to {
                opacity: 0;
                transform: translateY(-8px);
                filter: blur(3px);
            }
        }
        
        .settings-section-title {
            font-size: 22px;
            font-weight: 800;
            margin: 0 0 24px 0;
        }
        
        .settings-card {
            background: var(--glass);
            backdrop-filter: url('#yuni-panel-liquid') blur(2px) saturate(135%) contrast(1.03);
            -webkit-backdrop-filter: blur(var(--blur-val)) saturate(135%);
            border: 1px solid var(--glass-border);
            border-radius: 18px;
            padding: 20px 24px;
            margin-bottom: 14px;
            animation: cardIn 0.5s var(--spring) backwards;
            transition: transform 0.3s var(--spring), box-shadow 0.3s;
        }
        
        .settings-card:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-float);
        }
        
        .settings-card:nth-child(1) {
            animation-delay: 0s;
        }
        
        .settings-card:nth-child(2) {
            animation-delay: 0.06s;
        }
        
        .settings-card:nth-child(3) {
            animation-delay: 0.12s;
        }
        
        .settings-card:nth-child(4) {
            animation-delay: 0.18s;
        }
        
        .settings-card:nth-child(5) {
            animation-delay: 0.24s;
        }
        
        .settings-card h4 {
            margin: 0 0 6px 0;
            font-size: 15px;
            font-weight: 700;
        }
        
        .settings-card .s-desc {
            font-size: 12px;
            color: var(--text-3);
            margin-bottom: 14px;
        }
        
        .settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
        }
        
        .settings-row+.settings-row {
            border-top: 1px solid var(--glass-border);
        }
        
        .settings-row .s-label {
            font-size: 14px;
            font-weight: 600;
        }
        
        .settings-row .s-hint {
            font-size: 12px;
            color: var(--text-3);
            margin-top: 2px;
        }
        
        .settings-row input[type="text"],
        .settings-row input[type="email"],
        .settings-row input[type="password"] {
            padding: 8px 14px;
            border-radius: 10px;
            border: 1.5px solid var(--glass-border);
            background: var(--bg);
            font-size: 13px;
            outline: none;
            width: 220px;
            transition: 0.2s;
        }
        
        .settings-row input:focus {
            border-color: var(--accent);
        }

        .password-settings input:-webkit-autofill,
        .password-settings input:-webkit-autofill:hover,
        .password-settings input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--text) !important;
            caret-color: var(--text);
            box-shadow: 0 0 0 1000px var(--bg) inset !important;
            -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
            transition: background-color 9999s ease-out 0s;
        }
        
        .settings-btn {
            padding: 8px 18px;
            border-radius: 12px;
            border: none;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            font-family: inherit;
        }
        
        .settings-btn.primary {
            background: var(--accent);
            color: #fff;
        }
        
        .settings-btn.primary:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        
        .settings-btn.ghost {
            background: transparent;
            border: 1.5px solid var(--glass-border);
            color: var(--text-2);
        }
        
        .settings-btn.ghost:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: scale(1.04);
        }
        
        .settings-btn.danger {
            background: transparent;
            border: 1.5px solid var(--red);
            color: var(--red);
        }
        
        .settings-btn.danger:hover {
            background: var(--red);
            color: #fff;
            transform: scale(1.04);
        }
        
        .settings-toggle {
            width: 48px;
            height: 28px;
            border-radius: 14px;
            background: #e0e0e0;
            cursor: pointer;
            position: relative;
            transition: 0.25s;
            border: none;
            flex-shrink: 0;
        }
        
        .settings-toggle:hover {
            transform: scale(1.06);
        }
        
        .settings-toggle.on {
            background: var(--accent);
        }
        
        .settings-toggle::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            transition: 0.25s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }
        
        .settings-toggle.on::after {
            left: 23px;
        }
        
        .settings-code-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .settings-code-row input {
            flex: 1;
        }
        
        .settings-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
        }
        
        .settings-badge.ok {
            background: rgba(52, 199, 89, 0.15);
            color: #34c759;
        }
        
        .settings-badge.warn {
            background: rgba(255, 149, 0, 0.15);
            color: #ff9500;
        }
        
        @media (max-width: 768px) {
            .settings-tab {
                font-size: 12px;
                padding: 8px 14px;
                border-radius: 18px;
            }
            .settings-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            .settings-row input[type="text"],
            .settings-row input[type="email"],
            .settings-row input[type="password"] {
                width: 100%;
            }
        }
        /* ── 排行榜 ── */
        
        .lb-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        
        .lb-tab {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            cursor: pointer;
            transition: all 0.3s var(--spring);
        }
        
        .lb-tab:hover:not(.active) {
            transform: scale(1.05);
        }
        
        .lb-tab.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        
        .lb-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: var(--r-m);
            background: var(--glass);
            border: 1px solid var(--glass-border);
            margin-bottom: 8px;
            transition: background 0.25s, transform 0.3s var(--spring);
            animation: cardIn 0.4s var(--spring) backwards;
        }
        
        .lb-item:hover {
            transform: scale(1.02);
        }
        
        .lb-item:nth-child(1) {
            animation-delay: 0s;
        }
        
        .lb-item:nth-child(2) {
            animation-delay: 0.04s;
        }
        
        .lb-item:nth-child(3) {
            animation-delay: 0.08s;
        }
        
        .lb-item:nth-child(4) {
            animation-delay: 0.12s;
        }
        
        .lb-item:nth-child(5) {
            animation-delay: 0.16s;
        }
        
        .lb-item:nth-child(6) {
            animation-delay: 0.20s;
        }
        
        .lb-item:nth-child(7) {
            animation-delay: 0.24s;
        }
        
        .lb-item:nth-child(8) {
            animation-delay: 0.28s;
        }
        
        .lb-item:nth-child(9) {
            animation-delay: 0.32s;
        }
        
        .lb-item:nth-child(10) {
            animation-delay: 0.36s;
        }
        
        .lb-rank {
            font-size: 20px;
            font-weight: 900;
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .lb-rank-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border: 2px solid currentColor;
            border-radius: 50%;
            color: #1f2328;
            font-size: 14px;
            font-weight: 900;
            line-height: 1;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 6px rgba(0, 0, 0, 0.12);
        }
        
        .lb-rank.gold {
            color: #c89400;
        }

        .lb-rank.gold .lb-rank-mark {
            background: #f4c542;
        }
        
        .lb-rank.silver {
            color: #8b949e;
        }

        .lb-rank.silver .lb-rank-mark {
            background: #d8dee4;
        }
        
        .lb-rank.bronze {
            color: #9a5b2e;
        }

        .lb-rank.bronze .lb-rank-mark {
            background: #c98a58;
        }
        
        .lb-av {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .lb-name {
            font-weight: 600;
            flex: 1;
        }
        
        .lb-score {
            font-size: 13px;
            color: var(--text-2);
        }
        
        .lb-images {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 12px;
        }
        
        .lb-images img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 12px;
            cursor: pointer;
        }
        /* ── 通知弹窗 ── */
        
        .notif-popup {
            position: fixed;
            top: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 380px;
            max-width: 92vw;
            z-index: 9998;
            background: var(--glass);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 16px 20px;
            box-shadow: var(--shadow-float);
            transition: top 0.45s var(--spring);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .notif-popup.show {
            top: 16px;
        }
        
        .notif-popup .np-av {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .notif-popup .np-body {
            flex: 1;
            min-width: 0;
        }
        
        .notif-popup .np-name {
            font-weight: 700;
            font-size: 14px;
        }
        
        .notif-popup .np-text {
            font-size: 13px;
            color: var(--text-2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .notif-popup .np-actions {
            display: flex;
            gap: 6px;
        }
        
        .notif-popup .np-btn {
            padding: 6px 14px;
            border-radius: 16px;
            border: none;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .np-btn.reply {
            background: var(--accent);
            color: #fff;
        }
        
        .np-btn.dismiss {
            background: rgba(0, 0, 0, 0.08);
            color: var(--text);
        }
        
        body.dark .np-btn.dismiss {
            background: rgba(255, 255, 255, 0.1);
        }
        /* ── 三横线菜单 ── */
        
        .trio-menu {
            position: absolute;
            top: 50px;
            right: 8px;
            background: var(--glass);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            box-shadow: var(--shadow-float);
            z-index: 100;
            min-width: 160px;
            padding: 6px;
            display: none;
        }
        
        .trio-menu.show {
            display: block;
        }
        
        .trio-menu .trio-item {
            padding: 10px 16px;
            font-size: 13px;
            cursor: pointer;
            border-radius: 12px;
            transition: 0.2s;
            color: var(--text);
        }
        
        .trio-menu .trio-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }
        
        body.dark .trio-menu .trio-item:hover {
            background: rgba(255, 255, 255, 0.06);
        }
        /* ── 消息引用 ── */
        
        .quote-bubble {
            background: rgba(0, 0, 0, 0.04);
            border-left: 3px solid var(--accent);
            padding: 6px 10px;
            border-radius: 6px;
            margin-bottom: 6px;
            font-size: 12px;
            color: var(--text-2);
            cursor: pointer;
            max-width: 280px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        body.dark .quote-bubble {
            background: rgba(255, 255, 255, 0.06);
        }
    }
    /* ══════════════════════════════════════════════════════════
           MOBILE RESPONSIVE  (max-width: 768px)
           ══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
        html,
        body {
            overflow: auto;
        }
        
        body {
            flex-direction: column;
        }
        /* 触摸优化 */
        
        * {
            -webkit-tap-highlight-color: transparent;
        }
        
        .nav-item,
        .btn-sm,
        .btn-full,
        .btn-main,
        button {
            cursor: pointer;
            -webkit-touch-callout: none;
        }
        /* 侧边栏 → 底部导航栏 */
        
        .sidebar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: auto;
            width: 100%;
            height: auto;
            min-height: 60px;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
            padding: 6px 2px;
            padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
            z-index: 500;
            border-right: none;
            border-top: 1px solid var(--glass-border);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            background: var(--glass);
            backdrop-filter: blur(24px) saturate(200%);
            -webkit-backdrop-filter: blur(24px) saturate(200%);
        }
        
        .sidebar::-webkit-scrollbar {
            display: none;
        }
        
        .sidebar .logo-wrap,
        .sidebar .nav-section-label,
        .sidebar .sidebar-user,
        .sidebar .nav-item[onclick*="logout"] {
            display: none;
        }
        
        .sidebar .nav-item {
            flex-direction: column;
            gap: 2px;
            padding: 6px 10px;
            font-size: 10px;
            border-radius: 10px;
            text-align: center;
            min-width: 52px;
            flex: 0 0 auto;
            white-space: nowrap;
        }
        
        .sidebar .nav-item .n-icon {
            font-size: 22px;
            margin: 0;
        }
        
        .sidebar .nav-badge {
            position: absolute;
            top: 0;
            right: 2px;
            font-size: 9px;
            min-width: 16px;
            height: 16px;
        }
        /* 主区域上移，底部留出导航栏空间 */
        
        .main-stage {
            padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 24px);
            min-height: 100vh;
            overflow: visible;
        }
        /* 顶部导航栏 */
        
        .top-nav {
            padding: 16px 16px 12px;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .v-title {
            font-size: 24px;
        }
        
        .top-actions {
            gap: 6px;
        }
        
        .search-input {
            width: 120px;
            padding: 8px 12px 8px 30px;
            font-size: 13px;
        }
        /* 视图 padding 缩减 */
        
        .view {
            padding: 0 12px 12px !important;
        }
        
        #v-chat {
            padding: 0 8px 8px !important;
        }
        /* 帖子卡片全宽 */
        
        .post-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .post-card {
            padding: 16px;
        }
        
        .card-img {
            max-height: 200px;
            object-fit: contain;
        }
        /* 弹窗 */
        
        .modal {
            width: 94%;
            max-width: 100%;
            padding: 24px 18px;
            border-radius: 20px;
            max-height: 85vh;
        }
        
        .modal.large {
            max-width: 100%;
            padding: 20px 16px;
        }
        
        .modal-title {
            font-size: 18px;
            margin-bottom: 16px;
        }
        
        .modal-close {
            top: 12px;
            right: 12px;
        }
        /* 群组广场 */
        
        .groups-grid {
            grid-template-columns: 1fr !important;
            gap: 10px;
        }
        /* 好友布局 */
        
        .friends-layout {
            grid-template-columns: 1fr !important;
            gap: 12px;
        }
        /* 聊天面板全屏 — 手机端专属滑动体验 */
        
        .chat-container {
            flex-direction: column !important;
            height: calc(100vh - 100px) !important;
            border-radius: 24px 24px 0 0;
            position: relative;
            overflow: hidden !important;
        }
        /* 手机端：侧栏全宽遮罩，联系人选择页 */
        .chat-sidebar {
            width: 100% !important;
            max-height: none !important;
            height: 100% !important;
            flex-shrink: 0;
            position: absolute;
            inset: 0;
            z-index: 2;
            background: var(--glass-bg);
            backdrop-filter: blur(25px) saturate(200%);
            -webkit-backdrop-filter: blur(25px) saturate(200%);
            transform: translateX(0);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
        }
        /* 选择联系人后侧栏滑出 */
        .chat-container.in-conversation .chat-sidebar {
            transform: translateX(-105%);
            opacity: 1;
            max-height: none;
            overflow: hidden;
            border-right: none;
            pointer-events: none;
        }
        .chat-main {
            flex: 1 !important;
            min-height: 0;
        }
        /* 手机端：聊天面板从右侧滑入，全屏铺满 */
        .is-mobile .chat-container .chat-main {
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            position: absolute;
            inset: 0;
            z-index: 1;
            transform: translateX(110%);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
            background: var(--glass-bg);
            pointer-events: none;
        }
        .is-mobile .chat-container.in-conversation .chat-main {
            transform: translateX(0);
            z-index: 3;
            pointer-events: auto;
        }
        /* 返回按钮在聊天面板顶部可见 */
        .chat-back-btn {
            display: none;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            font-size: 14px;
            font-weight: 700;
            color: var(--ios-blue);
            cursor: pointer;
            background: none;
            border: none;
            font-family: inherit;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            flex-shrink: 0;
        }
        .is-mobile .chat-container .chat-back-btn {
            display: flex;
        }
        .chat-container:not(.in-conversation) .chat-back-btn {
            display: none !important;
        }
        /* 消息区域填满 */
        .is-mobile .chat-container.in-conversation #chat-main-panel {
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
        }
        .chat-container.in-conversation #chat-messages-box {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .msg-bubble {
            max-width: 82%;
        }
        
        .msg-bubble img {
            max-width: 140px;
        }
        
        .msg-bubble audio {
            width: 160px;
        }
        /* 聊天输入区 */
        
        .chat-input-bar {
            padding: 8px 10px;
            gap: 6px;
        }
        
        .chat-input {
            font-size: 14px;
            padding: 10px 12px;
        }
        /* 群聊弹窗 */
        
        .group-chat-body {
            max-height: calc(100vh - 280px) !important;
        }
        /* 按钮适配 */
        
        .btn-main,
        .btn-full {
            padding: 15px 18px;
            font-size: 16px;
            border-radius: 18px;
        }
        
        .btn-sm {
            padding: 8px 15px;
            font-size: 13px;
        }
        
        .action-btn {
            padding: 8px 12px;
            font-size: 13px;
        }
        /* 表单 */
        
        .form-input {
            font-size: 14px;
            padding: 12px 16px;
        }
        #m-group-manage {
            width: 100%;
            right: 0;
        }
        /* 排行榜 */
        
        .lb-grid {
            grid-template-columns: 1fr !important;
        }
        /* 个人资料 */
        
        .profile-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .profile-card {
            width: 100%;
        }
        /* 通知弹窗 */
        
        #notif-popup {
            left: 8px;
            right: 8px;
            bottom: auto;
            max-width: none;
        }
        
        #notif-popup.show {
            top: 16px;
        }
        /* 身份牌在移动端缩小 */
        
        .id-badge {
            font-size: 10px;
            padding: 2px 8px;
        }
        /* 禁用悬停动画（触摸设备无 hover） */
        
        .post-card:hover {
            transform: none;
            box-shadow: var(--shadow-card);
        }
        
        .post-card:active {
            transform: scale(0.98);
        }
        
        .btn-main:hover {
            transform: none;
        }
        
        .btn-main:active {
            transform: scale(0.96);
        }
        /* 文件选择按钮增大触摸区域 */
        
        input[type="file"] {
            min-height: 44px;
        }
    }
    /* ── 移动端横屏适配 ── */
    @media (orientation: landscape) and (max-height: 500px) {
        .sidebar {
            padding: 3px 4px;
            padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px));
        }
        
        .sidebar .nav-item {
            padding: 3px 6px;
            font-size: 8px;
            gap: 1px;
            min-width: 40px;
        }
        
        .sidebar .nav-item .n-icon {
            font-size: 17px;
        }
        
        .main-stage {
            padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px) + 12px);
        }
        
        .top-nav {
            padding: 8px 12px 6px;
        }
        
        .v-title {
            font-size: 18px;
        }
        
        .modal {
            max-height: 75vh;
            padding: 16px 14px;
        }
        
        .post-card {
            padding: 12px;
        }
        
        .card-img {
            max-height: 120px;
        }
        
        .chat-container {
            height: calc(100vh - 120px) !important;
        }
        
        .chat-sidebar {
            max-height: 80px;
        }
        
        .group-chat-body {
            max-height: calc(100vh - 200px) !important;
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        
        .btn-full {
            padding: 12px 16px;
            font-size: 14px;
        }
        
        .action-btn {
            padding: 6px 10px;
            font-size: 12px;
        }
        
        .comment-section.open {
            max-height: 300px;
        }
        
        .comments-list {
            max-height: 150px;
        }
    }
    /* ==================== 赞助我们 ==================== */
    .sponsor-page {
        display: flex;
        gap: 48px;
        align-items: flex-start;
        max-width: 1100px;
        margin: 0 auto;
        padding: 60px 24px 120px;
    }
    .sponsor-text-col {
        flex: 1 1 0%;
        min-width: 280px;
    }
    .sponsor-hero {
        text-align: left;
        margin-bottom: 36px;
        animation: cardIn 0.65s var(--spring);
    }
    .sponsor-hero h2 {
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 0.04em;
        margin: 0 0 14px;
        background: linear-gradient(135deg, #007aff, #5856d6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .sponsor-hero .sponsor-subtitle {
        font-size: 13px;
        color: var(--text-3);
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .sponsor-typewriter {
        font-size: 16px;
        line-height: 1.9;
        color: var(--text);
        letter-spacing: 0.025em;
    }
    .sponsor-typewriter .typing-line {
        margin: 0 0 16px;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    }
    .sponsor-typewriter .typing-line.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .sponsor-typewriter .typing-line strong {
        font-weight: 700;
        color: var(--accent);
    }
    .sponsor-typewriter .typing-line.final {
        text-align: left;
        font-weight: 700;
        font-size: 18px;
        margin-top: 40px;
        letter-spacing: 0.04em;
    }
    .typing-cursor {
        display: inline;
        color: var(--accent);
        font-weight: 300;
        animation: cursorBlink 0.7s infinite;
    }
    @keyframes cursorBlink {
        0%,
        100% {
            opacity: 1;
        }
        
        50% {
            opacity: 0;
        }
    }
    .sponsor-video-wrap {
        flex: 0 0 380px;
        width: 380px;
        position: sticky;
        top: 24px;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s var(--ease), transform 0.6s var(--spring);
    }
    .sponsor-video-wrap.reveal {
        opacity: 1;
        transform: translateY(0);
    }
    .sponsor-video-wrap video {
        width: 100%;
        aspect-ratio: 9 / 16;
        object-fit: cover;
        border-radius: var(--r-l);
        box-shadow: var(--shadow-float);
        display: block;
    }
    .sponsor-video-label {
        margin-top: 16px;
        font-size: 13px;
        color: var(--text-2);
        letter-spacing: 0.04em;
        text-align: center;
    }
    .sponsor-divider {
        width: 36px;
        height: 3px;
        background: var(--accent);
        border-radius: 2px;
        margin: 0 auto 20px;
        opacity: 0.35;
    }
    @media (max-width: 768px) {
        .sponsor-page {
            flex-direction: column;
            padding: 32px 20px 80px;
        }
        
        .sponsor-hero h2 {
            font-size: 24px;
        }
        
        .sponsor-typewriter {
            font-size: 15px;
            line-height: 1.8;
        }
        
        .sponsor-video-wrap {
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            position: static;
        }
    }

/* Mobile shell override. Kept at the end so legacy desktop rules cannot win. */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        display: block;
    }

    .sidebar {
        position: fixed !important;
        z-index: 500;
        inset: auto 0 0 !important;
        width: 100% !important;
        height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 64px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        border-top: 1px solid var(--glass-border);
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        scrollbar-width: none;
    }

    body.dark .sidebar {
        background: rgba(25, 25, 28, 0.88);
    }

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

    .sidebar .logo-wrap,
    .sidebar .nav-section-label,
    .sidebar .sidebar-spacer,
    .sidebar .sidebar-user,
    .sidebar .nav-item[onclick*="doLogout"] {
        display: none !important;
    }

    .sidebar .nav-item {
        min-width: 64px;
        height: 50px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        margin: 0;
        padding: 6px 9px;
        border-radius: 14px;
        font-size: 11px;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
    }

    .sidebar .nav-item:hover {
        transform: none;
    }

    .sidebar .nav-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        margin: 0;
    }

    .main-stage {
        width: 100%;
        min-width: 0;
        min-height: 100vh;
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        overflow: visible;
    }

    .top-nav {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 14px;
    }

    .v-title {
        font-size: 25px;
        line-height: 1.15;
    }

    .top-actions {
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .search-wrap {
        min-width: 0;
        flex: 1;
    }

    .search-input {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 9px 12px 9px 34px;
        font-size: 13px;
    }

    .btn-pub {
        min-height: 42px;
        padding: 9px 12px;
        border-radius: 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .top-av {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .view,
    #v-chat,
    #v-leaderboard {
        width: 100%;
        min-width: 0;
        padding: 0 12px 16px !important;
    }

    .post-grid,
    .friends-layout,
    .profile-grid,
    .groups-grid,
    .settings-grid,
    .stats-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .post-card,
    .friend-section-card,
    .profile-card,
    .group-card,
    .settings-card {
        min-width: 0;
        border-radius: 18px;
    }

    .chat-container {
        width: 100%;
        height: calc(100dvh - 184px);
        min-height: 430px;
        border-radius: 18px;
    }

    .chat-sidebar {
        width: 100%;
    }

    .is-mobile .chat-container .chat-main {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .chat-input-area {
        gap: 6px;
        padding: 9px;
    }

    .chat-input {
        min-width: 0;
    }

    .modal {
        width: calc(100% - 24px);
        max-width: none;
        max-height: calc(100dvh - 24px);
        padding: 24px 18px;
        border-radius: 22px;
    }

    .modal-title {
        padding-right: 36px;
        font-size: 20px;
    }

    .row-btns,
    .settings-code-row {
        flex-wrap: wrap;
    }

    .toast-root {
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        transform: none;
    }

    .toast {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .btn-pub {
        font-size: 0;
        width: 42px;
        padding: 0;
    }

    .btn-pub::before {
        content: '+';
        font-size: 22px;
        line-height: 1;
    }

    .sidebar .nav-item {
        min-width: 60px;
        padding-inline: 7px;
        font-size: 10px;
    }
}