:root {
}
*{margin:0;padding:0;}
body{padding:0 25%;
font-family: sans-serif;
transition: all 0.3s ease;
background:url('logo.png') no-repeat center center;
background-attachment: fixed;
fontFamily: zt10;
}
/*圆角阴影 */
.yjyy{box-shadow: 2px 2px 5px gray;;border-radius: 10px;}
/* 横向导航栏*/
.hxdhl,#hxdhl{max-width:100%;overflow-x:auto;padding:2px 7px;z-index:2;display: flex;align-items: center;transition: all .3s ease;background:transparent;backdropFilter:none;position:fixed;}
.hxdhl span{display: inline-flex;  /* 保持 span 是行内元素 */
  align-items: center;   /* 垂直居中 */
  justify-content: center;   /* 水平居中 */
}
/*按钮 */
.button{margin-right: 3px;color: #fff;padding: 8px 15px;border-style:3px solid #fff;border-radius: 6px;background: #555;box-shadow: 2px 2px 5px gray;user-select: none;transition: all 0.1s;display: inline-block;
}
.button:hover {
  background-color: #222;transform: scale(0.98);
}
/* 主页封面 */
.banner {
  width: 100%;
  overflow: hidden;
  transition: height .15s ease-out;}
.banner img {
  width: 100%;
  object-fit: cover;}
/*网格视图列表*/
 .xxul{list-style:none;padding:0px;user-select: none;}
 .xxul li{width:70px;height:70px;float:left;border-radius: 10px;}
 .xxul li:active,.djtm:active{box-shadow: inset 1.2px 1.2px 5px -3px rgba(0,0,0,0.4);
text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.4);background: rgba(0,0,0,0.05);}
 .xxul img{width:40px;height:40px;margin-left:15px;margin-top:6px;}
 .xxul p{text-align:center;margin-top:-3px;font-size:12px;}
/*清楚浮动 */
.xxul:after,.qcfd {content:"";display:table;clear:both;}
/*toast弹窗*/
#toastdiv{position:fixed;width:100%;text-align:center;pointer-events:none;top:60px;z-index:4;}
.toast {
  padding:8px;display: inline-block;margin:10px;color: #fff;padding: 10px;border-radius: 6px;background-color: rgba(37, 38, 45, 0.9);z-index:1;}
#tcdiv,#tcdiv2{display:none;position: fixed;background:rgba(200,200,200,0.4);top:0;left:0;bottom:0;right:0;backdrop-filter: blur(6px);z-index:3;padding: 10% 6%;
}
#tcdiv > div{display:block;background:#fff;border-radius: 10px;color:#000;padding:10px;pointer-events: auto;max-height:85%;overflow-y:auto;}
/*右下角菜单*/
.yxjcd,#yxjcd {position:fixed;bottom:20px;top:auto;right:10px;left:auto;z-index:1;
display: flex; flex-direction: column;}
.yxjcd img {
  width:23px;padding:5px;}
input,input[type=button] {
width:100%;
padding:10px;
background:rgba(255,255,255,255);border-radius:8px;
}
input::-webkit-input-placeholder { /* 输入框提示文字的颜色 */ 
color: #000;
}
/* SVG CSS */
.dark-mode-svg {
  filter: brightness(0) invert(1);
}

/*文章列表*/
.wz-list,.ul2 li,.yxjcd img{
  list-style-type: none;
  padding:6px 8px 6px;
  margin:3px 0px;
  border-radius: 6px;
  box-shadow: 1.2px 1.2px 5px -3px rgba(0,0,0,0.4),-0.1px -0.1px 5px -3px rgba(0,0,0,0.4);
  background:rgba(255,255,255,0.25);user-select: none;transition: all 0.1s;
}
.wz-ul li{margin:5px 0px;}
.wz-ul li a{
text-decoration: none;transition: color 0.3s;font-family: "Microsoft YaHei", sans-serif;
}
.wz-list img[src$=".svg"] {
  width:14px;margin-bottom:-4px;
}
.wz-list:hover,.ul a:hover,.ul2 li:hover{
  box-shadow: inset 1.2px 1.2px 5px -3px rgba(0,0,0,0.4);
text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.4);background: rgba(0 ,0 ,0 , 0.05);
  padding:5px;margin-top:5px;margin-left:5px;transform: scale(0.99);
}
/*主页文章列表*/
.wz-gkcs,.wz-zz,.wz-bq,.wz-sj{
font-size:10px;
}
.wz-sj{
}
.wz-gkcs{
display: inline-block;
margin-left:-2px;
}
.wz-zz{
color:#008844;
}
.wz-bt{
font-size:15px;
}
.wz-bq{
}
code{border-radius:8px;}
/*开关*/
.switch {position: relative;display: inline-block;width: 60px;height: 34px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: .4s;border-radius: 34px;}
.slider:before {position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;transition: .4s;border-radius: 50%;}
input:checked + .slider {background-color: #2196F3;}input:checked + .slider:before {transform: translateX(26px);}
/*开关标题与描述*/
.header {background: linear-gradient(135deg, #8e44ad, #9b59b6);color: white;padding: 25px 20px;text-align: center;}
.header h1 {font-size: 1.8rem;font-weight: 600;
margin-bottom: 8px;}
.header p {opacity: 0.9;font-size: 0.95rem;}
.settings-list {padding: 0;}
/* 设置项样式 */
.setting-item {padding: 20px;border-bottom: 1px solid #f0f0f0;display: flex;flex-direction: column;}
.setting-item:last-child {border-bottom: none;}
/* 左侧标题和开关容器 */
.setting-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;}
.setting-title {font-size: 1.3rem;font-weight: 600;color: #1a1a1a;}
/* 描述文字样式 */
.setting-description {color: #666;font-size: 0.95rem;line-height: 1.5;padding-left: 2px;}

/* 响应式调整 */
@media (max-width: 600px) {
 .container {border-radius: 12px;}
 .header {padding: 20px 16px;}
 .setting-item {padding: 18px 16px;}
 .setting-title {font-size: 1.2rem;}
 .btn {padding: 12px 16px;font-size: 0.95rem;}
 .zydh{top:-70;}
 body {padding:0 0;}
}
@media (min-width: 600px) {
 #tcdiv {padding: 10% 30%;}
 #tcdiv > div{width:auto;}
 body {padding:0 25%;}
}

/* 深色/夜间模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}


/*谷歌material输入框*/
/* 材料设计输入框 */ .material-input-container { position: relative; margin-top: 10px; } .material-input { width: 100%; padding: 18px 0 8px 0; border: none; border-bottom: 1px solid #bdc3c7; font-size: 1rem; color: #2c3e50; background-color: transparent; transition: all 0.3s ease; outline: none; } .material-input:focus { border-bottom-color: #3498db; } .material-input:focus + .material-label, .material-input:not(:placeholder-shown) + .material-label { top: 0; font-size: 0.85rem; color: #3498db; } .material-label { position: absolute; top: 18px; left: 0; color: #7f8c8d; font-size: 1rem; transition: all 0.3s ease; pointer-events: none; } .material-underline { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3498db; transition: all 0.3s ease; } .material-input:focus ~ .material-underline { width: 100%; }
/* 样式1: 简约线框输入框 */
.simple-input {
width: 100%;padding: 12px 15px;border: 2px solid #e0e6ed;border-radius: 8px;font-size: 1rem;color: #2c3e50;transition: all 0.3s ease;outline: none;background-color: #fff;
}
.simple-input:focus {border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);}
.simple-input::placeholder {color: #b2bec3;
}
/*备案号样式*/
.beian {font-size: 12px;color: #666;text-decoration: none;transition: color 0.3s;font-family: "Microsoft YaHei", sans-serif;}
.beian:hover {color: #1890ff;text-decoration: underline;}
/*页面内容搜索框*/
.search-container {
position: fixed;
top: 10px;
right: 10px;
background: white;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
.search-highlight {
background-color: #ffeb3b;
border-radius: 2px;
}
.search-nav {
display: flex;
gap: 5px;
margin-top: 5px;
}
/*输入框*/
.srk {
  width: 100%
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin-top:8px
  background-color:rgba(192,192,192,0.6);
}

.srk:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74,144,226,0.2);
  outline: none;
}
/*水平轮播*/
 .carousel {
position: relative;
width: 80%;
margin:5% 10%;
max-width: 800px;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 5px 5px rgba(0,0,0,0.4);
cursor: grab;
z-index:1;
text-align:center;
}

.carousel:active {
cursor: grabbing;
}

.track {
display: flex;
height: 100%;
transition: transform 0.4s ease-out;
will-change: transform;
}

.slide {
min-width: 100%;
height: 100%;
user-select: none;
-webkit-user-drag: none;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
display: block;
}
/* 轮播图指示器 */
.dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: all 0.3s;
}
.dot.active {
background: #fff;
transform: scale(1.3);
}
/*全屏樱花动画*/
#sakura-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 关键：让点击穿透到下层内容 */
z-index: 9999; /* 确保在最顶层 */
overflow: hidden;
}
/* 樱花花瓣 */
.sakura-petal {
position: absolute;
top: -50px;
opacity: 0.8;
will-change: transform;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
/* 花瓣形状 */
.sakura-petal::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ffb7c5 0%, #ffc0cb 50%, #ff69b4 100%);
border-radius: 150% 0 150% 0;
transform: rotate(-45deg);
box-shadow: inset 0 0 8px rgba(255,255,255,0.4);
}
/* 大小 */
.sakura-petal.small::before { width: 12px; height: 12px; }
.sakura-petal.medium::before { width: 18px; height: 18px; }
.sakura-petal.large::before { width: 24px; height: 24px; }
/* 颜色变体 */
.sakura-petal.light::before {
background: linear-gradient(135deg, #ffe4e1 0%, #ffb7c5 100%);
}
.sakura-petal.dark::before {
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
}
.sakura-petal.white::before {
background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 100%);
}
/* 密度指示器 */
.density-indicator {
position: fixed;
top: 45px;
right: 20px;
z-index: 10000;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 20px;
color:#666;
font-size: 0.9rem;
opacity: 0;
transition: opacity 0.3s;
pointer-events:none;
}

.density-indicator.show {
opacity: 1;
}
/* 动画类 */
.fade-up {
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.3s forwards;
}

.fade-down {
opacity: 0;
transform: translateY(-30px);
animation: fadeDown 0.3s forwards;
}

.fade-left {
opacity: 0;
transform: translateX(30px);
animation: fadeLeft 0.3s forwards;
}

.fade-right {
opacity: 0;
transform: translateX(-30px);
animation: fadeRight 0.3s forwards;
}

.fade-scale {
opacity: 0;
transform: scale(0.5);
animation: fadeScale 0.3s forwards;
}
.fade-scale2 {
opacity: 1;
transform: scale(1);
animation: fadeScale2 0.3s forwards;
}
.tm1{
opacity: 0;
animation: tm1 0.3s forwards;
}
.tm2{
opacity: 1;
animation: tm2 0.3s forwards;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeDown {
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeLeft {
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeRight {
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeScale {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes tm1 {
to {opacity: 1;}
}
@keyframes tm2 {
to {opacity: 0;}
}
@keyframes fadeScale2 {
to {
opacity: 0;
transform: scale(0.5);
}
}

/* 弹窗关闭动画 */
.fade-out {
opacity: 0;
transition: opacity 0.3s;
}
/*预加载*/
/* 过渡遮罩层 */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}
/* 加载指示器 */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 下拉框容器 */
.select-wrapper {
  position: relative;
  width: 200px;
}

/* 下拉框本身 */
.styled-select {
  width: 100%;
  padding: 12px 40px 12px 15px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background-color: white;
  appearance: none;  /* 去掉默认箭头 */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 鼠标悬停 */
.styled-select:hover {
  border-color: #007bff;
}
/* 获得焦点 */
.styled-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* 自定义箭头 */
.select-wrapper::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #666;
  pointer-events: none;  /* 点击穿透到 select */
}

/* 选项样式（部分浏览器支持） */
.styled-select option {
  padding: 10px;
}
@font-face {
 /*游趣体演示版/2.2mb*/
 font-family: 'zt10';
 src:url(/wj/css/zt/youqutiyanshiban.ttf);
}
/*关于页列表*/
.gy {list-style:none;margin:5px;overflow-x: hidden;transition: 0.2s;
  }
.gy li {height:36px;border-radius:10px;background-color:#78909C;padding:8px;margin-bottom:5px;}
.gy li:hover {background:#455A64;}
.gy li img {width:35px;height:35px;margin-bottom:-10px;}
.gy li span {color:#fff;font-size:20px;margin-left:10px;}
/*水滴*/
.sd:before{
content: ";
position: absolute;
left:30px;
top:64pX;
width:24px:
aspect-ratio: 1;
background: rgba(255, 255, 255, 0.99);
border-radius: 58% 42% 48% 52%/ 60% 49% 51% 40%;transition: 0.3s;
}