.clock-btn {
  margin-top: 36rpx;
  height: 104rpx;
  line-height: 104rpx;
  font-size: 32rpx;
  border-radius: 18rpx;
}

.clock-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20rpx;
  margin-top: 36rpx;
}

.clock-action-btn {
  width: 100%;
  height: 104rpx;
  margin: 0;
  padding: 0;
  line-height: 104rpx;
  border-radius: 18rpx;
  font-size: 32rpx;
  box-sizing: border-box;
}

.occupied-card {
  margin-top: 30rpx;
  border-color: #d92d20;
  background: linear-gradient(180deg, #fffafa 0%, #fff1f1 100%);
}

.device-badge {
  display: inline-flex;
  align-items: center;
  gap: 16rpx;
  margin-top: 18rpx;
  padding: 14rpx 22rpx;
  border: 1rpx solid #b8c4d4;
  border-radius: 18rpx;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(225, 232, 241, 0.92)),
    #edf2f7;
  box-shadow:
    0 9rpx 0 rgba(173, 185, 201, 0.72),
    0 16rpx 22rpx rgba(22, 34, 50, 0.12),
    inset 0 2rpx 0 rgba(255, 255, 255, 0.92);
}

.device-label {
  color: #667085;
  font-size: 24rpx;
  font-weight: 700;
}

.device-no {
  color: #162232;
  font-size: 46rpx;
  font-weight: 800;
  line-height: 1;
}

.role-list {
  margin-top: 22rpx;
}

.role-btn {
  margin-top: 12rpx;
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 14rpx;
  background: linear-gradient(180deg, #f6faff 0%, #e4efff 100%);
  color: #1456c2;
  font-size: 26rpx;
  font-weight: 600;
  box-shadow:
    0 7rpx 0 rgba(144, 178, 235, 0.62),
    0 12rpx 18rpx rgba(20, 86, 194, 0.1),
    inset 0 2rpx 0 rgba(255, 255, 255, 0.84);
}

.role-btn::after {
  border: 0;
}

.clock-toast {
  position: fixed;
  left: 72rpx;
  right: 72rpx;
  top: 48%;
  z-index: 120;
  padding: 24rpx 28rpx;
  border-radius: 18rpx;
  background: rgba(32, 37, 45, 0.9);
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  word-break: break-all;
  box-shadow:
    0 12rpx 0 rgba(15, 23, 42, 0.2),
    0 22rpx 34rpx rgba(15, 23, 42, 0.2);
  box-sizing: border-box;
}