/* 基础重置 */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f7fa; color: #1e293b; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* 导航 */
.navbar { background: #0f172a; color: #fff; padding: 12px 0; position: sticky; top:0; z-index:100; }
.logo { font-size: 1.4rem; font-weight: 700; }
.gold { color: #fbbf24; }
.btn-outline { background: transparent; border: 1px solid #94a3b8; color: #e2e8f0; padding:4px 12px; border-radius:20px; cursor:pointer; margin-left:8px; font-size:0.8rem; }
.btn-outline:hover { background: #334155; }
.btn-gold { background: #fbbf24; border:none; padding:6px 16px; border-radius:20px; cursor:pointer; font-weight:600; }

/* 网格 */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:40px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:40px; }
@media (max-width: 768px) {
    .grid-3 { grid-template-columns: repeat(2,1fr); }
    .grid-4 { grid-template-columns: repeat(2,1fr); }
}
/* 卡片 */
.card { background: #fff; border-radius:12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: 0.2s; cursor:pointer; position:relative; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.10); }
.card-img { width:100%; background:#e2e8f0; position:relative; overflow:hidden; }
.ad-card .card-img { aspect-ratio: 16/10; }
.image-card .card-img { aspect-ratio: 1/1; }
.card-img img { width:100%; height:100%; object-fit: cover; display:block; }
/* 角标 */
.badge { position:absolute; padding:2px 10px; font-size:0.7rem; font-weight:600; border-radius:20px; }
.badge-top-left { top:8px; left:8px; background:#f59e0b; color:#000; }
.badge-top-right { top:8px; right:8px; background:#ef4444; color:#fff; }
.badge-bottom-left { bottom:8px; left:8px; background:rgba(0,0,0,0.7); color:#fff; }
.badge-stamp { position:absolute; bottom:8px; right:8px; transform:rotate(-12deg); background:#dc2626; color:#fff; padding:2px 8px; font-size:0.7rem; border-radius:4px; opacity:0.9; }
.card-title { padding:10px 12px 6px; font-weight:600; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta { padding:0 12px 12px; font-size:0.8rem; color:#64748b; display:flex; justify-content:space-between; }

/* 详情页 */
.detail-container { max-width: 820px; margin:0 auto; background:#fff; border-radius:16px; padding:24px; }
#backHome { display:inline-block; margin-bottom:20px; color:#2563eb; cursor:pointer; }
.detail-content img, .detail-content video { max-width:100%; border-radius:8px; margin:12px 0; }
.detail-content .text-block { margin:16px 0; line-height:1.8; }
.interact-bar { display:flex; gap:20px; margin-top:30px; padding-top:20px; border-top:1px solid #e2e8f0; }
.interact-btn { background:#f1f5f9; border:none; padding:8px 20px; border-radius:30px; cursor:pointer; font-size:0.95rem; display:flex; align-items:center; gap:6px; }
.interact-btn.active { background:#dbeafe; color:#2563eb; }
.quick-reply { margin-top:20px; }
.quick-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.quick-tag { background:#e2e8f0; padding:6px 16px; border-radius:30px; cursor:pointer; font-size:0.85rem; transition:0.2s; }
.quick-tag:hover { background:#cbd5e1; }
.reply-list { margin-top:16px; max-height:300px; overflow-y:auto; }
.reply-item { background:#f8fafc; padding:8px 12px; border-radius:8px; margin-bottom:6px; font-size:0.9rem; }

/* 模态框 */
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:999; }
.modal-content { background:#fff; padding:30px; border-radius:16px; width:90%; max-width:400px; }
.modal-content input { width:100%; padding:10px; margin:10px 0; border:1px solid #cbd5e1; border-radius:8px; }
.close { float:right; font-size:1.8rem; cursor:pointer; }

/* 管理面板 */
.admin-form label { display:block; margin:6px 0; }
.admin-input { padding:4px 8px; border:1px solid #ccc; border-radius:4px; width:200px; }
#contentEditor { background:#fff; border:1px solid #ddd; padding:10px; min-height:150px; color:#000; }

/* 辅助 */
.section-title { font-size:1.4rem; margin:30px 0 16px; font-weight:700; }
.page { display:none; }
.page.active { display:block; }