/* #devices only — ClearLink desktop-sync 1:1 + v2ray. */

html body #devices.devices-block {
  /* keep QingLian dark section; card itself is the ClearLink white panel */
}

html body #devices .devices-panel-wrap {
  max-width: 920px !important;
  width: min(920px, calc(100% - 2 * var(--gutter, 20px))) !important;
  margin: clamp(24px, 3.5vw, 32px) auto 0 !important;
  padding-bottom: clamp(10px, 2.5mm, 14px) !important;
}

html body #devices .devices-panel__shell,
html body #devices .devices-panel__shell.devices-panel__card {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2vw, 18px) clamp(18px, 2.4vw, 22px) !important;
  border-radius: 28px !important;
  background: #fff !important;
  border: 1px solid rgba(26, 24, 22, 0.06) !important;
  box-shadow:
    0 24px 56px rgba(26, 24, 22, 0.07),
    0 2px 10px rgba(26, 24, 22, 0.04) !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #devices .devices-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.4vw, 14px) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  list-style: none !important;
  border: 0 !important;
}

html body #devices .device-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 112px !important;
  padding: clamp(20px, 2.4vw, 24px) clamp(10px, 1.4vw, 14px) clamp(16px, 2vw, 20px) !important;
  border-radius: 22px !important;
  background: #faf9f7 !important;
  border: 1px solid rgba(26, 24, 22, 0.05) !important;
  text-align: center !important;
  box-shadow: none !important;
}

html body #devices .device-tile:last-child { border-right: 0 !important; }
html body #devices .device-tile:hover { background: #f5f3f0 !important; transform: none !important; }

html body #devices .device-tile__glyph {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  margin-top: 4px !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow:
    0 8px 20px rgba(26, 24, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html body #devices .device-tile--windows .device-tile__glyph {
  background: linear-gradient(145deg, #f4f9ff 0%, #e7f2fb 100%) !important;
}
html body #devices .device-tile--macos .device-tile__glyph,
html body #devices .device-tile--ios .device-tile__glyph {
  background: linear-gradient(145deg, #f7f7f8 0%, #ececee 100%) !important;
}
html body #devices .device-tile--android .device-tile__glyph {
  background: linear-gradient(145deg, #f1faf4 0%, #e4f4ea 100%) !important;
}

html body #devices .device-tile__icon {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}
html body #devices .device-tile__icon--ios {
  width: 26px !important;
  height: 26px !important;
}
html body #devices .device-tile__name {
  color: #1a1816 !important;
  font: 800 15px/1.15 var(--font-text) !important;
  letter-spacing: -0.02em !important;
}

html body #devices .devices-download {
  display: block !important;
  margin-top: 16px !important;
  padding: 18px 4px clamp(14px, 2vw, 18px) !important;
  border-top: 1px solid rgba(26, 24, 22, 0.08) !important;
  text-align: center !important;
}
html body #devices .devices-download__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
html body #devices .devices-download__eyebrow {
  display: block !important;
  margin: 0 !important;
  color: rgba(26, 24, 22, 0.45) !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
}
html body #devices .devices-download__marks {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  width: min(520px, 100%) !important;
  margin: 0 auto !important;
}
html body #devices .devices-download__cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  width: 100% !important;
}
html body #devices .devices-download__sep { display: none !important; }

html body #devices .devices-download__mark {
  display: block !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0) !important;
  opacity: 0.82 !important;
}
html body #devices .devices-download__mark--happ {
  height: 34px !important;
  max-width: 168px !important;
}
html body #devices .devices-download__mark--incy {
  height: 26px !important;
  max-width: 132px !important;
}
html body #devices .devices-download__mark--v2ray {
  width: 34px !important;
  height: 34px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: none !important;
  mix-blend-mode: multiply !important;
  opacity: 0.82 !important;
  box-shadow: none !important;
}

html body #devices .devices-download__note {
  display: block !important;
  margin: 10px 0 14px !important;
  font: 500 13px/1.45 var(--font-text) !important;
  color: rgba(26, 24, 22, 0.55) !important;
}

html body #devices .devices-download__stores {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding-bottom: 2px !important;
  overflow: visible !important;
}
html body #devices .devices-store-badge {
  display: block !important;
  line-height: 0 !important;
  overflow: visible !important;
}
html body #devices .devices-store-badge img {
  display: block !important;
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

@media (max-width: 820px) {
  html body #devices .devices-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}