/* ============================================================
   吉日查询网 - 全局样式（红金喜庆版）
   ============================================================ */
:root {
    --primary: #c62828;
    --primary-light: #e53935;
    --primary-dark: #8e0000;
    --accent: #c62828;
    --accent-secondary: #8e0000;
    --gold: #d4a017;
    --gold-light: #f5c542;
    --gold-pale: #fff8e1;
    --gradient: linear-gradient(135deg, #e53935 0%, #c62828 60%, #8e0000 100%);
    --gradient-red: linear-gradient(135deg, #e53935 0%, #b71c1c 100%);
    --gradient-gold: linear-gradient(135deg, #f5c542 0%, #d4a017 100%);
    --text-dark: #2d2d2d;
    --text-light: #666;
    --border: #f3d9c4;
    --border-red: #f5c6c6;
    --bg-soft: #fffaf5;
    --bg-red-soft: #fff5f5;
    --shadow: 0 4px 20px rgba(198,40,40,0.10);
    --shadow-hover: 0 8px 30px rgba(198,40,40,0.20);
    --shadow-red: 0 5px 20px rgba(198,40,40,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Microsoft YaHei','PingFang SC',sans-serif;}
html{scroll-behavior:smooth;}
body{
    background:
        radial-gradient(circle at 15% 10%, rgba(229,57,53,0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(212,160,23,0.10) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,236,179,0.30) 0%, transparent 70%),
        linear-gradient(135deg, #fffaf5 0%, #fff5ef 50%, #fff0e6 100%);
    background-attachment: fixed;
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1280px;margin:0 auto;padding:0 7px;position:relative;z-index:2;}

/* ========== 全局背景装饰 ========== */
.page-bg{
    position: fixed;
    top:0;left:0;width:100%;height:100%;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}
.bg-char{
    position:absolute;
    font-family:'STKaiti','KaiTi','Kaiti SC','楷体',serif;
    font-weight:900;
    user-select:none;
    line-height:1;
    text-shadow: 0 0 60px rgba(198,40,40,0.06);
}
.bg-char-1{font-size:480px;top:-80px;left:-60px;transform:rotate(-12deg);color:rgba(198,40,40,0.045);}
.bg-char-2{font-size:400px;top:20%;right:-80px;transform:rotate(10deg);color:rgba(229,57,53,0.04);}
.bg-char-3{font-size:380px;bottom:10%;left:-60px;transform:rotate(-8deg);color:rgba(212,160,23,0.06);}
.bg-char-4{font-size:420px;bottom:-120px;right:-80px;transform:rotate(14deg);color:rgba(198,40,40,0.04);}
.bg-char-5{font-size:320px;top:48%;left:40%;transform:rotate(-6deg);color:rgba(229,57,53,0.03);}
.bg-char-6{font-size:300px;top:8%;left:58%;transform:rotate(8deg);color:rgba(212,160,23,0.05);}

/* ========== 顶部导航 ========== */
.header{
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,250,245,0.94) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(198,40,40,0.12);
    position: sticky;
    top:0;
    z-index:100;
    border-bottom: 2px solid rgba(198,40,40,0.12);
}
.header::after{
    content:'';
    position:absolute;
    bottom:-2px;left:0;right:0;
    height:2px;
    background: linear-gradient(90deg, transparent, #e53935, #d4a017, #e53935, transparent);
}
.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;transition:transform .3s;}
.logo:hover{transform:scale(1.03);}
.logo-icon{
    width:44px;height:44px;border-radius:12px;
    background:var(--gradient-red);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:20px;
    box-shadow:0 4px 14px rgba(198,40,40,0.35);
    position:relative;
}
.logo-icon::after{
    content:'';
    position:absolute;inset:2px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.3);
}
.logo h1{
    font-size:24px;
    font-weight:800;
    background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    letter-spacing:1.5px;
}
.nav-links{
    display:flex;
    gap:4px;
    flex-wrap:nowrap;
    align-items:center;
    overflow:hidden;
}
.nav-link{
    padding:8px 12px;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
    color:#5a2a2a;
    transition:all .25s ease;
    white-space:nowrap;
    position:relative;
    border:1px solid transparent;
}
.nav-link:hover{
    color:#c62828;
    background:rgba(229,57,53,0.08);
    transform:translateY(-1px);
    border-color:rgba(198,40,40,0.15);
}
.nav-link.active{
    color:#fff;
    background:var(--gradient-red);
    box-shadow:0 4px 14px rgba(198,40,40,0.4);
    border-color:transparent;
}
.nav-link.active::after{
    content:'';
    position:absolute;
    bottom:-7px;left:50%;transform:translateX(-50%);
    width:6px;height:6px;border-radius:50%;
    background:#f5c542;
    box-shadow:0 0 8px #f5c542;
}
.mobile-menu-btn{
    display:none;
    background:var(--gradient-red);
    border:none;
    width:40px;height:40px;border-radius:12px;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(198,40,40,0.35);
    transition:transform .2s;
}
.mobile-menu-btn:hover{transform:scale(1.05);}
.mobile-menu{
    display:none;
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow:var(--shadow);
    border-radius:0 0 16px 16px;
    overflow:hidden;
}
.mobile-menu.active{display:block;animation:slideDown .3s ease;}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.mobile-nav-link{
    display:block;
    padding:14px 20px;
    border-bottom:1px solid var(--border);
    font-weight:600;
    font-size:15px;
    transition:all .3s;
}
.mobile-nav-link:last-child{border-bottom:none;}
.mobile-nav-link:hover,.mobile-nav-link.active{
    background: linear-gradient(90deg, #fff5f5, #fffaf5);
    color:#c62828;
    padding-left:26px;
    border-left:4px solid #c62828;
}

/* ========== Banner ========== */
.home-banner{width:100%;overflow:hidden;position:relative;z-index:2;}
.banner-section{width:100%;overflow:hidden;position:relative;z-index:2;}
.banner-image{width:100%;display:block;object-fit:cover;max-height:280px;min-height:180px;}
.banner-placeholder{
    width:100%;height:200px;background:var(--gradient-red);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:30px;font-weight:bold;letter-spacing:8px;
    position:relative;overflow:hidden;
    text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.banner-placeholder::before{
    content:'囍';
    position:absolute;font-size:220px;color:rgba(255,255,255,0.08);
    top:-40px;left:8%;font-family:'KaiTi',serif;
}
.banner-placeholder::after{
    content:'吉';
    position:absolute;font-size:200px;color:rgba(255,255,255,0.08);
    bottom:-50px;right:8%;font-family:'KaiTi',serif;
}

/* ========== 页脚 ========== */
.footer{
    background:linear-gradient(135deg, #8e0000 0%, #5c0000 100%);
    color:#f5d7d7;padding:50px 0 20px;margin-top:60px;
    position:relative;z-index:2;
    border-top:3px solid #d4a017;
}
.footer-content{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;margin-bottom:30px;}
.footer-column{flex:1;min-width:220px;}
.footer-column h3{font-size:18px;color:#fff;margin-bottom:18px;padding-bottom:10px;position:relative;}
.footer-column h3::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--gradient-gold);}
.footer-column p{font-size:14px;line-height:1.8;color:#e0bcbc;}
.footer-links{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.footer-links a{font-size:14px;color:#e0bcbc;transition:color .3s;}
.footer-links a:hover{color:#f5c542;}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(245,197,66,0.2);font-size:13px;color:#c49a9a;}

/* ========== 通用标题 ========== */
.hero-title{
    font-size:2.4rem;font-weight:800;text-align:center;margin-bottom:14px;
    background: linear-gradient(135deg, #e53935 0%, #c62828 50%, #8e0000 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    letter-spacing:3px;
    text-shadow: 0 4px 20px rgba(198,40,40,0.08);
}
.hero-subtitle{font-size:1.1rem;color:var(--text-light);text-align:center;max-width:720px;margin:0 auto 30px;}
.section-padding{padding:50px 0;position:relative;z-index:2;}

/* ========== 首页卡片网格 ========== */
.card-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:16px;
    margin-top:36px;
}
.jiri-card{
    background:#fff;
    border-radius:16px;
    padding:22px 16px;
    box-shadow:var(--shadow);
    text-align:center;
    transition:all .35s cubic-bezier(.25,.8,.5,1);
    border:1px solid rgba(198,40,40,0.1);
    display:block;
    position:relative;
    overflow:hidden;
}
.jiri-card::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:3px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s;
}
.jiri-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(198,40,40,0.3);
}
.jiri-card:hover::before{transform:scaleX(1);}
.jiri-card i{
    font-size:38px;margin-bottom:12px;display:block;
    transition:transform .3s;
    color:#c62828;
    background: linear-gradient(135deg, #e53935 0%, #8e0000 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
.jiri-card:hover i{transform:scale(1.15) rotate(-6deg);}
.jiri-card h3{font-size:16px;color:var(--text-dark);margin-bottom:8px;font-weight:700;}
.jiri-card p{font-size:12px;color:var(--text-light);line-height:1.55;}

/* ========== 首页三栏文章区 ========== */
.home-articles{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}
.home-articles .article-panel{
    background:#fff;
    border-radius:16px;
    padding:22px 20px;
    box-shadow:var(--shadow);
    border:1px solid rgba(198,40,40,0.1);
    transition:transform .3s;
    position:relative;
    overflow:hidden;
}
.home-articles .article-panel::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
}
.home-articles .article-panel:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.home-articles .panel-title{
    font-size:17px;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:2px solid #c62828;
    display:flex;
    align-items:center;
    gap:8px;
}
.home-articles .panel-title i{color:#c62828;}
.home-articles ul{list-style:none;}
.home-articles li{
    padding:11px 0;
    border-bottom:1px dashed #f0e0e0;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}
.home-articles li:last-child{border-bottom:none;}
.home-articles li .rank{
    flex-shrink:0;width:20px;height:20px;line-height:20px;
    text-align:center;border-radius:5px;
    background:#f5f5f5;color:#999;
    font-size:12px;font-weight:700;
}
.home-articles li .rank.top1{background:linear-gradient(135deg,#e53935,#c62828);color:#fff;box-shadow:0 2px 6px rgba(229,57,53,0.3);}
.home-articles li .rank.top2{background:linear-gradient(135deg,#f5c542,#d4a017);color:#fff;box-shadow:0 2px 6px rgba(212,160,23,0.3);}
.home-articles li .rank.top3{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;}
.home-articles li a{
    flex:1;color:#444;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:color .3s;
}
.home-articles li a:hover{color:#c62828;}
.home-articles li .meta{font-size:12px;color:#bbb;flex-shrink:0;}

/* ========== 表单卡片 ========== */
.form-card{
    background:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:var(--shadow);
    max-width:820px;margin:0 auto;
    border:1px solid rgba(198,40,40,0.12);
    position:relative;
    z-index:2;
    overflow:hidden;
}
.form-card::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:4px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
}
.form-title{
    text-align:center;font-size:24px;font-weight:700;
    margin-bottom:24px;color:var(--text-dark);position:relative;
}
.form-title::after{
    content:'';position:absolute;bottom:-10px;left:50%;
    transform:translateX(-50%);width:60px;height:3px;
    background:var(--gradient-red);border-radius:2px;
}
.form-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:22px;}
.form-group{flex:1;min-width:250px;}
.form-group.full-width{flex:1 1 100%;}
.form-group label{display:block;margin-bottom:8px;font-weight:600;font-size:16px;color:#000;}
.form-control{
    width:100%;padding:14px 16px;
    border:2px solid var(--border);border-radius:10px;
    font-size:16px;transition:all .3s;background:#fff;color:var(--text-dark);
}
.form-control:focus{outline:none;border-color:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,0.15);}
.date-input-wrapper{position:relative;}
.date-input-wrapper .date-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#c62828;pointer-events:none;}
.radio-group{display:flex;flex-wrap:wrap;gap:12px;}
.radio-option{
    flex:1;min-width:100px;
    display:flex;align-items:center;justify-content:center;gap:6px;
    border:2px solid var(--border);border-radius:10px;
    padding:12px 8px;cursor:pointer;transition:all .3s;font-size:15px;
}
.radio-option:hover{border-color:#c62828;background:var(--bg-red-soft);}
.radio-option input[type="radio"]{accent-color:#c62828;width:16px;height:16px;}
.radio-option input[type="radio"]:checked + span{color:#c62828;font-weight:600;}
.submit-btn{
    width:100%;padding:16px;
    background:var(--gradient-red);color:#fff;border:none;border-radius:12px;
    font-size:18px;font-weight:bold;cursor:pointer;transition:all .3s;
    box-shadow:0 6px 20px rgba(198,40,40,0.35);
    position:relative;overflow:hidden;
}
.submit-btn::before{
    content:'';
    position:absolute;top:0;left:-100%;
    width:100%;height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine 3s infinite;
}
@keyframes shine{0%{left:-100%;}100%{left:100%;}}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(198,40,40,0.45);}
.submit-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none;}

/* ========== 双按钮（并排） ========== */
.form-btns{
    display:flex;
    gap:12px;
    margin-top:20px;
}
.form-btns .submit-btn{
    flex:1;
    margin-top:0;
    font-size:16px;
    padding:14px 10px;
}
.form-btns .submit-btn.secondary{
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
    box-shadow: 0 6px 20px rgba(212,160,23,0.35);
}
.form-btns .submit-btn.secondary:hover{
    box-shadow: 0 8px 25px rgba(212,160,23,0.45);
}
.form-btns .submit-btn.secondary::before{
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine 3s infinite;
}

/* ========== 结果区域 ========== */
.results-section{display:none;padding:20px 0 50px;position:relative;z-index:2;}
.results-card{
    background:#fff;border-radius:20px;
    box-shadow:var(--shadow);overflow:hidden;
    border:1px solid rgba(198,40,40,0.12);
    max-width:820px;margin:0 auto;
}
.results-header{background:var(--gradient-red);color:#fff;padding:22px 28px;}
.results-header h2{font-size:1.5rem;font-weight:700;margin:0;}
.results-body{padding:28px;}
.query-info{display:none;background:#fdf6f6;border-radius:10px;padding:20px;margin-bottom:26px;}
.query-info-title{font-weight:600;color:#c62828;margin-bottom:12px;font-size:1.05rem;}
.info-list{display:grid;gap:12px;}
.info-row{
    display:flex;align-items:center;padding:10px 15px;
    background:linear-gradient(135deg,#fff5f5,#ffecec);
    border-radius:8px;border:1px solid var(--border-red);
    transition:all .3s;
}
.info-row:hover{transform:translateX(5px);box-shadow:0 4px 12px rgba(198,40,40,0.12);}
.info-row.male{border-left:4px solid #1976d2;}
.info-row.female{border-left:4px solid #c62828;}
.info-row.time{border-left:4px solid #d4a017;}
.info-label{font-weight:600;color:#c62828;min-width:100px;margin-right:15px;}
.info-value{color:var(--text-dark);font-weight:500;}
.bazi-wrap{display:flex;flex-wrap:wrap;gap:16px;margin-top:15px;}
.bazi-box{flex:1;min-width:260px;background:#fff;border-radius:8px;padding:15px;border:1px solid var(--border);}
.bazi-box .bazi-title{font-weight:600;color:#c62828;margin-bottom:8px;}
.bazi-box .bazi-content{background:#fff5f5;border-radius:6px;padding:12px;white-space:pre-line;line-height:1.7;font-size:14px;}
.results-grid{display:flex;flex-direction:column;gap:26px;}
.result-card{
    background:linear-gradient(135deg, #fffaf5 0%, #fff5f5 100%);
    border-radius:14px;padding:26px;
    border:1px solid #c62828;box-shadow:var(--shadow-red);
    position:relative;overflow:hidden;transition:all .3s;
}
.result-card::after{
    content:'吉';
    position:absolute;top:-20px;right:20px;
    font-size:120px;color:rgba(198,40,40,0.05);
    font-family:'KaiTi',serif;font-weight:bold;
}
.result-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(198,40,40,0.2);}
.date-primary{
    font-size:1.9rem;font-weight:800;color:#c62828;
    text-align:center;padding-bottom:14px;margin-bottom:16px;
    border-bottom:2px dashed var(--border-red);letter-spacing:2px;
    position:relative;z-index:1;
}
.rating-stars{text-align:center;margin-bottom:20px;position:relative;z-index:1;}
.rating-stars .star{color:#d4a017;font-size:1.2rem;margin:0 2px;}
.rating-stars .star.empty{color:#e0e0e0;}
.rating-stars .rating-text{margin-left:10px;color:#c62828;font-weight:700;}
.date-details{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;position:relative;z-index:1;}
.detail-card{flex:1;min-width:180px;background:#fff;border-radius:10px;padding:16px;border:1px solid var(--border-red);text-align:center;}
.detail-card .detail-title{font-weight:700;color:#c62828;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-red);}
.liyou-badge{
    display:inline-block;padding:6px 16px;
    background:var(--gradient-red);color:#fff;border-radius:20px;
    font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(198,40,40,0.3);
}
.analysis-section{margin-bottom:18px;position:relative;z-index:1;}
.analysis-section:last-child{margin-bottom:0;}
.section-title{font-size:1.1rem;font-weight:700;color:#c62828;margin-bottom:10px;padding-left:10px;border-left:4px solid #c62828;}
.section-content{font-size:14px;line-height:1.7;color:#555;}
.loading-box{text-align:center;padding:60px 20px;}
.loading-box i{font-size:48px;color:#c62828;margin-bottom:16px;display:block;animation:spin 1s linear infinite;}
.loading-box p{color:#666;}
.empty-box{text-align:center;padding:60px 20px;color:#999;}
.empty-box i{font-size:48px;margin-bottom:16px;display:block;}
.empty-box p{margin-bottom:16px;}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.alert{display:none;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;}
.alert-success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7;}
.alert-error{background:#ffebee;color:#c62828;border:1px solid #ef9a9a;}

/* ========== 特色功能介绍 ========== */
.features{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    margin-top:40px;
}
.feature{
    background:#fff;
    border-radius:16px;
    padding:28px 20px;
    box-shadow:var(--shadow);
    text-align:center;
    border:1px solid rgba(198,40,40,0.1);
    transition:all .35s cubic-bezier(.25,.8,.5,1);
    position:relative;
    overflow:hidden;
}
.feature::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s;
}
.feature:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(198,40,40,0.25);
}
.feature:hover::before{transform:scaleX(1);}
.feature i{
    font-size:42px;
    margin-bottom:14px;
    display:block;
    background: linear-gradient(135deg, #e53935 0%, #8e0000 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    transition:transform .3s;
}
.feature:hover i{transform:scale(1.15) rotate(-6deg);}
.feature h3{font-size:17px;font-weight:700;color:var(--text-dark);margin-bottom:8px;}
.feature p{font-size:13px;color:var(--text-light);line-height:1.6;}

/* ============================================================
   分类页面
   ============================================================ */
.page-header-box{
    background:#fff;
    border-radius:16px;
    padding:30px 24px;
    margin-bottom:20px;
    text-align:center;
    box-shadow:var(--shadow);
    border:1px solid rgba(198,40,40,0.1);
    position:relative;
    overflow:hidden;
}
.page-header-box::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
}
.page-header-box .hero-title{margin-bottom:8px;}
.page-header-box .hero-subtitle{margin-bottom:0;}

.category-tabs-wrap{
    margin-bottom:20px;
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow);
    border:1px solid rgba(198,40,40,0.1);
    overflow:hidden;
}
.category-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding:14px 16px;
    cursor:grab;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.category-tabs::-webkit-scrollbar{display:none;}
.category-tab{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:8px 16px;
    background:#faf5f3;
    color:#7a5555;
    border-radius:20px;
    font-size:14px;
    white-space:nowrap;
    flex-shrink:0;
    transition:all .3s;
    border:1px solid transparent;
}
.category-tab i{font-size:12px;}
.category-tab .tab-count{
    font-size:11px;
    background:rgba(255,255,255,0.3);
    padding:1px 7px;
    border-radius:10px;
    margin-left:2px;
}
.category-tab:hover{
    background:#ffecec;
    color:#c62828;
    border-color:#f5c6c6;
}
.category-tab.active{
    background:var(--gradient-red);
    color:#fff;
    font-weight:600;
    box-shadow:0 4px 12px rgba(198,40,40,0.3);
}

/* 文章列表 */
.article-list-wrap{
    background:#fff;
    border-radius:16px;
    padding:12px;
    box-shadow:var(--shadow);
    border:1px solid rgba(198,40,40,0.1);
}
.article-item{
    display:flex;
    gap:16px;
    padding:18px;
    border-bottom:1px dashed #f0e0e0;
    transition:all .3s;
    border-radius:12px;
}
.article-item:last-child{border-bottom:none;}
.article-item:hover{background:#fffaf5;}
.article-thumb{
    flex-shrink:0;
    width:180px;
    height:120px;
    border-radius:10px;
    overflow:hidden;
    background:#f5f5f5;
    display:block;
}
.article-thumb img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .4s;
}
.article-item:hover .article-thumb img{transform:scale(1.06);}
.article-body{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.article-title{
    font-size:17px;
    font-weight:700;
    margin-bottom:8px;
    line-height:1.4;
}
.article-title a{
    color:var(--text-dark);
    transition:color .3s;
}
.article-title a:hover{color:#c62828;}
.badge-recommend{
    display:inline-block;
    background:linear-gradient(135deg,#f5c542,#d4a017);
    color:#fff;
    font-size:11px;
    padding:2px 8px;
    border-radius:10px;
    margin-left:6px;
    font-weight:600;
    vertical-align:middle;
}
.badge-hot{
    display:inline-block;
    background:linear-gradient(135deg,#e53935,#c62828);
    color:#fff;
    font-size:11px;
    padding:2px 8px;
    border-radius:10px;
    margin-left:4px;
    font-weight:600;
    vertical-align:middle;
}
.article-desc{
    font-size:13px;
    color:#888;
    line-height:1.6;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    font-size:12px;
    color:#b0b0b0;
}
.article-meta i{margin-right:3px;}
.article-meta a{
    color:#c62828;
    transition:color .3s;
}
.article-meta a:hover{color:#8e0000;}
.read-more{
    margin-left:auto;
    color:#c62828 !important;
    font-weight:600;
    transition:all .3s;
}
.read-more:hover{color:#8e0000 !important;}
.read-more i{font-size:10px;margin-left:3px;}

/* 分页 */
.pagination{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:26px;
    flex-wrap:wrap;
}
.pagination a,
.pagination span{
    padding:8px 14px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:14px;
    color:#666;
    transition:all .3s;
}
.pagination a:hover{
    background:#fff5f5;
    border-color:#c62828;
    color:#c62828;
}
.pagination .current{
    background:var(--gradient-red);
    color:#fff;
    border-color:transparent;
    font-weight:600;
    box-shadow:0 4px 12px rgba(198,40,40,0.3);
}

.btn-back{
    display:inline-block;
    padding:10px 24px;
    background:var(--gradient-red);
    color:#fff;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
    box-shadow:0 4px 14px rgba(198,40,40,0.3);
    transition:all .3s;
}
.btn-back:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(198,40,40,0.4);
}

/* ============================================================
   文章详情页
   ============================================================ */
.article-detail-wrap{
    display:flex;
    gap:22px;
    align-items:flex-start;
}
.article-detail{
    flex:1;
    min-width:0;
    background:#fff;
    border-radius:16px;
    padding:36px 40px;
    box-shadow:var(--shadow);
    border:1px solid rgba(198,40,40,0.1);
    position:relative;
    overflow:hidden;
}
.article-detail::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
}
.article-detail-title{
    font-size:26px;
    font-weight:800;
    line-height:1.4;
    margin-bottom:18px;
    color:#1a1a1a;
    letter-spacing:0.5px;
}
.article-detail-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    font-size:13px;
    color:#999;
    padding-bottom:18px;
    margin-bottom:26px;
    border-bottom:2px dashed var(--border-red);
}
.article-detail-meta i{margin-right:3px;color:#c62828;}
.article-detail-meta a{
    color:#c62828;
    transition:color .3s;
}
.article-detail-meta a:hover{color:#8e0000;}
.article-detail-content{
    font-size:16px;
    line-height:1.9;
    color:#333;
}
.article-detail-content p{margin-bottom:16px;}
.article-detail-content img{
    max-width:100%;
    height:auto;
    border-radius:10px;
    margin:14px 0;
}
.article-detail-content h2,
.article-detail-content h3{
    font-size:20px;
    font-weight:700;
    color:#1a1a1a;
    margin:26px 0 14px;
    padding-left:14px;
    border-left:5px solid #c62828;
}
.article-detail-content h3{font-size:18px;}
.article-detail-content blockquote{
    border-left:4px solid #c62828;
    background:#fff5f5;
    padding:14px 20px;
    margin:18px 0;
    border-radius:0 10px 10px 0;
    color:#555;
    font-style:italic;
}
.article-detail-content ul,
.article-detail-content ol{
    margin:12px 0 16px 22px;
}
.article-detail-content li{margin-bottom:8px;}
.article-detail-content code{
    background:#f3f4f6;
    padding:2px 8px;
    border-radius:4px;
    font-size:14px;
    color:#d43a2a;
    font-family:'SF Mono','Consolas',monospace;
}

/* 上一篇 / 下一篇 */
.article-nav{
    display:flex;
    gap:14px;
    margin-top:36px;
    padding-top:26px;
    border-top:2px dashed var(--border-red);
}
.article-nav-prev,
.article-nav-next{
    flex:1;
    min-width:0;
}
.article-nav a{
    display:block;
    padding:16px 18px;
    background:#fffaf5;
    border-radius:12px;
    border:1px solid var(--border);
    transition:all .3s;
}
.article-nav a:hover{
    background:#fff5f5;
    border-color:#c62828;
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(198,40,40,0.15);
}
.article-nav .nav-label{
    display:block;
    font-size:12px;
    color:#c62828;
    font-weight:600;
    margin-bottom:6px;
}
.article-nav .nav-title{
    display:block;
    font-size:14px;
    color:#333;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.article-nav-next{text-align:right;}
.nav-empty{
    display:block;
    padding:16px 18px;
    text-align:center;
    color:#bbb;
    font-size:13px;
    background:#fafafa;
    border-radius:12px;
    border:1px dashed #e0e0e0;
}

/* 侧栏（相关文章 / 热门文章） */
.article-sidebar{
    width:300px;
    flex-shrink:0;
}
.sidebar-block{
    background:#fff;
    border-radius:16px;
    padding:20px 20px;
    box-shadow:var(--shadow);
    border:1px solid rgba(198,40,40,0.1);
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
}
.sidebar-block::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
}
.sidebar-block-title{
    font-size:16px;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:2px solid #c62828;
    display:flex;
    align-items:center;
    gap:8px;
}
.sidebar-block-title i{color:#c62828;}

.related-list,
.hot-list{list-style:none;}
.related-list li,
.hot-list li{
    padding:10px 0;
    border-bottom:1px dashed #f0e0e0;
    font-size:14px;
    line-height:1.5;
}
.related-list li:last-child,
.hot-list li:last-child{border-bottom:none;}
.related-list a{
    color:#555;
    display:flex;
    align-items:center;
    gap:8px;
    transition:color .3s;
}
.related-list a:hover{color:#c62828;}
.related-list a i{color:#c62828;font-size:12px;flex-shrink:0;}

.hot-list li{
    display:flex;
    align-items:center;
    gap:8px;
}
.hot-list .hot-rank{
    flex-shrink:0;
    width:20px;height:20px;line-height:20px;
    text-align:center;
    border-radius:5px;
    background:#f5f5f5;
    color:#999;
    font-size:12px;
    font-weight:700;
}
.hot-list .hot-rank.top1{background:linear-gradient(135deg,#e53935,#c62828);color:#fff;}
.hot-list .hot-rank.top2{background:linear-gradient(135deg,#f5c542,#d4a017);color:#fff;}
.hot-list .hot-rank.top3{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;}
.hot-list a{
    flex:1;
    color:#555;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:color .3s;
}
.hot-list a:hover{color:#c62828;}

/* ============================================================
   老黄历模块
   ============================================================ */
.huangli-card{
    background:#fff;
    border-radius:20px;
    box-shadow:0 6px 28px rgba(198,40,40,0.10);
    border:1px solid rgba(198,40,40,0.12);
    overflow:hidden;
    position:relative;
    max-width:820px;
    margin:0 auto;
    transition:opacity .25s;
}
.huangli-card-full {
    max-width: 1100px !important;
    margin: 0 auto;
}
.huangli-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
    z-index:2;
}

/* 顶部日期区 */
.huangli-header{
    padding:32px 20px 26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,236,179,0.35) 0%, transparent 65%),
        linear-gradient(135deg, #fffaf5 0%, #fff5f0 100%);
    border-bottom:1px dashed #f5c6c6;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.huangli-header::before{
    content:'历';
    position:absolute;
    top:-30px;right:14px;
    font-size:150px;
    color:rgba(198,40,40,0.05);
    font-family:'KaiTi',serif;
    font-weight:700;
    line-height:1;
    pointer-events:none;
}
.huangli-header::after{
    content:'';
    position:absolute;
    bottom:-40px;left:14px;
    width:140px;height:140px;
    background: radial-gradient(circle, rgba(212,160,23,0.10) 0%, transparent 70%);
    border-radius:50%;
    pointer-events:none;
}
.huangli-header-center{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    z-index:1;
    min-width:0;
}
.huangli-day-number{
    font-size:88px;
    font-weight:900;
    line-height:1;
    letter-spacing:-3px;
    background: linear-gradient(135deg, #e53935 0%, #c62828 50%, #8e0000 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-family:'Arial Black', 'Impact', sans-serif;
    text-shadow: 0 4px 20px rgba(198,40,40,0.15);
    margin-bottom:8px;
    transition:transform .3s;
}
.huangli-date-info{
    width:100%;
}
.huangli-date-main{
    font-size:17px;
    font-weight:800;
    color:#c62828;
    letter-spacing:0.5px;
    margin-bottom:6px;
}
.huangli-date-sub{
    font-size:13px;
    color:#666;
    line-height:1.7;
    word-break:break-all;
}
.huangli-date-picker {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

/* 左右箭头 */
.huangli-arrow{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    border:1px solid #f5c6c6;
    color:#c62828;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all .25s;
    box-shadow:0 3px 10px rgba(198,40,40,0.10);
    position:relative;
    z-index:2;
}
.huangli-arrow:hover{
    background:linear-gradient(135deg,#e53935,#c62828);
    color:#fff;
    border-color:transparent;
    transform:scale(1.08);
    box-shadow:0 6px 18px rgba(198,40,40,0.3);
}
.huangli-arrow:active{transform:scale(0.95);}

/* 信息网格：三个一行 */
.huangli-info-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #f5e6e6;
    padding: 0;
}
.huangli-info-grid3 .huangli-cell {
    background: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 56px;
}
.huangli-info-grid3 .huangli-cell .cell-label {
    flex-shrink: 0;
    min-width: 68px;
    font-size: 13px;
    font-weight: 700;
    color: #c62828;
    padding-top: 2px;
}
.huangli-info-grid3 .huangli-cell .cell-value {
    flex: 1;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    word-break: break-all;
    line-height: 1.6;
}
.huangli-info-grid3 .huangli-cell .cell-value.good { color: #2e7d32; font-weight: 700; }
.huangli-info-grid3 .huangli-cell .cell-value.bad  { color: #c62828; font-weight: 700; }

.huangli-first-row {
    border-top: 1px dashed #f5c6c6;
}
.huangli-first-row .huangli-cell {
    background: #fffaf5;
}
.huangli-first-row .huangli-cell .cell-value {
    font-weight: 600;
}

/* 宜忌 */
.huangli-yiji{
    padding:20px 24px 24px;
    background:#fff;
    border-top:1px dashed #f5c6c6;
}
.yiji-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}
.yiji-row:last-child{margin-bottom:0;}
.yiji-badge{
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:800;
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.yiji-badge.yi{background:linear-gradient(135deg,#4caf50,#2e7d32);}
.yiji-badge.ji{background:linear-gradient(135deg,#e53935,#c62828);}
.yiji-list{
    flex:1;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-top:4px;
}
.yiji-tag{
    display:inline-block;
    font-size:13px;
    padding:4px 12px;
    border-radius:16px;
    line-height:1.4;
    transition:all .2s;
}
.yiji-tag.yi{background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9;}
.yiji-tag.ji{background:#ffebee;color:#c62828;border:1px solid #ffcdd2;}
.yiji-tag:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.08);}

/* ============================================================
   时辰吉凶（宽度与上方一致）
   ============================================================ */
.huangli-shichen {
    padding: 24px 24px 28px;
    background: #fff;
    border-top: 1px dashed #f5c6c6;
    width: 100%;
    box-sizing: border-box;
}
.shichen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.shichen-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: #c62828;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.shichen-summary {
    display: flex;
    gap: 14px;
    font-size: 13px;
    flex-wrap: wrap;
}
.shichen-summary .summary-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 14px;
    font-weight: 600;
}
.shichen-summary .summary-item.good { background: #e8f5e9; color: #2e7d32; }
.shichen-summary .summary-item.bad  { background: #ffebee; color: #c62828; }

.shichen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
}
.shichen-item {
    border-radius: 12px;
    padding: 14px 14px 12px;
    border: 1px solid #f0e0e0;
    background: #fffaf5;
    transition: all .3s;
    position: relative;
    overflow: hidden;
}
.shichen-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
}
.shichen-item.huang::before { background: linear-gradient(180deg,#4caf50,#2e7d32); }
.shichen-item.hei::before   { background: linear-gradient(180deg,#e53935,#c62828); }
.shichen-item.ripo { background: #fff3e0; border-color: #ffcc80; }
.shichen-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(198,40,40,0.12);
}
.shichen-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.shichen-name { font-size: 16px; font-weight: 800; color: #c62828; }
.shichen-type {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 700;
}
.shichen-type.good { background: #e8f5e9; color: #2e7d32; }
.shichen-type.bad  { background: #ffebee; color: #c62828; }
.shichen-time { font-size: 12px; color: #888; margin-bottom: 4px; }
.shichen-ganzhi {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.shichen-zhishen,
.shichen-chongsha { font-size: 12px; color: #666; margin-bottom: 3px; }
.shichen-ripo-tip {
    font-size: 12px;
    color: #e65100;
    background: #fff3e0;
    padding: 3px 8px;
    border-radius: 6px;
    margin: 6px 0 4px;
    font-weight: 600;
}
.shichen-yiji {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #f0e0e0;
}
.shichen-line {
    display: flex;
    gap: 6px;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 4px;
}
.shichen-line:last-child { margin-bottom: 0; }
.mini-badge {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.mini-badge.yi { background: #4caf50; }
.mini-badge.ji { background: #e53935; }
.mini-list { color: #555; word-break: break-all; flex: 1; }

/* ============================================================
   老黄历 - 独立页面专用
   ============================================================ */

/* 日期选择器（内嵌卡片头部） */
.laohuangli-picker-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 24px;
    padding: 4px 6px 4px 14px;
    transition: all .3s;
}
.laohuangli-picker-inline:hover,
.laohuangli-picker-inline:focus-within {
    border-color: #c62828;
    box-shadow: 0 4px 12px rgba(198,40,40,0.15);
}
.laohuangli-picker-inline .fa-calendar-alt {
    color: #c62828;
    font-size: 15px;
}
.laohuangli-picker-inline .laohuangli-date-input {
    border: none;
    background: transparent;
    width: 130px;
    padding: 6px 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    text-align: center;
    box-shadow: none;
}
.laohuangli-picker-inline .laohuangli-date-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.laohuangli-picker-inline .laohuangli-go-btn {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 18px;
    border: none;
    background: var(--gradient-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: all .25s;
}
.laohuangli-picker-inline .laohuangli-go-btn:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(198,40,40,0.25);
}

/* 说明区（宽度与卡片一致） */
.laohuangli-tips {
    max-width: 1100px;
    margin: 36px auto 0;
    background: #fff;
    border-radius: 16px;
    padding: 26px 30px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(198,40,40,0.1);
    position: relative;
    overflow: hidden;
}
.laohuangli-tips::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
}
.laohuangli-tips h3 {
    font-size: 17px;
    font-weight: 700;
    color: #c62828;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.laohuangli-tips ul {
    list-style: none;
    padding: 0;
}
.laohuangli-tips li {
    font-size: 14px;
    line-height: 2;
    color: #555;
    padding-left: 16px;
    position: relative;
}
.laohuangli-tips li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #c62828;
    font-weight: 700;
    font-size: 18px;
}
.laohuangli-tips li strong {
    color: #c62828;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1280px){
    .nav-link{padding:7px 10px;font-size:13px;}
}
@media (max-width: 1100px){
    .nav-links{gap:2px;}
    .nav-link{padding:6px 8px;font-size:12.5px;}
    .logo h1{font-size:20px;}
}
@media (max-width: 1024px){
    .nav-links{display:none;}
    .mobile-menu-btn{display:flex;align-items:center;justify-content:center;}
    .card-grid{grid-template-columns:repeat(3,1fr);}
    .home-articles{grid-template-columns:1fr;}
    .features{grid-template-columns:repeat(2, 1fr);}
    .bg-char-1{font-size:320px;}
    .bg-char-2{font-size:300px;}
    .bg-char-3{font-size:280px;}
    .bg-char-4{font-size:300px;}
    .bg-char-5,.bg-char-6{display:none;}
    .article-detail-wrap{flex-direction:column;}
    .article-sidebar{width:100%;}
    .shichen-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .huangli-info-grid3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
    .section-padding{padding:20px 0;}
    .card-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .jiri-card{padding:18px 12px;}
    .jiri-card i{font-size:30px;}
    .jiri-card h3{font-size:15px;}
    .hero-title{font-size:1.7rem;}
    .hero-subtitle{font-size:1rem;}
    .form-card{padding:25px;}
    .form-group{flex:1 1 100%;}
    .radio-group{gap:12px;}
    .radio-option{
        flex:0 0 calc(50% - 6px);
        max-width:calc(50% - 6px);
        min-width:0;
        box-sizing:border-box;
    }
    .radio-option span{white-space:nowrap;}
    .form-btns{gap:8px;}
    .form-btns .submit-btn{font-size:14px;padding:12px 6px;}
    .date-details{flex-direction:column;}
    .detail-card{min-width:100%;}
    .bazi-wrap{flex-direction:column;}
    .bazi-box{min-width:100%;}
    .bg-char{display:none;}
    .footer-content{display:none;}
    .features{grid-template-columns:repeat(2, 1fr);}

    .article-item{
        flex-direction:row;
        gap:12px;
        padding:14px 12px;
        align-items:flex-start;
    }
    .article-thumb{
        width:120px;
        height:90px;
    }
    .article-title{font-size:15px;margin-bottom:6px;}
    .article-desc{font-size:12px;margin-bottom:8px;}
    .article-meta{font-size:11px;gap:10px;flex-wrap:wrap;}
    .read-more{margin-left:auto;}

    .article-detail{
        padding:24px 20px;
        border-radius:14px;
    }
    .article-detail-title{font-size:19px;}
    .article-detail-content{font-size:15px;}
    .article-detail-content h2{font-size:17px;}
    .article-detail-content h3{font-size:16px;}
    .article-nav{flex-direction:column;}
    .article-nav-next{text-align:left;}

    /* 老黄历 */
    .huangli-header{padding:26px 14px 22px;gap:8px;}
    .huangli-day-number{font-size:68px;}
    .huangli-date-main{font-size:15px;}
    .huangli-date-sub{font-size:14px;}
    .huangli-arrow{width:38px;height:38px;font-size:14px;}
    .huangli-yiji{padding:16px 18px 20px;}
    .yiji-badge{width:32px;height:32px;font-size:14px;border-radius:9px;}
    .yiji-list{gap:6px;}
    .yiji-tag{font-size:14px;padding:3px 10px;}

    .shichen-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .shichen-item { padding: 12px 10px 10px; }
    .shichen-name { font-size: 15px; }
    .shichen-header { flex-direction: column; align-items: flex-start; }
    .shichen-summary { font-size: 12px; gap: 8px; }
    .shichen-summary .summary-item { padding: 3px 10px; }
    .huangli-shichen { padding: 18px 16px 22px; }

    .laohuangli-picker-inline { padding: 3px 5px 3px 10px; }
    .laohuangli-picker-inline .laohuangli-date-input { width: 110px; font-size: 13px; }
    .laohuangli-picker-inline .laohuangli-go-btn { padding: 5px 12px; font-size: 12px; }
    .laohuangli-tips { padding: 20px 18px; }
    .laohuangli-tips h3 { font-size: 15px; }
    .laohuangli-tips li { font-size: 13px; }
}
@media (max-width: 600px) {
    /* 移动端每个一行 */
    .huangli-info-grid3 { grid-template-columns: 1fr; }
    .huangli-info-grid3 .huangli-cell {
        padding: 12px 16px;
        min-height: auto;
    }
    .huangli-info-grid3 .huangli-cell .cell-label {
        min-width: 80px;
    }
    .shichen-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px){
    .section-padding{padding:20px 0;}
    .form-card{padding:20px;}
    .form-title{font-size:20px;}
    .results-body{padding:15px;}
    .date-primary{font-size:1.4rem;}
    .form-control{padding:12px 14px;font-size:14px;}
    .card-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .jiri-card i{font-size:26px;}
    .jiri-card h3{font-size:14px;}
    .jiri-card p{font-size:11px;}
    .radio-group{gap:10px;}
    .radio-option{
        flex:0 0 calc(50% - 5px);
        max-width:calc(50% - 5px);
        min-width:0;
        padding:10px 4px;
        font-size:13px;
        box-sizing:border-box;
    }
    .radio-option span{white-space:nowrap;}
    .radio-option input[type="radio"]{width:14px;height:14px;}
    .form-btns{gap:6px;}
    .form-btns .submit-btn{font-size:13px;padding:12px 4px;}
    .form-btns .submit-btn i{margin-right:2px;}
    .features{grid-template-columns:repeat(2, 1fr);gap:10px;}
    .feature{padding:18px 12px;}
    .feature i{font-size:30px;}
    .feature h3{font-size:15px;}
    .feature p{font-size:12px;}

    .article-item{
        flex-direction:row;
        gap:10px;
        padding:12px 10px;
    }
    .article-thumb{
        width:100px;
        height:75px;
    }
    .article-title{font-size:14px;}
    .article-desc{
        -webkit-line-clamp:2;
        font-size:11px;
    }
    .article-meta{font-size:11px;gap:8px;}
    .read-more{font-size:11px;}

    .article-detail{padding:20px 16px;}
    .article-detail-title{font-size:17px;}
    .article-detail-content{font-size:14px;line-height:1.8;}
    .article-detail-meta{font-size:12px;gap:10px;}

    /* 老黄历 480px */
    .huangli-header{padding:22px 10px 18px;}
    .huangli-day-number{font-size:58px;}
    .huangli-date-main{font-size:15px;}
    .huangli-date-sub{font-size:13px;line-height:1.6;}
    .huangli-arrow{width:34px;height:34px;font-size:14px;}
    .huangli-info-grid3 .huangli-cell{padding:10px 14px;}
    .yiji-badge{width:28px;height:28px;font-size:14px;border-radius:8px;}
    .yiji-tag{font-size:13px;padding:3px 8px;}
}
/* ============================================================
   首页老黄历卡片（默认 820px 宽，居中）
   ============================================================ */

/* 首页黄历卡片箭头改为可点击链接 */
.huangli-card .huangli-arrow {
    text-decoration: none;
}

/* 首页黄历 festival 标签 */
.huangli-festivals {
    margin-top: 8px;
}
.huangli-festivals .festival-tag {
    display: inline-block;
    background: linear-gradient(135deg, #e53935, #c62828);
    color: #fff;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 12px;
    margin: 2px 3px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(198,40,40,0.25);
}

/* 首页黄历 - "查看完整老黄历"按钮 */
.laohuangli-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    color: #7a5555;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;
}
.laohuangli-nav-btn.today {
    background: var(--gradient-red);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(198,40,40,0.3);
}
.laohuangli-nav-btn.today:hover {
    background: #8e0000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(198,40,40,0.4);
}

/* 首页黄历 - 信息网格（PC 一行三个） */
.huangli-card .huangli-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #f5e6e6;
}
.huangli-card .huangli-info-item {
    display: flex;
    align-items: center;
    padding: 13px 18px;
    background: #fff;
    gap: 10px;
    min-width: 0;
}
.huangli-card .huangli-info-item.full {
    grid-column: 1 / -1;
}
.huangli-card .huangli-info-item .label {
    color: #c62828;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    min-width: 44px;
}
.huangli-card .huangli-info-item .value {
    color: #333;
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    word-break: break-all;
    line-height: 1.6;
}
.huangli-card .huangli-info-item .value.good { color: #2e7d32; font-weight: 700; }
.huangli-card .huangli-info-item .value.bad  { color: #000; font-weight: 700; }

/* 吉神+方位合并行 */
.huangli-card .huangli-info-item.huangli-info-merge {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 1px;
    background: #f5e6e6;
}
.huangli-card .huangli-info-item.huangli-info-merge .merge-cell {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: #fff;
    min-width: 0;
}
.huangli-card .huangli-info-item.huangli-info-merge .merge-cell .label {
    color: #c62828;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    min-width: 44px;
}
.huangli-card .huangli-info-item.huangli-info-merge .merge-cell .value {
    color: #333;
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    word-break: break-all;
    line-height: 1.6;
}

/* 首页黄历移动端响应式 */
@media (max-width: 768px) {
    .huangli-card .huangli-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .huangli-card .huangli-info-item {
        padding: 11px 14px;
    }
    .huangli-card .huangli-info-item .label { font-size: 14px; min-width: 40px; }
    .huangli-card .huangli-info-item .value { font-size: 14px; }

    .huangli-card .huangli-info-item.huangli-info-merge {
        flex-direction: column;
    }
    .huangli-card .huangli-info-item.huangli-info-merge .merge-cell {
        padding: 11px 14px;
    }
}
/* ============================================================
   友情链接
   ============================================================ */
.friend-links-box {
    background: #fff;
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(198,40,40,0.1);
    position: relative;
    overflow: hidden;
}
.friend-links-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e53935, #d4a017, #e53935);
}
.friend-links-title {
    font-size: 16px;
    font-weight: 700;
    color: #c62828;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c62828;
}
.friend-links-title i {
    color: #c62828;
}
.friend-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    line-height: 1.8;
}
.friend-links-list a {
    font-size: 14px;
    color: #666;
    transition: all .25s;
    padding: 2px 4px;
    position: relative;
}
.friend-links-list a:hover {
    color: #c62828;
    transform: translateY(-1px);
}
.friend-links-list a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #c62828;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}
.friend-links-list a:hover::after {
    transform: scaleX(1);
}

/* 移动端 */
@media (max-width: 768px) {
    .friend-links-box {
        padding: 18px 18px;
    }
    .friend-links-title {
        font-size: 15px;
    }
    .friend-links-list {
        gap: 8px 14px;
    }
    .friend-links-list a {
        font-size: 13px;
    }
}

/* 原生日期输入框样式优化 */
.laohuangli-picker-inline .laohuangli-date-input[type="date"] {
    border: none;
    background: transparent;
    width: 140px;
    padding: 6px 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    text-align: center;
    box-shadow: none;
    font-family: inherit;
}
.laohuangli-picker-inline .laohuangli-date-input[type="date"]:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
/* 去掉 WebKit 默认的日历图标（保留自己的 fa-calendar-alt 图标） */
.laohuangli-picker-inline .laohuangli-date-input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
    margin-left: 2px;
}
.laohuangli-picker-inline .laohuangli-date-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
/* Firefox / Edge 的兼容 */
.laohuangli-picker-inline .laohuangli-date-input[type="date"]::-moz-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
}