#page-loader {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.95);
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s;
      opacity: 1;
      pointer-events: auto;
    }
    #page-loader.hide {
      opacity: 0;
      pointer-events: none;
    }
    .load_11 {
      width: 50px;
      height: 40px;
      display: inline-block;
      text-align: center;
      font-size: 10px;
    }
    .load_11 > div {
      background-color: #61E8EA;
      height: 100%;
      width: 6px;
      display: inline-block;
      -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
      animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }
    .load_11 .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
    .load_11 .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
    .load_11 .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
    .load_11 .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
    @-webkit-keyframes sk-stretchdelay {
      0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
      20% { -webkit-transform: scaleY(1.0) }
    }
    @keyframes sk-stretchdelay {
      0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
      }
      20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
      }
    }
    /* 使用项目根目录下的本地 woff2 字体文件（如不存在 Black 文件则回退到 Regular） */
    @font-face {
      font-family: 'HarmonyOS Sans SC';
      src: url('../HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'HarmonyOS Sans SC';
      src: url('../HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --app-font: 'HarmonyOS Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
      --app-font-weight: 900;
    }

    html, body {
      margin: 0;
      padding: 0;
      font-family: var(--app-font);
      font-weight: var(--app-font-weight);
      background: #000;
      color: #eee;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    h1, h2, h3, h4, h5, h6, strong, b {
      font-weight: var(--app-font-weight);
    }
    .parallax-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: url('https://webstatic.cn-nb1.rains3.com/5712%C3%973360.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }
    header {
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 1.5rem;
      backdrop-filter: blur(12px);
      background: rgba(0, 0, 0, 0.1);
      z-index: 1000;
      box-sizing: border-box;
    }
    .logo-nav-container {
      display: flex;
      align-items: center;
      flex: 1;
    }
    #logo-img {
      height: 32px;
      margin-right: 1.2rem;
    }
    .nav-links {
      display: flex;
    }
    .nav-links a {
      color: #eee;
      margin-right: 1.2rem;
      text-decoration: none;
      transition: 0.3s;
      font-size: 0.95rem;
    }
    .nav-links a:hover {
      color: #fff;
      text-shadow: 0 0 4px #fff;
    }
    .user-section {
      display: flex;
      justify-content: flex-end;
      flex: 1;
    }
    .glass-button {
      display: flex;
      align-items: center;
      padding: 0.4rem 1rem;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 100px;
    }
    .glass-button:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.05);
    }
    .login-btn {
      color: #eee;
      text-decoration: none;
      font-size: 0.95rem;
      white-space: nowrap;
      width: 100%;
      text-align: center;
    }
    .user-info {
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      width: 100%;
    }
    .username {
      margin-right: 0.8rem;
      font-size: 0.95rem;
      color: #eee;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .dropdown-content {
      position: absolute;
      top: 100%;
      right: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(12px);
      border-radius: 8px;
      padding: 0.8rem;
      min-width: 160px;
      box-shadow: 0 4px 16px rgb(0,0,0);
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .dropdown-content.show {
      opacity: 1;
      visibility: visible;
    }
    .dropdown-content span {
      display: block;
      padding: 0.3rem 0.5rem;
      font-weight: bold;
      color: #a1e5ef;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 0.5rem;
    }
    .dropdown-content a {
      display: block;
      padding: 0.5rem;
      color: #eee;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    .dropdown-content a:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }
    main {
      position: relative;
      z-index: 2;
      padding-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding-bottom: 50px;
    }
    .status {
      margin-bottom: 1rem;
      font-size: 1.2rem;
      text-align: center;
      padding: 0.5rem;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(6px);
      width: 95%;
      max-width: 800px;
    }
    .status.online { 
      color: #0f0; 
      border: 1px solid rgba(0, 255, 0, 0.2);
    }
    .status.offline { 
      color: #f33; 
      border: 1px solid rgba(255, 0, 0, 0.2);
    }
    
    /* 3D卡片容器样式 */
    #table-container {
      perspective: 1000px;
      width: 95%;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 3D毛玻璃卡片效果 */
    table {
      border-collapse: collapse;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      overflow: hidden;
      backdrop-filter: blur(8px);
      animation: fadeIn 1s ease-out, gentleSway 8s infinite ease-in-out;
      width: 100%;
      transform-style: preserve-3d;
      transform: translateZ(20px);
      transition: transform 0.3s cubic-bezier(.4,2,.3,1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    @keyframes gentleSway {
      0%, 100% { transform: translateZ(20px) rotateX(0.5deg) rotateY(0.5deg); }
      25% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(-1deg); }
      50% { transform: translateZ(20px) rotateX(0.5deg) rotateY(1deg); }
      75% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(0.5deg); }
    }

    table.tilting {
      animation: none;
      transition: transform 0.1s linear;
    }
    
    table.hovering {
      animation: gentleHover 2s infinite cubic-bezier(.4,2,.3,1);
    }
    
    @keyframes gentleHover {
      0%, 100% { transform: translateZ(20px) translateY(0); }
      50% { transform: translateZ(20px) translateY(-5px); }
    }
    
    th, td {
      padding: 0.8rem 1rem;
      text-align: left;
      font-size: 0.9rem;
    }
    th {
      background: rgba(255, 255, 255, 0.1);
      font-weight: bold;
      color: #a1e5ef;
    }
    tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.03);
    }
    .dl-btn, .chart-btn {
      padding: 0.3rem 0.8rem;
      font-size: 0.85rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      cursor: pointer;
      transition: 0.3s ease;
      white-space: nowrap;
    }
    .dl-btn:hover, .chart-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.05);
    }
    .chart-name-btn {
      padding: 0.3rem 0.7rem;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      font-size: 0.85rem;
      text-decoration: none;
      display: inline-block;
      transition: 0.3s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }
    .chart-name-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.05);
    }
    #lightbox {
      display: flex;
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }
    #lightbox.active {
      opacity: 1;
      visibility: visible;
    }
    #lightbox img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      animation: zoomIn 0.3s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes zoomIn {
      from { transform: scale(0.7); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .modal {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      display: none;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(6px);
      z-index: 9999;
    }
    .modal-content {
      background: rgba(255,255,255,0.08);
      padding: 1rem 1.5rem;
      border-radius: 12px;
      color: #fff;
      backdrop-filter: blur(12px);
      max-width: 300px;
      width: 90%;
      animation: zoomIn 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .modal-content h3 {
      margin-top: 0;
      font-size: 1.1rem;
      color: #a1e5ef;
    }
    .modal-content ul {
      list-style: none;
      padding-left: 0;
    }
    .modal-content li {
      padding: 0.2rem 0;
    }
    .highlight-host {
      font-weight: bold;
      color: #61E8EA;
    }
    .state-label {
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-size: 0.8rem;
    }
    .state-selecting {
      background: rgba(255, 215, 0, 0.2);
      color: #61E8EA;
    }
    .state-ready {
      background: rgba(0, 255, 0, 0.2);
      color: #0f0;
    }
    .state-playing {
      background: rgba(255, 0, 0, 0.2);
      color: #f33;
    }
    /* 响应式调整 */
    @media (max-width: 768px) {
        header {
        flex-wrap: wrap;
        }
        .logo-nav-container {
        flex: 0 0 100%;
        margin-bottom: 0.5rem;
        }
        .user-section {
        flex: 0 0 100%;
        justify-content: flex-end;
        }
        .nav-links a {
        margin-right: 1rem;
        }
        .username {
        max-width: 80px;
        }
        .control-buttons {
        flex-direction: column;
        }
        .cards-container {
        grid-template-columns: 1fr;
        }
        .filters {
        flex-direction: column;
        }
        .users-table {
        display: block;
        overflow-x: auto;
        }
        .batch-form {
        flex-direction: column;
        align-items: flex-start;
        }
        th, td {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
        }
        table {
        display: block;
        overflow-x: auto;
        }
        .search-container {
        width: 90%;
        }
    }
    #auth-modal input {
      box-sizing: border-box;
      display: block;
      margin: 0.5rem 0;
      padding: 0.8rem;
      width: 100%;
      border: none;
      border-radius: 8px;
      background: rgba(255,255,255,0.1);
      color: #fff;
      backdrop-filter: blur(8px);
      font-size: 0.95rem;
      outline: none;
      transition: all 0.3s ease;
    }
    #auth-modal input:focus {
      box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.4);
    }
    #auth-modal input.collapsed {
      display: none;
      margin: 0;
      height: 0;
      padding: 0;
    }
    #auth-modal button {
      width: 100%;
      margin: 0.5rem 0;
      padding: 0.8rem;
      font-size: 1rem;
      border-radius: 8px;
      border: none;
      background: rgba(255,255,255,0.1);
      color: #fff;
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    #auth-modal button:hover {
      background: rgba(255,255,255,0.15);
      transform: translateY(-2px);
    }
    .glass-card {
      position: relative;
      background: rgba(255,255,255,0.08);
      padding: 1.5rem;
      border-radius: 16px;
      color: #fff;
      backdrop-filter: blur(20px);
      width: 320px;
      max-width: 90%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    .checkbox-container {
      display: flex;
      align-items: center;
      margin: 0.5rem 0;
      gap: 0.5rem;
      flex-wrap: nowrap;
      cursor: pointer;
    }
    .checkbox-container input[type="checkbox"] {
      margin-right: 0.5rem;
    }
    #table-tilt-overlay {
      position: fixed;
      pointer-events: auto;
      background: transparent;
      z-index: 1002;
      cursor: default;
    }
    /* 复选框容器修复 */
    .checkbox-container {
      display: flex;
      align-items: center;
      margin: 0.5rem 0;
      gap: 0.5rem;
      flex-wrap: nowrap;
      cursor: pointer;
    }
    .glass-checkbox {
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 0;
      flex: 0 0 auto;
      overflow: visible;
    }
    .glass-checkbox input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      position: relative;
      box-sizing: border-box;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: #fff;
      border: 2px solid #61E8EA;
      box-shadow: 0 1px 4px rgba(97,232,234,0.08);
      margin: 0;
      cursor: pointer;
      outline: none;
    }
    .glass-checkbox input[type="checkbox"]:checked {
      background: #61E8EA;
      border-color: #61E8EA;
    }
    .checkbox-text {
      display: inline-block;
      white-space: nowrap;
    }
    #agreement-container label {
      display: inline-block;
      white-space: nowrap;
      margin: 0;
    }
    .glass-checkbox {
      overflow: visible; /* 允许伪元素显示在容器内对齐 */
    }
    /* 更可靠的勾形（避免镜像并确保居中）*/
    .glass-checkbox.checked::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 12px;
      border: 2px solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      left: 50%;
      top: 50%;
      margin-left: -4px;
      margin-top: -7px;
      box-shadow: 0 0 6px rgba(255,255,255,0.08);
      pointer-events: none;
    }
    /* 文字悬停效果 */
    th:hover, td:hover, .status:hover, .modal-content h3:hover, .chart-name-btn:hover {
      color: #61E8EA !important;
      text-shadow: 0 0 8px #61E8EA88, 0 0 2px #61E8EA;
      cursor: pointer;
      transition: color 0.2s, text-shadow 0.2s;
      text-decoration: none;
    }

    /* 卡片悬停效果 */
    table:hover, .modal-content:hover, .glass-card:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 8px 32px rgba(97,232,234,0.25), 0 2px 8px rgba(0,0,0,0.18);
      border: 1.5px solid #61E8EA;
      transform: scale(1.03);
      transition: all 0.25s cubic-bezier(.4,2,.3,1);
      z-index: 2;
    }

    /* 用户协议链接样式 */
    #agreement-container a {
      color: #61E8EA !important;
      text-decoration: none !important;
      font-weight: bold;
    }

    button, .pagination-btn, .time-range-btn, .dl-btn, .chart-btn, .glass-button, #auth-modal button, a.btn, .chart-name-btn {
      padding: 0.3rem 0.8rem;
      font-size: 0.85rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      cursor: pointer;
      transition: transform 0.18s ease, background 0.18s ease;
      white-space: nowrap;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
    }

    button:hover, .pagination-btn:hover, .time-range-btn:hover, .dl-btn:hover, .chart-btn:hover, .glass-button:hover, a.btn:hover, .chart-name-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.05);
    }

    .pagination-btn[disabled], .pagination-btn:disabled {
      opacity: 0.5;
      transform: none;
      cursor: default;
    }

    .time-range-btn {
      border-radius: 999px;
    }

    .time-range-btn.active {
      background: linear-gradient(90deg,#61E8EA,#4db6ff);
      color:#000;
      border: 1px solid rgba(255,255,255,0.25);
      box-shadow: 0 6px 18px rgba(97,232,234,0.12);
      transform: none;
    }