/*小工具头像跳动*/
.logo {
   -webkit-animation: swing 3s .4s ease both;
   -moz-animation: swing 3s .4s ease both;
}
@-webkit-keyframes swing {
   20%, 40%, 60%, 80%, 100% {
       -webkit-transform-origin:top center
   }
   20% {
       -webkit-transform:rotate(15deg)
   }
   40% {
       -webkit-transform:rotate(-10deg)
   }
   60% {
       -webkit-transform:rotate(5deg)
   }
   80% {
       -webkit-transform:rotate(-5deg)
   }
   100% {
       -webkit-transform:rotate(0deg)
   }
}
@-moz-keyframes swing {
   20%, 40%, 60%, 80%, 100% {
       -moz-transform-origin:top center
   }
   20% {
       -moz-transform:rotate(15deg)
   }
   40% {
       -moz-transform:rotate(-10deg)
   }
   60% {
       -moz-transform:rotate(5deg)
   }
   80% {
       -moz-transform:rotate(-5deg)
   }
   100% {
       -moz-transform:rotate(0deg)
   }
}

.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
    background-color: #576eff;
    border-color: #ffffff;
    color: #ffffff;
    padding: 8px 15px;
    border-width: 2px;
    border-style: solid;
}
.btn-dark, .btn-dark.disabled, .btn-dark:disabled {
    background-color: #d1d3e0;
    border-color: #ffffff;
    color: #000000;
    padding: 8px 15px;
    border-width: 2px;
    border-style: solid;
}
.btn-warning, .btn-warning.disabled, .btn-warning:disabled {
    background-color: #f5b08a;
    border-color: #ffffff;
    color: #ffffff;
    padding: 8px 15px;
    border-width: 2px;
    border-style: solid;
}
.btn-success, .btn-success:disabled, .btn-sucess.disabled {
    background-color: #71b96c;
    border-color: #ffffff;
    color: #ffffff;
    padding: 8px 15px;
    border-width: 2px;
    border-style: solid;
}
.btn-info, .btn-info.disabled, .btn-info:disabled {
    background-color: #a67fff;
    border-color: #efe8ff;
    color: #ffffff;
    padding: 8px 15px;
    border-width: 2px;
    border-style: solid;
}


.btn-danger, .btn-danger.disabled, .btn-danger:disabled {
background-color: #ee6e83;
    border-color: #ffffff;
    color: #ffffff;
    padding: 8px 15px;
    border-width: 2px;
    border-style: solid;
}
.nav ul a:hover {
    background: #006dff;
    color: #ffffff;
}
.header {
    text-align: center;
    background: #fad7dd61;
    border: 1px solid #ffffff38;
    box-shadow: 0 1px 3px 0 rgba(54, 74, 99, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px 15px 0 0;
}

.nav {
    background-color: #fad7dd61;
    box-shadow: 0 4px 6px rgb(136 161 206 / 30%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0px 0px 15px 15px;
        border: 1px solid #ffffff38;
}

.h1, h1 {
    /* font-size: calc(1.375rem + 1.5vw); */
    /* font-weight: bold !important; */
    color: #ffffff;
}

.nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}
/* 悬停效果 */
.card:hover {
    transition: 0.5s;
    border-radius: 10px;
    transform: translateY(-5px);
    box-shadow: 0 34px 20px -24px rgb(136 161 206 / 30%);
}
.card {
   /* border: 3px dashed #ffffff42;*/
    background-color: #ffffff4f;
    padding: 3px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    box-shadow: 0 3px 12px 0 rgb(136 161 206 / 30%);
}
.card-body {
    background-color: #fad7dd61;
    /* background-color: transparent; */
    padding: 15px;
    border-radius: 13px;
}


        .header {
            padding: 15px 25px;
            text-align: center;
            background: #fad7dd61;
            border: 1px solid #ffffff38;
            box-shadow: 0 1px 3px 0 rgba(54, 74, 99, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 15px 15px 0 0;
        }

/* 默认情况下隐藏 .header */
.header {
    display: none;
}

 .row.mb-3.tmph {
    display: none;
  }
        @media (min-width: 768px) {
    .header {
        display: block;
    }
     .row.mb-3.tmph {
    display: block;
  }

}

        @media (max-width: 768px) {/*在手机中取消描边*/
 .nav {
border: none !important;
}

}

    /* index.php; */

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    
    &.online { background: #28a745; box-shadow: 0 0 8px rgba(40, 167, 69, 0.3); }
    &.offline { background: #6c757d; }
}

.time-display {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(248, 249, 250, 0.8);
    transition: all 0.2s;
    
    &:hover {
        background: #f8f9fa;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
}
.hover-shadow {
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important;
}

.modern-layer .layui-layer-title {
    font-size: 1.25rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
}

.layui-layer-dialog .layui-layer-content {
    padding: 1.5rem !important;
    border-radius: 0 0 8px 8px;
}
/* 移动端优化 */
@media (max-width: 767px) {
    .modern-layer .layui-layer-title {
        font-size: 1rem;
        padding: 12px;
    }

    .mobile-card {
        margin-bottom: 8px !important;
    }

    .mobile-card .card-body {
        padding: 12px !important;
    }

    .mobile-card h6 {
        font-size: 14px;
    }

    .mobile-card button {
        font-size: 13px;
        padding: 4px 10px !important;
    }

    .mobile-card .badge {
        font-size: 12px !important;
    }
}


/* 通用样式 */
.modern-layer .card-title {
    font-size: 1.1rem;
    color: #2c3e50;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .mobile-card {
        margin-bottom: 6px !important;
        border-radius: 8px !important;
    }
    
    .mobile-card .card-body {
        padding: 12px !important;
    }
    
    .mobile-card .btn {
        min-width: 32px;
        padding: 4px 8px !important;
    }
    
    .mobile-card .fa-server {
        font-size: 1.1em !important;
    }
    
    .mobile-card .text-muted {
        font-size: 0.85em;
    }
}

/* 桌面端悬停效果 */
@media (min-width: 768px) {
    .card {
        transition: transform 0.2s;
    }
    
    .card:hover {
        transform: translateX(4px);
    }
}

    /* set.php; */
        .text-white {
            color: #000000 !important;
        }

.btn-outline-hyzx {
    background-color: #2a2a2c;
    border-color: #000000;
    color: #ffc300;
}

    /* set.php; */
    
 .btn-outline-success {
    background-color: #f0f2ff;
    border-color: #ffffff;
    color: #7888fc;
}   
    
.btn-outline-primary {
    background-color: #ffd368;
    border-color: #ffffff;
    color: #00a349;
}

.btn-outline-danger {
    background-color: #ffa3b3;
    border-color: #ffffff;
    color: #832131;
}

.form-select {
    border-color: #e4e6ef;
    padding: .65rem 1rem;
    background-color: rgba(200, 200, 200, 0.5);
}

.form-control {
    border-color: #e4e6ef;
    padding: .65rem 1rem;
    background-color: rgba(200, 200, 200, 0.5);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: rgba(200, 200, 200, 0.5);
}
.input-group-text {
    background-color: rgba(200, 200, 200, 0.5);
    border-color: rgb(255 255 255);
}
.form-control:focus {
    color: #212529;
    background-color: transparent;
    border-color: #525252;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(0 0 0 / 25%);
}

.form-select:focus {
    border-color: #525252;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(0 0 0 / 25%);
}


.modal-content {
    background-color: #ffffff75;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    box-shadow: 0 5px 12px 0 rgb(136 161 206 / 30%);
}

/*add*/

.hover-elevate {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-elevate:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgb(136 161 206 / 30%) !important;
}

.text-gradient-primary {
    background: linear-gradient(45deg, #4e54c8, #8f94fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-hover-gradient {
    background-size: 200% auto;
    transition: 0.5s;
    background-image: linear-gradient(
        45deg,
        #f6d365 0%,
        #fda085 51%,
        #f6d365 100%
    );
}

.btn-primary.btn-hover-gradient {
    background-image: linear-gradient(
        45deg,
        #4e54c8 0%,
        #8f94fb 51%,
        #4e54c8 100%
    );
    color: white;
}

.btn-success.btn-hover-gradient {
    background-image: linear-gradient(
        45deg,
        #28a745 0%,
        #20c997 51%,
        #28a745 100%
    );
    color: white;
}

.btn-hover-gradient:hover {
    background-position: right center;
}

.form-control-lg {
    border-radius: 0rem!important;
}

/*github*/
  .btn-container {
    margin-top: 6px; 
}

/*底部页脚css*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #ffa500;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-fen {
  background-color: #e76dcb
}
.github-badge .bg-red {
  background-color: #f55066
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-bei {
  background-color: #32CD32
}

.github-badge .bg-cai {
    background-image: -webkit-linear-gradient(
0deg, #3ca5f6 0%, #a86af9 100%);
.carda {
	min-width: 170px;
	max-width: 100%;
	background-color: #1f2937;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0,0,0,.2);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 20px
}

.headera {
	display: flex;
	align-items: center;
	background-color: rgba(128,128,128,.5);
	padding: 10px;
	border-radius: 10px
}

.carda img {
	width: 40px;
	height: 40px;
	border-radius: 50%
}

.carda-info {
	display: flex;
	margin-left: 15px;
	flex-direction: column;
	text-align: left
}

.name {
	font-size: 16px;
	color: #ffbe00
}

.expiry {
	font-size: 12px;
	color: #fff;
	margin-top: 5px
}

.privileges {
	margin-top: 20px;
	font-size: 16px;
	color: #ffbe00
}

.privileges-details {
	font-size: 12px;
	color: #fff;
	margin-top: 10px;
	line-height: 1.5
}

.button {
	background-color: #fff;
	color: #000;
	padding: 10px 20px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	margin-left: auto
}

.download-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	cursor: pointer;
	color: #fff
}

.download {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	cursor: pointer;
	color: #000
}

.info-container {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.info-text {
	margin-right: 10px;
	color: #96ff00
}

.container {
	max-width: 400px;
	width: 100%
}

@media (max-width:480px) {
	.container {
		width: 90%;
		padding-left: 0;
		padding-right: 0
	}
}
/*github*/