:root {
            --bg: #121212;
            --card-bg: #1a1a1a;
            --text: #e0e0e0;
            --text-secondary: #999;
            --accent: #FE2C55;
            --border: #2a2a2a;
            --txt-dim: #777;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }
        /* 顶部导航 */
        .topbar {
            position: sticky; top: 0; z-index: 100;
            background: rgba(18,18,18,0.92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            padding: 12px 16px;
            display: flex; align-items: center; gap: 12px;
        }
        .topbar .back-btn {
            width: 36px; height: 36px;
            border-radius: 50%; border: none;
            background: var(--card-bg);
            color: var(--text); font-size: 20px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background .2s;
            flex-shrink: 0;
        }
        .topbar .back-btn:hover { background: #2a2a2a; }
        .topbar h1 {
            font-size: 18px; font-weight: 600;
            flex: 1; text-align: center; margin-right: 36px;
        }
        /* 瀑布流容器 */
        .waterfall {
            padding: 12px 10px;
            column-count: 2;
            column-gap: 10px;
            max-width: 800px;
            margin: 0 auto;
        }
        /* 卡片 */
        .card {
            break-inside: avoid;
            margin-bottom: 10px;
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s;
            border: 1px solid var(--border);
        }
        .card:active { transform: scale(0.97); }
        .card-cover {
            width: 100%; display: block;
            background: #1e1e1e;
            min-height: 80px;
            object-fit: cover;
        }
        .card-cover-placeholder {
            width: 100%; min-height: 120px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; color: rgba(255,255,255,0.15);
        }
        .card-body { padding: 10px 12px 12px; }
        .card-content {
            font-size: 13px; line-height: 1.5;
            color: var(--text);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
        }
        .card-meta {
            display: flex; align-items: center; gap: 8px;
            font-size: 11px; color: var(--txt-dim);
        }
        .card-meta .meta-avatar {
            width: 20px; height: 20px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid var(--border);
        }
        .card-meta .meta-avatar .avatar-letter { font-size: 8px; }
        .card-meta .meta-name { font-weight: 500; color: var(--text-secondary); }
        .card-stats {
            display: flex; gap: 10px; font-size: 11px; color: var(--txt-dim);
            margin-top: 6px;
        }
        .card-time {
            font-size: 10px; color: #555;
            margin-top: 6px;
        }
        /* 空状态 */
        .empty {
            text-align: center; padding: 100px 20px; color: var(--txt-dim);
        }
        .empty .empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.3; }
        .empty p { font-size: 14px; }
        /* 登录状态 */
        .login-wall {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            min-height: 60vh; gap: 16px;
        }
        .login-wall .login-icon { font-size: 72px; opacity: 0.3; }
        .login-wall p { color: var(--txt-dim); font-size: 15px; }
        .login-wall .login-btn {
            background: linear-gradient(135deg, #FE2C55, #ff6b81);
            color: #fff; border: none; border-radius: 24px;
            padding: 12px 40px; font-size: 15px; font-weight: 600;
            cursor: pointer; transition: opacity .2s;
        }
        .login-wall .login-btn:active { opacity: 0.8; }
        /* 加载中 */
        .loader {
            text-align: center; padding: 30px; color: var(--txt-dim);
            font-size: 13px;
        }
        .spinner {
            display: inline-block; width: 28px; height: 28px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin .8s linear infinite;
            margin-bottom: 8px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        /* 响应式 */
        @media (min-width: 600px) {
            .waterfall { column-count: 3; }
        }
        @media (min-width: 900px) {
            .waterfall { column-count: 4; }
        }
    
/* ===== 彩虹头像 ===== */
.rainbow-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:conic-gradient(#FF0080,#FF8C00,#FFE600,#00E676,#00B0FF,#651FFF,#FF0080);animation:rainbow-spin 3s linear infinite;box-shadow:0 2px 8px rgba(0,0,0,.3);flex-shrink:0}
.rainbow-avatar::before{content:'';position:absolute;inset:3px;border-radius:50%;background:#1a1a1a}
.rainbow-avatar .avatar-letter{position:relative;z-index:1;color:#fff;font-weight:700;font-size:16px;line-height:1}
@keyframes rainbow-spin{to{transform:rotate(360deg)}}