* {margin: 0;padding: 0;box-sizing: border-box;font-family: system-ui, -apple-system, sans-serif;}
body{color:#333;font-size:100%;font-family:Arial,Helvetica,sans-serif;word-break:break-all;padding-top: env(safe-area-inset-top);min-height: 100vh;}
body,div,ul,li,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,p,span,img,table,th,td,form,input,textarea,button,select{margin:0;padding:0}
label,input,select,button{vertical-align:middle}
/*body{background:url(bg.jpg) no-repeat;background-size:100% 100%;background-size:cover;background-attachment:fixed}*/
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
img,td{border:0;vertical-align:middle}
html{font-size:16pt}em,i{font-style:normal}ul,li{list-style:none}
@media screen and (max-width:1280px){html{font-size:14pt}
}@media screen and (max-width:736px){html{font-size:12pt}
}@media screen and (max-width:360px){html{font-size:10pt}
}
a{color:#333;text-decoration:none}
a:hover{color:#008000}
.container {margin: 0 auto;max-width: 1440px;padding: 0 3%;}
.left{float:left}.right{float:right}.mt2{margin-top:2%}.mt3{margin-top:3%}.radius{border-radius:5px}.w100{width:100px}
.gray{color:#ccc}.red{color:#f00}.green{color:#008000}.orange{color:#FA6900}.gold{color:#FFD700}.blue{color:#2e52a4}.ft12{font-size:1.2em}.ft10{font-size:1.0em}.ft8{font-size:0.8em}.ft6{font-size:0.6em}.ft4{font-size:0.4em}.initial{text-transform:capitalize}
.block {clear: both;height: 20px;overflow: hidden;display: block;}
.main,.location{clear:both;min-width:300px;width:100%;margin-left:auto;margin-right:auto;overflow:hidden}
hr{background-color:#dee2e5;border:none;display:block;height:1px;margin:1em 0}

.nav-bar{position:fixed;top:0;left:0;width:100%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:1000}
.nav-container{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}
.nav-logo{font-size:1.5rem;font-weight:700;color:#2c3e50;text-decoration:none}
.nav-menu{list-style:none;display:flex;gap:24px}
.nav-menu a{text-decoration:none;color:#4b525c;font-size:1rem;font-weight:500;transition:color .2s ease}
.nav-menu a:hover{color:#008000}
.nav-menu a.active {color: #008000;position: relative;}
.nav-menu a.active::after {content: "";position: absolute;left: 50%;bottom: -8px;width: calc(100% - 24px);height: 2px;background-color: #008000;transform: translateX(-50%);}
.menu-toggle{display:none;border:none;background:0 0;padding:12px;cursor:pointer;position:relative;z-index:1001}
.menu-bar{display:block;width:30px;height:3px;background:#333;margin:6px 0;transition:all .3s cubic-bezier(.68,-.55,.27,1.55)}
@media (max-width:1024px){.container{margin-top:70px;padding-top:20px}
.menu-toggle{display:block}
.nav-menu{position:fixed;top:0;left:-100%;width:100%;height:100vh;background:#fff;flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;transition:left .3s ease-in-out;box-shadow:0 0 16px rgba(0,0,0,.1)}
.nav-menu.active{left:0}
.nav-menu li{margin:16px 0}
.nav-menu a{font-size:1.125rem;color:#2c3e50}
.menu-toggle.active .menu-bar:first-child{transform:rotate(45deg) translate(6px,6px)}
.menu-toggle.active .menu-bar:nth-child(2){opacity:0}
.menu-toggle.active .menu-bar:last-child{transform:rotate(-45deg) translate(6px,-6px)}
@media (max-width:600px){.nav-container{padding:16px 16px}
.nav-menu{padding:30px 15px}
.container{margin-top:70px;padding-top:20px}
}
}
@media (min-width:1025px){.nav-menu{display:flex!important;position:static!important;width:auto!important;height:auto!important;background:0 0!important;padding:0!important}
.container{margin-top:70px;padding-top:20px}
}

.kalendar{position:relative;text-align:center;margin-top:2%;}
.kalendar .left a,.kalendar .right a{display:block}
.kalendar .left,.kalendar .right{position:absolute;top:0px}.kalendar .right{right:0px}
.kalendar .left img,.kalendar .right img {width:1.2em;margin:3em 0.5em}
.kalendar .hm {font-size:2.5em;color:#008000;font-weight:700;}
.kalendar .mid p{padding:0.25em 0}
.kalendar span{padding:.35em}

.custom{margin-top:1rem;overflow-x:auto}
.custom .con{clear:both;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align:center;vertical-align:middle;display:grid;grid-template-columns:repeat(2,1fr)}
.custom .con span{padding:.35em}
.custom .con .cell{padding:.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.custom .con .bg-success{background-color:rgba(25,135,84,.1);color:#198754;padding:.5rem 0}
.custom .con .bg-danger{background-color:rgba(220,53,69,.1);color:#dc3545;padding:.5rem 0}
.custom .con .text-success{color:rgba(25,135,84,.5)}
.custom .con .text-danger{color:rgba(220,53,69,.5)}
.custom .con .fw-bold.text-success{font-weight:700;color:#198754;margin-right:.5rem}
.custom .con .fw-bold.text-danger{font-weight:700;color:#dc3545;margin-right:.5rem}
.custom .con .suitable{display:inline-block;color:#fff;background-color:rgba(91,193,17,.2);padding:3px 5px;border-radius:8px}
.custom .con .avoid{display:inline-block;color:#fff;background-color:rgba(252,57,57,.2);padding:3px 5px;border-radius:8px}
.custom .submit{min-width:80px;height:38px;border:0;cursor:pointer;font-size:16px;color:#fff;background:green;outline:medium;-webkit-appearance:none;-webkit-border-radius:0;border-radius:5px}
.custom .submit:hover{background:#228b22}

/* calendar */
.calendar {margin-top: 1rem;overflow-x:auto;position: relative;}
.calendar table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;table-layout: fixed;}
.calendar table td,th{padding:0.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.calendar table th {padding:0.65em;color:#FA6900;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}
.calendar td {position: relative;padding: 10px;}
.calendar td.sunday, .calendar td.saturday {color: #008000;}
.calendar td.sunday a, .calendar td.saturday a {color: inherit;}
.calendar em {position: absolute;top: 5px;right: 5px;font-style: normal;font-size: 12px;color: #FFFFFF;background-color: rgba(255, 0, 0, 0.8);padding: 2px 5px;border-radius: 3px;z-index: 1;}
.calendar .today{color:#f50}
.calendar .today a{display:inline-block;color:#fff!important;background-color:#f50;padding:8px 16px;border-radius:4px;text-decoration:underline}
.calendar .tertiary{color:#008000;}
.calendar .tertiary a{display:inline-block;color:#fff!important;background-color:#008000;padding:8px 16px;border-radius:4px;text-decoration:underline}

/*vacation*/
.vacation {margin-top: 1rem;overflow-x: auto;}
.vacation table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;table-layout: fixed;}
.vacation table td,th{padding:0.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.vacation table th {padding:0.65em;color:#252525;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;letter-spacing:2px;}
.vacation input,select{color:#333;height:38px;line-height:38px;border:1px solid #008000;padding:0 8px;border-radius:5px;background:#fff;overflow:hidden}
.vacation option{outline:0;overflow:hidden}
.vacation .submit{min-width:80px;height:38px;border:0;cursor:pointer;font-size:16px;color:#fff;background:#008000;outline:medium;-webkit-appearance:none;-webkit-border-radius:0;border-radius:5px}
.vacation .submit:hover{background:#228B22}

/*almanac*/
.almanac {margin-top: 1rem;overflow-x: auto;}
.almanac table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;table-layout: fixed;}
.almanac table span{padding:.35em}
.almanac table td,th{padding:0.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.almanac table .bg-success{background-color: rgba(25, 135, 84, 0.1);color: #198754;padding: 0.5rem 0.custom ;}
.almanac table .bg-danger{background-color: rgba(220, 53, 69, 0.1);color: #dc3545;padding: 0.5rem 0;}
.almanac table .text-success{color: rgba(25, 135, 84, 0.5);}
.almanac table .text-danger{color: rgba(220, 53, 69, 0.5);}
.almanac table .fw-bold.text-success {font-weight: bold;color: #198754;margin-right: 0.5rem;}
.almanac table .fw-bold.text-danger {font-weight: bold;color: #dc3545;margin-right: 0.5rem;}
.almanac table .suitable{display:inline-block;color:#fff;background-color:rgba(91,193,17, 0.2);padding:3px 5px;border-radius:8px;}
.almanac table .avoid{display:inline-block;color:#fff;background-color:rgba(252,57,57, 0.2);padding:3px 5px;border-radius:8px;}
.almanac .submit{min-width:80px;height:38px;border:0;cursor:pointer;font-size:16px;color:#fff;background:#008000;outline:medium;-webkit-appearance:none;-webkit-border-radius:0;border-radius:5px}
.almanac .submit:hover{background:#228B22}

/*luckyday*/
.luckyday {background: #fff;margin-bottom: 20px;margin-top: 20px;border-radius: 8px;position: relative;border: 1px solid #f4f4f4;}
.luckyday h3{padding: 10px;line-height: 20px;border-bottom: 1px solid #f4f4f4}
.luckyday a {padding: 0 6px;}
.luckyday .site {padding:10px 0 10px 0;text-align:center;}
.luckyday .site a{padding:8px 0px 8px 0px;background:#f9f9f9;width:13%;border-radius: 8px;display:inline-block;margin-bottom:10px;margin-right:5px;margin-left:5px;color:#000;text-align:center;border:#ccc 0px solid;}
.luckyday .site a:hover{background:#008000;color:#fff;border:#ccc 0px solid;}
.luckyday form{margin:20px 0 20px 0;text-align:center;}
.luckyday .submit{min-width:80px;height:38px;border:0;cursor:pointer;font-size:16px;color:#fff;background:#008000;outline:medium;-webkit-appearance:none;-webkit-border-radius:0;border-radius:5px}
.luckyday .submit:hover{background:#228B22}

/*constellation*/
.constellation table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;}
.constellation table,.tc {text-align:center}
.constellation td,th{padding:0.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.constellation table th {padding:0.65em;color:#252525;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;letter-spacing:2px;}
.conintro{max-width:100%;text-align:justify}
.conintro p{text-indent:2em;margin:0.5em 0;text-transform:uppercase;letter-spacing:0.05em;line-height:2em}
.conintro h2,.content h3 {padding:0.5em 0;border-bottom: 1px solid #eaeaea;font-weight:600}
.conintro h2:before,.content h3:before{content:"";float:left;display:block;width:4px;height:0.8em;background-color:#008000;margin-left:2em;margin-top:0.3em;margin-right:0.5em}

/*age*/
.age {margin-top: 1rem;overflow-x: auto;}
.age table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;table-layout: fixed;}
.age table td,th{padding:0.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.age table th {padding:0.65em;color:#252525;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;letter-spacing:2px;}
.age .submit{min-width:80px;height:38px;border:0;cursor:pointer;font-size:16px;color:#fff;background:#008000;outline:medium;-webkit-appearance:none;-webkit-border-radius:0;border-radius:5px}
.age .submit:hover{background:#228B22}
.age input,select{color:#333;height:38px;line-height:38px;border:1px solid #008000;padding:0 8px;border-radius:5px;background:#fff;overflow:hidden}

/*countdown*/
.countdown {margin-top: 1rem;overflow-x: auto;}
.countdown table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;}
.countdown table td,table th{padding:0.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.countdown table th {padding:0.65em;color:#252525;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;letter-spacing:2px;}

.timedjs {height: 300px;margin-bottom: 20px;background: url(../img/djsbg.jpg) 0 bottom no-repeat;border: 1px solid rgba(9, 141, 11, 0.48);border-radius: 5px;width: 100%;background-size: cover;}
.timedjs .text-box{padding-top:20px;text-align:center}
.timedjs .text-box h2{margin-bottom:10px;line-height:30px;font-weight:700;font-size:24px;color:#008000}
.timedjs .text-box p{padding-bottom:5px;line-height:30px;font-size:16px;color:#666}
.timedjs .djs-box{margin:20px 0;line-height:24px;text-align:center}
.timedjs .djs-box span{display:inline-block;margin:0 1px;vertical-align:middle;font-size:30px;color:#252525}
.timedjs .djs-box span.time{display:inline-block;min-width:30px;padding:0 10px;margin:5px;background:#252525;border:1px solid #fff;height:48px;line-height:48px;text-align:center;font-size:28px;font-weight:700;color:#fff;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.1)}

/*Week*/
.week{text-align:center;padding:0.65em;margin-top:10px;color:#252525;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;letter-spacing:2px;border-radius:8px;}
.week span{color:#008000}

/*YearZodiac*/
.yzodiac{margin-top: 1rem;overflow-x: auto;}
.yzodiac table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;table-layout: fixed;}
.yzodiac table td,th{padding:0.69em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.yzodiac table th {padding:0.69em;color:#252525;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;letter-spacing:2px;}

/*riseaflag*/
.riseaflag{margin-top: 1rem;overflow-x: auto;}
.riseaflag table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;table-layout: fixed;}
.riseaflag table td,th{padding:0.69em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.riseaflag table td {font-size:0.8em;}
.riseaflag table th {padding:0.69em;color:#252525;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;letter-spacing:2px;}
.riseaflag {margin:.5em 0;text-transform:uppercase;letter-spacing:.1em;line-height:1.5em}
.riseaflag .submit{min-width:80px;height:38px;border:0;cursor:pointer;font-size:16px;color:#fff;background:#008000;outline:medium;-webkit-appearance:none;-webkit-border-radius:0;border-radius:5px}
.riseaflag .submit:hover{background:#228B22}
.riseaflag .top-day {background-color: yellow;position: relative;box-sizing: border-box;}
.riseaflag .top-day::after {content: "推荐";position: absolute;top: 0;right: 0;background-color: red;color: #fff;padding: 2px 4px;font-size:0.6em;}
.riseaflag .selected-day {background-color: #FFF0F0;}

/*wordtime*/
@font-face{font-family:TimeTraveler;font-style:normal;font-weight:400;src:url(../fonts/LINE-Seed-Sans-TH-Heavy.ttf) format('truetype')}

.time_wrap {display: flex;justify-content: center; align-items: center;margin: 0 auto;}
.time_wrap div,.time_wrap em {margin-right: 2px;text-align: center;}
.time_show {position:relative;font-weight:bold;font-size:8.5em;color:#6e7781;margin:0 4px;}
.time_show span{border-radius:5px;padding:0px 5px 4px 4px;color:#6e7781;margin:0 4px;}
.time_showms {position:relative;font-weight:bold;font-size:8.5em;color:#6e7781;margin:0 4px;}
.time_showms span{border-radius:5px;padding:0px 5px 4px 4px;color:#6e7781;margin:0 4px;}
.date_show {padding:5px;text-align:center;color:#6e7781;font-size:2em;}
.date_show span {color:#6e7781;}
.date_show p {color:#6e7781;font-size:1.4em;}
.time_wrap .hour,.time_wrap .minute,.time_wrap .second,.time_wrap em{font-family:TimeTraveler,Arial,sans-serif}

.time-main{text-align:center;background:#fff;margin-bottom: 20px;border-radius: 8px;position: relative;background: url('../img/word_map.png') center center no-repeat,url('../img/bg.svg') center center/ auto 100% repeat-x;}
.time-main span{color:#fa6900}
.time-main .name {text-align:center;font-weight:normal;display:block;padding-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.5em;color:#008000;letter-spacing:3px;}
.time-main .name p{text-align:center;font-weight:normal;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:2.1em;color:#fa6900;letter-spacing:2px;}
.time-main .flag {padding-top:15px;}
.time-main .bordered{border:1px solid #f1f1f1;}
.time-main .vssc {color:#fa6900;font-size:3.0em;font-weight:600;padding-bottom:20px}
.time-main .qr{padding-bottom:15px;letter-spacing:2px;font-size:16px;}
.time-main .qr span{color:#008000;padding:.35em;font-weight:600;}
.time-main .group{padding:5px 0 5px 0;}
.time-main .group p{padding:5px 5px;}
.time-main .group .site {padding-top:15px;}
.time-main .group .site a{margin:0 10px;font-size:1.2em;}
.time-main .group .zone {padding-bottom:25px;font-size:1.4em;text-align:center;}
.time-main .group .tips {text-align:center;font-weight:normal;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.4em;color:#999;padding:15px 0;}
.time-main .group .bjsc {color:#fa6900;font-size:1.0em;font-weight:600;letter-spacing:2px;}
.time-main .group .gap{text-align:center;width:100%;display:flex;flex-direction:column;flex-wrap: nowrap;}
.time-main .group .gap ul{width:100%;margin-top:10px;float:left;display:flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: center;padding-top: 10px;padding-bottom: 10px;}
.time-main .group .gap li{margin: 5px;display: flex;justify-content: center;}
.time-main .group .gap li a{text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.time-main .group .dst {text-align: center;width: 100%;margin-top: 10px;display: flex;flex-direction: row;justify-content: center;align-items: center;font-size: 1.2em;}
.time-main .group .dst .bg-blue-hoki {border-radius: 8px;padding: 5px;border-color: #67809F  !important;background-image: none !important;background-color: #67809F  !important;color: #FFFFFF !important;letter-spacing: 2px;}
.time-main .group .dst .bg-blue-hoki:not(:last-child) {margin: 10px;}
.time-main .zhou {letter-spacing:2px;padding-bottom:10px;}
.time-main .ms {padding:15px 0 15px 0;letter-spacing:2px;font-size:16px;}
.time-main .ms a, .ms span{color:#fa6900}
.time-main .ms strong{color:#008000}
.time-main img {max-width: 100%;height: auto;}

.time-con {background: #fff;margin-bottom: 20px;border-radius: 8px;position: relative;border: 1px solid #f4f4f4}
.time-con h3{padding: 10px;line-height: 20px;border-bottom: 1px solid #f4f4f4}
.time-con a {padding: 0 6px;}
.time-con .info {width:100%;box-sizing:border-box;line-height:200%;color:#333;text-indent:2em;padding:15px 10px 15px;}
.time-con .remind {padding:2px;margin:1px;color:#008000;}

.time-col {background:#fff;margin-bottom: 20px;border-radius: 8px;position: relative;border: 1px solid #f4f4f4}
.time-col h3{padding: 10px;line-height: 20px;border-bottom: 1px solid #f4f4f4}
.time-col .site {padding:10px 0 10px 0;text-align:center;}
.time-col .site a{padding:8px 0px 8px 0px;background:#f9f9f9;width:18%;border-radius: 8px;display:inline-block;margin-bottom:10px;margin-right:5px;margin-left:5px;color:#000;text-align:center;border:#ccc 0px solid;}
.time-col .site a:hover{background:#008000;color:#fff;border:#ccc 0px solid;}
.time-col .list {padding: 10px 15px}
.time-col .list ul {overflow: hidden}
.time-col .list li {float: left;width: 20%;height: 48px;line-height: 48px;text-align: center}
.time-col .list a {display:block;padding: 0 40px;text-align: left;border-radius: 5px;}
.time-col .list a:hover {background:#F7F7F7}
.time-col .list a span {overflow: hidden;margin: 0 auto;border:1px solid #f1f1f1;padding-right: 5px;}
.time-col .list .icon{font-size:23px;height:24px;vertical-align:middle;text-align:center;}

.words-clock{display:flex;flex-wrap:wrap;justify-content:space-around;}
.words-item{width:15.55%;margin-bottom:10px;padding:10px;text-align:center;border-radius:5px;background:rgba(0,0,0,.1)}
.words-item a{display:block;font-size:18px;text-decoration:none;color:inherit}
.words-item .date,.time{margin-top:8px}
.words-item .date{font-size:14px}
.words-item .time{font-size:16px}

/*tool*/
.tool{max-width:100%;margin:0 auto 30px;background-color:#fff;border-radius:8px;box-shadow:0 2px 15px rgba(0,0,0,.08);padding:25px}
.tool table {clear:both;width:100%;border-collapse:collapse;border-spacing:0;border-left:1px solid #eaeaea;border-top:1px solid #eaeaea;text-align: center;vertical-align: middle;table-layout: fixed;}
.tool table td,th{padding:0.65em;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea}
.tool table th {padding:0.65em;color:#FA6900;font-weight: 700;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}
.tool h1{text-align:center;color:#2c3e50;margin-bottom:20px;font-size:28px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.1)}
.tool .input-area{margin-bottom:25px;position:relative}
.tool .input-area p{margin-bottom:15px;position:relative}
.tool .input-read{flex:1;padding:10px 14px;border:1px solid #e0e0e0;border-radius:6px;background-color:#f9f9f9;font-size:15px;color:#333;transition:all .2s ease;pointer-events:none}
.tool .input-info{flex:1;padding:10px 14px;border:1px solid #e0e0e0;border-radius:6px;background-color:#f9f9f9;font-size:15px;color:#333;transition:all .2s ease}

.tool .input-tl {text-align:left;}
.tool .input-tc {text-align:center;}
.tool select{color:#333;height:38px;line-height:38px;border:1px solid #e0e0e0;padding:0 8px;border-radius:5px;background:#fff;overflow:hidden}
.tool textarea#content,.tool textarea#result{width:100%;height:180px;padding:12px 15px;font-size:16px;border:1px solid #ddd;border-radius:4px;resize:vertical;outline:0;transition:all .3s ease;font-family:"Courier New",monospace}
.tool textarea#content:focus,.tool textarea#result:focus{border-color:#4285f4;box-shadow:0 0 0 2px rgba(66,133,244,.2)}
.tool textarea#inputstr {width:100%;height:180px;padding:12px 15px;font-size:16px;border:1px solid #ddd;border-radius:4px;resize:vertical;outline:0;transition:all .3s ease;font-family:"Courier New",monospace}
.tool textarea#inputstr:focus {border-color:#4285f4;box-shadow:0 0 0 2px rgba(66,133,244,.2)}
.tool #handleResult{text-align:center;color:#4caf50;height:16px;position:absolute;right:0;top:0;background:#4caf50;color:#fff;font-size:12px;border-radius:3px}
.tool .control-area{margin:25px 0;text-align:center}
.tool .region-select{margin-bottom:15px}
.tool label{font-size:16px;margin-right:15px;display:inline-block;vertical-align:middle}
.tool input[type=radio]{vertical-align:middle;margin-right:5px}
.tool .btn{display:inline-block;padding:10px 20px;margin:0 8px 8px 0;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;text-align:center;transition:all .3s ease;text-decoration:none;min-width:100px}
.tool .btn-primary{background-color:#4285f4;color:#fff}
.tool .btn-primary:hover{background-color:#3370e0;transform:translateY(-2px);box-shadow:0 2px 8px rgba(66,133,244,.3)}
.tool .btn-primary.btnchk{background-color:#2ecc71}
.tool .btn-primary.btnchk:hover{background-color:#27ae60;box-shadow:0 2px 8px rgba(46,204,113,.3)}
.tool .btn-danger{background-color:#e74c3c;color:#fff}
.tool .btn-danger:hover{background-color:#c9302c;transform:translateY(-2px);box-shadow:0 2px 8px rgba(231,76,60,.3)}
.tool .btn-secondary{background-color:#6c757d;color:#fff}
.tool .btn-secondary:hover{background-color:#5a6268;transform:translateY(-2px);box-shadow:0 2px 8px rgba(90,98,104,.3)}
.tool .btn-success{background-color:#28a745;color:#fff}
.tool .btn-success:hover{background-color:#218838;transform:translateY(-2px);box-shadow:0 2px 8px rgba(33,136,56,.3)}
.tool .btn-warning{background-color:#ffc107;color:#fff}
.tool .btn-warning:hover{background-color:#e0a800;transform:translateY(-2px);box-shadow:0 2px 8px rgba(224,168,0,.3)}

.tool .tool-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px}
.tool .tool-sort{font-size:20px;color:#2c3e50;font-weight:600;margin:25px 0 15px;padding-bottom:10px;border-bottom:1px solid #eee}

.tool-card{background-color:#fff;border-radius:8px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,.05);display:flex;align-items:flex-start;transition:all .3s ease}
.tool-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}
.tool-card img{border-radius:8px}
.tool-card-icon{width:60px;height:60px;border-radius:4px;margin-right:12px;flex-shrink:0}
.tool-card-content{display:flex;flex-direction:column;justify-content:space-between;flex:1;margin-left:12px}
.tool-card-title{font-size:16px;color:#333;font-weight:600;margin-bottom:4px}
.tool-card-desc{font-size:13px;color:#666;line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.tool .small {padding:4px 6px;}
.tool .period {background-color: #faa61920; color: #faa619;}
.tool .ovulation {background-color: #ed1b2320; color: #ed1b23;}
.tool .safe {background-color: #17a40c20; color: #17a40c;}

.stopwatch-box{text-align:center;margin:20px 0}
#stopwatch-display{font-size:2.5rem;padding:10px;width:90%;text-align:center;margin:0 auto;background:rgb(255 255 255 / 0%);border:2px solid #ccc;border-radius:8px}
.stopwatch-btn{display:flex;justify-content:center;gap:10px;margin:20px 0}
#split-result{margin:20px auto;width:90%;padding:10px;border:1px solid #eee;border-radius:5px}
#split-result p{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #eee}
#split-result .green{color:#4caf50;font-weight:700}
#split-result .yellow{color:#ffc107;font-weight:700}
#split-result .fl{float:left}
#split-result .fr{float:right}
#split-result .tips{text-align:center;color:#666;margin-top:20px}
#split-result .hide{display:none}

.platform-selector{margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap}
.platform-btn{padding:8px 18px;border:1px solid #e0e0e0;border-radius:20px;background:#fff;cursor:pointer;transition:all .2s;font-size:14px}
.platform-btn.active{background:#007fff;color:#fff;border-color:#007fff}
.违禁词{background:#fff2f0;color:#e53e3e;padding:2px 6px;border-radius:4px;margin:0 2px;font-weight:500}
.result-area{padding:20px;border-radius:8px;background:#f9f9f9;min-height:100px}
.result-title{font-weight:600;margin-bottom:15px;color:#333;display:flex;justify-content:space-between}

#randomNumbers {
    color: #4caf50;
    max-width: 50%;
    line-height: 36px;
    font-size: 28px;
    text-align: center; /* 内容水平居中 */
    background-color: rgba(238, 238, 238, 0.5);
    border-radius: 3px;
    padding: 5px;
    margin: 10px auto; /* 上下边距10px，左右自动居中 */
}
/* 八字段落样式 */
.tool .ecnei {margin: 0 0 18px 0;padding: 12px 18px;border-left: 4px solid #4a6fa5;background-color: #f7f9fc;border-radius: 4px;transition: all 0.2s ease;}
.tool .ecnei:hover {background-color: #f0f4fa;transform: translateX(2px);}
.tool .ecnei span {display: inline-block;font-weight: 600;color: #4a6fa5;margin-right: 8px;}

.tool label {font-size: 1.2em;}
/*intro*/
.intro{max-width:100%;text-align:justify;padding:0.65em;margin:10px 0 15px 0;border-radius:8px;background-color: rgba(238, 238, 238, 0.5);border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}
.intro p{text-indent:2em;margin:.5em 0;text-transform:uppercase;letter-spacing:.1em;line-height:2em;font-size:.8em}
.intro span{color:#008000;font-weight:700;}

/*backtop*/
.backtop{position:fixed;right:.5%;transition:bottom ease .3s;bottom:-85px;z-index:3;cursor:pointer;background:#868686;border-radius:8px;}
.backtop .gotop{transition:background-color ease .3s;margin-top:1px;background:#868686;}
.backtop .gotop .up-icon{display:block;right:.5%;bottom:40px;width:60px;height:60px;background:url("../img/top.png") center center no-repeat;background-size:60px auto;text-indent:-333em;z-index:99}
.backtop .gotop:hover{background-position:0 0}

/*tool links*/
.tool-title{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background-color:#fff;border-radius:8px;margin-bottom:24px}
.tool-name{font-size:clamp(1.4rem,2vw,1rem);font-weight:700;color:#333;text-shadow:0 2px 4px rgba(0,0,0,.1);margin:0}
#btn-like{display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:#f5f5f5;color:#333;border:1px solid #ddd;border-radius:9999px;cursor:pointer;transition:all .3s ease;outline:0}
#btn-like:hover{background-color:#e9e9e9;transform:scale(1.05);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
#btn-like:focus{box-shadow:0 0 0 4px rgba(200,200,200,.3)}
#btn-like:active{background-color:#ff4d4f;color:#fff;border-color:#ff4d4f}
#btn-like i{font-size:18px}
#btn-like:active i{color:#fff}
#like-txt{font-weight:500}
#like-num{font-weight:700;}
@keyframes heartBeat{0%{transform:scale(1)}
14%{transform:scale(1.2)}
28%{transform:scale(1)}
42%{transform:scale(1.2)}
70%{transform:scale(1)}
}
.liked{animation:heartBeat .8s}    

/*footer*/
.footer{clear:both;color:#666;background-color:#f6f6f6;font-family:"Comic Sans MS";text-align:center;border-top:1px solid #eaeaea;padding:1em;overflow:hidden;letter-spacing:0.1em;font-size:0.6em;opacity:0.75;text-transform:uppercase;line-height:1.8}
.footer a{color:#666}

@media (max-width:480px){.tool h1{font-size:22px}
.tool .btn{display:block;width:100%;margin:0 0 10px 0}
.tool .region-select label{display:block;margin-bottom:5px}
.tool-cards {grid-template-columns: 1fr;}
}

@media (max-width:640px){.tool-title{padding:12px 16px}
#btn-like{gap:5px;padding:5px 10px}
#btn-like i{font-size:14px}
#like-num,#like-txt{font-size:14px}
}

@media screen and (max-width: 768px) {
.words-item {width: 48%;}
.tool h1{font-size:24px}
.tool textarea#inputstr{height:150px}
.tool .btn{padding:8px 16px;font-size:13px;min-width:auto}
.tool .region-select label{margin-right:10px}
.tool .tool-cards {grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));}
}

@media screen and (max-width: 875px) {
img {max-width: 100%;height: auto;}
.time_show {font-size:4.25em;}
.time_showms {font-size:2.25em;}
.date_show {font-size:1.2em;}
.time-main .name {text-align:center;font-weight:normal;display:block;padding-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1em;color:#008000;letter-spacing:2px;}
.time-main .name p{text-align:center;font-weight:normal;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.8em;color:#fa6900;letter-spacing:2px;}
.time-main .group{line-height:1;}
.time-main .group .calendar span {color:#252525;font-size:1.4em;}
.time-main .group .zone {padding-bottom:25px;font-weight:normal;font-size:1.4em;text-align:center;}
.time-main .group .tips {text-align:center;font-weight:normal;display:block;padding-top:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1em;color:#999;letter-spacing:2px;}
.time-main .qr{padding:15px 0 15px 0;}
.time-col .site a{padding:5px 0 5px 0;margin-right:3px;width:25%;font-size: 14px;}
.time-col .list li {overflow: hidden;float:left;width: 50%;height: 48px;line-height: 48px;text-align: center}
}

@media (min-width: 992px) {
.words-item {width: 15.55%;}
}