/**
 * 苹果浏览器(Safari/iOS)兼容性样式
 * 禁用星空等特效，使用简单的深蓝色背景
 */

/* 检测Safari浏览器并应用简化样式 */
@supports (-webkit-touch-callout: none) {
  /* 登录面板 - 使用简单深蓝色背景 */
  #authPanel {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%) !important;
    animation: none !important;
    transition: none !important;
  }

  /* 禁用星空背景 */
  #starfield {
    display: none !important;
    visibility: hidden !important;
  }

  /* 禁用粒子效果 */
  .particles {
    display: none !important;
    visibility: hidden !important;
  }

  /* 简化登录表单样式 - 使用柔和的半透明深色背景 */
  .login-form {
    animation: none !important;
    transform: none !important;
    transform-style: flat !important;
    backdrop-filter: none !important;
    background: rgba(30, 40, 80, 0.85) !important;
    border: 2px solid rgba(100, 150, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* 优化登录框内部文字颜色 */
  .login-form h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  }

  /* 优化标签颜色 */
  .login-form label {
    color: #e0e0ff !important;
  }

  /* 优化输入框背景 */
  .login-form input[type="text"],
  .login-form input[type="password"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(100, 150, 255, 0.3) !important;
    color: #ffffff !important;
  }

  .login-form input[type="text"]:focus,
  .login-form input[type="password"]:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(100, 180, 255, 0.6) !important;
    outline: none !important;
  }

  /* 禁用发光动画 */
  .login-form::before {
    display: none !important;
    visibility: hidden !important;
    animation: none !important;
    content: none !important;
  }

  /* 禁用所有浮动动画 */
  @keyframes float {
    display: none !important;
  }

  /* 禁用发光动画 */
  @keyframes glowing {
    display: none !important;
  }

  /* 确保登录框居中 */
  #authPanel {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 15vh !important;
  }

  /* 移除3D效果 */
  .login-form {
    transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* 禁用所有canvas元素（星空等） */
  #starfield,
  canvas {
    display: none !important;
    visibility: hidden !important;
  }

  /* 禁用所有动画 */
  * {
    animation: none !important;
    -webkit-animation: none !important;
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* 特定允许的元素恢复动画 */
  .btn {
    transition: transform 0.2s !important;
    -webkit-transition: transform 0.2s !important;
  }
}

/* 针对iOS设备的额外优化 */
@supports (-webkit-overflow-scrolling: touch) {
  /* iOS设备使用更简单的背景 */
  #authPanel {
    background: #1a237e !important;
  }

  /* iOS登录框使用更柔和的深色 */
  .login-form {
    background: rgba(26, 35, 126, 0.9) !important;
    border: 1px solid rgba(100, 150, 255, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }

  .login-form h2 {
    color: #ffffff !important;
  }

  .login-form label {
    color: #d0d0ff !important;
  }

  .login-form input[type="text"],
  .login-form input[type="password"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(100, 150, 255, 0.25) !important;
    color: #ffffff !important;
  }
}