:root { --bg: #0f111a; --card: #1e212b; --text: #fff; --sub: #8b9bb4; --acc: #2d6cdf; --gold: linear-gradient(135deg, #f6d365, #fda085); }
* { margin: 0; padding: 0; box-sizing: border-box; outline: none !important; -webkit-tap-highlight-color: transparent; font-family: -apple-system, sans-serif; }
body { background: var(--bg); color: var(--text); padding-bottom: 70px; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { padding: 20px; max-width: 600px; margin: 0 auto; }

/* 隐藏滚动条但允许滚动 */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: rgba(15,17,26,0.95); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); }
.card { background: var(--card); border-radius: 16px; padding: 20px; margin-bottom: 15px; border: 1px solid #2a2e3b; }
.btn { padding: 10px 20px; border-radius: 8px; background: var(--acc); color: #fff; border: none; cursor: pointer; font-size: 14px; transition: 0.2s; text-align: center; }
.btn:active { transform: scale(0.96); opacity: 0.8; }
.btn-block { display: block; width: 100%; }
.btn-danger { background: #ff4757; }
.form-control { width: 100%; padding: 12px; border-radius: 8px; background: #000; border: 1px solid #333; color: #fff; margin-bottom: 10px; }

.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: var(--card); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #333; z-index: 999; }
.nav-item { display: flex; flex-direction: column; align-items: center; color: var(--sub); font-size: 10px; cursor: pointer; }
.nav-item i { font-size: 22px; margin-bottom: 2px; }
.nav-item.active { color: var(--acc); }

.nebula-card { background: linear-gradient(135deg, #2b1e2b, #4a0e4e); display: flex; justify-content: space-between; align-items: center; padding: 20px; border-radius: 16px; margin-bottom: 20px; }
.grid-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; text-align: center; font-size: 12px; }
.menu-icon { width: 50px; height: 50px; background: #252936; border-radius: 15px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--acc); }
.post-item { padding: 15px; border-bottom: 1px solid #2a2e3b; background: var(--card); margin-bottom: 10px; border-radius: 12px; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; margin-right: 10px; }
.vip-tag { background: var(--gold); color: #000; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: bold; }
.notice-bar { background: rgba(45, 108, 223, 0.1); color: var(--acc); padding: 10px; border-radius: 8px; margin-bottom: 15px; font-size: 13px; display: flex; align-items: center; }