:root {
    --st-primary: #1a1a1a;
    --st-accent: #e11d48;
    --st-bg: #ffffff;
    --st-muted: #64748b;
    --st-border: #e2e8f0;
    --st-radius: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--st-bg);
    color: var(--st-primary);
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

/* --- 头部结构 --- */
.st-header {
    border-bottom: 2px solid var(--st-primary);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.st-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* 顶部 Logo 层 */
.st-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.st-logo {
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
}
.st-logo span { color: var(--st-accent); }

/* 搜索框：手机端自动排在 Logo 下方或右侧 */
.st-search-box {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    padding: 8px 15px;
    border-radius: var(--st-radius);
    flex-grow: 0;
    width: 260px;
}
.st-search-box input {
    background: transparent; border: none; outline: none; margin-left: 10px; width: 100%; font-size: 14px;
}

/* 分类导航：手机端支持横向滚动 */
.st-nav {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* 关键：手机端横向滑动 */
    white-space: nowrap;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
}
.st-nav::-webkit-scrollbar { display: none; } /* 隐藏滚动条 */

.st-nav-link {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--st-muted);
    transition: 0.2s;
}
.st-nav-link:hover, .st-nav-link.active { color: var(--st-accent); }

/* --- 主体内容 --- */
.st-main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
}

/* 头条文章 */
.st-hero-article {
    margin-bottom: 40px;
}
.st-hero-article img {
    width: 100%;
    height: auto;
    border-radius: var(--st-radius);
    margin-bottom: 15px;
}
.st-hero-title { font-size: 32px; font-weight: 800; margin-bottom: 10px; line-height: 1.2; }
.st-hero-desc { color: var(--st-muted); font-size: 16px; }

/* 内容网格 */
.st-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.st-post-card { display: flex; flex-direction: column; gap: 10px; }
.st-post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.st-post-title { font-size: 18px; font-weight: 700; }

/* 侧边栏 */
.st-sidebar-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid var(--st-primary);
    padding-bottom: 8px;
    margin-bottom: 20px;
}
.st-trending-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.st-trend-num { font-size: 24px; font-weight: 900; color: #e2e8f0; }

/* --- 响应式调整 (不改变结构，只调整表现) --- */
@media (max-width: 768px) {
    .st-top-bar {
        flex-direction: column; /* 手机端 Logo 和搜索框上下排布 */
        align-items: flex-start;
        gap: 15px;
    }
    .st-search-box {
        width: 100%; /* 搜索框撑满宽度 */
    }
    .st-main {
        grid-template-columns: 1fr; /* 侧边栏移到下方 */
    }
    .st-grid {
        grid-template-columns: 1fr; /* 文章列表单列 */
    }
    .st-hero-title { font-size: 24px; }
}

/* 页脚 */
.st-footer {
    background: var(--st-primary);
    color: #94a3b8;
    padding: 40px 20px;
    margin-top: 60px;
    text-align: center;
}