*{margin:0;padding:0;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,time,date{display:block}
blockquote,q{quotes:none}
img{height:auto}
a,button,input[type=button],input[type=submit],select{cursor:pointer;align-items:center;}
a{transition:all .25s ease-out;text-decoration:none;color:#028b66;}
a:hover{text-decoration:underline;color:#009852}
button,input,select,textarea{transition:all .25s ease-out;resize:none;outline:0;font-family: inherit;border:0;background:0 0;vertical-align:middle;}
textarea{resize:vertical}
::placeholder,textarea::placeholder{color:#afb2b5}
::-webkit-scrollbar,textarea::-webkit-scrollbar{cursor:pointer;width:1rem}
::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track{background:#f1f1f3;border-radius:0 .6rem 0 0}
::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{border-radius:1rem;background:#d9d9d9;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1)}
::-webkit-scrollbar-thumb:window-inactive,textarea::-webkit-scrollbar-thumb:window-inactive{background:#d9d9d9}
select{background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path fill='%23444' d='M5,22L30,47,55,22l-5-5L30,37,10,17Z'/></svg>") no-repeat right 1.6rem center/.9em;padding-right:3rem!important;-webkit-appearance:none;-appearance:none;-ms-appearance:none;appearance:none}
select::-ms-expand{display:none}
h1,h2,h3,h4,h5,h6{font-size:100%;line-height: 1.2;}
h1{font-size: 3.4rem;}
h2{font-size:2rem}
h3{font-size: 1.7rem;}
progress{-webkit-appearance:none;appearance:none;width:100%;height:.6rem;margin:0 0 1.4rem;background:#eee;border-radius:.5rem}
progress::-webkit-progress-bar{background:#eee;border-radius:.5rem}
progress::-webkit-progress-value{background:#505050;border-radius:.5rem}
.clear:after,ul:after{content:"";display:block;height:0;visibility:hidden;clear:both}
.error{display:none}
table{text-indent:0;border-color:inherit;border-collapse:collapse}


.icon{display:flex;align-items: center;}
.icon svg{width: 1em;height: 1em;fill: none;stroke: currentColor;stroke-width: 2px;fill-opacity: 0;fill-rule: evenodd;}
.icon svg+span{margin-left:.5em}

html{background: #f9fdfc;font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}
body{width:100%;margin:0 auto;color: #12343b;font: 400 1.5rem/1.5 Number,Segoe UI,PingFang SC,Microsoft YaHei,Hiragino Sans GB,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;}

.container{width:960px;margin:0 auto}
header .container,main{width: 1200px;margin:0 auto}

.hide{display:none!important}
button:disabled{opacity:.4;cursor:no-drop}

.table-scroll{scroll-behavior: smooth;border: 1px solid #e2e9e8;border-radius:1rem;box-shadow: 0 1px 3px 0 rgb(0 0 0 / 3%);width:100%;overflow-x:auto;}
.section-info .table-scroll{border-radius:.6rem;box-shadow:0 0;}
.table {min-width: 100%;}
.table td, .table th {padding:1.2rem 1.5rem;line-height:1.2;white-space: nowrap;}
.table tbody>:not(:last-child),.table thead{border-bottom: 1px solid #e2e9e8;}
.table tr>:not(:last-child){border-right: 1px solid #e2e9e8;}


@media(max-width:767px){
h1{font-size:2.2rem}
.container,header .container,main{width:100%;margin:0;padding:0 1rem;}
.is-mobile{display:none}
.table-scroll{width:calc(100vw - 5.6rem);}
}

header{height:6.5rem;padding: 1.5rem 0;line-height:3rem;}
header .container{display:flex;justify-content:space-between;}
header .logo a{display:flex;align-items: center;font-size:1.7rem;font-weight:600}
header .logo svg{width:2.2rem;height:2.2rem;margin-right:.6rem}
.header-right a{border:1px solid #e8efef;border-radius:.8rem;padding:.6rem 1.2rem;font-size:1.2rem;background:#fff}

h1{text-align: center;}
.lead{padding: 1rem 3rem 2rem;font-size: 1.4rem;text-align: center;color: #6e7778;}
.nav{display: flex;justify-content: center;margin: 1rem 0 2rem;}
.nav button,.nav a{padding: .5rem 1.5rem;border-radius: .8rem;font-size:1.4rem;text-align:center}
.nav button{background: #028b66;color:#fff;}
.nav a{margin-right:1rem;border: 1px solid #028b66;}

@media(max-width:767px){
header{height:7.8rem;padding:1.5rem 1rem}
.lead{padding: 1rem 2rem;}
.nav button,.nav a{padding:.5rem 1rem;font-size:1.2rem;flex-grow: 1;}
}


.home-grid{display:grid;grid-template-columns: 4fr 3fr;gap: 1.8rem;padding:2rem 0;}
.home-card{padding: 2rem;border: 1px solid #eff4f3;border-radius:1rem;background:#fff;}

.home-card.card-time{text-align: center;}
.home-card.card-time date{font-size: 1.7rem;}
.home-card.card-time time{font-size: 5.8rem;font-weight:900;line-height: 1.6;}
.home-card.card-time .lunar-display{font-size:1.4rem;color: #6e7778;padding: 0 0 .2rem;}

.home-card.calendar{grid-row:1/span 2;padding: 2rem 2.5rem;}

.home-card.card-cd{display: grid;gap:1rem;grid-template-columns: 1fr 1fr;}
.home-card .cd-item{display: flex;padding: 1rem 1.5rem;justify-content: space-between;border-radius:1rem;background: #f9fdfc;align-items: center;}
.home-card .cd-item .text{font-size:1.2rem;color: #6e7778;}

.tool-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap: 1.5rem;margin-top: 3rem;}
.tool-grid a{display:block;color: #12343b;padding: 2rem;border: 1px solid #e2e9e8;border-radius: 1rem;text-decoration: none;}
.tool-grid a p{font-size:1.2rem;color:#6e7778}
.tool-grid h3{margin: .8rem 0 1.2rem;}
.tool-grid a:hover p{color: #12343b;}
.tool-grid a:hover h3{color:#028b66}
.tool-grid .icon{display: inline-block;background: #e8f7f3;border-radius:.6rem;padding: .8rem;}
.tool-grid .icon svg{display: block;width:2.4rem;height:2.4rem;stroke:#028b66;}


@media(max-width:767px){
.home-card{padding:2rem;}
.home-grid,.home-card.card-cd,.tool-grid{grid-template-columns:1fr;}
.home-card.card-time time{font-size:5.6rem;}
.home-card.calendar{grid-row: none;padding:1.6rem 2rem;}
}


.calendar-section{position: relative;display: flex;align-items: flex-start;margin-top: 4rem;}
.calendar-year{display:grid;gap: 1.6rem;grid-template-columns:1fr 1fr;flex: 1;margin-right:2.5rem;}
.calendar .month-card{padding:1.8rem;border: 1px solid #eff4f3;border-radius:1rem;background: #fff;}
.calendar .month-card h3{padding: .5rem 0 1rem;text-align:center}

.calendar table{width:100%;}
.calendar th{font-weight:400;font-size:1.4rem;padding: 1.2rem 0;}
.calendar td {padding: .2rem;text-align: center;width: calc(100% / 7);line-height: 1.4;}
.calendar .day{position: relative;display: flex;align-items: center;flex-direction: column;width: 100%;padding: .8rem 0 1rem;height: 100%;transition: all 0.2s;cursor:pointer;border-radius:.6rem;}
.calendar .day:not(.other-month):hover{background: #eef9f6;}
.calendar .day span{display: block;height: 100%;}
.calendar .wk{color: #b90010;}

.calendar b{position: absolute;display: block;top: -.4rem;left: -.4rem;width: 1.8rem;height: 1.8rem;font-weight:400;line-height: 1.6rem;font-size: 1rem;font-style: normal;background: #028b66;border:1px solid #fff;color: #fff;border-radius: 50%;}

.calendar .n{font-size: 1.7rem;font-weight: 500;}
.calendar .l{font-size: 1.2rem;color: #8b909b;}
.calendar .hol{color: #ba5d65;}
.calendar .term{color:#27864d;}
.calendar .tdy{border: 1px solid #028b66;}

.calendar .holiday{background: #f4fdf5;color: #0c833b;}
.calendar .work-overtime{background: #fcfaea;color: #9c6600;}
.calendar .holiday b{background: #0c833b;}
.calendar .work-overtime b{background: #9c6600;}
.calendar .holiday .l{color:#0c833b}
.calendar .work-overtime .l{color:#9c6600;}
.calendar .other-month{opacity: .15;}

.calendar .active{background: #028b66!important;color:#fff!important}
.calendar .active .l{color:#fff!important}

.calendar-month{flex: 1;margin-right:2.5rem;padding:3rem;border: 1px solid #eff4f3;border-radius:1rem;background: #fff;}
.calendar-month th{padding:1rem 0}
.calendar-month td {padding:.6rem;}
.calendar-month .n{font-size:2.8rem;}
.calendar-month .day{padding:1.6rem .6rem;}

.calendar-side{position:-webkit-sticky;position:sticky;right:0;top:0;z-index:99;align-self:flex-start;height:fit-content;width:30rem;border:0px solid #ddddd9;border-radius:1rem;background:#fff;padding:2.2rem;font-size:1.4rem;box-shadow:rgba(0,0,0,.02) 0px 1px 3px}
.calendar-side b{color: #028b66;}



.day-info{text-align:center;padding: 0 0 1rem;}
.day-month{font-size:1.8rem;font-weight:700}

.day-count{font-size: 8rem;line-height: 1;padding: 1.3rem 0 1.5rem;font-weight: 800;}
.day-lunar{padding:.5rem;margin:1rem 0;font-weight:700;border: 1px solid #eff4f3;border-radius:.6rem;}
.day-hseb{color: #717778;}
.day-holidays{padding: .5rem 0;}
.day-yiji{display: grid;align-items: center;grid-template-columns:2.2rem auto;gap: 1rem;padding: 1.5rem 0;line-height:1.4;border-top: 1px solid #eff4f3;}
.day-yiji span{display:flex;height:calc(100% - .5rem);min-height:2.2rem;border-radius:.6rem;justify-content:center;align-items:center;color:#fff}
.day-yiji#yi span{background: #18a57f;}
.day-yiji#ji span{background: #d16c6c;}
.day-yiji div{flex:1;}
.day-chong{padding: .5rem 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background: #fff2f3;border-radius: .6rem;text-align: center;color: #ea0014;margin-top: .5rem;}
.day-jieqi{padding-top: 1.3rem;font-size:1.3rem;color: #6e7778;}
.day-jieqi p{padding:.5rem 0;}

@media(max-width:767px){
.calendar-year{grid-template-columns:1fr;width: 100%;}
.calendar{margin-right:0;width: 100%;}
.calendar-month{padding:1.8rem;}
.calendar-section{flex-direction: column-reverse;}
.calendar .n{font-size: 1.6rem;}
.calendar .l{font-size: 1rem;}
.calendar-month .day{padding:.6rem .2rem;}
.calendar-month td {padding:.5rem .2rem;}
.calendar-side{width:100%;display: grid;grid-template-columns: 1fr 1fr;font-size:1.2rem;padding: 0;margin-bottom:1.2rem}
.day-info{padding:1.8rem;border-right:1px solid #eff4f3;margin-right:-1px}
.day-more{padding:1rem 1.8rem;border-left:1px solid #eff4f3;}
.day-month{font-size:1.5rem;}
.day-count{font-size:6rem;}
.day-yiji{border-top:0}
.day-yiji+.day-yiji{border-top: 1px solid #eff4f3;}
}

.jieqi-list{display:grid;grid-template-columns: 1fr 1fr;gap: 1.5rem;margin-top: 4rem;}
.jieqi-item{display: grid;grid-template-columns: 1fr 2fr 2fr;align-items: center;justify-items: center;padding:2rem 1rem;background: #fff;border: 1px solid #eff4f3;border-radius: 1rem;}
.jieqi-item .jieqi-name{font-size:1.8rem;font-weight:700}
.jieqi-item .jieqi-time{display: flex;line-height:1.4;flex-direction: column;}
.jieqi-item .jieqi-time .lunar-time{font-size:1.4rem}
.jieqi-item .past{color: #cf3f3f;}
.jieqi-item .today{color:#1000ff}
.jieqi-item .future{color: #028b66;}
.jieqi-item.not-current-year{background:transparent}

.jieqi-info{display:grid;grid-template-columns: 1fr 1fr;gap: 1.6rem;margin: 3rem 0;}
.jieqi-info-item{padding: 2.5rem 2rem 2rem;border: 1px solid #e2e9e8;border-radius:1rem;text-align: center;}
.jieqi-info-item .info-title{display: inline-block;color: #6e7778;}
.jieqi-info-item .info-display{text-align:center;font-size: 2.2rem;font-weight:700;padding: .6rem 0 .5rem;}


@media(max-width:767px){
.jieqi-list,.jieqi-info{grid-template-columns:1fr;}
}



.time-section{text-align:center;margin: 3rem 0;}
.time-section h2{font-weight:400;font-size:2.4rem;margin-bottom: 1.5rem;}

.time-section .time-row{margin-bottom: 2rem;}
.time-section time{margin:2rem 0;font-size:12rem;font-weight:900;line-height: 1;}
.time-section .millis{font-size:50%}
.time-section date{font-size:2.2rem;}
.time-section time+date{margin: -1.5rem 0 2rem;font-size:2.6rem;}
.time-section .time-offset{font-size:2rem;font-weight:700}
.time-section .date-display{font-size: 6rem;font-weight:900;line-height: 1;margin:2.5rem 0 2rem;}

.time-section .time-utc{margin-bottom: 1.5rem;display: flex;align-items: center;justify-content: center;gap:1rem}
.time-section .time-utc span{display:block;padding:.4rem 1.5rem;background: #ebf7f4;border-radius:1rem;font-size:1.4rem;}
.time-section .parent-link{padding-bottom:1rem}
.time-section .parent-link a{display: inline-flex;position: relative;padding-right: 2rem;line-height: 2rem;}
.time-section .parent-link a:after {position: absolute;right: 0;top: 0;content: "\21E2";transition: all .2s ease-out;font-size: 1.2em;}
.time-section .parent-link a:hover:after{right:-.3rem;}

.countdown{display:flex;align-items:center;justify-content:center;margin: 3rem 0;}
.countdown-col{position:relative;padding: 0 4rem;line-height: 1;}
.countdown-col .num{display:block;font-size: 10rem;font-weight:900}
.countdown-col .label{font-size:1.7rem;font-weight: 600;color: #899090;}
.countdown-col+.countdown-col:after {content:"";position:absolute;top: 2.4rem;left: 0;width:1px;height: 5.5rem;background: #e2e9e8;}


@media(max-width:767px){
.time-section{font-size:1.2rem}
.time-section h2{font-size: 1.8rem;}
.time-section time{margin:2rem 0;font-size: 5rem;}

.time-section date{font-size:1.8rem;}
.time-section time+date{font-size:1.8rem;}
.time-section .date-display{font-size:4rem;}
.countdown-col{padding: 0 1rem;}
.countdown-col .num{font-size:4.8rem;}
.countdown-col .label{font-size:1.4rem;}
.countdown-col+.countdown-col:after {top:1rem;height:5rem;}

}

.country-time{display:grid;grid-template-columns: repeat(4, 1fr);gap:1.5rem;margin-top: 2.5rem;}
.country-time a{padding:2rem 2.4rem;border: 1px solid #edf1f0;border-radius:.6rem;color: #6e7778;min-width: 0;}
.country-time h3{color: #12343b;font-size:1.7rem;margin-bottom:.7rem}
.country-time span{display:block;margin-top:.3rem;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;width: 100%;}


.time-compare,.timezone{display:grid;gap:1.5rem;grid-template-columns: 1fr 1fr;margin-bottom: 2rem;}
.time-compare .time-card{font-size:1.7rem;padding: 2.5rem 3rem;border: 1px solid #e2e9e8;border-radius: 1rem;text-align:center;color: #6e7778;}
.time-compare .live-time{margin:.5rem 0;font-size:2.6rem;font-weight:700;color:#12343b;}
.time-compare .diff{font-size:1.4rem;}
.time-compare .different{margin-left:1rem;color: #dc2626;}
.time-compare .same{margin-left:1rem;color:#16a34a}
.timezone-grid{padding: 2rem 3rem;border: 1px solid #e2e9e8;border-radius: 1rem;}
.timezone-grid h3{margin: 1rem 0 1.2rem;font-size: 1.7rem;}
.timezone-row{display: flex;justify-content: space-between;padding:1rem 0;}
.timezone-row+.timezone-row{border-top: 1px solid #edf1f0;}
.timezone-row .label{color: #6e7778;}

.time-hot{display:grid;grid-template-columns: repeat(5, 1fr);gap:1.5rem;margin-top:4rem}
.time-hot a{display: flex;padding:2rem;background:#fff;border:1px solid #eff4f3;border-radius:1rem;flex-direction: column;justify-content: center;align-items: center;}
.time-hot .live-time{font-size:1.7rem;font-weight:700;}


.time-nav{margin-top:3rem;display:grid;grid-template-columns: repeat(4, 1fr);gap:1rem;}
.time-nav a{padding:1.5rem 2rem;border: 1px solid #edf1f0;border-radius:.6rem;text-align:center;color:#12343b;}
.time-nav+.time-nav{margin-top:2rem;padding-top:2rem;border-top:1px solid #e2e9e8}
.time-nav a span{display:block;font-size:1.4rem;color: #6e7778;}

@media(max-width:767px){
.country-time{grid-template-columns: repeat(2, 1fr);}
.time-compare,.timezone{grid-template-columns:1fr;}
.time-hot{grid-template-columns: repeat(2, 1fr);}
.time-nav{font-size:1.2rem;grid-template-columns: repeat(3, 1fr);}
.time-nav a{padding:1rem;}
.time-nav a span{font-size:1.2rem;}
}


input,select{width:100%;height:4.4rem;padding:.7rem 1.6rem;line-height:3rem;border: 1px solid #d4dddc;background-color:#fff;border-radius: .8rem;font-size:1.8rem}
input:hover,input:focus,select:hover,select:hover{border-color:#028b66}
input[type="checkbox"]{display:none}
input[type="checkbox"]+span{position: relative;display: block;width: 3.4rem;height:1.8rem;border-radius: 1.5rem;background:#d1d9d8;cursor: pointer;}
input[type="checkbox"]+span:before {position:absolute;content: "";height: 1.4rem;width: 1.4rem;left:.2rem;bottom:.2rem;background-color: #fff;border-radius: 50%;}
input[type="checkbox"]:checked+span{background-color:#028b66;}
input[type="checkbox"]:checked+span:before{left:auto;right:.2rem}

.custom-timer{margin: 2rem 0 6rem;}

.timer-settings{border: 1px solid #e2e9e8;border-radius: 1rem;width: 70%;margin: 0 auto;padding: 2.5rem 3.5rem;}
.timer-input{display: grid;grid-auto-flow: column;align-items: end;grid-template-columns: 1fr 2rem 1fr 2rem 1fr;margin-bottom:2rem;}
.timer-input label span{display:block;font-size: 1.4rem;line-height:3rem;}
.timer-input>span{line-height: 4.4rem;font-size: 2.2rem;text-align: center;}
.timer-settings .timer-tit{padding:1rem 0;border-bottom: 1px solid #eff4f3;margin-bottom:1rem}



.timer-display{padding: 0 0 2rem;text-align:center;font-size:12rem;font-weight:900;}
.timer-text.finished { color: #e00; animation: blink 1s infinite; }
.timer-quick{display:grid;align-items: center;grid-template-columns: repeat(8,minmax(0, 1fr));padding:2rem 0rem;gap: 1rem;border:solid #eff4f3;border-width:1px 0;}
.timer-quick button{line-height: 3rem;border: 1px solid #eff4f3;font-size:1.3rem;border-radius:.6rem;}
@keyframes blink { 50% { opacity: 0.1; } }

.timer-settings .sound-toggle{display:flex;align-items: center;justify-content: space-between;margin: 2rem auto 1rem;width:100%;}
.timer-settings #btnStartRow{margin:1rem auto;width:100%;padding:1.2rem 2.5rem;background:#028b66;color:#fff;border-radius: 1rem;}

.control-buttons{display: grid;grid-auto-flow: column;align-items: center;justify-content: center;gap:1.5rem;}
.control-buttons button{padding:1.2rem 2.5rem;background:#028b66;color:#fff;border-radius: 1rem;}


.countdown-list{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:1.5rem;margin-top: 3rem;}
.countdown-item{display: grid;padding: 2rem 2.2rem;border: 1px solid #eff4f3;background: #fff;border-radius: 1rem;font-size: 1.4rem;justify-items: start;align-items: start;}
.countdown-item .name{font-weight:700;font-size:1.7rem}
.countdown-item .status{padding: .4rem 0 .8rem;}
.countdown-item .countdown-time{ padding:.2rem 1rem;background: #ebf7f4;border-radius:.6rem;}

@media(max-width:767px){
.timer-display{padding: 0 0 2rem;font-size:5.6rem;}
.timer-settings{width:100%;margin:0;padding:2rem;}
.timer-quick{grid-template-columns: repeat(4,minmax(0, 1fr));}
.countdown-list{grid-template-columns:1fr;}
   
}


.section-title{margin-top:3rem;text-align:center;font-size: 2rem;}
.section-info{margin-top:4rem;padding:1rem 3rem;border: 1px solid #e2e9e8;border-radius:1rem;line-height:1.75}
.section-info>*{margin:1.25em 0;}
.section-info h2,.section-info h3{margin:1.5em 0;}
.section-info > h2:first-child,.section-info > h3:first-child{margin:1.1em 0 1.5em;}
.section-info li{margin:.5em 0;}
.section-info+.section-info{margin-top:2rem;}
.section-info ol,.section-info ul {list-style-position: inside;}
.related{display: flex;flex-wrap: wrap;margin-left: -1rem;}
.related a{display:block;text-align: center;background: #eef4f2;padding:.6rem 1.5rem;border-radius:.8rem;white-space: nowrap;flex: 1 1 auto;margin: 0 0 1.2rem 1rem;color:#12343b;}
.related a:hover{background: #6e7778;color:#fff}

.progress-section{text-align:center;padding-bottom: 2rem;}
.progress-section h2{margin-top:3rem;font-size:2.2rem}
.progress-value{font-size: 9rem;font-weight:900;line-height: 1;margin:3rem 0;}
.progress-value span{font-size:65%;color:#6e7778}

.progress-bar {height: 2.6rem;background: #e0e5e4;border-radius:.8rem;overflow: hidden;margin-top:3rem;}
.progress-fill {height:100%;border-radius:.8rem;background: linear-gradient(90deg, #828889, #6e7778);display: flex;align-items: center;justify-content: center;color: white;font-weight:700;text-shadow: 0 1px 2px rgba(0,0,0,0.2);min-width: 2em;transition: width 0.3s;}
.progress-fill.year,.progress-fill.terms{background: linear-gradient(90deg,#009f58, #028b7a);}
.progress-fill.lunar {background: linear-gradient(90deg, #d3472d,#c83c23);}
.progress-stats {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1.5rem;margin-top: 3rem;}
.progress-stats .stat {display: flex;border: 1px solid #e2e9e8;border-radius: 1rem;color: #6e7778;padding: 2rem;font-size: 1.4rem;flex-direction: column;align-items: center;justify-content: center;}
.progress-stats .num {font-size: 2.4rem;font-weight: 700;color: #028b66;}
.progress-stats .sub {margin: .4rem 0 .7rem;color: #12343b;}
.progress-stats .current-term{align-items: start;}


.progress-grid{display: grid;grid-template-columns:1fr 1fr;gap: 1.5rem;margin-top: 3rem;padding-bottom: 1rem;}
.progress-card{padding:2rem 2.5rem;border: 1px solid #e2e9e8;border-radius: 1rem;}
.progress-card .card-head{display:flex;justify-content: space-between;}
.progress-card .card-head h3{font-size:1.7rem}
.progress-card .card-head b{font-weight:700;}
.progress-card .progress-bar{height:1.6rem;margin:1.1rem 0 1.3rem;}
.progress-card .card-info{font-size:1.4rem;color:#6e7778;}

@media(max-width:767px){
.progress-value{font-size:5.6rem;}
.progress-stats,.progress-grid{grid-template-columns:1fr;}
}

@media print {
body *{visibility:hidden}
.calendar, .calendar *{visibility:visible}
.calendar{position:absolute;left:0;top:0;width:100%;margin:0;padding:0}
*{background:white !important;color:black !important;box-shadow:none !important;text-shadow:none !important}
@page{margin: 1cm; size: A4 landscape;}
}


@media(max-width:767px){
.section-info{padding:0 1.8rem 1rem;margin-top: 2rem;}
.section-info+.section-info{margin-top:1.5rem;}
}


.calc-tabs{display:flex;padding: .4rem;background:#fff;border-radius: 1rem;margin-top: 1.5rem;border: 1px solid #eff4f3;}
.calc-tab{flex-grow: 1;padding: .8rem 0;font-weight:700;color: #6e7778;border-radius: 0.6rem;}
.calc-tab:hover{color:#12343b;}
.calc-tab.active{color: #fff;background: #5f6667;}

.calc-panel{display: none;margin-top: 2rem;padding:3rem;border-radius:1rem;border: 1px solid #eff4f3;background: #fff;}
.calc-card .calc-panel{margin-top:0;padding:0;border-radius:0;border:0;background:transparent;}
.calc-panel.active{display: grid;gap: 2rem;}

.preset-list{display:grid;align-items:center;grid-template-columns:repeat(10, minmax(0, 1fr));gap:1rem;color:#6e7778;}
.preset-list button{line-height: 3rem;border: 1px solid #e2e9e8;font-size:1.3rem;border-radius:.6rem;}

.status-normal { color: #028b66; }
.status-warn { color: #d18000; }
.status-soon { color: #c45c00; }
.status-today { color: #c82c1c; font-weight: 600; }
.status-expire { color: #a91303; font-weight: 600; }

.section-head{display:flex;justify-content:space-between;align-items:center;}
.history-section button{border:1px solid #e2e9e8;border-radius:.6rem;padding:.5rem 1rem;color:#6e7778;}
.history-section button:hover{background:#6e7778;color:#fff;border-color:#6e7778}
.history-section .section-head,.history-section h3{ margin:1rem 0}
.history-list { display: flex; flex-direction: column; gap:1.5rem; }
.goods-item { display: flex; justify-content: space-between; align-items: center; padding:1.5rem 2rem; background:#fff; border-radius:.8rem;border:1px solid #eff4f3;}
.goods-info { flex: 1; }
.goods-name {font-weight:700;margin-bottom:.5rem; }
.goods-meta { display: flex; flex-wrap: wrap; gap:2rem; font-size: 1.3rem; color:#6e7778; }
.goods-ops { display: flex; gap:1rem; }

.form-row{display: grid;align-items: end;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
.form-col+.form-col{margin-left:1.5rem}
.form-label{display: block;font-size: 1.4rem;margin-bottom: .4rem;}

.btn-primary{max-width: 100%;height: 4.4rem;padding:1rem;background:#028b66;color:#fff;border-radius:.8rem}
.quick-dates{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.quick-dates .btn-quick{height: 4.4rem;border:1px solid #e2e9e8;border-radius:.8rem}
.error-message{display: none;background:#ffefef;color:#e00;border:1px solid #fce2e2;border-radius:.8rem}
.error-message.show{display:block;padding:1rem 2rem;margin-bottom:1rem}

.result-grid{display:grid;grid-template-columns: repeat(auto-fit,minmax(0, 1fr));gap:1.5rem;}
.result-item,.result-main{padding: 1.8rem 2rem;background: #f8f9f9;border-radius:.8rem;text-align:center}
.result-item span{display:block;text-align:left}
.result-label{font-size:1.3rem;font-weight:700;color: #6e7778;}
.result-value{font-size:3.4rem;font-weight:700}
span.result-value{font-size:1.8rem;}
p.result-value{font-size:1.5rem;font-weight:400;text-align:left}
.result-main{text-align:left;}
.panel-result .result-main+.result-grid,.panel-result .result-grid+.enter-group{margin-top:2rem;}
.highlight{background: #eef9f6;}
.highlight .result-label{color:#3f8773}
.panel-result .text-summary{margin-top:1.5rem;}
.result-main .result-value{padding:1rem 0}
.result-main .result-small,.panel-result .text-summary{font-size:1.4rem;color:#6e7778;}
.result-main .progress-bar{height: 1rem;margin: 1rem 0;}


.panel-result .btn-detail{display: block;width: 100%;padding: 1rem;margin-top: 2rem;background: #f9fafa;border: 1px solid #e2e9e8;border-radius: .8rem;}
.panel-result .table-scroll{margin-top:2rem}
.panel-result .table .holiday{background: #f4fdf5;}
.panel-result .table .extraWorkday{background: #fcfaea;}
.panel-result .table .weekend{background: #f9fbfb;}


@media(max-width:767px){
.result-grid{grid-template-columns: repeat(2, 1fr);}
.calc-panel{padding:1.8rem;}
.result-value{font-size:3rem;}
}

.calc-card{display: grid;gap: 2rem;margin-top: 1.5rem;padding: 3rem;border-radius: 1rem;border: 1px solid #eff4f3;background: #fff;}
.enter-group{display:flex;align-items: center;}
.enter-group .dp,.enter-group input{flex-grow:1;border-radius: 0;border-right: 0;}
.enter-group label{padding:0 1.5rem;font-size:1.4rem;border: 1px solid #d4dddc;line-height: 4.2rem;border-radius: .8rem 0 0 .8rem;border-right: 0;white-space: nowrap;}
.enter-group .btn{padding: 0 2.5rem;line-height: 4.4rem;background:#028b66;color: #fff;border-radius: 0 .8rem .8rem 0;white-space: nowrap;}

.result-daxie{padding:2rem;background:#eef9f6;border-radius:.8rem;}
.result-daxie h2{font-size:1.4rem;color:#3f8773;}
.result-daxie .big{font-size:3.4rem;padding:1rem;text-align:center}
.result-daxie .big span{font-weight:700;margin:0 .25em}

.table-daxie .day-cell a{text-align:center;color:#12343b}
.table-daxie .today-cell{background:#eef9f6}
.table-daxie .query-cell{background:#028b66;color:#fff}
.table-daxie .other-month{opacity:.2}
.table-daxie .day-num{font-size:1.6rem;font-weight:700;margin-bottom:.5em}
.table-daxie .day-cap{font-size:1.3rem;}

.dp{position:relative;}
.dp-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background:#fff;border: 1px solid #e2e9e8;border-radius:.8rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.04);display:none;width: 30rem;max-width:90vw}
.dp-panel.show{display:block}

.dp-header{display:flex;justify-content: space-between;align-items:center;gap: .5rem;border-bottom: 1px solid #eff4f3;padding: 1rem 1.2rem;}
.dp-nav{cursor:pointer;width: 3rem;text-align: center;border-radius:.6rem;user-select:none;font-size: 2rem;color: #6e7778;transition:background .2s}
.dp-nav:hover{background:#eef9f6}
.dp-nav.disabled{opacity:.2;cursor: no-drop;}
.dp-yl,.dp-ml{padding:0 .2rem;cursor:pointer;font-weight:500;user-select:none}
/***.dp-yl{margin-left:auto}
.dp-ml{margin-right:auto}***/
.dp-yl:hover,.dp-ml:hover,.dp-yl.active,.dp-ml.active{color:#028b66}

.dp-yp,.dp-mp,.dp-tp{display:none;padding: 1.2rem;grid-template-columns:repeat(4,1fr);gap: .2rem;max-height: 27rem;overflow-y:auto}
.dp-tp{grid-template-columns: repeat(8,1fr);}
.dp-yi,.dp-mi,.dp-ti{text-align:center;cursor:pointer;border-radius: .6rem;}   
.dp-ti{padding:.4rem;font-size: 1.3rem;}  
.dp-yi,.dp-mi{padding:1rem .4rem;font-size: 1.4rem;}
.dp-yi:hover,.dp-mi:hover,.dp-ti:hover{background:#eef9f6}
.dp-yi.disabled,.dp-mi.disabled,.dp-ti.disabled{color:#d9d9d9;pointer-events:none;background:transparent}
.dp-yi.current,.dp-mi.current,.dp-ti.current{font-weight:bold;background: #028b66;color: #fff;}

.dp-wd{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size: 1.2rem;color: #6e7778;gap: .2rem;padding: 1.2rem 1.2rem 0;}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap: .2rem;padding: 1rem;}
.dp-day{height: 3.4rem;display:flex;align-items:center;justify-content:center;border-radius: .6rem;cursor:pointer;font-size: 1.4rem;user-select:none;transition:background .2s}
.dp-day:hover:not(.disabled):not(.selected):not(.in-range){background: #eef9f6;}
.dp-day.today{border:1px solid #028b66;color:#028b66}
.dp-day.selected{background:#028b66;color:#fff}
.dp-day.in-range{background:#ebf7f4;color:#028b66}
.dp-day.disabled{color:#dbe2f0;cursor:not-allowed}
.dp-day.other{color:#bbc2d0}

.dp-time-section{border-top: 1px solid #eff4f3;padding: 1rem;}
.dp-time-labels{display:flex;justify-content:center;gap: .2rem;align-items:center;font-size: 1.8rem;cursor:pointer;user-select:none}
.dp-time-labels span{padding: .5rem .8rem;border-radius: .6rem;transition:background .2s}
.dp-time-labels span:hover{background: #eef9f6;color:#028b66;}
.dp-time-labels .active{color:#028b66;font-weight:700}

.dp-actions{display:flex;justify-content: space-between;gap: 1rem;border-top: 1px solid #eff4f3;padding: 1rem 1.2rem;align-items: center;}
.dp-btn{padding: .6rem 1rem;min-width: 26%;border: 1px solid #e2e9e8;border-radius: .6rem;background:#fff;cursor:pointer;transition:.2s;}
.dp-btn:hover{border-color:#028b66;color:#028b66}
.dp-btn.primary{background: #028b66;border-color: #028b66;color:#fff}
@media(max-width:767px){
.dp-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-height:80vh;overflow-y:auto}
.dp-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:999;display:none}
.dp-overlay.show{display:block}
}


.clock-section{--light:255,255,255;--dark:0,0,0;--bg:#070318;--accent:#ffef24;--sec:#ff301a;--but:#a98829;position:relative;background:var(--bg);border-radius:1.2rem;padding: 3rem 0 8rem;display:flex;flex-direction:column;align-items:center;transition:all .3s;overflow: hidden;}
.clock-section.theme-emerald{--bg:#001a1a;--accent:#0f9;--sec:#ff0;--but:#008c54;}
.clock-section.theme-ocean{--bg:#0b1c3e;--accent:#337bff;--sec:#ff4444;--but:#266cc2;}
.clock-section.theme-light{--light:0,0,0;--dark:255,255,255;--bg:#fff;--accent:#12bc8e;--sec:#ff301a;--but:#35e6b6;}
.clock-section.theme-rose{--bg:#161d2b;--accent:#ff2068;--sec:#fff144;--but:#b71247;}
.clock-section.theme-mint{--light:0,66,39;--dark:255,255,255;--bg:#d6ffee;--accent:#000;--sec:#ffce1a;--but:#b4e3cf;}

.clock-display{display:flex;align-items:center;justify-content:center;margin:2rem 0}
.clock-display #clockSvg{width:40rem;height:40rem;filter:drop-shadow(0 0 15px rgba(var(--dark),.4))}
.clock-display .date-label{font-size:1.3rem;text-align:center;color:rgba(var(--light),1);margin-top:1rem}
.clock-display .weekday{color:var(--accent)}
.clock-display .lunar{margin:0 .5rem}
.clock-display .digital-wrap{display:none;flex-direction:column;align-items:center;padding: 4rem 0;}
.clock-display .digital-wrap.active{display:flex}
.clock-display .digi-time{font-size:10rem;font-weight:900;color:rgba(var(--light),1);line-height:1.2}
.clock-display .digi-time .ms{font-size:.5em;color:var(--accent)}

.clock-set{position: absolute;bottom: 0;left: 0;right: 0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;background:rgba(var(--light),.05);font-size:1.2rem;padding:1rem;width:100%;color:rgba(var(--light),.6)}
.clock-set.collapsed{padding:16px;opacity:.7}
.clock-set .btn{display:inline-flex;height: 3rem;padding:.5rem 1rem;border-radius:.6rem;border:1px solid rgba(var(--light),.1);cursor:pointer;font-size:1.2rem;white-space:nowrap;transition:all .2s;color:rgba(var(--light),.8)}
.clock-set .btn:hover:not(:disabled):not(.active){background:rgba(var(--light),.1)}
.clock-set .btn:disabled{opacity:.6;cursor:not-allowed;}
.clock-set .btn.active{background:var(--but);color:rgba(var(--light),1)}
.clock-set .toggle-group{display:flex;border-radius:.8rem;border: 1px solid rgba(var(--light),.1);overflow: hidden;}
.clock-set .toggle-group .btn{border-radius:0;border:0}
.clock-set .divider{width:1px;height:2rem;background:rgba(var(--light),.1);margin:0 .4rem}
.clock-set .theme-dots{display:flex;gap:.5rem}
.clock-set .theme-dot{width:1.8rem;height:1.8rem;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}
.clock-set .theme-dot:hover{transform:scale(1.2)}
.clock-set .theme-dot.active{border-color:var(--accent);box-shadow:0 0 8px var(--accent)}
.clock-set .timer-row{display:flex;align-items:center;gap:.6rem;}
.clock-set .timer-inp{width:6rem;height: 3rem;padding: .5rem;border:1px solid rgba(var(--light),.1);background:rgba(var(--dark),.2);color:rgba(var(--light),1);text-align:center;font-size: 1.2rem;}

body.immersive .clock-section{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;border-radius:0;justify-content:center;max-width:none;padding: 0 0 6rem;}
body.immersive .clock-display #clockSvg,body.fullscreen .clock-display #clockSvg{height:68vh;width:auto;}
body.immersive .clock-display .digi-time,body.fullscreen .clock-display .digi-time{font-size:16rem;}
body.fullscreen .clock-display{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:998;background:var(--bg);margin:0}
body.fullscreen .clock-set{display:none}
body.fullscreen .clock-section{box-shadow:none;padding:0}


.clock-section .clock-face{fill:rgba(var(--light),.02)}
.clock-section .clock-border{stroke:var(--accent)}
.clock-section .hour-hand{fill:rgba(var(--light),1)}
.clock-section .minute-hand{fill:rgba(var(--light),1)}
.clock-section .second-hand{stroke:var(--sec)}
.clock-section .center-dot{fill:var(--accent)}
.clock-section .mark-major{stroke:rgba(var(--light),1)}
.clock-section .mark-minor{stroke:rgba(var(--light),.6);}
.clock-section .number{fill:rgba(var(--light),1);font-size:1.3rem}

@media(max-width:767px){
.clock-display #clockSvg{height:auto!important;width:80vw!important;}
.clock-display .digi-time{font-size:4.2rem!important;}
.clock-display .date-label{font-size:1.2rem;}
.clock-section{padding: 2rem 0 13rem;margin-top: 1.5rem;}
.clock-set{gap:.5rem;}
.clock-set .btn{padding:.5rem .8rem;}
.clock-set .divider{margin:0 .2rem}
}

footer{margin-top:8rem;padding:4rem 0 3rem;text-align:center;font-size:1.4rem;color:#6e7778;border-top:1px solid #eff4f3}
footer a{color:#6e7778;margin:0 .25em}
footer .foot-link{margin-bottom:.75rem}