:root {
    --primary: #ff4d4f;
    --bg-main: #ffffff;
    --bg-sub: #f5f5f7;
    --text-main: #1d1d1f;
    --accent-gold: #fbc531;
    --accent-blue: #0984e3;
    --accent-green: #00b894;
}

/* --- 插入：全局防溢出样式 --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}

body { 
    background: var(--bg-main); 
    color: var(--text-main); 
    font-family: "PingFang SC", "SF Pro", sans-serif; 
    overflow-x: hidden; 
}

img, video, canvas { max-width: 100%; height: auto; }

/* 1. 巨大滚动标题 */
.top-snark-giant {
    background: #000; color: var(--primary); height: 60px; line-height: 60px;
    font-size: 20px; font-weight: 900; overflow: hidden; white-space: nowrap;
    border-bottom: 3px solid var(--primary);
}
.marquee-container { display: inline-block; animation: marquee 30s linear infinite; }
.marquee-text { padding-right: 100px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 2. 导航栏 */
.nav-portal { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid #eee; }
.nav-container { max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 90px; padding: 0 50px; }
.brand { font-size: 28px; font-weight: 900; letter-spacing: -1.5px; cursor: pointer; }
.brand span { color: var(--primary); }
.nav-links { display: flex; gap: 40px; }
.nav-link { text-decoration: none; color: #666; font-weight: 700; cursor: pointer; transition: 0.3s; padding: 10px 0; font-size: 16px; }
.nav-link:hover, .nav-link.active { color: var(--primary); }
.nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--primary); border-radius: 2px; }

/* 3. 页面网格：内容最大化 */
.app-container {
    max-width: 1600px; margin: 40px auto; display: grid; gap: 35px; padding: 0 50px;
    grid-template-areas: "aside-l main aside-r" "footer footer footer";
    grid-template-columns: 1fr 2fr 1fr;
}

.block { background: #fff; border-radius: 32px; padding: 40px; border: 1px solid #efefef; box-shadow: 0 20px 60px rgba(0,0,0,0.03); transition: 0.3s; }
.block:hover { transform: translateY(-5px); box-shadow: 0 30px 80px rgba(0,0,0,0.06); }
.block-title { font-size: 24px; font-weight: 900; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; }
.block-title::before { content: ''; width: 8px; height: 24px; background: var(--primary); border-radius: 4px; }

/* 4. 情报列表项 */
.info-card {
    padding: 30px 0; border-bottom: 1px solid #f2f2f2; display: flex; justify-content: space-between; 
    align-items: center; cursor: pointer; position: relative; overflow: hidden;
}
.info-card:hover { padding-left: 20px; background: var(--bg-sub); }

/* 5. 嘲讽组件样式 */
.snark-panel { background: #fffbe6; border: 2px solid var(--accent-gold); border-radius: 24px; padding: 25px; position: relative; margin-bottom: 30px; }
.snark-panel.red { background: #fff1f0; border-color: var(--primary); }
.snark-header { font-weight: 900; color: #856404; font-size: 18px; margin-bottom: 10px; display: flex; justify-content: space-between; }
.dog-icon { font-size: 30px; }

/* 6. 不对称标签 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.asym-tag { padding: 8px 18px; border-radius: 40px; font-size: 13px; font-weight: 700; transform: rotate(calc(-2deg + 4deg * var(--i, 1))); }

/* 7. 详情 Overlay */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(15px); z-index: 2000; display: none; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; }
.overlay.active { display: flex !important; opacity: 1; }
.detail-card { width: 850px; background: #fff; border-radius: 40px; padding: 60px; position: relative; }

/* 底部 */
.master-footer { grid-area: footer; background: #000; color: #fff; border-radius: 32px; padding: 50px; display: flex; justify-content: space-between; align-items: center; }

/* 醒目输入框聚焦效果 */
#passInput:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(255, 77, 79, 0.2);
}

.security-box {
    max-width: 500px !important;
    text-align: center;
    border: 4px solid #000;
}

/* 核心醒目按钮 */
.pulse-btn {
    display: inline-block;
    background: var(--primary);
    color: #ffffff !important;
    padding: 18px 45px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(255, 77, 79, 0.3);
    text-align: center;
    min-width: 200px;
}

.pulse-btn:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 77, 79, 0.5);
    filter: brightness(1.1);
}

.pulse-btn:active {
    transform: scale(0.95);
}

.pulse-btn-black {
    background: #000000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* --- 移动端自适应补丁 --- */
@media (max-width: 1024px) {
    .app-container {
        grid-template-areas: "main" "aside-l" "aside-r" "footer";
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .top-snark-giant { height: 45px; line-height: 45px; font-size: 14px; }
    
    .nav-container { padding: 0 20px; height: auto; py: 20px; flex-direction: column; gap: 10px; }
    .brand { font-size: 22px; }
    .nav-links { gap: 15px; flex-wrap: wrap; justify-content: center; }
    
    .app-container { display: flex; flex-direction: column; margin: 20px auto; }
    
    .block { padding: 25px; border-radius: 24px; }
    .pulse-btn { width: 100% !important; min-width: unset; padding: 15px !important; }
    
    .detail-card { width: 92% !important; padding: 30px 20px !important; }
    .master-footer { flex-direction: column; text-align: center; gap: 30px; }
    .master-footer div { text-align: center !important; }
}
/* --- 针对手机端标签和列表项的优雅适配补丁 --- */
@media (max-width: 768px) {

    /* 6. 标签云：核心修复 */
    .tag-cloud {
        display: flex;
        flex-wrap: wrap; /* 必须：允许标签自动换行 */
        gap: 8px;       /* 手机端间距稍微收紧 */
        justify-content: flex-start; /* 靠左对齐 */
    }

    .asym-tag {
        flex: 0 0 auto; /* 核心：防止标签被挤扁 */
        white-space: nowrap; /* 防止标签内的文字换行 */
        padding: 6px 14px;  /* 手机端稍微减小 Padding */
        font-size: 12px;
        /* 保持你的旋转效果 */
    }

    /* 4. 情报列表项：优雅适配 */
    .info-card {
        display: flex;
        flex-direction: row; /* 保持横向排列，除非真的放不下 */
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;    /* 减少上下 Padding，更紧凑 */
        gap: 10px;          /* 增加子元素之间的最小间距 */
    }

    /* 优化 info-card 内部元素，防止挤压 */
    .info-card > * {
        flex-shrink: 0; /* 核心：防止 info-card 内部的图标或时间和标题被挤扁 */
    }

    /* 如果 info-card 内部有标题和描述，允许标题占满剩余空间但不要变窄 */
    .info-card .info-title-area {
        flex: 1 1 auto; /* 允许它伸缩，但优先填满 */
        min-width: 0;   /* CSS Flexbox 避坑指南：允许内容小于容器 */
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis; /* 长标题显示省略号 */
    }
}