*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f7fa;color:#1f2937}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#ffffff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.brand{font-weight:600;color:#111827}
.nav a{color:#4b5563;margin:0 8px;text-decoration:none;padding:6px 8px;border-radius:6px;font-size:14px}
.nav a:hover{background:#f3f4f6;color:#111827}
.section{display:none;padding:20px;max-width:1000px;margin:0 auto}
.section.active{display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:20px 0}
.card{display:block;background:#ffffff;border:none;padding:20px;border-radius:12px;color:#1f2937;text-decoration:none;transition:all 0.2s ease;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}
.card h2{margin:0 0 8px 0;font-size:18px;color:#111827}
.card p{margin:0;color:#4b5563;font-size:14px;opacity:0.9}

/* 不同模块的颜色定义 */
.card[href="#blindbox"] { background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%); }
.card[href="#blindbox"] h2 { color: #991b1b; }
.card[href="#blindbox"] p { color: #b91c1c; }

.card[href="#wish"] { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); }
.card[href="#wish"] h2 { color: #3730a3; }
.card[href="#wish"] p { color: #4338ca; }

.card[href="#live-stats"] { background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%); }
.card[href="#live-stats"] h2 { color: #065f46; }
.card[href="#live-stats"] p { color: #047857; }

.card[href="#captain-stats"] { background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); }
.card[href="#captain-stats"] h2 { color: #92400e; }
.card[href="#captain-stats"] p { color: #b45309; }

.home-blog{margin-top:32px;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.home-blog h2{margin:0 0 16px 0;font-size:20px;color:#111827;border-bottom:1px solid #e5e7eb;padding-bottom:12px}
.post-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.post-list li{background:none;border:none;border-bottom:1px solid #f3f4f6;padding:12px 0;display:block}
.post-list li:last-child{border-bottom:none}
.post-title{font-size:16px;color:#111827;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.post-title:hover{color:#2563eb;text-decoration:none}
.post-meta{display:none}
.panel{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.result{margin-top:16px;padding:16px;background:#f9fafb;border:1px dashed #d1d5db;border-radius:8px;color:#374151}
.list{list-style:none;padding:0;margin-top:16px;display:grid;gap:12px}
.list li{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;color:#374151}
.table{margin-top:16px;overflow:auto;background:#ffffff;border-radius:8px;border:1px solid #e5e7eb}
table{width:100%;border-collapse:collapse}
th{background:#f9fafb;font-weight:600;color:#374151}
th,td{border:1px solid #e5e7eb;padding:12px;text-align:left;color:#4b5563}
.modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal.open{display:flex}
.modal-content{background:#ffffff;border:none;border-radius:16px;max-width:800px;width:100%;max-height:90vh;overflow:auto;padding:24px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}
.close{float:right;background:#f3f4f6;color:#4b5563;border:none;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:14px;transition:background 0.2s}
.close:hover{background:#e5e7eb;color:#111827}
.site-footer{padding:24px;text-align:center;color:#9ca3af;font-size:14px;border-top:1px solid #e5e7eb;margin-top:40px}
video,img{max-width:100%;border-radius:8px;margin:12px 0}
#post-detail h2{margin-top:0;color:#111827}
#post-detail .post-meta{margin:8px 0 16px 0;margin-left:0}
#post-detail div{line-height:1.6;color:#374151}
@media (max-width:600px){
.nav{display:flex;flex-wrap:wrap}
.nav a{margin:4px}
}