:root {
    --primary: #1e3a8a;
    --text: #1f2937;
    --muted: #6b7280;
    --bg: #f8fafc;

}

* {
    box-sizing: border-box;
}

html {
    min-width: 100%;
    min-height: 100vh;

}


body {


    padding: 0;
    color: #666;
    font: 16px / 2 Microsoft YaHei, arial, sans-serif;
    background-color: var(--bg);
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.75;
}

a {
    color: #333333;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
}

.header-wrap {
    width: 100%;
    display: flex;
    background-color: #ffffff;
    flex-direction: column;
    border-bottom: 1px solid #f5f5f5;
 
 
    .header-top {
        width: 100%;
        font-size: 13px;
        line-height: 38px;
        background-color: #333;

        a {
            color: gold;
            padding: 0 10px;

        }

        .header-user {
            display: inline-block;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: top;
        }

        .header-logout {
            border-left: 1px solid rgba(255, 215, 0, .35);
            margin-left: 2px;
            color: #c7c7c7;
        }

            .header-logout:hover {
                color: #fff;
            }

        .header-top-container {
            width: 100%;
            max-width: 1350px;
            margin: 0 auto;
            display: flex;
            height: 40px;
            justify-content: flex-start;
            flex-wrap: nowrap;


            .header-top-container-left {
                flex: 1;
                display: flex;
                justify-content: flex-start;
            }

            .header-top-container-right {
                display: flex;
                justify-content: center;
            }

        }


    }
    .header-nav {
        width: 100%;
        .header-nav-container {
            width: 100%;
            max-width: 1350px;
            margin: 0 auto;
            display: flex;
            height: 64px;
            justify-content: space-between;
            flex-wrap: nowrap;

          
            .header-nav-logo {
                width: 150px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-position: 50%;
                margin-right: 24px;
                background-image: url("/static/logo.png");
            }

            .header-nav-box {
                flex: 1;
                height: 64px;
        
                display: flex;
                justify-content: flex-start;
                gap: 0 24px;

             
                .nav-link {
                    color: #0e151c;
                    font-size: 16px;
                    line-height: 64px;
                    display: flex;
                    align-items: center; /* 垂直居中 */


                }

                a:hover {
                    color: red !important;
                }
            }
        }


    }
}



.main-wrap {
    
    width: 100%;
    display: flex;
    flex-direction: column;
 
    .main-wrap-container {
        width: 100%;
        max-width: 1350px;
        margin: 12px  auto 0;
    }
}

/* 频道网格：替代原 tailwind 的 grid 布局（zui3 默认未打包 grid 工具类） */
.channel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .channel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 公共页脚（黑色背景导航栏） */
.pc-footer {
    margin-top: 12px    ;
    background: #1a1a1a;
    color: #9a9a9a;
    font-size: 13px;
    line-height: 1.8;

    .pc-footer__inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 28px 16px 32px;
        text-align: center;
    }

    .pc-footer__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px 2px;
        margin-bottom: 14px;

        a {
            color: #cfcfcf;
            text-decoration: none;
            padding: 0 10px;
            transition: color .2s ease;
        }

        a:hover {
            color: #f5c542;
        }

        .pc-footer__sep {
            color: #444;
        }
    }

    .pc-footer__meta {
        p {
            margin: 4px 0;
        }

        a {
            color: #9a9a9a;
            text-decoration: none;
        }

        a:hover {
            color: #f5c542;
        }

        .pc-footer__tip {
            color: #6a6a6a;
            font-size: 12px;
            max-width: 720px;
            margin: 10px auto 0;
        }
    }
}