:root {
    --main-red: #c3272b;
    --dark-red: #8c1c1c;
    --light-red: #ffdddd;
    --main-yellow: #e67e22;
    --light-yellow: #e67e22;
    --dark-yellow: #d96411;
    --main-brown: #8c4b00;
    --light-brown: #d4b995;
    --dark-brown: #563200;
    --light-bg: #fffbeb;
    --text-color: #333333;
}
.form-group{flex:1;margin-right:15px;}
.form-control{width:100%;height:40px;padding:0 15px;border:1px solid #e0d5b3;border-radius:4px;font-size:15px;background-color:#fffef7;transition:all 0.3s;}
.form-control:focus{border-color:#d4a017;box-shadow:0 0 0 3px rgba(212, 160, 23, 0.2);outline:none;}
.btn-submit{display:block;width:100%;padding:12px;background:#e67e22;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:bold;cursor:pointer;transition:all 0.3s ease;}
.btn-submit:hover{background:#d35400;transform:translateY(-2px);box-shadow:0 5px 10px rgba(0, 0, 0, 0.1);}

.almanac-info{flex:1;min-width:300px;}
.solar-date{font-size:24px;font-weight:bold;margin-bottom:5px;}
.lunar-date{line-height:1.6;}
.yi-ji{display:flex;margin-bottom:2rem; flex-wrap: wrap;flex:2;}

@media screen  and (max-width: 786px){
    .yi-ji>div{flex-basis: 50%;}
    .almanac-details .grid{
        grid-template-columns: repeat(1,minmax(0,1fr)) !important;
    }
}


.yi h4,.ji h4{margin-bottom:1rem;font-size:16px;}
.yi h4{color:#2e8b57;}
.ji h4{color:#e67e22;}
.yi p,.ji p{font-size:14px;line-height:1.5;}
.more-details{display:flex;flex-wrap:wrap;}
.detail-item{width:50%;margin-bottom:10px; color: rgb(191 219 254 / var(--tw-text-opacity, 1));}



.lucky-hours{padding:2rem 0;border-radius:8px;width:100%;box-sizing:border-box;}
.lucky-hours h4{margin-bottom:15px;text-align:center;}
.hours-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));gap:10px;justify-content:center;}
.hour-item{text-align:center;padding:8px 10px;border-radius:.75rem;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:all 0.2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hour-item:hover{transform:translateY(-2px);box-shadow:0 3px 5px rgba(0, 0, 0, 0.15);}
.good-hour{border:1px solid #2e8b57;}
.bad-hour{border:1px solid #e5aaaa;}
.good-hour .hour-mark{color:#2e8b57;}
.bad-hour .hour-mark{color:#ff0f0f;}
.hour-name{font-weight:bold;display:block;}
.hour-mark{font-size:.85rem;color:#2e8b57;}

@media (max-width: 768px){
    .almanac-content{flex-direction:column;}
    .lucky-hours{margin-left:0;margin-top:20px;width:100%;}
    .hours-list{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));}
}
@media (max-width: 576px){
    .form-group{margin-right:0;margin-bottom:15px;}
    .hours-list{grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));}
}
.yi,.ji{flex:1;border-radius:.75rem;}


select{font-family:'Microsoft YaHei', Arial, sans-serif;}
.lunar-date{font-size:18px;font-weight:bold;margin-bottom:10px;text-align:center;}
.huangli-date-area{border-radius:.75rem;margin-bottom:2rem;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);}
.date-nav-area{display:flex;justify-content:center;align-items:center;margin-bottom:15px;padding: 1rem 0;}
.date-nav-btn{display:flex;align-items:center;padding:8px 15px;border-radius:4px;text-decoration:none;font-size:15px;transition:background-color 0.2s;}
.date-nav-btn:hover{background-color:var(--dark-yellow);}

.today-date{text-align:center;}
.solar-date{position:relative;display:flex;align-items:center;justify-content:center;font-family:"STKaiti", "楷体", serif;}
.solar-date .day{font-size:5rem;font-weight:bold;color:#ffffff;line-height:1;margin:0 5px;}
.full-solar-date{font-size:16px;margin:8px 0 3px;background-color:#fdf6e3;padding:4px 8px;border-radius:4px;border:1px dashed var(--dark-yellow);display:inline-block;}
.lunar-date{font-size:18px;margin-top:5px;font-family:"STKaiti", "楷体", serif;}
.date-search-area{margin-top:15px;padding:10px;border-radius:4px;border:1px solid var(--dark-yellow);}
.date-search-area form{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.form-group{margin:5px;min-width:80px;}
.year-group{flex:2;}
.month-group,.day-group{flex:1;}
.form-control{padding:8px;border:1px solid var(--light-brown);border-radius:4px;font-family:inherit;background-color:white;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238c4b00' d='M10.3,3.3L6,7.6L1.7,3.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5,5c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l5-5c0.4-0.4,0.4-1,0-1.4S10.7,2.9,10.3,3.3z'/%3E%3C/svg%3E");background-position:calc(100% - 10px) center;background-repeat:no-repeat;padding-right:30px;}
.form-control:hover{border-color:var(--main-brown);}
.form-control:focus{outline:none;border-color:var(--main-yellow);box-shadow:0 0 0 2px rgba(195, 39, 43, 0.2);}
.btn-submit{background-color:var(--main-yellow);color:white;border:none;padding:8px 15px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:15px;margin:5px;min-width:80px;transition:all 0.2s ease;}
.btn-submit:hover{background-color:var(--dark-yellow);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);}
.btn-submit:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);}
/*! CSS Used from: Embedded */
.hour-item.current-hour{background:#fff8e1;border:1px solid #ffd54f;box-shadow:0 0 15px rgba(255, 213, 79, 0.3);position:relative;overflow:hidden;}
.hour-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center, rgba(255, 213, 79, 0.3) 0%, rgba(255, 213, 79, 0) 70%);pointer-events:none;animation:pulse 2s infinite;}

.form-control{height:35px;padding:0 10px;font-size:14px;}
.btn-submit{padding:10px;margin:0 5px;}
.form-group{margin-right:10px;}
@media (max-width: 576px){
    .form-group{margin-bottom:8px;}
    .form-control{height:32px;}
    .btn-submit{margin-top:5px;}
}
/*! CSS Used keyframes */
@keyframes pulse{0%{opacity:0.3;}50%{opacity:0.7;}100%{opacity:0.3;}}

.fa-angle-left::before{
    content: ' ';
    background-image: url("./img/angle-left-solid-full.svg");
    background-size: contain; /* 或者使用 cover */
    background-repeat: no-repeat;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}
.fa-angle-right::before{
    content: ' ';
    background-image: url("./img/angle-right-solid-full.svg");
    background-size: contain; /* 或者使用 cover */
    background-repeat: no-repeat;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}