/* ============================================
   液态玻璃主题 Liquid Glass
   配合 liquid-glass.js 使用（SVG 折射）
   ============================================ */

:root {
    --lg-c1: rgba(251, 114, 153, 0.70);
    --lg-c2: rgba(0, 174, 236, 0.70);
    --lg-c3: rgba(124, 58, 237, 0.65);
    --lg-c4: rgba(56, 189, 248, 0.55);
}

body {
    background-color: #0f172a;
    background-image:
        radial-gradient(circle at 12% 18%, var(--lg-c1), transparent 42%),
        radial-gradient(circle at 88% 12%, var(--lg-c2), transparent 42%),
        radial-gradient(circle at 78% 88%, var(--lg-c3), transparent 45%),
        radial-gradient(circle at 20% 85%, var(--lg-c4), transparent 45%),
        linear-gradient(135deg, #1b2438 0%, #0b1120 100%);
    background-attachment: fixed;
    background-size: 170% 170%, 170% 170%, 170% 170%, 170% 170%, 100% 100%;
    animation: lg-float 24s ease-in-out infinite alternate;
}
@keyframes lg-float {
    0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
    100% { background-position: 16% 12%, 84% 10%, 82% 84%, 12% 88%, 0 0; }
}

/* ---- 主容器：磨砂玻璃 ---- */
.app-wrapper {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(9px) saturate(1.5);
    -webkit-backdrop-filter: blur(9px) saturate(1.5);
}
.sidebar {
    background: rgba(255, 255, 255, 0.28) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(6px) saturate(1.4);
    -webkit-backdrop-filter: blur(6px) saturate(1.4);
}
.main-content { background: transparent !important; }

/* ---- 卡片 / 列表 ---- */
.post-item, .list-item, .profile-card, .post-detail, .reply-item,
.msg-item, .notif-item, .card, .contact-list, .chat-window, .container,
.stat-card, .modal-content, .profile-content .bio {
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
.post-item:hover, .list-item:hover, .contact-item:hover {
    background: rgba(255, 255, 255, 0.64) !important;
}

/* ---- 下拉菜单 / 弹窗 ---- */
.history-panel, .coin-menu {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) saturate(1.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
}
.modal { background: rgba(15, 23, 42, 0.4) !important; }

/* ---- 表单 ---- */
.form-group input, .form-group textarea, .form-group select,
.modal-content input, .modal-content textarea, .modal-content select,
.reply-form textarea, .chat-input textarea, .bio-section textarea {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- 次要按钮 ---- */
.btn-secondary, .vote-btn {
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.btn-secondary:hover, .vote-btn:hover {
    background: rgba(255, 255, 255, 0.66) !important;
}

/* ---- 公告条 ---- */
.announcement-bar {
    background: rgba(0, 174, 236, 0.2) !important;
    border-left: 4px solid #00aeec !important;
}

/* 独立页面卡片（登录/注册）对比度更高 */
.container { background: rgba(255, 255, 255, 0.66) !important; }

/* ---- 聊天气泡 ---- */
.chat-message.received { background: rgba(255, 255, 255, 0.7) !important; }

/* 移动端降低模糊开销 */
@media (max-width: 768px) {
    .app-wrapper { backdrop-filter: blur(6px) saturate(1.4); -webkit-backdrop-filter: blur(6px) saturate(1.4); }
}