* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
    /* 移动端点击消除高亮 */
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #f8f5f2;
    padding: 8px; /* 移动端缩减内边距 */
    height: 100vh;
    overflow-x: hidden;
    /* 移动端禁止文字缩放 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 高级质感的红色导航栏样式 */
.navbar-custom {
    background-color: #8B0000; /* 深暗红/勃艮第红 - 高级不艳丽 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid #A52A2A;
}

/* Logo样式调整 - 移除渐变，使用纯金色 */
.navbar-custom .navbar-brand {
    color: #FFD700 !important; /* 纯金色，提高优先级 */
    font-weight: bold;
    font-size: 1.6rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 增强文字立体感 */
    position: relative;
    z-index: 1;
}

/* 保留金色图标颜色 */
.navbar-brand i {
    color: #FFD700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 如果需要渐变效果，使用更鲜艳的金色渐变 */
.navbar-brand .logo-text {
    color: #FFD700; /* 基础金色 */
    /* 可选：使用更明亮的渐变 */
    background: linear-gradient(120deg, #FFFF00, #FFD700, #FFEA00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.navbar-custom .nav-link {
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    position: relative;
}

.navbar-custom .nav-link:hover {
    color: #FFD700; /* 悬停时金色 */
}

/* 激活状态下划线效果 */
.navbar-custom .nav-link.active {
    color: #FFD700;
    font-weight: 500;
}

.navbar-custom .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: #FFD700;
    border-radius: 1px;
}

.navbar-custom .navbar-toggler {
    border-color: rgba(255, 215, 0, 0.5);
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 215, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 下拉菜单样式 */
.navbar-custom .dropdown-menu {
    background-color: #990000; /* 略浅的红色 */
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 0.5rem 0;
}

.navbar-custom .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1.5rem;
    transition: all 0.2s;
}

.navbar-custom .dropdown-item:hover {
    background-color: rgba(255, 215, 0, 0.2);
    color: #FFD700;
}

.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* 搜索框样式 */
.form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: black;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFD700;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
    color: black;
}

.btn-light {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    color: #FFD700;
}

.btn-light:hover {
    background-color: rgba(255, 215, 0, 0.2);
    border-color: #FFD700;
    color: #FFD700;
}

/* 移动端搜索框样式 */
.mobile-search {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* 内容区域样式 */
.content {
    padding: 2rem 0;
    background-color: #f8f9fa;
    min-height: calc(100vh - 56px);
}
.time-container {
    font-size: 14px;
    color: #fff;
    font-family: "Microsoft YaHei", sans-serif;
    margin: 5px;
    padding: 5px;
    border-radius: 8px;
    text-align: right;
}

.detail-header-title {
    font-size: 18px; /* 移动端缩小标题 */
    color: #8B0000;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    margin-left: 10px;
}


/* 当日详情区域：移动端极致适配 */
.date-detail-section {
    padding: 12px 10px; /* 移动端缩减内边距 */
    border-top: 2px solid #A52A2A;
    background-color: #faf8f5;
    width: 100%;
}

.detail-title {
    font-size: 15px; /* 移动端缩小 */
    color: #8B0000;
    font-weight: 700;
    margin-bottom: 10px; /* 移动端缩减间距 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-title::before {
    content: "";
    display: inline-block;
    width: 3px; /* 移动端缩小竖线 */
    height: 16px; /* 移动端缩小竖线 */
    background-color: #FFD700;
    border-radius: 1px;
}

/* 详情卡片：移动端紧凑 */
.detail-card {
    background-color: #ffffff;
    padding: 12px; /* 移动端缩减内边距 */
    border-radius: 6px; /* 移动端圆角更小 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* 单个详情项：移动端单列布局优先 */
.detail-item {
    display: flex;
    flex-direction: column; /* 移动端默认纵向排列，更易读 */
    align-items: flex-start; /* 左对齐 */
    padding: 8px 0; /* 移动端缩减内边距 */
    border-bottom: 1px solid #f5f5f5;
}

/* 最后一行取消分隔线 */
.detail-item:last-child {
    border-bottom: none;
}

/* 左侧标题：移动端适配纵向布局 */
.detail-label {
    font-size: 13px; /* 移动端缩小 */
    font-weight: 600;
    color: #A52A2A;
    margin-bottom: 4px; /* 纵向排列增加间距 */
    text-align: left; /* 左对齐 */
    padding-right: 0; /* 取消右内边距 */
}

/* 右侧内容：移动端适配 */
.detail-value {
    font-size: 13px; /* 移动端缩小 */
    color: #333333;
    font-weight: 500;
    line-height: 1.5;
    width: 100%; /* 占满宽度 */
}

/* 宜/忌 标签：移动端紧凑 */
.lucky-items,
.unlucky-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* 移动端缩小间距 */
    align-items: center;
    width: 100%;
}

.lucky-item {
    background-color: rgba(139, 0, 0, 0.08);
    color: #8B0000;
    padding: 3px 10px; /* 移动端缩减内边距 */
    border-radius: 16px; /* 移动端圆角更小 */
    font-size: 11px; /* 移动端缩小 */
    font-weight: 500;
    /* 移动端标签不换行时自适应 */
    flex-shrink: 0;
}

.unlucky-item {
    background-color: rgba(153, 153, 153, 0.1);
    color: #666666;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

/* 网格布局：一行四列 */
.sc-grid {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 0.8rem; /* 间距调整 */
    width: 100%;
}

/* 网格标签样式 */
.sc-label {
    font-weight: bold;
    font-size: 13px;
    color: #000000;
    margin-bottom: 4px;
}

/* 网格内容样式 */
.sc-content {
    font-size: 13px;
    color: #333333;
    line-height: 1.5;
}

/* 大屏适配（≥768px） */
@media (min-width: 768px) {
    .sc-grid {
        grid-template-columns: 1fr 5fr;
    }
    .detail-item {
        flex-direction: row; /* 大屏恢复横向排列 */
        align-items: center;
    }
    .detail-label {
        min-width: 80px;
        text-align: right;
        padding-right: 10px;
        margin-bottom: 0;
    }
    .calendar-day {
        height: 70px;
    }
    .calendar-week-item {
        font-size: 12px;
        height: 22px;
    }
}

/* 中等屏幕（≤767px）适配 - 确保所有手机尺寸上detail-item独占一行 */
@media (max-width: 375px) {
    .sc-grid {
        grid-template-columns: 1fr 4fr 1fr 4fr;
    }
    .calendar-day {
        height: 50px; /* 超小屏进一步缩短高度 */
    }
    .calender-number {
        font-size: 12px; /* 超小屏数字更小 */
    }
    .festival {
        font-size: 8px; /* 超小屏节日文字更小 */
        -webkit-line-clamp: 1; /* 超小屏只显示1行 */
    }
    .detail-header-title {
        font-size: 16px; /* 超小屏标题更小 */
    }
    .lucky-item,
    .unlucky-item {
        padding: 2px 8px; /* 超小屏标签更紧凑 */
        font-size: 10px;
    }
}

/* 横屏适配：优化日历显示 */
@media (orientation: landscape) and (max-height: 500px) {
    .calendar-day {
        height: 40px; /* 横屏缩短日期高度 */
    }
    .date-detail-section {
        padding: 8px 10px;
    }
    .detail-card {
        padding: 8px;
    }
}

/* 流月行样式：限制总宽度与上面一致 */
.liu-yue-row {
    overflow-x: auto; /* 允许水平滚动 */
    white-space: nowrap; /* 防止换行 */
    max-width: 100%; /* 限制最大宽度 */
}

/* 调整流月行中col-1元素的宽度，使其适应13列 */
.liu-yue-row .col-1 {
    flex: 0 0 calc(9.09% - 1px); /* 100% / 11 列，减去间距 */
    max-width: calc(9.09% - 1px);
    min-width: calc(9.09% - 1px);
}