body {
      background: #18181b;

     
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      font-family: Arial, sans-serif;
    }
	.main{ width:640px; margin:0 auto; background:#FFF; padding:20px;  min-height: 100vh; background:url(../images/bdbg.png) no-repeat; background-size:100% 100%;}
	.head{ width:100%; overflow:hidden;}
	.head h1{ float:left; margin:0px; padding:0px; color:#fae004; max-width:65%;}
	.head h1 img{ max-width:100%;}
	.head ul{ float:right; display:flex; gap:2px; list-style:none;}
	.head ul li{}
	.head ul li a{ font-size:18px; font-weight:bold; text-decoration:none; color:#fae004;  padding:10px 15px; border-radius:10px;  background-color: hsla(200, 50%, 80%, 0.5); /* 浅蓝色 + 透明度 */
  backdrop-filter: blur(8px);
  border: 1px solid hsla(200, 50%, 90%, 0.5);}
	.uptime{ font-size:1.4rem; font-weight:bold; font-style:italic; line-height:50px; color:#fae004; margin:3rem 0;}
	.boxcolor{ display:flex; gap:15px; justify-content: space-between;
    align-items: center; text-transform: capitalize;}
	.newskj{ width:100%;}
	.first{ display:flex; color:#FFF;
	border:1px solid #FFF;
	font-weight:bold;
	font-size:1.5rem;
	  border-radius:10px;
      justify-content:space-between;
      align-items: center; padding:20px; margin-bottom:20px; overflow:hidden;   background-color: hsla(200, 50%, 80%, 0.3); /* 浅蓝色 + 透明度 */
  backdrop-filter: blur(8px);
  border: 1px solid hsla(200, 50%, 90%, 0.5);}
	 .first .box2{ display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
	  .first .box2 span{ font-weight:normal;}
	  #number{ font-weight:bold;}
	  .nr{ color:#fae004;}
    .roulette-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .roulette {
      position: relative;
      width: 600px;
      height: 600px;
      margin: 0 auto 14px auto;
      background:url(./images/bj.png);
    }

    .base-wheel, .number-wheel, .color-wheel, .pointer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .base-wheel {
      z-index: 1;
    }

    .number-wheel {
      z-index: 2;
      transition: transform 9.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .color-wheel {
      z-index: 3;
      transition: transform 9s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .pointer {
      z-index: 4;
      transition: transform 8.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
	#period1ColourContainer,#period2ColourContainer{ display:flex; align-items: center; gap:15px;}
	#period1ColourName,#period2ColourName{ font-weight:bold;}

    /* 定义结果高亮动画 */
    @keyframes background-flash {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* 定义数字闪烁动画 - 保持在原位置只做放大缩小 */
    @keyframes text-highlight {
      0%, 100% {
        font-size: 14px;
        fill: #ffffff;
        filter: drop-shadow(0 0 2px #ffffff);
      }
      50% {
        font-size: 20px;
        fill: #ffffff;
        filter: drop-shadow(0 0 8px #ffffff) brightness(1.5);
        font-weight: bold;
      }
    }

    /* 高亮的数字类 */
    .highlighted-number {
      animation: text-highlight 0.8s ease-in-out infinite;
    }

    /* 确保数字闪烁效果可以叠加在所有层之上 */
    .number-highlight {
      animation: text-highlight 1s ease-in-out infinite;
      z-index: 100 !important;
    }

    .control-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
      background: #232337;
      border-radius: 12px;
      margin-bottom: 14px;
      padding: 16px 20px;
      color: #fff;
      font-size: 16px;
      box-shadow: 0 6px 32px #0005;
      width: 480px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }

    .input-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .input-row label {
      margin-right: 6px;
      white-space: nowrap;
    }

    .control-bar input {
      background: #18181b;
      color: #fff;
      border: 1px solid #333;
      border-radius: 5px;
      font-size: 15px;
      padding: 4px 10px;
      width: 55px;
      outline: none;
    }

    .time-input {
      width: 140px !important;
    }

    .color-select {
      background: #18181b;
      color: #fff;
      border: 1px solid #333;
      border-radius: 5px;
      font-size: 15px;
      padding: 4px 8px;
      width: 80px;
      outline: none;
    }

    .result-output {
      margin-top: 15px;
      font-size: 21px;
      color: #fff;
      font-weight: bold;
      letter-spacing: 2px;
      min-height: 28px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .result-color-box {
      width: 24px;
      height: 24px;
      display: inline-block;
      border-radius: 2px;
      border: 1px solid #ffffff80;
    }

    .color-box {
      width: 24px;
      height: 24px;
      display: inline-block;
      border-radius: 2px;
      border: 1px solid #ffffff80;
    }
	
	.black{ background:rgb(32, 29, 29);}
	.red{ background:rgb(211, 35, 35);}
	.green{ background:rgb(41, 192, 119);}