:root {
            --sidebar-width: 280px;
            --glass-bg: rgba(255, 255, 255, 0.75);
            --glass-border: rgba(0, 0, 0, 0.05);
            --primary-color: #0078d4;
            --text-primary: #1d1d1f;
            --text-secondary: #86868b;
            --bg-primary: #f5f5f7;
            --bg-secondary: rgba(245, 245, 247, 0.8);
            --card-bg: rgba(255, 255, 255, 0.5);
            --modal-bg: white;
            --input-bg: rgba(255, 255, 255, 0.5);
            --border-color: rgba(0, 0, 0, 0.1);
            --border-primary: rgba(0, 0, 0, 0.1);
            --border-secondary: rgba(0, 0, 0, 0.05);
            --danger-color: #ff3b30;
            --danger-bg: rgba(255, 59, 48, 0.1);
            --success-color: #34c759;
            --warning-color: #ff9500;
            --scrollbar-thumb: rgba(0, 0, 0, 0.1);
            --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
            --primary-dark: #005a9e;
            --primary-bg-light: rgba(0, 120, 212, 0.1);
            --success-bg: rgba(52, 199, 89, 0.15);
            --shadow-glass: rgba(31, 38, 135, 0.2);
            --shadow-glass-hover: rgba(31, 38, 135, 0.35);
            --text-on-primary: white;
            --overlay-bg: rgba(0, 0, 0, 0.6);

            /* BloretDesign tokens */
            --background: #ffffff;
            --foreground: #222222;
            --card: #ffffff;
            --card-foreground: #222222;
            --popover: #ffffff;
            --popover-foreground: #222222;
            --primary: #181e25;
            --primary-foreground: #ffffff;
            --secondary: #f5f5f5;
            --secondary-foreground: #333333;
            --muted: #f5f5f5;
            --muted-foreground: #45515e;
            --accent: #f5f5f5;
            --accent-foreground: #18181b;
            --destructive: #ef4444;
            --border: #e5e5e5;
            --input: #e5e5e5;
            --ring: #3b82f6;
            --radius: 0.8125rem;
            --brand-blue: #1456f0;
            --brand-blue-bg: #edf4ff;
            --shadow-card: 0 8px 24px rgba(24,40,72,0.07);
            --shadow-button: 0 4px 10px rgba(24,30,37,0.12);
            --shadow-button-outline: 0 4px 6px rgba(0,0,0,0.04);
            --shadow-input: 0 2px 4px rgba(0,0,0,0.03);
            --shadow-dialog: 0 32px 110px -38px rgba(15,23,42,0.45);
            --shadow-nav: 0 0 22.576px rgba(44,74,116,0.09);
            --shadow-dropdown: 0 20px 60px -30px rgba(15,23,42,0.35);
        }

        html.dark-mode {
            --glass-bg: rgba(30, 30, 30, 0.85);
            --glass-border: rgba(255, 255, 255, 0.1);
            --text-primary: #f5f5f7;
            --text-secondary: #a1a1a6;
            --bg-primary: #1d1d1f;
            --bg-secondary: rgba(30, 30, 30, 0.9);
            --card-bg: rgba(56, 56, 58, 0.6);
            --modal-bg: #2a2a2c;
            --input-bg: rgba(56, 56, 58, 0.8);
            --border-color: rgba(255, 255, 255, 0.1);
            --border-primary: rgba(255, 255, 255, 0.1);
            --border-secondary: rgba(255, 255, 255, 0.05);
            --danger-color: #ff453a;
            --danger-bg: rgba(255, 69, 58, 0.15);
            --success-color: #32d74b;
            --warning-color: #ff9f0a;
            --scrollbar-thumb: rgba(255, 255, 255, 0.1);
            --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
            --primary-dark: #004a80;
            --primary-bg-light: rgba(0, 120, 212, 0.2);
            --success-bg: rgba(50, 215, 75, 0.2);
            --shadow-glass: rgba(0, 0, 0, 0.3);
            --shadow-glass-hover: rgba(0, 0, 0, 0.5);
            --text-on-primary: #f5f5f7;
            --overlay-bg: rgba(0, 0, 0, 0.8);

            /* BloretDesign dark tokens */
            --background: #111111;
            --foreground: #e5e5e5;
            --card: #1a1a1a;
            --card-foreground: #e5e5e5;
            --popover: #1a1a1a;
            --popover-foreground: #e5e5e5;
            --primary: #e5e5e5;
            --primary-foreground: #111111;
            --secondary: #262626;
            --secondary-foreground: #e5e5e5;
            --muted: #262626;
            --muted-foreground: #a3a3a3;
            --accent: #262626;
            --accent-foreground: #e5e5e5;
            --destructive: #ef4444;
            --border: rgba(255,255,255,0.08);
            --input: rgba(255,255,255,0.1);
            --ring: #6b7280;
            --shadow-card: 0 8px 24px rgba(0,0,0,0.3);
            --shadow-button: 0 4px 10px rgba(0,0,0,0.4);
            --shadow-button-outline: 0 4px 6px rgba(0,0,0,0.2);
            --shadow-input: 0 2px 4px rgba(0,0,0,0.2);
            --shadow-dialog: 0 32px 110px -38px rgba(0,0,0,0.6);
            --shadow-nav: 0 0 22.576px rgba(0,0,0,0.3);
            --shadow-dropdown: 0 20px 60px -30px rgba(0,0,0,0.5);
        }

        /* ================= BloretDesign Button System ================= */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            white-space: nowrap; border-radius: 13px; font-size: 14px; font-weight: 600;
            transition: all .15s ease; cursor: pointer; border: none; outline: none;
            text-decoration: none; flex-shrink: 0; padding: 8px 16px; height: 36px;
        }
        .btn:disabled { pointer-events: none; opacity: .5; }
        .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-button); }
        .btn-primary:hover { background: #2a323d; }
        html.dark-mode .btn-primary:hover { background: #2a2a2a; }
        .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: none; }
        .btn-secondary:hover { background: #e8e8e8; }
        html.dark-mode .btn-secondary:hover { background: #333333; }
        .btn-outline { background: var(--background); color: var(--foreground); border: 1px solid var(--border); box-shadow: var(--shadow-button-outline); }
        .btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
        .btn-ghost { background: transparent; color: var(--muted-foreground); }
        .btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
        .btn-danger { background: var(--destructive); color: white; }
        .btn-danger:hover { background: #dc2626; }
        .btn-link { background: transparent; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
        .btn-icon { background: transparent; color: var(--muted-foreground); padding: 8px; width: 36px; height: 36px; border-radius: 9999px; }
        .btn-icon:hover { background: var(--accent); color: var(--accent-foreground); }
        .btn-sm { height: 32px; padding: 6px 12px; font-size: 13px; border-radius: 11px; }
        .btn-lg { height: 40px; padding: 10px 24px; font-size: 15px; }

        body {
            margin: 0;
            padding: 0;
            /* 默认背景，实际会被 JS 动态更改或保留 */
            background-color: var(--bg-primary);
            font-family: 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, sans-serif;
            display: flex;
            height: 100vh;
            overflow: hidden;
            color: var(--text-primary);
            transition: background-color 0.3s, color 0.3s;
        }

        /* 全局滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }

        /* 针对 Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb) transparent;
        }

        /* 侧边栏 (模仿 App Store 左侧) */
        .sidebar {
            width: var(--sidebar-width);
            min-width: var(--sidebar-width);
            background: var(--bg-secondary);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--border-primary);
            z-index: 100;

            /* 允许纵向滚动，隐藏横向滚动 */
            overflow-y: auto;
            overflow-x: hidden;
            transition: background-color 0.3s, width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar.live-collapsed {
            width: 0;
            min-width: 0;
            padding: 0;
            border-right-width: 0;
            overflow: hidden;
        }



        .search-container {
            padding: 0 10px 20px 10px;
        }

        .search-input {
            padding-right: 30px;
        }

        .nav-group {
            margin-bottom: 20px;
        }

        .nav-title {
            padding: 0 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 5px;
            text-transform: uppercase;
        }

        .nav-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            margin: 2px 0;
            border-radius: 6px;
            cursor: pointer;
            text-decoration: none;
            color: var(--text-primary);
            transition: background 0.2s;
            font-size: 15px;
        }

        .nav-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        html.dark-mode .nav-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .nav-item.active {
            background: rgba(0, 0, 0, 0.1);
            color: var(--primary-color);
            font-weight: 500;
        }

        html.dark-mode .nav-item.active {
            background: rgba(255, 255, 255, 0.1);
        }

        .nav-icon {
            margin-right: 12px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sf-icon {
            width: 18px;
            height: 18px;
            vertical-align: middle;
            object-fit: contain;
        }

        /* 用户区域在侧边栏底部 */
        .user-zone {
            margin-top: auto;
            padding: 15px;
            border-top: 1px solid var(--border-primary);
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        .user-zone img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }

        .pagination-bar {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
            padding: 10px;
        }

        .page-btn {
            padding: 5px 12px;
            border-radius: 6px;
            border: 1px solid var(--border-primary);
            background: var(--card-bg);
            cursor: pointer;
            color: var(--text-primary);
        }

        .page-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .user-info-text div:first-child {
            font-weight: 600;
            font-size: 14px;
        }

        .user-info-text div:last-child {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            overflow-y: auto;
            position: relative;
            scroll-behavior: smooth;
            padding-bottom: 50px;
        }

        /* 页面切换动画 */
        .fade-content {
            animation: fadeContent 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes fadeContent {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Hero Banner (模拟 Today 页面) — 统一内容区左右边距 */
        .hero-section {
            padding: 40px;
            max-width: 100%;
            margin: 0;
            box-sizing: border-box;
        }

        /* hero 已自带 40px 内边距：内部网格/列表不再二次水平 padding */
        .hero-section .card-grid,
        .hero-section .list-view {
            padding-left: 0;
            padding-right: 0;
        }

        .hero-section .section-header {
            padding-left: 0;
            padding-right: 0;
        }

        /* 修复自定义板块在深色模式下的背景显示问题 */
        #custom-board-container {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px var(--shadow-primary);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            margin-top: 20px;
            transition: background-color 0.3s, color 0.3s;
            color: var(--text-primary);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 20px;
            padding: 0 40px;
        }

        .section-title {
            font-size: 32px;
            font-weight: 700;
        }

        .section-date {
            font-size: 14px;
            color: var(--text-secondary);
            text-transform: uppercase;
            margin-bottom: 5px;
            display: block;
        }

        /* 卡片网格 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
            padding: 0 40px;
            max-width: 100%;
            margin: 0;
        }

        /* Fluent 风格卡片 (复用并优化提供的 CSS) */
        .fluent-card {
            background: var(--glass-bg);
            border-radius: 12px;
            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 0 1px var(--glass-border) inset;
            padding: 20px;
            transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.2s;
            cursor: pointer;
            backdrop-filter: blur(30px);
            display: flex;
            flex-direction: column;
            height: 300px;
            /* 固定高度 */
            position: relative;
            overflow: hidden;
        }

        .fluent-card:hover {
            transform: scale(1.02);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        .card-image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            z-index: 0;
            transition: transform 0.3s;
        }

        .fluent-card:hover .card-image {
            transform: scale(1.05);
        }

        .card-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            padding: 20px;
            color: white;
            z-index: 1;
        }

        .card-category {
            font-size: 12px;
            text-transform: uppercase;
            opacity: 0.8;
            margin-bottom: 4px;
        }

        .card-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 6px;
            line-height: 1.2;
        }

        .card-desc {
            font-size: 14px;
            opacity: 0.9;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 列表视图 (类似 App 排行榜) */
        .list-view {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 0 40px;
        }

        .list-item {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.6);
            padding: 10px 20px;
            border-radius: 12px;
            transition: background 0.2s;
        }

        .list-item:hover {
            background: rgba(255, 255, 255, 0.9);
        }

        .list-icon {
            width: 50px;
            height: 50px;
            background: var(--bg-secondary);
            border-radius: 12px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--text-secondary);
        }

        .list-details {
            flex: 1;
        }

        .today-feed-item {
            align-items: flex-start;
            gap: 14px;
            min-height: 78px;
            padding: 14px 18px;
            cursor: pointer;
            position: relative;
            overflow: visible;
        }

        .today-feed-item.has-image {
            min-height: 136px;
        }

        .today-feed-image {
            width: 190px;
            height: 112px;
            flex: 0 0 190px;
            object-fit: cover;
            border-radius: 10px;
            background: var(--bg-secondary);
        }

        .today-feed-placeholder {
            flex-shrink: 0;
            margin-right: 0;
        }

        /* AI 摘要卡片在 Today 页面中的布局 */
        .today-ai-summary {
            box-sizing: border-box;
            /* hero-section 已提供水平边距，此处与标题/推荐列表左缘对齐 */
            width: 100%;
            max-width: 100%;
            margin: 0 0 16px 0;
            cursor: default;
        }

        /* Today 一键发帖 */
        .today-quick-compose {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            margin: 0 0 28px 0;
            background: var(--card-bg);
            border-radius: 14px;
            box-shadow: 0 1.6px 3.6px var(--border-primary),
                0 0.3px 0.9px var(--border-secondary),
                0 0 0 1px var(--border-secondary) inset;
            backdrop-filter: blur(30px) saturate(120%);
            -webkit-backdrop-filter: blur(30px) saturate(120%);
            padding: 14px 14px 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .today-quick-compose-box {
            position: relative;
            border: 1px solid var(--border-primary);
            border-radius: 12px;
            background: var(--background, var(--modal-bg));
            min-height: 120px;
            display: flex;
            flex-direction: column;
            transition: border-color .15s, box-shadow .15s;
        }

        .today-quick-compose-box:focus-within {
            border-color: var(--ring, var(--primary-color));
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }

        .today-quick-compose-box textarea {
            width: 100%;
            min-height: 88px;
            border: none;
            outline: none;
            resize: vertical;
            background: transparent;
            color: var(--text-primary);
            font-size: 15px;
            line-height: 1.55;
            font-family: inherit;
            padding: 12px 14px 8px;
            box-sizing: border-box;
            flex: 1;
        }

        .today-quick-compose-box textarea::placeholder {
            color: var(--muted-foreground, var(--text-secondary));
        }

        .today-quick-compose-toolbar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px 10px 10px;
            border-top: 1px solid transparent;
        }

        .today-quick-compose-box:focus-within .today-quick-compose-toolbar {
            border-top-color: var(--border-secondary, var(--border-primary));
        }

        .today-quick-compose-toolbar .select {
            width: auto;
            min-width: 112px;
            max-width: 160px;
            height: 34px;
            font-size: 13px;
            padding: 4px 30px 4px 10px;
            border-radius: 10px;
        }

        .today-quick-compose-send {
            height: 34px;
            padding: 0 16px;
            border: none;
            border-radius: 10px;
            background: var(--primary-color);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity .15s, transform .1s;
        }

        .today-quick-compose-send:hover:not(:disabled) {
            opacity: 0.92;
        }

        .today-quick-compose-send:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .today-quick-compose-hint {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.4;
        }

        @media (max-width: 768px) {
            .today-ai-summary,
            .today-quick-compose {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }

            .today-quick-compose-toolbar .select {
                min-width: 96px;
                max-width: 130px;
            }
        }

        .today-feed-title-button {
            display: block;
            width: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }

        .today-feed-title-button:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .today-card-menu {
            position: relative;
            flex: 0 0 auto;
        }

        .today-card-menu-trigger {
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 1px;
            line-height: 1;
        }

        .today-card-menu-trigger:hover,
        .today-card-menu-trigger:focus-visible,
        .today-card-menu-trigger[aria-expanded="true"] {
            background: var(--secondary);
            color: var(--text-primary);
            outline: none;
        }

        .today-card-menu-popover {
            position: absolute;
            z-index: 20;
            top: 34px;
            right: 0;
            min-width: 128px;
            padding: 5px;
            border: 1px solid var(--border-primary);
            border-radius: 10px;
            background: var(--modal-bg);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
        }

        .today-card-menu-popover[hidden] { display: none; }

        .today-card-menu-popover button {
            width: 100%;
            border: 0;
            border-radius: 7px;
            padding: 8px 10px;
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
            white-space: nowrap;
        }

        .today-card-menu-popover button:hover,
        .today-card-menu-popover button:focus-visible {
            background: var(--secondary);
            outline: none;
        }

        .list-title {
            font-weight: 600;
            color: var(--text-primary);
        }

        .list-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .btn-get {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            white-space: nowrap; border-radius: 11px; font-size: 13px; font-weight: 600;
            transition: all .15s ease; cursor: pointer; border: none; outline: none;
            text-decoration: none; flex-shrink: 0; padding: 6px 12px; height: 32px;
            background: var(--secondary); color: var(--secondary-foreground);
        }
        .btn-get:hover { background: #e8e8e8; }
        html.dark-mode .btn-get { background: var(--secondary); color: var(--secondary-foreground); }
        html.dark-mode .btn-get:hover { background: #333333; }

        /* 发帖模态框 */
        .modal {
            display: flex;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal.active {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        /* 组件参数对话框：高于全屏发帖/编辑 modal */
        #compose-widget-modal {
            z-index: 1200;
        }
        .compose-widget-modal-content {
            width: 440px;
            max-width: 94%;
        }

        /* Blora Write：必须高于全屏发帖 modal (1000) 与组件参数 (1200) */
        #blora-write-modal {
            z-index: 2000 !important;
        }
        #blora-write-modal.active {
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        .blora-write-modal-content {
            width: 560px;
            max-width: 94%;
            max-height: min(88vh, 720px);
            display: flex;
            flex-direction: column;
        }
        .blora-write-modal-content h2 {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        .blora-write-modal-content h2 .sf-icon {
            width: 20px;
            height: 20px;
        }
        .blora-write-desc {
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
            margin: 0 0 12px;
        }
        .blora-write-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
            flex: 1 1 auto;
            min-height: 0;
            padding-right: 2px;
        }
        .blora-write-field label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--text-primary);
        }
        .blora-write-field .field-hint {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .blora-write-styles {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .blora-write-style-chip {
            border: 1px solid var(--border-primary);
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all .15s ease;
            line-height: 1.2;
        }
        .blora-write-style-chip:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .blora-write-style-chip.is-active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
        }
        .blora-write-context {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 12.5px;
            line-height: 1.55;
            color: var(--text-secondary);
            max-height: 120px;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .blora-write-context.is-selected {
            border-color: rgba(0, 120, 212, 0.35);
            color: var(--text-primary);
        }
        .blora-write-result-wrap {
            border: 1px solid var(--border-primary);
            border-radius: 10px;
            min-height: 120px;
            max-height: 240px;
            overflow: auto;
            background: var(--modal-bg, var(--background));
        }
        .blora-write-result {
            padding: 12px 14px;
            font-size: 13.5px;
            line-height: 1.6;
            color: var(--text-primary);
        }
        .blora-write-result:empty::before,
        .blora-write-result.is-placeholder {
            color: var(--text-secondary);
            content: none;
        }
        .blora-write-result.is-placeholder {
            color: var(--text-secondary);
            font-size: 13px;
        }
        /* 流式阶段用等宽纯文本，避免每 token 全量 Markdown 解析卡顿 */
        .blora-write-result.is-streaming {
            white-space: pre-wrap;
            word-break: break-word;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 12.5px;
            line-height: 1.55;
        }
        .blora-write-result.is-streaming::after {
            content: '▍
            display: inline-block;
            width: 0.55em;
            margin-left: 1px;
            background: var(--primary-color, #0078d4);
            animation: blora-caret-blink 0.9s steps(1) infinite;
            vertical-align: text-bottom;
            height: 1em;
        }
        @keyframes blora-caret-blink {
            50% { opacity: 0; }
        }
        .blora-write-result .ai-stream-content,
        .blora-write-result .markdown-body {
            font-size: inherit;
        }
        .blora-write-status {
            font-size: 12px;
            color: var(--text-secondary);
            min-height: 1.2em;
        }
        .blora-write-status.is-error {
            color: #ff3b30;
        }
        .blora-write-error {
            color: #ff3b30;
            font-size: 13px;
            margin: 0;
        }
        .md-blora-write-wrap {
            position: relative;
            display: inline-block;
            flex-shrink: 0;
            z-index: 40;
        }
        .md-blora-write-btn {
            color: var(--primary-color, #0078d4);
            font-weight: 600;
            gap: 4px;
        }
        .md-blora-write-btn:hover {
            background: rgba(0, 120, 212, 0.1);
            color: var(--primary-color, #0078d4);
        }
        html.dark-mode .md-blora-write-btn:hover {
            background: rgba(20, 86, 240, 0.2);
        }
        .md-blora-write-btn .md-btn-text {
            font-weight: 700;
            letter-spacing: -0.01em;
        }
        .blora-write-menu {
            flex-direction: column;
            min-width: 160px;
            /* when parked on body, position/z-index set in JS (z-index 20000) */
        }
        .md-wrapper.is-toolbar-disabled .md-blora-write-wrap {
            opacity: 0.45;
            pointer-events: none;
        }
        /* 选中文本旁浮动「AI 改写」 */
        .blora-write-float {
            position: fixed;
            z-index: 1300;
            display: none;
            align-items: center;
            gap: 0;
            padding: 0;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.06),
                0 8px 24px rgba(0, 0, 0, 0.14);
            animation: fadeInScale 0.12s cubic-bezier(0, 0, 0.2, 1);
        }
        html.dark-mode .blora-write-float {
            background: rgba(40, 40, 40, 0.92);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.1),
                0 10px 28px rgba(0, 0, 0, 0.45);
        }
        .blora-write-float.is-visible {
            display: inline-flex;
        }
        .blora-write-float-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border: none;
            background: transparent;
            color: var(--primary-color, #0078d4);
            font-size: 12.5px;
            font-weight: 700;
            padding: 7px 12px;
            border-radius: 10px;
            cursor: pointer;
            white-space: nowrap;
            line-height: 1.2;
        }
        .blora-write-float-btn:hover {
            background: rgba(0, 120, 212, 0.12);
        }
        .blora-write-float-btn .sf-icon {
            width: 14px;
            height: 14px;
        }
        .compose-widget-desc {
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
            margin: 0 0 14px;
        }
        .compose-widget-fields {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .compose-widget-field label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--text-primary);
        }
        .compose-widget-field .field-hint {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .compose-widget-field .input,
        .compose-widget-field .select,
        .compose-widget-field .textarea {
            width: 100%;
            box-sizing: border-box;
        }
        .compose-widget-field .textarea {
            min-height: 96px;
            resize: vertical;
            font-family: inherit;
            line-height: 1.5;
        }
        .compose-widget-error {
            margin: 10px 0 0;
            color: #ff3b30;
            font-size: 13px;
        }

        /* 投票选项列表编辑器 */
        .compose-poll-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 4px;
            max-height: min(52vh, 420px);
            overflow-y: auto;
            padding-right: 2px;
        }
        .compose-poll-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 10px;
            border: 1px solid var(--border-primary);
            border-radius: 12px;
            background: var(--bg-secondary, var(--modal-bg));
            transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
            cursor: grab;
        }
        .compose-poll-row-rich {
            align-items: stretch;
        }
        .compose-poll-row:active { cursor: grabbing; }
        .compose-poll-row.is-dragging {
            opacity: 0.45;
        }
        .compose-poll-row.drag-over {
            border-color: var(--primary-color, #0078d4);
            box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.18);
        }
        .compose-poll-handle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            opacity: 0.55;
            cursor: grab;
            margin-top: 8px;
        }
        .compose-poll-handle .sf-icon {
            width: 14px;
            height: 14px;
        }
        .compose-poll-index {
            width: 1.4em;
            text-align: center;
            font-size: 12px;
            font-weight: 700;
            color: var(--muted-foreground);
            flex-shrink: 0;
            margin-top: 10px;
        }
        .compose-poll-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .compose-poll-main-top {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        .compose-poll-input {
            flex: 1;
            min-width: 0;
        }

        /* 主题色：单按钮 + 弹出菜单 */
        .compose-poll-color-picker {
            position: relative;
            flex-shrink: 0;
        }
        .compose-poll-color-trigger {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid var(--border-primary);
            background: var(--modal-bg, var(--background));
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
        }
        .compose-poll-color-trigger:hover {
            border-color: var(--primary-color, #0078d4);
            box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
        }
        .compose-poll-color-picker.is-open .compose-poll-color-trigger {
            border-color: var(--primary-color, #0078d4);
            box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.16);
        }
        .compose-poll-color-trigger-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--swatch-color, #2563eb);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.22),
                0 1px 2px rgba(0, 0, 0, 0.12);
        }
        .compose-poll-color-menu {
            position: absolute;
            z-index: 50;
            top: calc(100% + 6px);
            right: 0;
            min-width: 196px;
            padding: 10px;
            border-radius: 12px;
            background: var(--modal-bg, var(--background));
            border: 1px solid var(--border-primary);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        .compose-poll-color-menu.open-up {
            top: auto;
            bottom: calc(100% + 6px);
        }
        .compose-poll-swatches {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
        }
        .compose-poll-swatch {
            position: relative;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 2px solid transparent;
            background: var(--swatch-color, #ccc);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.18),
                0 1px 2px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
            transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
        }
        .compose-poll-swatch:hover {
            transform: scale(1.08);
        }
        .compose-poll-swatch:focus-visible {
            outline: 2px solid var(--primary-color, #0078d4);
            outline-offset: 2px;
        }
        .compose-poll-swatch.is-active {
            border-color: var(--foreground, var(--text-primary));
            box-shadow:
                0 0 0 2px var(--modal-bg, #fff),
                0 0 0 4px var(--swatch-color, #2563eb);
            transform: scale(1.06);
        }
        .compose-poll-swatch-check {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .compose-poll-swatch.is-active .compose-poll-swatch-check {
            display: flex;
        }
        .compose-poll-swatch-check::after {
            content: '';
            width: 10px;
            height: 6px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg) translateY(-1px);
            filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
        }
        .compose-poll-swatch-custom-wrap {
            position: relative;
            width: 26px;
            height: 26px;
            flex-shrink: 0;
        }
        .compose-poll-swatch-custom {
            background:
                conic-gradient(
                    from 180deg,
                    #ef4444,
                    #eab308,
                    #22c55e,
                    #0ea5e9,
                    #a855f7,
                    #ef4444
                );
        }
        .compose-poll-swatch-custom.is-active {
            background: var(--swatch-color, #2563eb);
        }
        .compose-poll-swatch-custom-plus {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            line-height: 1;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
            pointer-events: none;
        }
        .compose-poll-swatch-custom.is-active .compose-poll-swatch-custom-plus {
            display: none;
        }
        .compose-poll-color-native {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
            left: 0;
            top: 0;
        }
        .compose-poll-img-trigger {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid var(--border-primary);
            background: var(--modal-bg, var(--background));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            overflow: hidden;
            flex-shrink: 0;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .compose-poll-img-trigger:hover {
            border-color: var(--primary-color, #0078d4);
        }
        .compose-poll-img-trigger .sf-icon {
            width: 16px;
            height: 16px;
            opacity: 0.7;
        }
        .compose-poll-img-trigger.has-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .compose-poll-row-rich {
            align-items: center;
        }
        .compose-poll-row-rich .compose-poll-handle,
        .compose-poll-row-rich .compose-poll-index,
        .compose-poll-row-rich .compose-poll-del {
            margin-top: 0;
        }
        html.dark-mode .compose-poll-color-menu {
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        }
        .compose-poll-media {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .compose-poll-thumb {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            border: 1px dashed var(--border-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: var(--modal-bg);
            flex-shrink: 0;
            opacity: 0.75;
        }
        .compose-poll-thumb.has-image {
            border-style: solid;
            opacity: 1;
        }
        .compose-poll-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .compose-poll-thumb .sf-icon {
            width: 18px;
            height: 18px;
        }
        .compose-poll-img-actions {
            display: inline-flex;
            gap: 2px;
        }
        .compose-poll-del {
            flex-shrink: 0;
            opacity: 0.7;
            margin-top: 4px;
        }
        .compose-poll-del:hover { opacity: 1; color: #ff3b30; }
        .compose-poll-toolbar {
            margin-top: 10px;
            display: flex;
            gap: 8px;
        }
        .compose-poll-add-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px dashed var(--border-primary);
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 13px;
            cursor: pointer;
        }
        .compose-poll-add-btn:hover {
            border-color: var(--primary-color, #0078d4);
            color: var(--primary-color, #0078d4);
        }
        .compose-poll-add-btn .sf-icon {
            width: 16px;
            height: 16px;
        }
        .compose-widget-modal-content:has(.compose-poll-list) {
            width: 520px;
        }
        .md-preview-poll-option {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .md-preview-poll-img {
            width: 32px;
            height: 32px;
            object-fit: cover;
            border-radius: 6px;
        }


        .modal-content {
            background: var(--modal-bg);
            width: 600px;
            max-width: 90%;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            color: var(--text-primary);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform: scale(0.95);
            /* Ensure content is scrollable if needed */
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal.active .modal-content {
            transform: scale(1);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        /* ================= BloretDesign Input System ================= */
        .input {
            display: flex; height: 40px; width: 100%; min-width: 0; border-radius: 13px;
            border: 1px solid var(--input); background: var(--background); padding: 8px 12px;
            font-size: 14px; color: var(--foreground); box-shadow: var(--shadow-input); outline: none;
            transition: color .15s, box-shadow .15s; box-sizing: border-box;
        }
        .input::placeholder { color: var(--muted-foreground); }
        .input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
        .input:disabled { opacity: 0.5; cursor: not-allowed; }

        .textarea {
            display: flex; min-height: 120px; width: 100%; border-radius: 13px; border: 1px solid var(--input);
            background: var(--background); padding: 12px; font-size: 14px; color: var(--foreground);
            box-shadow: var(--shadow-input); outline: none; resize: vertical; font-family: inherit; box-sizing: border-box;
        }
        .textarea::placeholder { color: var(--muted-foreground); }
        .textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
        .textarea:disabled { opacity: 0.5; cursor: not-allowed; }

        .select {
            display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px;
            width: 100%; border-radius: 13px; border: 1px solid var(--input); background: var(--background);
            padding: 8px 36px 8px 12px; font-size: 14px; color: var(--foreground); box-shadow: var(--shadow-input);
            outline: none; cursor: pointer; appearance: none; box-sizing: border-box;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2345515e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 12px center;
        }
        html.dark-mode .select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        }
        .select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }

        /* 向后兼容：form-control 已迁移到 .input / .textarea / .select */

        /* 字段布局 */
        .field-group { display: flex; flex-direction: column; gap: 16px; }
        .field { display: flex; flex-direction: column; gap: 8px; }
        .field-label { font-size: 14px; font-weight: 500; color: var(--foreground); }
        .field-description { font-size: 12px; color: var(--muted-foreground); }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        /* 全屏模态框样式 (发布主题 / 编辑帖子) — 必须压过 .modal-content 的 600px / 90vh */
        .modal.modal-fullscreen {
            align-items: stretch;
            justify-content: stretch;
            padding: 0;
        }

        .modal.modal-fullscreen .modal-content {
            width: 100% !important;
            max-width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 100%;
            border-radius: 0;
            display: flex;
            flex-direction: column;
            padding: 20px 40px;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden;
            transform: none;
            box-shadow: none;
        }

        .modal.modal-fullscreen.active .modal-content {
            transform: none;
        }

        @media (max-width: 768px) {
            .modal.modal-fullscreen .modal-content {
                width: 100% !important;
                max-width: 100% !important;
                height: 100% !important;
                max-height: 100% !important;
                padding: 12px 16px;
            }
        }

        .modal.modal-fullscreen h2 {
            margin-top: 0;
            margin-bottom: 16px;
            flex-shrink: 0;
        }

        .modal.modal-fullscreen .form-group {
            flex-shrink: 0;
        }

        .modal.modal-fullscreen .form-group-content {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
            margin-bottom: 12px;
        }

        .modal.modal-fullscreen .modal-footer {
            flex-shrink: 0;
            margin-top: 12px;
        }

        .modal.modal-fullscreen .md-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .modal.modal-fullscreen .md-editor-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .modal.modal-fullscreen .md-textarea,
        .modal.modal-fullscreen #post-content,
        .modal.modal-fullscreen #edit-post-content {
            flex: 1;
            resize: none;
            height: 100% !important;
            min-height: 0;
        }

        .modal.modal-fullscreen .md-rich-area {
            flex: 1;
            height: 100%;
            min-height: 0;
            max-height: none;
        }

        .modal.modal-fullscreen .md-preview-area,
        .modal.modal-fullscreen #post-preview-area,
        .modal.modal-fullscreen #edit-post-preview-area {
            flex: 1;
            height: 100%;
            min-height: 0;
        }

        .post-target-selects {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .post-target-selects .select {
            flex: 1;
            min-width: 140px;
        }

        .post-permission-hint {
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.4;
            padding: 8px 12px;
            border-radius: 8px;
            background: rgba(239, 68, 68, 0.08);
            color: var(--danger-color, #ef4444);
            border: 1px solid rgba(239, 68, 68, 0.25);
        }
        .post-permission-hint.is-error {
            display: block;
        }

        .field-hint {
            font-weight: 400;
            font-size: 12px;
            color: var(--text-secondary);
            margin-left: 6px;
        }

        .post-schedule-group {
            padding: 10px 12px;
            border: 1px solid var(--border-primary);
            border-radius: 10px;
            background: var(--bg-secondary);
        }

        .btn-primary-submit.is-loading,
        .btn-primary-submit:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            pointer-events: none;
        }

        .btn-discard-draft:hover {
            color: var(--danger-color, #ef4444) !important;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(10px);
            }

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

        /* 气泡菜单复刻图片样式 */
        .bubble-menu {
            position: absolute;
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border-radius: 12px;
            padding: 5px;
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.04),
                0 12px 24px rgba(0, 0, 0, 0.12);
            display: flex;
            flex-direction: column;
            z-index: 600;
            transform-origin: top left;
            animation: fadeInScale 0.15s cubic-bezier(0, 0, 0.2, 1);
            transition: opacity 0.2s;
            min-width: 200px;
        }

        html.dark-mode .bubble-menu {
            background: rgba(40, 40, 40, 0.75);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.1),
                0 15px 40px rgba(0, 0, 0, 0.5);
        }

        .bubble-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13.5px;
            font-weight: 400;
            color: var(--text-primary);
            text-decoration: none;
            cursor: pointer;
            transition: none;
            white-space: nowrap;
            margin-bottom: 2px;
            line-height: 1.4;
            user-select: none;
        }

        .bubble-item:last-child {
            margin-bottom: 0;
        }

        .bubble-item:hover {
            background: var(--primary-color);
            color: white !important;
        }

        .bubble-item:hover .sf-icon {
            filter: brightness(0) invert(1);
        }

        /* 针对红色危险操作的特殊处理 */
        .bubble-item[style*="color:#ff3b30"]:hover,
        .bubble-item[style*="color: #ff3b30"]:hover,
        .bubble-item[style*="color:red"]:hover {
            background: #ff3b30 !important;
            color: white !important;
        }

        .bubble-item[style*="color:#ff3b30"]:hover .sf-icon,
        .bubble-item[style*="color: #ff3b30"]:hover .sf-icon,
        .bubble-item[style*="color:red"]:hover .sf-icon {
            filter: brightness(0) invert(1) !important;
        }

        html.dark-mode .bubble-item {
            color: rgba(255, 255, 255, 0.9);
        }

        html.dark-mode .bubble-item:hover {
            background: var(--primary-color);
            color: white;
        }

        .bubble-icon {
            margin-right: 10px;
            font-size: 16px;
            width: 18px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 覆盖内联样式的分隔线 */
        .bubble-menu>div[style*="height:1px"] {
            background: rgba(0, 0, 0, 0.08) !important;
            margin: 4px 10px !important;
            height: 1px !important;
        }

        html.dark-mode .bubble-menu>div[style*="height:1px"] {
            background: rgba(255, 255, 255, 0.15) !important;
        }

        /* 帖子详情页 */
        .post-detail-container {
            padding: 40px;
            max-width: 100%;
            margin: 0;
            background: var(--modal-bg);
            min-height: 100vh;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
        }

        /* 评论与时间轴样式 (适配深色模式) */
        .comment-item {
            position: relative;
            margin-bottom: 30px;
        }

        .comment-avatar-wrap {
            position: absolute;
            left: -41px;
            top: 0;
            z-index: 1;
        }

        .comment-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid var(--bg-primary);
            object-fit: cover;
            cursor: pointer;
            display: block;
            background: var(--bg-secondary);
        }

        .comment-card {
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            background: var(--modal-bg);
            overflow: hidden;
        }

        .comment-header {
            padding: 10px 12px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-primary);
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            color: var(--text-primary);
            flex-wrap: wrap;
        }

        .comment-header-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex: 1;
        }

        .comment-author {
            cursor: pointer;
            color: var(--primary-color);
        }

        .comment-reply-to {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 12px;
        }

        .comment-time,
        .comment-ip {
            color: var(--text-secondary);
            font-size: 12px;
        }

        .comment-edited-badge {
            cursor: pointer;
            background: var(--bg-secondary);
            margin-left: 2px;
            font-size: 10px;
            padding: 2px 5px;
            border-radius: 4px;
            color: var(--text-secondary);
            border: 1px solid var(--border-primary);
        }

        .comment-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            flex-shrink: 0;
        }

        .comment-action {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 12px;
            white-space: nowrap;
        }

        .comment-action-primary {
            color: var(--primary-color);
            font-weight: 600;
        }

        .comment-action-danger {
            color: var(--danger-color);
            font-weight: 600;
        }

        .comment-more-wrap {
            position: relative;
        }

        .comment-more-btn {
            background: transparent;
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 0 8px;
            line-height: 22px;
            font-size: 14px;
        }

        .comment-more-menu {
            position: absolute;
            right: 0;
            top: calc(100% + 4px);
            min-width: 120px;
            background: var(--modal-bg);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            z-index: 20;
            padding: 4px;
        }

        .comment-more-item {
            display: block;
            width: 100%;
            text-align: left;
            background: transparent;
            border: none;
            color: var(--text-primary);
            padding: 8px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
        }

        .comment-more-item:hover {
            background: var(--bg-secondary);
        }

        .comment-body {
            padding: 15px;
            font-size: 15px;
        }

        .comment-fold-btn {
            display: none;
            width: 100%;
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
            background: var(--bg-secondary);
            color: var(--primary-color);
        }

        .comment-reactions {
            padding: 0 15px 10px 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: center;
        }

        .comment-react-btn {
            padding: 2px 8px;
            font-size: 12px;
            background: none;
            border: 1px dashed var(--border-primary);
            position: relative;
        }

        .comment-ai-disclaimer {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .comment-signature {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--border-primary);
            font-size: 12px;
            color: var(--text-secondary);
            font-style: italic;
        }

        .comment-quote-ref {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 6px;
            margin: 0 0 12px 0;
            padding: 8px 10px;
            border-left: 3px solid var(--primary-color);
            background: var(--bg-secondary);
            border-radius: 0 6px 6px 0;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .comment-quote-ref-label {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 12px;
        }

        .comment-quote-ref-text {
            opacity: 0.85;
        }

        .comment-jump-link {
            text-decoration: none;
            color: var(--primary-color);
        }

        /* 楼中楼 */
        .comment-replies {
            margin: 0;
            padding: 8px 12px 12px 16px;
            border-top: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
        }

        .comment-item-reply {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
            position: relative;
            padding-left: 0;
        }

        .comment-item-reply:last-child {
            margin-bottom: 0;
        }

        .comment-item-reply .comment-avatar-wrap {
            position: static;
            flex-shrink: 0;
            margin-top: 8px;
        }

        .comment-item-reply .comment-avatar {
            width: 22px;
            height: 22px;
        }

        .comment-item-reply .comment-card {
            flex: 1;
            min-width: 0;
            border-radius: 8px;
            border-color: var(--border-primary);
        }

        .comment-item-reply .comment-header {
            padding: 8px 10px;
            font-size: 12px;
        }

        .comment-item-reply .comment-body {
            padding: 10px 12px;
            font-size: 14px;
        }

        .comment-replies-expand {
            width: 100%;
            margin: 4px 0 8px;
            font-size: 12px;
            color: var(--primary-color);
            background: transparent;
            border: 1px dashed var(--border-primary);
        }

        /* 评论输入区 */
        .comment-composer {
            margin: 30px 0;
            padding-left: 50px;
        }

        .comment-reply-bar {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-primary));
            background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-secondary));
            font-size: 13px;
        }

        .comment-reply-bar-main {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 6px;
            min-width: 0;
        }

        .comment-reply-bar-label {
            color: var(--primary-color);
            font-weight: 700;
        }

        .comment-reply-bar-user {
            color: var(--primary-color);
        }

        .comment-reply-bar-snippet {
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        .comment-reply-bar-close {
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            padding: 0 4px;
            flex-shrink: 0;
        }

        .comment-composer-tabs {
            margin-bottom: 10px;
            display: flex;
            gap: 10px;
        }

        .comment-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 6px;
            padding: 4px;
            border: 1px solid var(--border-primary);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            background: var(--bg-secondary);
        }

        .comment-toolbar + .textarea {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .comment-toolbar-btn {
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-primary);
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 12px;
            cursor: pointer;
            min-width: 28px;
        }

        .comment-toolbar-btn:hover {
            background: var(--modal-bg);
            border-color: var(--border-primary);
        }

        .comment-preview-area {
            min-height: 100px;
            border: 1px solid var(--border-primary);
            padding: 10px;
            border-radius: 8px;
        }

        .comment-composer-footer {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-top: 10px;
        }

        .comment-schedule-label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
        }

        @media (max-width: 640px) {
            .comment-composer {
                padding-left: 0;
            }

            .comment-avatar-wrap {
                left: -32px;
            }

            .comment-header {
                flex-direction: column;
                align-items: stretch;
            }

            .comment-actions {
                justify-content: flex-start;
            }
        }

        .timeline-icon-bg {
            position: absolute;
            left: -41px;
            background: var(--modal-bg);
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 2px solid var(--bg-primary);
            /* 与背景融合 */
        }

        .post-detail-title {
            font-size: 36px;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .post-meta {
            display: flex;
            align-items: center;
            color: var(--text-secondary);
            margin-bottom: 30px;
        }

        .post-body {
            font-size: 18px;
            line-height: 1.6;
        }

        .post-body img,
        .post-body-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 10px 0;
        }

        .back-btn {
            margin-bottom: 20px;
            display: inline-block;
            cursor: pointer;
            color: var(--primary-color);
        }

        /* 操作栏样式 (点赞、分享) */
        .action-bar {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .action-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            white-space: nowrap; border-radius: 13px; font-size: 14px; font-weight: 600;
            transition: all .15s ease; cursor: pointer; border: none; outline: none;
            text-decoration: none; flex-shrink: 0; padding: 8px 16px; height: 36px;
            background: transparent; color: var(--muted-foreground);
        }
        .action-btn:hover { background: var(--accent); color: var(--accent-foreground); }
        .action-btn.active { background: var(--destructive); color: white; }
        .action-btn.share:active { background: var(--accent); color: var(--accent-foreground); }

        /* 热门帖子高亮样式 */
        .highlight-post {
            grid-column: 1 / -1;
            /* 占满整行 */
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            height: 320px;
        }

        .highlight-post .card-title {
            color: white;
            font-size: 28px;
        }

        .highlight-post .card-desc {
            color: rgba(255, 255, 255, 0.9);
        }

        .highlight-post .card-category {
            color: rgba(255, 255, 255, 0.8);
        }

        .follow-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            white-space: nowrap; border-radius: 11px; font-size: 13px; font-weight: 600;
            transition: all .15s ease; cursor: pointer; outline: none;
            text-decoration: none; flex-shrink: 0; padding: 6px 12px; height: 32px;
            background: var(--background); color: var(--foreground);
            border: 1px solid var(--border); box-shadow: var(--shadow-button-outline);
        }
        .follow-btn:hover { background: var(--accent); color: var(--accent-foreground); }
        .follow-btn.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

        .subsection-action-btn {
            font-size: 14px !important;
            padding: 8px 14px !important;
        }

        /* 自定义 Markdown 控件样式 */
        .md-widget-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            white-space: nowrap; border-radius: 13px; font-size: 14px; font-weight: 600;
            transition: all .15s ease; cursor: pointer; outline: none;
            text-decoration: none; flex-shrink: 0; padding: 8px 16px; height: 36px;
            background: var(--background); color: var(--foreground);
            border: 1px solid var(--border); box-shadow: var(--shadow-button-outline);
            margin: 5px;
        }
        .md-widget-btn:hover { background: var(--accent); color: var(--accent-foreground); }

        .vote-card {
            background: var(--bg-primary, var(--card-bg));
            border: 1px solid var(--border-secondary, var(--border-primary));
            border-radius: 16px;
            padding: 18px 18px 14px;
            margin: 20px 0;
            color: var(--text-primary);
        }
        .vote-card-title,
        .vote-card h3 {
            margin: 0 0 14px;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.35;
        }
        .vote-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .vote-footer {
            margin-top: 12px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .vote-footer-hidden,
        .vote-option-count-hidden {
            color: var(--muted-foreground, var(--text-secondary));
            font-weight: 500;
            font-style: normal;
        }
        .vote-card-sealed .vote-option:hover {
            box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
        }
        .vote-empty {
            margin: 0;
            color: var(--text-secondary);
            font-size: 13px;
        }

        .vote-option {
            margin: 0;
            padding: 12px 14px 12px 16px;
            background: var(--card-bg, var(--bg-secondary));
            border: 1px solid var(--border-primary);
            border-radius: 12px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .vote-option:hover {
            border-color: var(--vote-accent, var(--primary-color, #0078d4));
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--vote-accent, #0078d4) 14%, transparent);
        }
        .vote-option.has-color {
            border-color: color-mix(in srgb, var(--vote-accent) 35%, var(--border-primary));
        }
        .vote-accent {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--vote-accent, transparent);
            z-index: 2;
            border-radius: 12px 0 0 12px;
        }

        .vote-progress {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: var(--vote-progress-bg, var(--primary-bg-light, rgba(0, 120, 212, 0.12)));
            z-index: 0;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .vote-text {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            font-weight: 500;
        }
        .vote-option-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            flex: 1;
        }
        .vote-option-name {
            overflow-wrap: anywhere;
            line-height: 1.4;
        }
        .vote-option-count {
            flex-shrink: 0;
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 600;
            white-space: nowrap;
        }
        .vote-option-img {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 10px;
            flex-shrink: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
        }
        .vote-option.has-image {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        /* compose preview reuses vote-card styles via replacePollCodeBlocksInHtml */
        .md-preview-poll {
            border: 1px solid var(--border-primary);
            border-radius: 12px;
            padding: 12px;
            background: var(--bg-secondary);
        }

        /* 来自 index.css 的卡片样式，用于 AI 总结 */
        .post {
            background: var(--card-bg);
            border-radius: 8px;
            box-shadow: 0 1.6px 3.6px var(--border-primary),
                0 0.3px 0.9px var(--border-secondary),
                0 0 0 1px var(--border-secondary) inset;
            padding: 18px 18px 14px 18px;
            margin: 20px 0;
            backdrop-filter: blur(30px) saturate(120%);
            -webkit-backdrop-filter: blur(30px) saturate(120%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: visible;
            transform: translateZ(0);
        }

        .post-title {
            font-size: 1.2em;
            margin-bottom: 10px;
            text-align: left;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 自定义下拉菜单样式 */
        .custom-select-container {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            user-select: none;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        .custom-select-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            background: var(--bg-secondary);
            border: 1px solid var(--border-secondary);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            min-width: 180px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .custom-select-trigger:hover {
            background: var(--bg-primary);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .custom-select-options {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 240px;
            background: var(--modal-bg);
            border: 1px solid var(--border-secondary);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 6px;
            z-index: 1000;
            display: none;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            max-height: 400px;
            overflow-y: auto;
            animation: fadeInDropdown 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        @keyframes fadeInDropdown {
            from {
                opacity: 0;
                transform: translateY(-8px) scale(0.98);
            }

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

        .custom-option {
            padding: 10px 12px;
            font-size: 13px;
            color: var(--text-primary);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.1s;
            margin-bottom: 2px;
        }

        .custom-option:last-child {
            margin-bottom: 0;
        }

        .custom-option:hover {
            background: var(--primary-color);
            color: white;
        }

        .custom-option:hover .sf-icon {
            filter: brightness(0) invert(1) !important;
        }

        .custom-option:hover span {
            color: white !important;
        }

        .custom-option.selected {
            background: var(--bg-secondary);
            font-weight: 600;
        }

        .post-content {
            margin-bottom: 10px;
            color: var(--text-primary);
        }

        .post-time {
            font-size: 0.9em;
            color: var(--text-secondary);
            margin-left: auto;
        }

        /* 管理模态框侧边栏样式 */
        .manage-layout {
            display: flex;
            height: 600px;
            overflow: hidden;
            border-radius: 12px;
            background: var(--bg-primary);
            transition: background-color 0.3s;
        }

        .manage-sidebar {
            width: 200px;
            background: var(--modal-bg);
            border-right: 1px solid var(--border-primary);
            display: flex;
            flex-direction: column;
            padding: 15px 0;
            transition: background-color 0.3s, border-color 0.3s;
        }

        .manage-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--modal-bg);
            color: var(--text-primary);
            transition: background-color 0.3s, color 0.3s;
        }

        .manage-nav-item {
            padding: 10px 20px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
            color: var(--text-primary);
        }

        .manage-nav-item:hover {
            background: var(--bg-secondary);
        }

        html.dark-mode .manage-nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .manage-nav-item.active {
            background: var(--primary-color);
            color: white;
        }

        /* 排行榜筛选器样式 */
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            transition: background-color 0.3s;
        }

        html.dark-mode .filter-bar {
            background: rgba(56, 56, 58, 0.6);
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-btn {
            padding: 6px 12px;
            border-radius: 8px;
            border: 1px solid var(--border-primary);
            background: var(--card-bg);
            cursor: pointer;
            font-size: 13px;
            color: var(--text-primary);
            transition: all 0.2s;
        }

        html.dark-mode .filter-btn {
            background: rgba(56, 56, 58, 0.8);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .filter-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        /* --- Markdown / 富文本编辑器样式 (发帖 / 编辑共用) --- */
        .md-wrapper {
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            /* visible so toolbar dropdowns (组件菜单) are not clipped */
            overflow: visible;
            position: relative;
            transition: border-color 0.2s;
        }

        .md-wrapper.drag-over {
            border: 2px dashed var(--primary-color);
            background: rgba(0, 120, 212, 0.05);
        }

        .md-toolbar {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-primary);
            border-radius: 8px 8px 0 0;
            padding: 8px;
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            /* Do NOT use overflow-x:auto here — it clips the component menu below the toolbar */
            overflow: visible;
            align-items: center;
            position: relative;
            z-index: 30;
        }

        .md-toolbar-divider {
            width: 1px;
            height: 20px;
            background: var(--border-primary);
            margin: 0 5px;
            flex-shrink: 0;
        }

        .md-component-menu-wrap {
            position: relative;
            display: inline-block;
            flex-shrink: 0;
            z-index: 40;
        }

        .md-menu-divider {
            height: 1px;
            background: var(--border-secondary);
            margin: 5px 0;
        }

        .md-toolbar-formats {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
            flex: 1 1 auto;
            min-width: 0;
        }
        .md-toolbar-group {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
        }

        .md-btn {
            display: inline-flex; align-items: center; justify-content: center;
            background: transparent; border: none; cursor: pointer;
            padding: 5px 9px; font-size: 12px; border-radius: 8px;
            color: var(--muted-foreground); transition: all .15s ease;
            white-space: nowrap;
            flex-shrink: 0;
            line-height: 1.2;
            gap: 2px;
        }
        .md-btn:hover { background: var(--accent); color: var(--accent-foreground); }
        .md-btn:active { transform: scale(0.97); }
        .md-btn svg { width: 16px; height: 16px; }
        /* Active format state (selection has this style) */
        .md-format-btn.is-active {
            background: var(--primary-color, #0078d4);
            color: #fff;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
        }
        .md-format-btn.is-active:hover {
            background: var(--primary-color, #0078d4);
            color: #fff;
            filter: brightness(1.06);
        }
        .md-format-btn.is-active .md-sf-icon,
        .md-format-btn.is-active .sf-icon {
            /* invert black SF icons on primary fill */
            filter: brightness(0) invert(1);
        }
        html.dark-mode .md-format-btn.is-active {
            background: rgba(20, 86, 240, 0.85);
            color: #fff;
        }
        html.dark-mode .md-format-btn.is-active .md-sf-icon,
        html.dark-mode .md-format-btn.is-active .sf-icon {
            filter: brightness(0) invert(1);
        }
        .md-btn-heading {
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            min-width: 2.2em;
        }
        .md-format-btn b,
        .md-format-btn i,
        .md-format-btn span {
            font-size: inherit;
            font-weight: inherit;
            font-style: inherit;
            text-decoration: inherit;
            color: inherit;
        }
        .md-btn .md-sf-icon,
        .md-btn .sf-icon {
            width: 16px;
            height: 16px;
            display: block;
            flex-shrink: 0;
            pointer-events: none;
        }
        .md-btn .md-btn-text {
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            margin-left: 1px;
        }
        .md-btn-heading {
            gap: 3px;
            min-width: auto;
        }

        /* 编辑 / Markdown / 预览 分段滑块 */
        .md-mode-toggle {
            display: inline-flex;
            position: relative;
            margin-left: auto;
            background: rgba(120, 120, 128, 0.12);
            border-radius: 8px;
            padding: 2px;
            gap: 0;
            flex-shrink: 0;
        }
        .md-mode-btn {
            position: relative;
            z-index: 1;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: -0.01em;
            cursor: pointer;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--muted-foreground);
            transition: all .15s ease;
            white-space: nowrap;
        }
        .md-mode-btn.active {
            background: var(--background, var(--modal-bg));
            color: var(--foreground, var(--text-primary));
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
        }
        .md-mode-btn:not(.active):hover { color: var(--foreground, var(--text-primary)); }
        html.dark-mode .md-mode-toggle { background: rgba(120, 120, 128, 0.24); }
        html.dark-mode .md-mode-btn.active {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }

        .md-wrapper.is-toolbar-disabled .md-format-btn,
        .md-wrapper.is-toolbar-disabled .md-component-menu-wrap,
        .md-wrapper.is-toolbar-disabled .md-blora-write-wrap,
        .md-wrapper.is-toolbar-disabled .md-blora-write-group {
            opacity: 0.45;
            pointer-events: none;
        }

        .md-editor-area {
            position: relative;
            z-index: 1;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            /* clip rich/textarea corners without clipping toolbar menus */
            overflow: hidden;
            border-radius: 0 0 8px 8px;
        }

        .md-textarea,
        #post-content,
        #edit-post-content {
            border: none;
            border-radius: 0;
            resize: vertical;
            min-height: 300px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            line-height: 1.6;
            width: 100%;
        }

        .md-textarea:focus,
        #post-content:focus,
        #edit-post-content:focus {
            outline: none;
            box-shadow: none;
        }

        /* 富文本编辑区 */
        .md-rich-area {
            display: none;
            min-height: 300px;
            max-height: min(60vh, 560px);
            overflow: auto;
            padding: 14px 16px;
            background: var(--modal-bg);
            color: var(--text-primary);
            font-family: inherit;
            font-size: 15px;
            line-height: 1.7;
            outline: none;
            word-break: break-word;
        }
        .md-rich-area:focus { box-shadow: inset 0 0 0 2px rgba(20, 86, 240, 0.12); }
        .md-rich-area.is-empty:before {
            content: attr(data-placeholder);
            color: var(--muted-foreground);
            pointer-events: none;
            float: left;
            height: 0;
        }
        .md-rich-area img {
            max-width: 100%;
            border-radius: 8px;
            height: auto;
        }
        .md-rich-area h1, .md-rich-area h2, .md-rich-area h3 {
            margin: 0.6em 0 0.35em;
            line-height: 1.3;
        }
        .md-rich-area p { margin: 0 0 0.75em; }
        .md-rich-area blockquote {
            margin: 0.5em 0;
            padding: 0.35em 0.85em;
            border-left: 3px solid var(--primary-color, #0078d4);
            color: var(--muted-foreground);
            background: var(--bg-secondary);
            border-radius: 0 8px 8px 0;
        }
        .md-rich-area pre {
            background: var(--bg-secondary);
            padding: 10px 12px;
            border-radius: 8px;
            overflow: auto;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 13px;
        }
        .md-rich-area code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.92em;
            background: var(--bg-secondary);
            padding: 0.1em 0.35em;
            border-radius: 4px;
        }
        .md-rich-area pre code { background: transparent; padding: 0; }
        .md-rich-area ul, .md-rich-area ol {
            margin: 0.4em 0 0.75em;
            padding-left: 1.5em;
        }
        .md-rich-area hr {
            border: none;
            border-top: 1px solid var(--border-primary);
            margin: 1em 0;
        }
        .md-rich-area a {
            color: var(--primary-color, #0078d4);
            text-decoration: underline;
        }

        .md-widget-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 10px;
            margin: 0 2px;
            border-radius: 999px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.6;
            user-select: none;
            vertical-align: middle;
            white-space: nowrap;
            cursor: pointer;
        }
        .md-widget-chip:hover {
            border-color: var(--primary-color, #0078d4);
            box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
        }

        .md-preview-area,
        #post-preview-area,
        #edit-post-preview-area {
            display: none;
            padding: 15px;
            background: var(--modal-bg);
            color: var(--text-primary);
            min-height: 300px;
            overflow: auto;
            border-top: none;
        }

        /* 三态模式：编辑 / Markdown / 预览 */
        .md-wrapper.is-mode-rich .md-rich-area { display: block; }
        .md-wrapper.is-mode-rich .md-textarea,
        .md-wrapper.is-mode-rich #post-content,
        .md-wrapper.is-mode-rich #edit-post-content,
        .md-wrapper.is-mode-rich .md-preview-area,
        .md-wrapper.is-mode-rich #post-preview-area,
        .md-wrapper.is-mode-rich #edit-post-preview-area { display: none !important; }

        .md-wrapper.is-mode-markdown .md-textarea,
        .md-wrapper.is-mode-markdown #post-content,
        .md-wrapper.is-mode-markdown #edit-post-content { display: block; }
        .md-wrapper.is-mode-markdown .md-rich-area,
        .md-wrapper.is-mode-markdown .md-preview-area,
        .md-wrapper.is-mode-markdown #post-preview-area,
        .md-wrapper.is-mode-markdown #edit-post-preview-area { display: none !important; }

        .md-wrapper.is-mode-preview .md-preview-area,
        .md-wrapper.is-mode-preview #post-preview-area,
        .md-wrapper.is-mode-preview #edit-post-preview-area {
            display: block !important;
            flex: 1;
            max-height: none;
        }
        .md-wrapper.is-mode-preview .md-rich-area,
        .md-wrapper.is-mode-preview .md-textarea,
        .md-wrapper.is-mode-preview #post-content,
        .md-wrapper.is-mode-preview #edit-post-content { display: none !important; }

        /* 旧分栏预览兼容（若仍有 class） */
        .md-wrapper.is-preview-split .md-editor-area {
            flex-direction: row;
            align-items: stretch;
        }
        .md-wrapper.is-preview-split .md-textarea,
        .md-wrapper.is-preview-split #post-content,
        .md-wrapper.is-preview-split #edit-post-content {
            width: 50%;
            border-right: 1px solid var(--border-primary);
            min-height: 300px;
            height: auto !important;
            resize: none;
        }
        .md-wrapper.is-preview-split .md-preview-area,
        .md-wrapper.is-preview-split #post-preview-area,
        .md-wrapper.is-preview-split #edit-post-preview-area {
            display: block !important;
            width: 50%;
            border-top: none;
            min-height: 300px;
            max-height: none;
        }

        .md-wrapper.is-preview-only .md-textarea,
        .md-wrapper.is-preview-only #post-content,
        .md-wrapper.is-preview-only #edit-post-content {
            display: none;
        }
        .md-wrapper.is-preview-only .md-preview-area,
        .md-wrapper.is-preview-only #post-preview-area,
        .md-wrapper.is-preview-only #edit-post-preview-area {
            display: block !important;
            border-top: none;
            max-height: none;
            flex: 1;
        }

        .md-preview-area::-webkit-scrollbar,
        #post-preview-area::-webkit-scrollbar,
        #edit-post-preview-area::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .md-preview-area::-webkit-scrollbar-track,
        #post-preview-area::-webkit-scrollbar-track,
        #edit-post-preview-area::-webkit-scrollbar-track {
            background: transparent;
        }

        .md-preview-area::-webkit-scrollbar-thumb,
        #post-preview-area::-webkit-scrollbar-thumb,
        #edit-post-preview-area::-webkit-scrollbar-thumb {
            background: var(--border-primary);
            border-radius: 4px;
        }

        .md-preview-area img,
        #post-preview-area img,
        #edit-post-preview-area img {
            max-width: 100%;
            border-radius: 8px;
        }

        .md-rich-area::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .md-rich-area::-webkit-scrollbar-thumb {
            background: var(--border-primary);
            border-radius: 4px;
        }

        .md-preview-spotify {
            background: var(--bg-secondary);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            border: 1px dashed var(--border-primary);
        }

        .md-preview-poll {
            border: 1px solid var(--border-primary);
            border-radius: 12px;
            padding: 12px;
            background: var(--bg-secondary);
        }
        .md-preview-poll-title {
            font-weight: 600;
            margin-bottom: 8px;
        }
        .md-preview-poll-option {
            padding: 8px 10px;
            margin-top: 6px;
            border-radius: 8px;
            background: var(--modal-bg);
            border: 1px solid var(--border-primary);
        }

        /* 拖拽提示遮罩 */
        .drag-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--modal-bg);
            opacity: 0.9;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--primary-color);
            font-weight: bold;
            z-index: 10;
            pointer-events: none;
        }

        .md-wrapper.drag-over .drag-overlay {
            display: flex;
        }

        .editor-component-menu {
            flex-direction: column;
            /* above .md-editor-area (z-index:1) and modal content siblings */
            z-index: 1000 !important;
            position: absolute;
        }

        /* --- 用户个人主页样式 --- */
        .user-profile-header {
            background: var(--modal-bg);
            padding: 40px;
            border-bottom: 1px solid var(--border-primary);
            display: flex;
            align-items: flex-start;
            gap: 20px;
            color: var(--text-primary);
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .profile-info {
            flex: 1;
        }

        .profile-name {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .profile-bio {
            color: var(--text-secondary);
            font-size: 15px;
            margin-bottom: 15px;
            max-width: 600px;
        }

        .profile-stats {
            display: flex;
            gap: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .tag-badge {
            display: inline-block;
            padding: 2px 8px;
            background: var(--primary-color);
            color: white;
            border-radius: 4px;
            font-size: 12px;
            font-weight: normal;
            vertical-align: middle;
        }

        .tag-badge.admin-tag {
            background: #ff3b30;
            /* 红色用于管理员操作 */
            cursor: pointer;
        }

        .profile-tabs {
            display: flex;
            padding: 0 40px;
            border-bottom: 1px solid var(--border-primary);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .profile-tab {
            padding: 15px 20px;
            cursor: pointer;
            font-weight: 500;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .profile-tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        .profile-content {
            padding: 30px 40px;
        }

        /* 表情回应相关样式 */
        .emoji-quick-menu {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--modal-bg);
            backdrop-filter: blur(10px);
            padding: 8px 12px;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border-primary);
            z-index: 1000;
            animation: fadeInScale 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .emoji-btn {
            font-size: 22px;
            cursor: pointer;
            transition: transform 0.2s;
            line-height: 1;
            user-select: none;
        }

        .emoji-btn:hover {
            transform: scale(1.25);
        }

        .emoji-btn:active {
            transform: scale(0.95);
        }

        .emoji-more-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.2s;
        }

        .emoji-more-btn:hover {
            background: var(--border-primary);
            color: var(--text-primary);
        }

        /* 完整表情选择器模态框 */
        .emoji-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1100;
            display: none;
            /* JS 控制显示 */
        }

        .emoji-picker-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 350px;
            height: 450px;
            background: var(--modal-bg);
            color: var(--text-primary);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
            z-index: 1101;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: fadeIn 0.2s;
        }

        .emoji-search-container {
            padding: 8px 12px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-primary);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 15px;
        }

        .stats-card {
            background: var(--bg-secondary);
            padding: 12px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid var(--border-secondary);
        }

        .stats-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 4px;
        }

        .stats-label {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .emoji-picker-header {
            padding: 10px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-primary);
            display: flex;
            overflow-x: auto;
            scrollbar-width: none;
            /* Firefox */
        }

        .emoji-picker-header::-webkit-scrollbar {
            display: none;
        }

        .emoji-category-tab {
            padding: 6px 12px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            border-radius: 6px;
            margin-right: 5px;
            transition: all 0.2s;
        }

        .emoji-category-tab:hover {
            background: var(--border-secondary);
        }

        .emoji-category-tab.active {
            background: var(--modal-bg);
            color: var(--primary-color);
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .emoji-picker-body {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        .emoji-grid-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            margin: 15px 0 8px 0;
        }

        .emoji-grid-title:first-child {
            margin-top: 0;
        }

        .emoji-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .emoji-picker-item {
            font-size: 24px;
            text-align: center;
            padding: 6px 0;
            cursor: pointer;
            border-radius: 6px;
            transition: background 0.1s;
        }

        .emoji-picker-item:hover {
            background: var(--border-secondary);
        }

        /* 遮罩关闭层 */
        .emoji-mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            background: transparent;
        }

        /* 气泡消息提示 (Toast) */
        .toast-container {
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            pointer-events: none;
        }

        .toast-item {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 14px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: opacity 0.3s, transform 0.3s;
            max-width: 80vw;
            text-align: center;
            pointer-events: auto;
        }

        html.dark-mode .toast-item {
            background: rgba(255, 255, 255, 0.9);
            color: #1d1d1f;
        }

        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
            }

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

        .toast-item.fade-out {
            opacity: 0;
            transform: translateY(-20px) scale(0.9);
        }

        /* 深色模式的全局样式 */
        html.dark-mode h2,
        html.dark-mode h3,
        html.dark-mode h4,
        html.dark-mode h5,
        html.dark-mode h6,
        html.dark-mode p,
        html.dark-mode li,
        html.dark-mode label {
            color: var(--text-primary);
        }

        html.dark-mode .post,
        html.dark-mode .list-item {
            background: rgba(56, 56, 58, 0.5);
            border-color: rgba(255, 255, 255, 0.1);
        }

        html.dark-mode .post:hover {
            background: rgba(56, 56, 58, 0.7);
        }

        html.dark-mode .card-title {
            color: var(--text-primary);
        }

        html.dark-mode .card-desc {
            color: var(--text-secondary);
        }

        html.dark-mode .sf-icon[src*="color=black"] {
            filter: invert(1);
        }

        /* Custom Tooltip */
        .fluent-tooltip {
            position: fixed;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-primary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-primary);
            z-index: 10000;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease, transform 0.15s ease;
            transform: translateY(5px);
            white-space: pre-wrap;
            max-width: 300px;
            word-break: break-word;
        }

        html.dark-mode .fluent-tooltip {
            background: rgba(45, 45, 48, 0.95);
            border-color: rgba(255, 255, 255, 0.1);
        }

        .fluent-tooltip.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Live Space View */
        .live-container {
            display: flex;
            height: 100%;
            width: 100%;
            background: #000;
            color: #fff;
            flex-direction: row;
            overflow: hidden;
        }
        .live-container:fullscreen {
            height: 100vh;
            width: 100vw;
        }
        
        .live-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 10px 15px;
            position: relative;
            background: #000;
        }
        
        .live-grid {
            flex: 1;
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            grid-auto-rows: min-content;
            overflow-y: auto;
            align-content: center;
        }

        .live-participant {
            background: #1e1e1e;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 16 / 9;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .live-participant.expanded {
            position: fixed;
            top: 0;
            left: 0;
            right: 320px;
            bottom: 0;
            width: auto;
            height: auto;
            z-index: 100;
            border-radius: 0;
            aspect-ratio: unset;
        }
        /* When right sidebar is collapsed, expanded participant fills full width */
        .live-container.no-right-sidebar .live-participant.expanded {
            right: 0;
        }
        
        .live-participant-info {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.6);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            z-index: 10;
        }
        .live-participant:hover .live-mute-btn { opacity: 1 !important; }
        .live-participant-fullscreen {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 5;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .live-participant:hover .live-participant-fullscreen { opacity: 1; }
        .live-participant:fullscreen {
            border-radius: 0;
            aspect-ratio: unset;
            width: 100vw;
            height: 100vh;
        }
        
        .live-controls {
            height: 70px;
            background: #111;
            border-radius: 35px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 0 30px;
            align-self: center;
            position: relative;
        }
        
        .live-btn {
            width: 50px; height: 50px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--secondary); color: var(--secondary-foreground);
            border: none; cursor: pointer; transition: all .15s ease;
        }
        .live-btn:hover { background: var(--accent); color: var(--accent-foreground); }
        .live-btn.active { background: var(--primary); color: var(--primary-foreground); }
        .live-btn.danger { background: var(--destructive); color: white; }

        .live-quality-option {
            padding: 8px 16px;
            font-size: 13px;
            color: #ccc;
            cursor: pointer;
            transition: background 0.15s;
        }
        .live-quality-option:hover { background: #333; }
        .live-quality-option.active { color: var(--primary-color); font-weight: 600; }
        
        .live-sidebar {
            width: 320px;
            min-width: 320px;
            background: #111;
            border-left: 1px solid #222;
            display: flex;
            flex-direction: column;
            z-index: 10;
            transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .live-sidebar.collapsed {
            width: 0;
            min-width: 0;
            border-left-width: 0;
            overflow: hidden;
        }

        .live-sidebar-tab {
            flex: 1;
            padding: 12px 0;
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            color: #888;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        .live-sidebar-tab.active {
            color: #fff;
            border-bottom-color: var(--primary-color);
        }
        .live-sidebar-tab:hover { color: #ccc; }

        .live-member-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
        }
        
        .live-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 14px;
        }
        
        .live-chat-input-area {
            padding: 15px;
            background: #1a1a1a;
            display: flex;
            gap: 10px;
        }
        


        .live-island {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 30, 30, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 28px;
            padding: 8px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            z-index: 20;
            font-size: 13px;
            color: #fff;
            box-shadow: 0 2px 12px rgba(0,0,0,0.4);
        }
        .live-island-timer {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            font-variant-numeric: tabular-nums;
        }
        .live-island-timer .label {
            font-size: 10px;
            color: #aaa;
        }
        .live-island-timer .value {
            font-size: 14px;
            font-weight: 600;
        }
        .live-island-divider {
            width: 1px;
            height: 24px;
            background: #444;
        }
        .live-island-btn {
            width: 34px; height: 34px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--secondary); color: var(--secondary-foreground);
            border: none; cursor: pointer; transition: all .15s ease;
        }
        .live-island-btn.danger { background: var(--destructive); color: white; }
        .live-island-btn.danger:hover { background: #dc2626; }
        .live-island-btn.copy { background: var(--secondary); color: var(--secondary-foreground); }
        .live-island-btn.copy:hover { background: var(--accent); }

        /* EasyTier 状态提示 */
        .easytier-status {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 30, 30, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 16px;
            padding: 16px 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 15;
            font-size: 14px;
            color: #fff;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            max-width: 90%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .easytier-status.hidden { display: none; }
        .easytier-status.ready {
            border: 1px solid rgba(76, 175, 80, 0.5);
            background: rgba(30, 40, 30, 0.95);
        }
        .easytier-status.starting {
            border: 1px solid rgba(255, 152, 0, 0.5);
            background: rgba(40, 35, 30, 0.95);
        }
        .easytier-status-spinner {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid #444;
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        .easytier-status.ready .easytier-status-spinner { border-top-color: #4CAF50; }
        .easytier-status.starting .easytier-status-spinner { border-top-color: #FF9800; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .easytier-status-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .easytier-status-label {
            font-size: 12px;
            color: #aaa;
        }
        .easytier-status-value {
            font-size: 13px;
            color: #fff;
            font-family: 'Courier New', monospace;
        }
        .easytier-status-btn {
            width: 32px; height: 32px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--destructive); color: white;
            border: none; cursor: pointer; transition: all .15s ease;
        }
        .easytier-status-btn:hover { background: #dc2626; }

        /* 移动端适配 */
        .post-header-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                transform: translateX(-100%);
                width: 280px;
                z-index: 1000;
                box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .main-content {
                width: 100%;
                margin-left: 0;
                padding-bottom: 80px;
                /* 底部留出空间给FAB */
                padding-top: 60px;
                /* 顶部留出空间给菜单按钮 */
                overflow-x: hidden;
            }

            .section-header {
                padding: 0 20px;
                flex-direction: column;
                align-items: flex-start !important;
                gap: 10px;
            }

            .section-header .btn-get {
                align-self: flex-start;
            }

            .card-grid {
                grid-template-columns: 1fr;
                padding: 0 20px;
                gap: 15px;
            }

            .hero-section {
                padding: 20px;
            }

            .hero-section .card-grid,
            .hero-section .list-view {
                padding-left: 0;
                padding-right: 0;
            }

            .post-header-row {
                flex-direction: column;
                gap: 15px;
            }

            .post-header-row>div:last-child {
                width: 100%;
                flex-wrap: wrap;
                justify-content: flex-start;
            }

            .list-item {
                padding: 15px 10px;
            }

            .list-details {
                min-width: 0;
            }

            .today-feed-item.has-image {
                flex-wrap: wrap;
            }

            .today-feed-image {
                width: 100%;
                height: 180px;
                flex-basis: 100%;
            }

            /* === Today page mobile === */

            .hero-section .section-title {
                font-size: 24px;
            }

            #today-feed-header {
                flex-direction: column !important;
                align-items: flex-start !important;
            }

            .today-ai-summary,
            .today-quick-compose {
                box-sizing: border-box !important;
                width: calc(100% - 32px) !important;
                margin-left: 16px !important;
                margin-right: 16px !important;
            }

            .today-ai-summary {
                margin-bottom: 16px !important;
            }

            .today-quick-compose {
                margin-bottom: 20px !important;
            }

            .card-grid,
            .list-view {
                box-sizing: border-box;
                max-width: 100%;
            }

            #today-feed {
                gap: 10px;
            }

            .today-feed-item {
                padding: 12px 14px;
                overflow-wrap: break-word;
                word-break: break-word;
            }

            #today-load-more {
                width: calc(100% - 40px);
                box-sizing: border-box;
            }

            #today-feed-status {
                padding: 16px !important;
            }

            .today-ai-summary .post-content {
                overflow-wrap: break-word;
                word-break: break-word;
            }

            .profile-tabs {
                overflow-x: auto;
                padding-bottom: 5px;
                white-space: nowrap;
            }

            #user-tags-container {
                flex-wrap: wrap;
                justify-content: center;
            }


            .list-view {
                padding: 0 20px;
            }

            .menu-toggle {
                display: flex !important;
            }

            .sidebar-overlay {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
                backdrop-filter: blur(2px);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s;
            }

            .sidebar-overlay.active {
                opacity: 1;
                pointer-events: auto;
            }

            /* 调整弹窗在移动端的宽度（全屏 modal 单独规则，勿覆盖） */
            .modal:not(.modal-fullscreen) .modal-content {
                width: 90%;
                padding: 20px;
                max-height: 90vh;
                overflow-y: auto;
            }

            /* 调整 Toast 位置 */
            .toast-container {
                bottom: 80px;
                width: 90%;
            }

            /* 隐藏侧边栏内的用户气泡菜单，改为全屏或适配 */
            #user-bubble-menu {
                position: fixed;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                border-radius: 20px 20px 0 0;
                padding-bottom: 20px;
                transform-origin: bottom center;
            }

            /* 帖子详情页适配 */
            .post-detail-container {
                padding: 20px;
            }

            .post-detail-title {
                font-size: 24px;
            }

            .action-bar {
                flex-wrap: wrap;
            }

            /* 气泡菜单位置修正 */
            .bubble-menu {
                right: auto !important;
                left: 0 !important;
                transform-origin: top left !important;
            }

            /* 管理界面适配 */
            .manage-layout {
                flex-direction: column;
                height: auto;
                max-height: 80vh;
            }

            .manage-sidebar {
                width: 100%;
                flex-direction: row;
                overflow-x: auto;
                border-right: none;
                border-bottom: 1px solid var(--border-primary);
                padding: 10px 0;
            }

            .manage-nav-item {
                white-space: nowrap;
                padding: 8px 15px;
                border-radius: 20px;
                margin: 0 5px;
            }

            /* 隐藏不需要在移动端显示的元素，或者调整 */
            .user-profile-header {
                flex-direction: column;
                text-align: center;
            }

            .profile-avatar {
                margin: 0 auto 15px auto;
            }

            .profile-info {
                align-items: center;
            }

            /* --- Live Space Mobile --- */
            .live-container {
                flex-direction: column;
            }
            .live-main {
                flex: 1;
                padding: 8px 8px 0;
                min-height: 0;
                overflow: hidden;
            }
            .live-grid {
                grid-template-columns: 1fr;
                gap: 6px;
                align-content: start;
                padding-bottom: 8px;
                scroll-behavior: smooth;
                margin-top: 54px !important;
            }
            .live-participant {
                border-radius: 8px;
                aspect-ratio: 16 / 9;
            }
            .live-participant.expanded {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                border-radius: 0;
                z-index: 200;
            }
            .live-island {
                padding: 6px 12px;
                gap: 8px;
                font-size: 12px;
                border-radius: 20px;
            }
            .live-island-timer .label { font-size: 9px; }
            .live-island-timer .value { font-size: 12px; }
            .live-island-divider { height: 18px; }
            .live-island-btn { width: 28px; height: 28px; }
            .live-island-btn img { width: 14px !important; height: 14px !important; }
            .live-controls {
                height: 60px;
                gap: 10px;
                padding: 0 16px;
                border-radius: 30px;
                margin-bottom: 8px;
                flex-shrink: 0;
            }
            .live-btn { width: 42px; height: 42px; }
            .live-btn img { width: 22px !important; height: 22px !important; }
            .live-sidebar {
                width: 100%;
                height: 45vh;
                min-height: 200px;
                border-left: none;
                border-top: 1px solid #333;
                border-radius: 16px 16px 0 0;
                position: relative;
                flex-shrink: 0;
            }
            .live-sidebar::before {
                content: '';
                position: absolute;
                top: 6px;
                left: 50%;
                transform: translateX(-50%);
                width: 36px;
                height: 4px;
                border-radius: 2px;
                background: #555;
            }
            .live-chat-messages { padding: 12px; font-size: 13px; }
            .live-chat-input-area { padding: 10px 12px; }
            .live-quality-menu {
                bottom: 70px !important;
                left: 50% !important;
                transform: translateX(-50%);
            }
            .live-participant:hover .live-mute-btn,
            .live-participant .live-mute-btn {
                opacity: 1 !important;
            }
        }

        /* 深色模式下的菜单按钮图标适配 */
        html.dark-mode .menu-toggle .sf-icon {
            filter: invert(1);
        }

        .menu-toggle {
            display: none;
            position: fixed;
            top: 15px;
            left: 15px;
            width: 40px;
            height: 40px;
            background: var(--bg-secondary);
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 900;
            cursor: pointer;
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-primary);
        }

        .user-title-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
            margin-left: 5px;
            font-weight: bold;
            vertical-align: middle;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .leaderboard-tabs {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-secondary);
        }

        .leaderboard-tab {
            padding: 10px 0;
            cursor: pointer;
            color: var(--text-secondary);
            font-weight: 500;
            position: relative;
        }

        .leaderboard-tab.active {
            color: var(--text-primary);
        }

        .leaderboard-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-color);
        }

        /* Diff Styles */
        .diff-container {
            font-family: Consolas, "Courier New", monospace;
            white-space: pre-wrap;
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            overflow: hidden;
            font-size: 13px;
            line-height: 1.5;
        }

        .diff-line {
            padding: 0 10px;
            display: block;
            word-break: break-all;
        }

        .diff-added {
            background-color: rgba(46, 160, 67, 0.15);
            color: var(--text-primary);
        }

        .diff-removed {
            background-color: rgba(248, 81, 73, 0.15);
            color: var(--text-primary);
            text-decoration: line-through;
            opacity: 0.8;
        }

        .diff-unchanged {
            color: var(--text-secondary);
        }

        .diff-header {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            font-weight: bold;
            padding: 5px 10px;
            border-bottom: 1px solid var(--border-primary);
            margin-top: 0;
        }

        .diff-expand-btn {
            background: var(--bg-secondary);
            color: var(--primary-color);
            text-align: center;
            padding: 4px;
            cursor: pointer;
            font-size: 12px;
            border-top: 1px solid var(--border-primary);
            border-bottom: 1px solid var(--border-primary);
            user-select: none;
        }

        .diff-expand-btn:hover {
            background: var(--border-primary);
        }

        /* Fluent Tooltip */
        .fluent-tooltip {
            position: fixed;
            z-index: 20000;
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 6px 10px;
            border-radius: 4px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
            font-size: 12px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.1s ease-in-out;
            border: 1px solid var(--border-primary);
            max-width: 250px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        html.dark-mode .fluent-tooltip {
            background: rgba(45, 45, 45, 0.95);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 2px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* 页面可视化编辑器样式 */
        #page-editor-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:10000; }
        .pe-backdrop { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); }
        .pe-container { position:relative; display:flex; flex-direction:column; width:100%; height:100%; background:var(--bg-primary); backdrop-filter:blur(20px); }
        .pe-toolbar { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border-color); background:var(--bg-secondary); flex-shrink:0; }
        .pe-toolbar-title { font-size:16px; font-weight:bold; color:var(--text-primary); }
        .pe-toolbar-actions { display:flex; gap:8px; align-items:center; }
        .pe-mode-toggle { display:inline-flex; position:relative; background:rgba(120,120,128,0.12); border-radius:8px; padding:2px; margin-right:6px; gap:0; }
        .pe-mode-btn { position:relative; z-index:1; padding:5px 16px; font-size:12px; font-weight:600; letter-spacing:-0.01em; cursor:pointer; border:none; border-radius:6px; background:transparent; color:var(--muted-foreground); transition:all .15s ease; }
        .pe-mode-btn:first-child { border-right:none; }
        .pe-mode-btn.active { background:var(--background); color:var(--foreground); box-shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06); }
        .pe-mode-btn:not(.active):hover { color:var(--foreground); }
        .pe-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; border-radius:11px; font-size:13px; font-weight:600; transition:all .15s ease; cursor:pointer; outline:none; text-decoration:none; flex-shrink:0; padding:6px 12px; height:32px; background:var(--background); color:var(--foreground); border:1px solid var(--border); box-shadow:var(--shadow-button-outline); }
        .pe-btn:hover { background:var(--accent); color:var(--accent-foreground); }
        .pe-btn:disabled { pointer-events:none; opacity:.5; }
        .pe-btn-primary { background:var(--primary); color:var(--primary-foreground); border-color:transparent; box-shadow:var(--shadow-button); }
        .pe-btn-primary:hover { background:#2a323d; }
        .pe-btn-secondary { background:var(--secondary); color:var(--secondary-foreground); border-color:transparent; box-shadow:none; }
        .pe-btn-secondary:hover { background:var(--accent); }
        .pe-btn-danger { background:var(--destructive); color:white; border-color:transparent; }
        .pe-btn-danger:hover { background:#dc2626; }
        .pe-btn-close { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--muted-foreground); border:none; font-size:18px; padding:4px 10px; border-radius:8px; cursor:pointer; transition:all .15s ease; }
        .pe-btn-close:hover { background:var(--accent); color:var(--accent-foreground); }
        .pe-btn-sm { height:28px; padding:3px 8px; font-size:12px; }
        .pe-body { display:flex; flex:1; overflow:hidden; }
        .pe-palette { width:200px; min-width:200px; border-right:1px solid var(--border-color); overflow-y:auto; padding:12px; background:var(--bg-secondary); }
        .pe-palette-title { font-size:14px; font-weight:bold; color:var(--text-secondary); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border-color); }
        .pe-palette-category { font-size:11px; color:var(--text-tertiary); text-transform:uppercase; margin:12px 0 6px; letter-spacing:0.5px; }
        .pe-palette-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:all 0.15s; margin-bottom:2px; font-size:13px; color:var(--text-primary); }
        .pe-palette-item:hover { background:var(--primary-color); color:#fff; }
        .pe-palette-icon { font-size:16px; }
        .pe-canvas-wrapper { flex:1; overflow-y:auto; padding:20px; }
        .pe-canvas { max-width:800px; margin:0 auto; }
        .pe-canvas-empty { text-align:center; padding:80px 20px; color:var(--text-secondary); font-size:16px; border:2px dashed var(--border-color); border-radius:12px; }
        .pe-canvas.pe-preview-mode .pe-widget-header { display:none; }
        .pe-widget { margin-bottom:16px; border:2px solid transparent; border-radius:12px; transition:border-color 0.2s; overflow:hidden; }
        .pe-widget:hover { border-color:var(--primary-color); }
        .pe-widget-header { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); opacity:0; transition:opacity 0.15s; }
        .pe-widget:hover .pe-widget-header { opacity:1; }
        .pe-widget-type-label { font-size:12px; color:var(--text-secondary); font-weight:500; }
        .pe-widget-actions { display:flex; gap:4px; }
        .pe-action-btn { display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:8px; padding:4px 8px; font-size:12px; cursor:pointer; transition:all .15s ease; color:var(--muted-foreground); }
        .pe-action-btn:hover { background:var(--accent); color:var(--accent-foreground); }
        .pe-action-btn:disabled { opacity:0.3; cursor:not-allowed; }
        .pe-action-danger:hover { background:rgba(239,68,68,0.1); color:var(--destructive); }
        .pe-widget-body { padding:12px; }
        .pe-edit-form { padding:12px; background:var(--bg-secondary); border-radius:8px; }
        .pe-edit-field { margin-bottom:12px; }
        .pe-edit-field label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; }
        .pe-edit-textarea { min-height:80px; resize:vertical; }
        .pe-edit-links { display:flex; flex-direction:column; gap:6px; }
        .pe-link-row { display:flex; gap:6px; align-items:center; }
        .pe-link-row .input { flex:1; }
        .pe-edit-actions { display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }
        .pe-beta-badge { display:inline-block; background:#ffb900; color:#1d1d1f; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; margin-left:8px; vertical-align:middle; letter-spacing:0.5px; }
        .pe-preview-panel { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--bg-primary); z-index:10; display:flex; flex-direction:column; }
        .pe-preview-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border-color); background:var(--bg-secondary); flex-shrink:0; }
        .pe-preview-title { font-size:16px; font-weight:bold; color:var(--text-primary); }
        .pe-preview-body { flex:1; overflow-y:auto; padding:24px; max-width:900px; margin:0 auto; width:100%; box-sizing:border-box; }
        .page-widget { margin-bottom:16px; }
        .page-widget:last-child { margin-bottom:0; }
        .pe-html-mode { flex:1; display:flex; flex-direction:column; overflow:hidden; padding:20px 24px; gap:14px; }
        .pe-html-status { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); }
        .pe-html-textarea { flex:1; width:100%; min-height:400px; padding:20px; font-family:-apple-system,'SF Mono','Menlo','Monaco','Consolas',monospace; font-size:13px; line-height:1.7; letter-spacing:0.01em; border:1px solid rgba(0,0,0,0.08); border-radius:12px; background:var(--bg-primary); color:var(--text-primary); resize:none; box-sizing:border-box; tab-size:4; transition:border-color 0.2s ease,box-shadow 0.2s ease; -webkit-font-smoothing:antialiased; }
        .pe-html-textarea:focus { outline:none; border-color:rgba(0,122,255,0.5); box-shadow:0 0 0 3.5px rgba(0,122,255,0.12); }
        .pe-html-textarea::placeholder { color:var(--text-tertiary); opacity:0.6; }
        html.dark-mode .pe-mode-toggle { background:rgba(120,120,128,0.24); }
        html.dark-mode .pe-mode-btn.active { background:rgba(255,255,255,0.12); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.3); }
        html.dark-mode .pe-html-textarea { border-color:rgba(255,255,255,0.08); background:rgba(0,0,0,0.2); }
        @media (max-width: 768px) {
            .pe-body { flex-direction:column; }
            .pe-palette { width:100%; min-width:unset; max-height:160px; border-right:none; border-bottom:1px solid var(--border-color); display:flex; flex-wrap:wrap; gap:4px; padding:8px; overflow-y:auto; }
            .pe-palette-title, .pe-palette-category { display:none; }
            .pe-palette-item { padding:6px 10px; margin:0; border:1px solid var(--border-color); border-radius:6px; }
            .pe-canvas-wrapper { padding:12px; }
        }

        /* @mention 链接（从 index 抽离时曾误插入 </style> 截断选择器） */
        .mention-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            background: rgba(0, 120, 212, 0.1);
            padding: 0 4px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .mention-link:hover {
            background: rgba(0, 120, 212, 0.2);
            text-decoration: underline;
        }

    .loading-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--border-primary, #e0e0e0);
        border-top-color: var(--primary-color, #0078d4);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

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

    .ai-review-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgba(255, 255, 255, 0.42);
        backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .ai-review-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .ai-review-card {
        width: min(360px, calc(100vw - 32px));
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 24px 22px 22px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-primary);
        color: var(--text-primary);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
        transform: translateY(10px) scale(0.98);
        transition: transform 0.2s ease;
    }

    .ai-review-overlay.active .ai-review-card {
        transform: translateY(0) scale(1);
    }

    .ai-review-visual {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ai-review-spinner {
        width: 38px;
        height: 38px;
        border-width: 4px;
    }

    .ai-review-status-icon {
        width: 38px;
        height: 38px;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
    }

    .ai-review-card.is-success .ai-review-status-icon {
        background: rgba(34, 197, 94, 0.12);
        color: #16a34a;
        border: 1px solid rgba(34, 197, 94, 0.35);
    }

    .ai-review-card.is-error .ai-review-status-icon {
        background: rgba(239, 68, 68, 0.12);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.35);
    }

    .ai-review-card.is-pending .ai-review-status-icon {
        background: rgba(245, 158, 11, 0.14);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.4);
    }

    .ai-review-title {
        max-width: 100%;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .ai-review-desc {
        max-width: 100%;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.55;
        text-align: center;
        overflow-wrap: anywhere;
    }

    html.dark-mode .ai-review-overlay {
        background: rgba(0, 0, 0, 0.36);
    }

    html.dark-mode .ai-review-card {
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    }

    /* AI 翻译/解释结果信息栏 */
    .ai-result-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        margin-bottom: 12px;
        background: rgba(0, 120, 212, 0.06);
        border: 1px solid rgba(0, 120, 212, 0.15);
        border-radius: 8px;
        font-size: 13px;
        color: var(--text-secondary);
    }

    .ai-result-bar button {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        white-space: nowrap; border-radius: 11px; font-size: 12px; font-weight: 600;
        transition: all .15s ease; cursor: pointer; outline: none;
        padding: 4px 10px; height: 28px;
        background: var(--background); color: var(--foreground);
        border: 1px solid var(--border); box-shadow: var(--shadow-button-outline);
    }
    .ai-result-bar button:hover {
        background: var(--accent); color: var(--accent-foreground);
    }

    html.dark-mode .ai-result-bar {
        background: rgba(0, 120, 212, 0.12);
        border-color: rgba(0, 120, 212, 0.25);
    }

    /* AI 流式加载状态 */
    .ai-streaming {
        min-height: 2em;
    }

    .ai-streaming-spinner {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 0;
    }

    /* AI 正在思考... 扫光动画 — 无缝循环 */
    .ai-thinking-text {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.5px;
        background: linear-gradient(
            to right,
            #555555 20%,
            #ececec 50%,
            #555555 80%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: shimmer 1.5s linear infinite;
        user-select: none;
    }

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

    html.dark-mode .ai-thinking-text {
        background: linear-gradient(
            to right,
            #555555 20%,
            #ececec 50%,
            #555555 80%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
    }

    /* AI 思考过程折叠块 */
    .ai-thinking-block {
        margin-bottom: 8px;
    }

    .ai-thinking-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        user-select: none;
        padding: 4px 0;
        letter-spacing: 0.5px;
    }

    /* 思考中：toggle 文字扫光 */
    .ai-thinking-block:not(.done) .ai-thinking-toggle .ai-thinking-label {
        background: linear-gradient(to right, #555555 20%, #ececec 50%, #555555 80%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: shimmer 1.5s linear infinite;
    }

    html.dark-mode .ai-thinking-block:not(.done) .ai-thinking-toggle .ai-thinking-label {
        background: linear-gradient(to right, #555555 20%, #ececec 50%, #555555 80%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .ai-thinking-block.done .ai-thinking-toggle .ai-thinking-label {
        background: none;
        animation: none;
        -webkit-text-fill-color: var(--text-secondary, #999);
        color: var(--text-secondary, #999);
    }

    .ai-thinking-block.done .ai-thinking-toggle {
        color: var(--text-secondary, #999);
    }

    html.dark-mode .ai-thinking-block.done .ai-thinking-toggle {
        background: none;
        -webkit-text-fill-color: var(--text-secondary, #aaa);
        color: var(--text-secondary, #aaa);
    }

    .ai-thinking-chevron {
        font-size: 11px;
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .ai-thinking-body {
        margin-top: 4px;
        padding: 10px 12px;
        background: var(--bg-secondary, #f5f5f5);
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.6;
        max-height: 240px;
        overflow-y: auto;
        color: var(--text-secondary, #888);
    }

    .ai-thinking-content {
        white-space: pre-wrap;
        word-break: break-word;
    }

    html.dark-mode .ai-thinking-body {
        background: var(--bg-secondary, #2a2a2a);
    }

    .bloriko-tool-list {
        margin-bottom: 8px;
        padding: 8px 10px;
        background: var(--bg-secondary, #f5f5f5);
        border: 1px solid var(--border-primary, #e5e5e5);
        border-radius: 8px;
        font-size: 12px;
        color: var(--text-secondary, #666);
    }

    .bloriko-tool-title {
        margin-bottom: 6px;
        font-weight: 600;
        color: var(--text-secondary, #777);
    }

    .bloriko-tool-item + .bloriko-tool-item {
        margin-top: 6px;
    }

    .bloriko-tool-main {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    .bloriko-tool-status {
        display: inline-flex;
        align-items: center;
        height: 20px;
        padding: 0 6px;
        border-radius: 4px;
        background: rgba(0, 120, 212, 0.10);
        color: #0067b8;
        font-weight: 600;
        white-space: nowrap;
    }

    .bloriko-tool-item.done .bloriko-tool-status {
        background: rgba(16, 124, 16, 0.12);
        color: #107c10;
    }

    .bloriko-tool-item.error .bloriko-tool-status {
        background: rgba(196, 43, 28, 0.12);
        color: #c42b1c;
    }

    .bloriko-tool-main code {
        padding: 2px 5px;
        border-radius: 4px;
        background: var(--bg-primary, #fff);
        color: var(--text-primary, #333);
        font-size: 12px;
        word-break: break-word;
    }

    .bloriko-tool-args,
    .bloriko-tool-detail {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .bloriko-tool-detail {
        margin-top: 4px;
        line-height: 1.5;
    }

    html.dark-mode .bloriko-tool-list {
        background: var(--bg-secondary, #2a2a2a);
        border-color: var(--border-primary, #3a3a3a);
    }

    html.dark-mode .bloriko-tool-main code {
        background: var(--bg-primary, #1f1f1f);
    }

    /* AI 结果淡入动画 */
    .ai-fade-in {
        animation: ai-fadeIn 0.4s ease-out;
    }

    @keyframes ai-fadeIn {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* === Bloriko Chat (独立页面) === */
    .bloriko-page {
        display: flex;
        flex-direction: row;
        height: calc(100vh - 60px);
        width: 100%;
        padding: 0;
    }

    .bloriko-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0 12px;
        border-bottom: 1px solid var(--border-primary, #e5e5e5);
        flex-shrink: 0;
    }

    .bloriko-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bloriko-avatar {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .bloriko-header-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .bloriko-header-sub {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .bloriko-icon-btn {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
    }

    .bloriko-icon-btn:hover {
        background: var(--bg-secondary, #f0f0f0);
    }

    .bloriko-icon-btn.is-private {
        color: var(--primary-color, #0078d4);
        background: rgba(0, 120, 212, 0.08);
    }

    /* 消息区域 */
    .bloriko-messages-area {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 24px 0;
        scroll-behavior: smooth;
    }

    /* 欢迎屏 */
    .bloriko-welcome {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-align: center;
        gap: 8px;
        color: var(--text-primary);
    }

    .bloriko-welcome-avatar {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin-bottom: 8px;
    }

    .bloriko-welcome h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
    }

    .bloriko-welcome p {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.6;
    }

    .bloriko-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
        justify-content: center;
    }

    .bloriko-suggest-btn {
        padding: 8px 16px;
        border: 1px solid var(--border-primary, #e0e0e0);
        border-radius: 20px;
        background: var(--bg-primary, #fff);
        color: var(--text-primary);
        font-size: 13px;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
    }

    .bloriko-suggest-btn:hover {
        background: var(--bg-secondary, #f5f5f5);
        border-color: var(--primary-color, #0078d4);
    }

    html.dark-mode .bloriko-suggest-btn {
        background: var(--bg-secondary, #2a2a2a);
        border-color: var(--border-primary, #444);
    }

    /* 消息气泡（原始风格） */
    .bloriko-page .bloriko-msg {
        padding: 10px 16px;
        border-radius: 16px;
        font-size: 14px;
        line-height: 1.7;
        word-break: break-word;
        max-width: 88%;
    }

    .bloriko-page .bloriko-msg-user {
        align-self: flex-end;
        background: var(--primary-color, #0078d4);
        color: #fff;
        border-bottom-right-radius: 4px;
    }

    .bloriko-page .bloriko-msg-bot {
        align-self: flex-start;
        background: var(--bg-secondary, #f0f0f0);
        color: var(--text-primary, #1d1d1f);
        border-bottom-left-radius: 4px;
    }

    html.dark-mode .bloriko-page .bloriko-msg-bot {
        background: var(--bg-secondary, #2a2a2a);
    }

    .bloriko-page .bloriko-msg-bot a {
        color: var(--primary-color, #0078d4);
        text-decoration: none;
    }

    .bloriko-page .bloriko-msg-bot a:hover {
        text-decoration: underline;
    }

    .bloriko-page .bloriko-msg-bot code {
        background: rgba(0,0,0,0.06);
        padding: 1px 5px;
        border-radius: 4px;
        font-size: 13px;
    }

    html.dark-mode .bloriko-page .bloriko-msg-bot code {
        background: rgba(255,255,255,0.08);
    }

    .bloriko-page .bloriko-msg-bot pre {
        background: rgba(0,0,0,0.04);
        border-radius: 8px;
        padding: 10px 14px;
        overflow-x: auto;
        margin: 8px 0;
    }

    html.dark-mode .bloriko-page .bloriko-msg-bot pre {
        background: rgba(255,255,255,0.05);
    }

    .bloriko-page .bloriko-msg-bot pre code {
        background: none;
        padding: 0;
    }

    /* 思考块（原始风格 + 动画） */
    .bloriko-page .bloriko-msg-bot .ai-thinking-block {
        margin-bottom: 6px;
    }

    .bloriko-page .bloriko-msg-bot .ai-thinking-body {
        background: var(--bg-primary, #f5f5f5);
        border-radius: 8px;
        margin-top: 4px;
        max-height: 180px;
    }

    html.dark-mode .bloriko-page .bloriko-msg-bot .ai-thinking-body {
        background: var(--bg-primary, #1a1a1a);
    }

    .bloriko-page .bloriko-stream-placeholder,
    .bloriko-page .bloriko-text-dim {
        color: var(--text-secondary);
        font-size: 13px;
    }

    .bloriko-page .bloriko-text-error {
        color: #d32f2f;
        font-size: 13px;
    }

    html.dark-mode .bloriko-page .bloriko-text-error {
        color: #ff6b80;
    }

    /* 底部输入区 */
    .bloriko-input-footer {
        flex-shrink: 0;
        padding: 12px 0 16px;
    }

    .bloriko-input-container {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        border: 1px solid var(--input);
        border-radius: 13px;
        padding: 8px 8px 8px 18px;
        background: var(--background);
        box-shadow: var(--shadow-input);
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .bloriko-input-container:focus-within {
        border-color: var(--ring);
        box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
    }

    .bloriko-textarea {
        flex: 1;
        border: none;
        outline: none;
        resize: none;
        font-size: 14px;
        line-height: 1.5;
        background: transparent;
        color: var(--foreground);
        min-height: 24px;
        max-height: 200px;
        padding: 4px 0;
        font-family: inherit;
    }

    .bloriko-textarea::placeholder {
        color: var(--muted-foreground);
    }

    .bloriko-input-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .bloriko-send-btn {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: var(--primary-color, #0078d4);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.15s, transform 0.1s;
        flex-shrink: 0;
    }

    .bloriko-send-btn:hover:not(:disabled) {
        opacity: 0.85;
    }

    .bloriko-send-btn.is-stopping {
        background: var(--danger-color, #d32f2f);
    }

    .bloriko-send-btn:active:not(:disabled) {
        transform: scale(0.92);
    }

    .bloriko-send-btn:disabled {
        background: var(--text-secondary, #ccc);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .bloriko-input-hint {
        text-align: center;
        font-size: 11px;
        color: var(--text-secondary, #aaa);
        margin-top: 6px;
    }

    .bloriko-interrupted-note {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--text-secondary, #777);
        font-size: 12px;
    }

    html.dark-mode .bloriko-interrupted-note {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    /* === Bloriko 在 Today 卡片中 === */
    .bloriko-chat {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--border-primary, #e0e0e0);
    }

    .bloriko-chat-messages {
        max-height: 320px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 4px 0 10px;
    }

    .bloriko-chat-messages:empty {
        display: none;
    }

    /* === Bloriko Main (右侧聊天区域) === */
    .bloriko-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        max-width: 820px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* === Bloriko Sidebar (历史记录侧栏) === */
    .bloriko-sidebar {
        width: 0;
        min-width: 0;
        background: var(--bg-secondary, #f7f7f8);
        border-right: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
        transition: width 0.24s ease, min-width 0.24s ease, border-color 0.24s ease;
    }

    .bloriko-sidebar.open {
        width: 280px;
        min-width: 280px;
        border-right: 1px solid var(--border-primary, #e5e5e5);
    }

    html.dark-mode .bloriko-sidebar {
        background: #1a1a1c;
    }

    .bloriko-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 12px 12px;
        flex-shrink: 0;
    }

    .bloriko-new-conv-btn {
        flex: 1;
        padding: 10px 16px;
        border: 1px solid var(--border-primary, #d4d4d4);
        border-radius: 10px;
        background: transparent;
        color: var(--text-primary, #1d1d1f);
        font-size: 14px;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .bloriko-new-conv-btn:hover {
        background: var(--bg-primary, #fff);
        border-color: var(--primary-color, #0078d4);
    }

    html.dark-mode .bloriko-new-conv-btn {
        border-color: #444;
    }

    html.dark-mode .bloriko-new-conv-btn:hover {
        background: #2a2a2a;
    }

    .bloriko-sidebar-close-btn {
        display: none;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        flex-shrink: 0;
    }

    .bloriko-sidebar-close-btn:hover {
        background: rgba(0,0,0,0.06);
    }

    html.dark-mode .bloriko-sidebar-close-btn:hover {
        background: rgba(255,255,255,0.08);
    }

    .bloriko-sidebar-list {
        flex: 1;
        overflow-y: auto;
        padding: 4px 8px;
    }

    .bloriko-conv-item {
        position: relative;
        padding: 10px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s;
        margin-bottom: 2px;
    }

    .bloriko-conv-item:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    html.dark-mode .bloriko-conv-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .bloriko-conv-item.active {
        background: rgba(0, 0, 0, 0.08);
    }

    html.dark-mode .bloriko-conv-item.active {
        background: rgba(255, 255, 255, 0.12);
    }

    .bloriko-conv-title {
        font-size: 13px;
        color: var(--text-primary, #1d1d1f);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 24px;
        line-height: 1.4;
    }

    .bloriko-conv-meta {
        font-size: 11px;
        color: var(--text-secondary, #999);
        margin-top: 2px;
    }

    .bloriko-conv-delete {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 22px;
        height: 22px;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: var(--text-secondary, #999);
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .bloriko-conv-item:hover .bloriko-conv-delete {
        display: flex;
    }

    .bloriko-conv-delete:hover {
        color: var(--danger-color, #d32f2f);
        background: rgba(211, 47, 47, 0.08);
    }

    html.dark-mode .bloriko-conv-delete:hover {
        background: rgba(211, 47, 47, 0.15);
    }

    .bloriko-sidebar-overlay {
        display: none;
    }

    /* 历史记录侧栏开关 */
    .bloriko-sidebar-toggle-btn {
        display: flex;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        flex-shrink: 0;
    }

    .bloriko-sidebar-toggle-btn:hover {
        background: var(--bg-secondary, #f0f0f0);
    }

    /* 空列表提示 */
    .bloriko-sidebar-empty {
        text-align: center;
        color: var(--text-secondary, #999);
        font-size: 13px;
        padding: 32px 16px;
        line-height: 1.6;
    }

    /* Bloriko 移动端适配 */
    @media (max-width: 768px) {
        .bloriko-page {
            height: calc(100vh - 60px);
        }

        .bloriko-sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 1001;
            transform: translateX(-100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            width: 280px;
            min-width: 280px;
            border-right: 1px solid var(--border-primary, #e5e5e5);
        }

        .bloriko-sidebar.open {
            transform: translateX(0);
        }

        .bloriko-sidebar-close-btn {
            display: flex;
        }

        .bloriko-sidebar-overlay {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .bloriko-sidebar-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .bloriko-main {
            max-width: none;
            width: 100%;
        }

        .bloriko-conv-delete {
            display: flex;
        }
    }


/* Global notification center */
.notification-nav-item { position: relative; }
.notification-nav-item .notification-unread-badge {
    min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
    box-sizing: border-box; border-radius: 999px; background: var(--danger-color);
    color: white; font-size: 11px; line-height: 20px; font-weight: 700; text-align: center;
}
.notification-panel {
    position: fixed; left: calc(var(--sidebar-width) + 12px); bottom: 20px; z-index: 2000; width: min(420px, calc(100vw - var(--sidebar-width) - 32px));
    max-height: min(620px, calc(100vh - 110px)); overflow: hidden; border: 1px solid var(--border);
    border-radius: 18px; background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-dropdown);
}
.notification-panel[hidden] { display: none; }
.notification-panel-header, .notification-panel-actions, .notification-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notification-panel-header { padding: 14px 14px 8px 18px; }
.notification-panel-actions { justify-content: flex-end; }
.notification-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 14px 10px; border-bottom: 1px solid var(--border); }
.notification-tab { padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-foreground); cursor: pointer; font-weight: 600; }
.notification-tab.active { background: var(--accent); color: var(--accent-foreground); }
.notification-pane { display: none; max-height: 470px; overflow-y: auto; padding: 12px; }
.notification-pane.active { display: block; }
.notification-card, .notification-task-card { margin-bottom: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--card); }
.notification-card { cursor: pointer; border-left: 4px solid var(--primary-color); }
.notification-card:hover { background: var(--accent); }
.notification-card-heading { align-items: flex-start; font-size: 14px; }
.notification-card-heading > span { flex-shrink: 0; color: var(--muted-foreground); font-size: 11px; font-weight: 600; }
.notification-card-meta { margin-top: 4px; color: var(--muted-foreground); font-size: 12px; }
.notification-card-preview { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.notification-card-error { color: var(--danger-color); }
.notification-card-actions { display: flex; justify-content: flex-end; margin-top: 9px; }
.notification-review-state { color: var(--muted-foreground); font-size: 12px; }
.notification-review-state.success { color: var(--success-color); }
.notification-empty { padding: 38px 12px; color: var(--muted-foreground); text-align: center; }
@media (max-width: 768px) {
    .notification-panel { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100vh - 84px); }
    .notification-pane { max-height: calc(100vh - 210px); }
}