body { 
    padding: 0; 
    margin: 0;
    background: url('img_login_bg.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
  }
  
  #container { 
    position: absolute;
    /* 移除overflow: hidden，避免裁剪内容 */
    overflow: visible;
    background: transparent !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  #container.desktop { 
    width: 100vw; 
    height: 100vh; 
    margin: 0 auto; 
    /* 移除 aspect-ratio: 9/16; */
  }
  #container.mobile { width: 100vw; height: 100vh }
  #canvas { 
    background: transparent;  /* 将原来的#231F20改为transparent */
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
  }
  .mobile #canvas { width: 100%; height: 100% }
  #loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    text-align: center; /* 使内部内容居中 */
  }
  
  #logo {
    width: 30vw;
    height: auto;
    aspect-ratio: 230/269;
    background: url('logo-dark.png') no-repeat center;
    background-size: contain; /* 使图片完整显示，不裁切 */
    margin: 0 auto;
  }
  
  #progress-bar-empty {
    width: 50vw; /* 占画布一半宽度 */
    height: 30px; /* 增加高度 */
    margin: 10px auto 0;
    background: url('progress-bar-empty-dark.png') no-repeat center center;
    background-size: cover; /* 改为cover以填充整个区域 */
    border-radius: 15px; /* 添加圆角 */
    position: relative; /* 为百分比文字定位 */
    overflow: visible; /* 确保文字不被裁剪 */
  }
  
  #progress-bar-full {
    width: 0%;
    height: 30px; /* 与empty保持一致 */
    margin-top: 0; /* 移除margin-top，因为现在是子元素 */
    background: url('progress-bar-full-dark.png') no-repeat center center;
    background-size: cover; /* 改为cover以填充整个区域 */
    border-radius: 15px; /* 添加圆角 */
    position: relative; /* 为百分比文字定位 */
    transition: width 0.1s ease; /* 添加平滑过渡效果 */
    overflow: visible; /* 确保文字不被裁剪 */
  }
  
  /* 进度百分比文字样式 - 放在进度条empty的居中位置，不跟随full变化 */
  .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    /* 确保没有背景色和边框 */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    /* 固定在进度条empty的中间，不跟随进度条宽度变化 */
    width: auto;
    height: auto;
  }
  
  /* 提示文字样式 - 放在进度条下面，字体更小 */
  .loading-tip {
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #c4c8d3;
    font-size: 14px;
    z-index: 1000;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* 确保没有背景色和边框 */
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
  #warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
  input:focus { font-size: 16px}